IMUZA.com

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

ホーム / はてなブログ / はてなブログテーマ=とことこ with Menubar

はてなブログテーマ=とことこ with Menubar

2016/02/7 はてなブログ

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

  • テーマの特徴
  • 運用(デモ)サイト
  • モバイルでのテーマ使用
  • タイトル画像について
    • 画像を使用しない場合
    • 別の画像を使用する場合(2/9一部変更)
  • タイトル下のメニューバー
  • サイドバーのサムネール
  • タイトルの文字サイズ(2/9追記)
  • ご質問はコメントなどお寄せください

テーマの特徴

  • レスポンシブデザイン
  • コンテンツ優先のレイアウト
  • 検索ボックスをブログタイトル領域に表示
  • タイトル下にメニューバー表示可能
    モバイルではハンバーガーメニューを採用

運用(デモ)サイト

ausnichts.hatenablog.com

モバイルでのテーマ使用

はてなブログは、標準ではモバイルのテーマははてなブログ仕様に固定されています。モバイルでもデスクトップと同様のテーマを使用する場合は、管理メニュー > デザイン > スマートフォン(アイコン) > 詳細設定 でレスポンシブデザインにチェックを入れてください。

タイトル画像について

ブログタイトルの背景には、あらかじめはてなブログ内の標準画像の1枚が指定してあります。画像を使用しない、または変更する場合は、管理メニュー > デザイン > カスタマイズ > {}デザイン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;
    }
}

別の画像を使用する場合(2/9一部変更)

次のいずれかの方法をとってください。

  • 画像の url を指定する。
#blog-title {
    background-image: url('https://blog.st-hatena.com/images/theme/backgrounds/2014/photo-06.jpg');
}
  • ヘッダ > タイトル画像 で画像を指定する。(2/9変更)

タイトル下のメニューバー

メニューバーを使用する場合は、次の書式の html を カスタマイズ > ヘッダ > タイトル下 に入れてください。サブメニューにも対応しています。また、モバイルではハンバーガーメニューになります。

メニューバーの幅は最大で 700px 程度ですので、その範囲に収まるようサブメニューに振り分けてください。

<div id="menubar">
    <label for="trigger"></label>
    <input id="trigger" type="checkbox">
    <ul>
        <li><a href="アドレス">メニュー1</a></li>
        <li><a href="アドレス">メニュー2</a></li>
        ・
        ・
        <li><a href="アドレス">サブメニュー付き</a>
            <ul>
                <li><a href="アドレス">サブメニュー1</a></li>
                <li><a href="アドレス">サブメニュー2</a></li>
                ・
                ・
            </ul>
        </li>
    </ul>
</div>

メニューバーの作成については次の記事も参考にしてください。

www.imuza.com

ただし、このテーマの場合はクラス名を指定する必要ありません。

サイドバーのサムネール

サイドバーは最大で 300px になっており、最新記事、関連記事、注目記事などサムネールを表示するモジュールでは、横幅最大で画像を表示しますので、サムネールの横幅を300pxに指定してください。

タイトルの文字サイズ(2/9追記)

タイトルの文字サイズを変更する場合は、次の値が設定値ですので、ご希望の値に変更してください。また、タイトル文字の位置はそれぞれ 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; /* 同上 */
    }
}

ご質問はコメントなどお寄せください

【Windows10】ネット接続が不調、頻繁に切断の件は、無線LAN親機の不調が原因(多分、解決)
【Windows10】Dolbyオーディオドライバーを開始できません。Lenovo E430(解決)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

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

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com