IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

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

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

2015/10/26 はてなブログ

はてなブログ テーマストアに投稿した「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

はてなブログの月間アーカイブをメニューバーにする
【Windows10】Thinkpad E420 ついに再インストール
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com