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

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

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

はてなブログ

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

テーマの特徴

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

運用(デモ)サイト

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; /* 同上 */
    }
}

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