メニュー編
M01 メニューの大見出し(H2)の文字サイズと文字色および背景色を変更する
【手順】
- 背景画像を作成します。当サイトの例では、以下の画像を作成しています。
画像名：ttl_bg01.png
サイズ：幅 1px 高さ 40px - 作成した画像をSWFUでアップロードします。
- 以下のスクリプトをフッターにコピペします。
#beforescript{{ <style type="text/css"> <!-- /* メニューのh2の文字色と文字サイズ、背景画像を指定 */ .haik-palette-orange .haik-menu h2, .haik-palette-orange .haik-article-menu h2 { color: #E07987; font-size: 18px; background: rgba(0, 0, 0, 0) url("/swfu/d/ttl_bg01.png") repeat scroll 0 0; border-top-left-radius: 10px; border-bottom-right-radius: 10px; } --> </style> }}
【解説】
- 背景画像をリピート指定で背景色に設定しますので、画像の横幅は1pxでOKです。
- 背景画像の左上と右下の角を丸くするために radiusを設定します。
M02 メニュー内にブログのサムネイルとタイトルを表示する
【手順】
- テーマの編集から、ブログリストの表示を「リストデザイン」に設定する。
- 以下のスクリプトをメニュー内にコピペする。
#qblog_list #beforescript{{ <style type="text/css"> <!-- #menubar .qblog_abstract { display: none; } #menubar #qblog h2.qblog_title a { color: #333; font-size: small; line-height: 1.2em; } #menubar .qblog-list-table ul li { min-height: 90px; } #menubar .qblog_thumbnail { width: 60px; height: 60px; } #menubar .qblog_date { top: 70px; } #menubar .pagination > li > a, .pagination > li > span { padding: 3px 3px; line-height: 1.5em; } --> </style> }}
【解説】
- CSSでQBlogがメニュー配下のときだけ、記事は非表示にする。
- CSSでブログタイトルの文字を小さくし、行間も調整する。
- CSSでサムネイルのサイズを小さくして位置も調整する。
- CSSでページ制御の欄を小さくする。
ご意見箱
皆様のご意見をお待ちします。
- 一カ所Blueに書き忘れました。
今度はうまくいきました。
メニューの方も成功です。
ありがとうございました。 -- うみほし 2016-02-05 (金) 11:10:52 - うみほしさん
ご利用ありがとうございます。
「うみほしの部屋」がいい感じになっていますね。 -- tomzo 2016-02-05 (金) 23:17:51 - 以前QHMの時にメニューにカレンダーを2つ縦に置く方法でお世話になったものです。
やっと当方もHAIKにおきかえましたが、またまたカレンダーの件で質問です。
祝日の対応についてと隔週の土曜日について文字色変更したいのですが
QHMフォーラムで検索した方法では、うまくいかないのですが
よろしかったら、お知恵をお貸しいただけないでしょうか？
ちなみに文字の大きさはうまくいっているのですが
#beforescript{{
<style type="text/css">
.bigcalendar table.style_calendar {
font-size:22px;
.bigcalender table.style_calendar a strong {
color: #FF00FF;
}
</style>
}}
としても、22pxはできても色は変更しないのですが
-- muuuuuw 2016-02-08 (月) 09:47:46 - muuuuuw さん
隔週土曜日の文字色を変更する要望に対応しました。これでよろしいでしょうか？
コンテンツ編 C02カレンダーの文字サイズと隔週土曜日の文字色を変更する。 を参照してください。
不具合や何かありましたら、コンテンツ編へコメントをお願いします。 -- tomzo 2016-02-11 (木) 11:01:19 - メニューのスクロールで質問があります。
QHMではtomzoさんがメニューをスクロールさせて、本文に追随させる方法を作されていましたが、haikでも同様のことが可能なのでしょうか。私のサイトで長文ページがあるので、できればそのようなページでメニューをスクロールさせたいと考えています。もしよろしければご教授ください。 -- うみほし 2016-02-14 (日) 19:59:41 - うみほしさんへ
多分できるかもしれませんが、とても難しいと思います。
bootstrapと言うCSSが絡んでくるからです。
スマホの場合はどのようにしたいのでしょうか？
常にメニューを出しっぱなしという訳にはいかないので、どのようにしたいのか教えてください。 -- 2016-02-16 (火) 08:28:00 - 具体的には、わたしのページの「放射線を見よう」のページが長文なため、冒頭のもくじを含めた専用メニュを表示させ、本文のスクロールに追随してメニューが表示されているようにできないかなということです。
専用メニューの作成方法は旧版マニュアルにあるのでできそうですが、本文を下に見ていくと結局メニューも見えなくなるので、専用メニューの意味が無いだろうと思いました。
そこで、メニューが常時出ているようにできないだろうかと考えたわけです。
スマホでは困難ならメニュー表示なしでも仕方が無いと思います。
「とても難しい」というお話ですので、haikに装備されるのを待つしか無いかもしれませんね。
-- うみほし 2016-02-16 (火) 08:42:35 - 別の方法としては、このページにあるように、右下に上スクロールの矢印を表示するという方法もいいですね。よろしければこの方法も教えてください。 -- うみほし 2016-02-16 (火) 20:44:04
- うみほしさんへ
追従するメニューは検討項目に入れておきたいと思います。できたらやるかもしれませんが、あまり期待しないでください。
画面右下のスクロールの矢印は #scrollup と書くだけです。
http://www.open-qhm.net/index.php?cmd=read&page=Plugins%2FLink%2F03-scrollup -- tomzo 2016-02-17 (水) 00:20:27 - ありがとうございます。そういうプラグインがあったんですね。
もっとhaikのマニュアルを読んでおきます。
ありがとうございました。 -- うみほし 2016-02-17 (水) 06:55:20 - 該当ページは、上スクロールでもくじのアンカーへ飛べるようにしました。
ありがとうございました。 -- うみほし 2016-02-17 (水) 07:50:36 - メニューが固定できるhaikデザインにdocと八句がありますね。むりしてseedで考えるより、docか八句を購入するのがいいのかなと思いました。問題はdocと八句のどちらに決めるかですね。 -- うみほし 2016-02-17 (水) 14:08:51
- うみほしさんへ
seedもヘッダ部を固定する設定がありますよ。
-- tomzo 2016-02-18 (木) 07:45:25 - tipsでは画像でタイトルの背景色を描かせていましたが，同様のことをCSSだけでできたので，私の例を紹介します。
CSSで行うと色の変更が簡単にできて，試行錯誤しやすかったです。デザインの変更もすぐできます。
#beforescript{{
<style type="text/css">
<!--
/* メニューのh2の文字，背景色，box指定 */
.haik-palette-blue .haik-menu h2, .haik-palette-blue .haik-article-menu h2 {
color: #453A34;
font-size: 17px;
border: 2px solid #D7CBFF;
background: #87cefa;
border-radius: 180px 50px 180px 90px ;
font-family: UDTypos512;
text-align: center;
}
-->
</style>
}}
実際の表示は私のサイト
https://umihoshi.com/
をご覧ください。 -- うみほし 2017-07-28 (金) 08:33:34 - 今は上のコメントのスクリプトをさらに書き換えているので，現在の私のサイトではこれとはデザインが違っていますが，CSSでいろいろできるという参考にはなるでしょう。 -- うみほし 2017-07-29 (土) 05:12:26