はてなブログ テーマストアに投稿した「とことこ with Menubar」の解説記事です。
- レスポンシブデザイン
- コンテンツ優先のレイアウト
- 検索ボックスをブログタイトル領域に表示
- タイトル下にメニューバー表示可能
モバイルではハンバーガーメニューを採用
01運用（デモ）サイト
02モバイルでのテーマ使用
はてなブログは、標準ではモバイルのテーマははてなブログ仕様に固定されています。モバイルでもデスクトップと同様のテーマを使用する場合は、管理メニュー > デザイン > スマートフォン（アイコン） > 詳細設定 でレスポンシブデザインにチェックを入れてください。
03タイトル画像について
ブログタイトルの背景には、あらかじめはてなブログ内の標準画像の１枚が指定してあります。画像を使用しない、または変更する場合は、管理メニュー > デザイン > カスタマイズ > {}デザインCSS に次のスタイルを追加してください。
画像を使用しない場合
#blog-title { background: #fff; /* 好みでお好きな色を */ } #title a { color: #454545; text-shadow: none; } #blog-description { color: #454545; text-shadow: none; } #menubar label:before { color: #454545; text-shadow: none; border-color: #999; } @media (min-width: 768px) { #menubar ul li > a:hover { color: #454545; } }
次のいずれかの方法をとってください。
- 画像の url を指定する。
#blog-title { background-image: url('https://blog.st-hatena.com/images/theme/backgrounds/2014/photo-06.jpg'); }
- ヘッダ > タイトル画像 で画像を指定する。（2/9変更）
04タイトル下のメニューバー
メニューバーを使用する場合は、次の書式の html を カスタマイズ > ヘッダ > タイトル下 に入れてください。サブメニューにも対応しています。また、モバイルではハンバーガーメニューになります。
メニューバーの幅は最大で 700px 程度ですので、その範囲に収まるようサブメニューに振り分けてください。
<div id="menubar"> <label for="trigger"></label> <input id="trigger" type="checkbox"> <ul> <li><a href="アドレス">メニュー１</a></li> <li><a href="アドレス">メニュー２</a></li> ・ ・ <li><a href="アドレス">サブメニュー付き</a> <ul> <li><a href="アドレス">サブメニュー１</a></li> <li><a href="アドレス">サブメニュー２</a></li> ・ ・ </ul> </li> </ul> </div>
メニューバーの作成については次の記事も参考にしてください。
ただし、このテーマの場合はクラス名を指定する必要ありません。
05サイドバーのサムネール
サイドバーは最大で 300px になっており、最新記事、関連記事、注目記事などサムネールを表示するモジュールでは、横幅最大で画像を表示しますので、サムネールの横幅を300pxに指定してください。
06
タイトルの文字サイズを変更する場合は、次の値が設定値ですので、ご希望の値に変更してください。また、タイトル文字の位置はそれぞれ padding-top値で調整してください。
また、レイアウト崩れをふせぐためにタイトルは改行しないように設定してあります。
#title { font-size: 1.8em; /* 1.6em など */ padding-top: 65px; /* 変更する場合は値を変えて追加してください */ } @media (min-width: 768px) { #title { font-size: 3em; /* 2.5em など */ padding-top: 45px; /* 同上 */ } } @media (min-width: 992px) { #title { font-size: 3.5em; /* 3em など */ padding-top: 20px; /* 同上 */ } }