はてなブログテーマ＝Simple Responsive with Menubar

はてなブログ テーマストアに投稿した「Simple Responsive with Menubar」の解説記事です。

• テーマ作成の考え方
• 運用（デモ）サイト
• 使用上の必須事項
• カスタマイズ
• メニューバーにメニューを配置する
  • カテゴリーをメニューバーにする（手動）
  • カテゴリーをメニューバーにする（自動）
  • 月別アーカイブをメニューバーにする（自動）

テーマ作成の考え方

• コンテンツ（記事）優先のレイアウト
  • デスクトップでも１カラム
  • ファーストビューのコンテンツ領域を広く
• 目的のコンテンツへ最短経路で
  • 検索ボックスをファーストビューに表示
  • カテゴリ、アーカイブをメニューバーに

運用（デモ）サイト

ausnichts.hatenablog.jp

使用上の必須事項

カスタマイズ > ヘッダ > タイトル下に次の HTML を入れてください。メニューを配置する場合は下の「メニューバーにメニューを配置する」をご覧ください。

<div id="menubar"></div>

タイトル下は #top-editarea という div 要素でコントロールされますが、タイトル下の HTML が空白ですと要素そのものが作られず、メニューバーが表示されません。メニューそのものはなくても問題ありませんが、デザイン上、またタブレット以下ではメニューバー上に検索窓を表示しますので背景色が必要です。

カスタマイズ

ブログタイトルのアクセント

css は次のようになっていますので変更するスタイルをカスタマイズ > デザイン css に追加してください。
（例） #title:before { background-color: green; }
（削除） #title:before, #title a:before { display:none; } #title { padding-left: 0; }

/* タイトル左の赤丸 */
#title:before {
  content: "";
  position: absolute;
  background-color: #d91e18;
  height: 1em;
  width: 1em;
  top: 0;
  left: 0;
  border-radius: 1em;
  box-shadow: 0.5em 0.5em 0px #f39997;
}


/* タイトル下のライン */
#title a:before {
  content: "";
  position: absolute;
  background-color: #d91e18;
  height: 1px;
  width: 100%;
  bottom: 0;
  left: 0;
  box-shadow: 12px 4px 0px #d91e18;
}

メニューバー他

メニューバー、エントリータイトルのアクセント、サイドバーモジュールタイトルの色を変更する場合は、次のセレクタのスタイルを変更してください。

#top-editarea {
    background-color: olive;
}
.hatena-module-title {
    background-color: olive;
}
.entry-title:before {
    background-color: olive;
}

見出し

h3,h4,h5 のアクセント色を変更する場合は、次のセレクタのスタイルを変更してください。
（例）赤系の色→グリーン

.entry-content h3 {
    border-color: green;
}
.entry-content h3:before {
    background: green;
    box-shadow: .5em .5em 0px lime;
}
.entry-content h4 {
    border-bottom: 1px solid lime;
}
.entry-content h4:before {
    background: lime;
}
.entry-content h5 {
    border-bottom: 1px solid lime;
}

メニューバーにメニューを配置する

メニューバーにメニューを表示するには、カスタマイズ > ヘッダ > タイトル下に次の書式の HTML を入れてください。

<div id="menubar">
    <!-- 次の2行は tablet,mobile のバーガーメニュー -->
    <label for="trigger"></label>
    <input id="trigger" type="checkbox">


    <div class="hatena-module">
        <div>
            <ul class="hatena-urllist">
                <li>
                    <a href="url">メニューアイテム1</a>
                </li>
                <li>
                    <a href="url">メニューアイテム2</a>
                </li>
                <li>
                    <a href="url">メニューアイテム3</a>
                    <ul>
                        <li>
                            <a href="url">サブメニュー1</a>
                        </li>
                        <li>
                            <a href="url">サブメニュー2</a>
                        </li>
                        <li>
                            <a href="url">サブメニュー3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

カテゴリーをメニューバーにする（手動）

1. サイドバーにカテゴリーを表示し、HTML ソースを表示する
2. <div class=”hatena-module hatena-module-category”> ～ </div> を上の <div class=”hatena-module”> ～ </div> と差し替える
3. カテゴリーが多い場合は、サブメニューに整理する
4. サイドバーのカテゴリーを削除する

カテゴリーをメニューバーにする（自動）

次の記事を参考にしてください。
即時関数にした方がいいと思います。

www.imuza.com

月別アーカイブをメニューバーにする（自動）

次の記事を参考にしてください。

www.imuza.com