読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

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

はてなブログ

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

テーマ作成の考え方

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

運用(デモ)サイト

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