はてなブログ収益化&デザインガイド

はてなブログの収益化とデザインカスタマイズを解説するブログ

~ お知らせ ~
『アフィリエイト(ASP)で収益化』
解説マニュアルできました!

 

-- Affiliate Know-How --

ブログで収益を稼ぐにはどうするの?

はてなブログProで手軽にできます

おすすめのアフィリエイトの始め方も紹介

稼げるノウハウをお伝えします

-- Blog Design  --

かっこよく、おしゃれなサイトにしたい

はてなブログProならカスタマイズできます

ブログのカスタマイズにハマっても安心

楽しくなるデザインをご紹介します

-- Recommended ASP --

ブログを始めたら登録すべき おすすめASPを解説

丸ボタンを押すと各ASPの解説記事になります

A8.net A8.net
もしもアフィリエイト もしもアフィリエイト
バリューコマース バリューコマース
Googleアドセンス Google AdSense
本サイトはプロモーションが含まれています

-- New Articles --

はてなブログのタブ切り替え(タブメニュー)デザイン設定|コピペOK

タブ切り替えデザインを設置する方法を解説

タブ切り替えデザインを設置する方法を解説

この記事では、はてなブログに「タブ切り替え」デザイン(タブメニュー)を設置する方法と、コピペでタブデザインを設定できるHTML、CSSコードをご紹介します。

この記事で紹介する「タブ切り替え」デザインのコード(HTMLコードやCSSコード)の特徴は次のとおり。

  • 初心者でも「コード」をコピペするだけで「タブ切り替え」を利用できる
  • CSSが少しわかる人は、好みのタブ切り替え表示(デザイン)に変更可能
  • JavaScript未使用なので動作が軽快(ブログ表示が遅くならない)
  • レスポンシブル対応しているので、PCでもスマホでも利用できる

「タブデザイン(タブメニュー)」は同一ページ内で複数の内容を切り替え表示させたい時に便利ですよ。

では具体的に確認していきます。

タブの切り替えデザイン(タブメニュー)の表示イメージ

「タブ切り替え」のデザインってどんなもの?
と思う人もいるかもしれないので、早速実例を表示します。

タブ切り替えデザインの実例

This is the content for Tab 1.

This is the content for Tab 2.

This is the content for Tab 3.

上の表示例の、Tab1からTab3(スマホの場合はTab1,Tab2)まで、各タブをクリックしてみてください。

選択するタブメニューを切り替えるたびに、表示される内容(contents)が切り替わることがわかりますか?

タブの中には

  • 画像や写真
  • テキスト文言やリストなど、

いろんなものを入れることが可能です。

ブログでのタブ切り替え表示の利用シーン

ブログで「タブ切り替え」表示を設置する利用シーンとしては次のようなものが考えられます。

「タブデザイン」の便利な使い方を考えてみてください!

tab1 tab2 tab3
Before写真 After写真 説明文
ランチメニュー ディナーメニュー お店の情報
食事写真 店舗情報 公式ページのリンク
おすすめ1 おすすめ2 おすすめ3
1位 2位 3位

標準ではPCではタブを3つ、スマホでは2つのみ表示するようにしています。(変更できます)

タブの切り替えデザイン(タブメニュー)のコード(HTML,CSS)

ご紹介した「タブ切り替えデザイン」を利用してみたいと思いましたか?

タブ切り替え(タブデザイン)のHTMLコード

はてなブログで「タブの切り替え」デザインを表示するコード(HTML)は次のとおり。

 HTMLコードを確認する
  • 手順1:HTMLコードを確認
    HTMLコードをシェアします。ざっと眺めたら手順2へ進んでください。

     HTMLコード
    <!-- タブの切り替えデザイン ここからコピー -->
    <!-- パーツ1-1 ここから -->
    <div class="tab-container">
    <!-- タブのラベル -->
    <input id="tab1-1" checked="checked" name="tab1" type="radio" />
    <label for="tab1-1">Tab 1</label>
    <input id="tab1-2" name="tab1" type="radio" />
    <label for="tab1-2">Tab 2</label>
    <input id="tab1-3" name="tab1" type="radio" />
    <label for="tab1-3">Tab 3</label>
    <!-- タブの内容 -->
    <div id="content1" class="tab-content">
    <p>This is the content for Tab 1.</p>
    </div>
    <div id="content2" class="tab-content">
    <p>This is the content for Tab 2.</p>
    </div>
    <div id="content3" class="tab-content">
    <p>This is the content for Tab 3.</p>
    </div>
    </div>
    <p></p>
    <!-- パーツ1-1 ここまで -->
    <!-- パーツ1-2 ここから -->
    <div class="tab-container">
    <!-- タブのラベル -->
    <input id="tab2-1" checked="checked" name="tab2" type="radio" /> <label for="tab2-1">Tab 1</label>
    <input id="tab2-2" name="tab2" type="radio" />
    <label for="tab2-2">Tab 2</label>
    <input id="tab2-3" name="tab2" type="radio" />
    <label for="tab2-3">Tab 3</label>
    <!-- タブの内容 -->
    <div id="content1" class="tab-content">
    <p>This is the content for Tab 1.</p>
    </div>
    <div id="content2" class="tab-content">
    <p>This is the content for Tab 2.</p>
    </div>
    <div id="content3" class="tab-content">
    <p>This is the content for Tab 3.</p>
    </div>
    </div>
    <p></p>
    <!-- パーツ1-2 ここまで -->
    <!-- CSS指定部分 style-/styleまで -->
    <style>
    /* パーツ2 ここから */
    .tab-container {
        display: flex;
        flex-wrap: wrap;
        max-width: 800px;
        margin: 5px;
    }
    .tab-container input[type="radio"] {
        display: none;
    }
    .tab-container label {
        flex: 1;
        padding: 10px;
        background-color: #f1f1f1;
        text-align: center;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius:10px 10px 0 0;
    }
    .tab-container label:hover {
        background-color: #ddd;
    }
    .tab-content {
        display: none;
        flex-basis: 100%;
        padding: 10px 10px 3px 10px;
        border: 1px solid #ccc;
        border-top: none;
    }
    .tab-container input[type="radio"]:checked + label {
        background-color: #fff;
        border-bottom: none;
    }
    #tab1-1:checked ~ #content1,
    #tab1-2:checked ~ #content2,
    #tab1-3:checked ~ #content3,
    #tab2-1:checked ~ #content1,
    #tab2-2:checked ~ #content2,
    #tab2-3:checked ~ #content3{
        display: block;
    }
    /* パーツ2 ここまで */
    /* パーツ3 ここから */
    /* レスポンシブ対応 */
    @media (max-width: 600px) {
        .tab-container label:nth-of-type(n+3),
        .tab-container input:nth-of-type(n+3) {
            display: none;
        }
    /* スマホで縦表示にするなら消す
      .tab-container label { flex: 1 1 50%; }
    スマホで縦表示にするなら消す */
    }
    /* パーツ3 ここまで */
    </style>
    <!-- タブの切り替えデザイン ここまでコピー -->
  • 手順2:まずコードをコピーして利用
    <!-- タブの切り替えデザイン ここからコピー -->から<!-- タブの切り替えデザイン ここまでコピー -->まで、すべてコピーして記事編集画面の「HTML編集」にコピペしてください。

タブデザインの設定方法とカスタマイズ

はてなブログでタブの切り替えデザインの表示を利用(カスタマイズ)する場合、ブログの運営レベル別のおすすめ設定方法は次のとおりです。

  • 上記のHTMLコードを全部コピペして利用してください。
  • 複数の記事で使う場合も、記事ごとに上記のHTMLコードをコピペして利用してください。
  • 色の変更は、colorの後ろの #fff などの色コードを置き換えてください。
  • タブメニューが1つでOKの場合は「<!-- パーツ1-2 ここから -->から<!-- パーツ1-2 ここまで -->を削除」してください。
  • タブの数を同じにする時は「/* パーツ3 ここから */から/* パーツ3 ここまで */を削除」してください。

  • HTML編集にはパーツ1部分のみコピペし、デザインCSSにパーツ2をコピペしてください。
  • パーツ3は必要に応じてコピペしてください。
  • パーツ1部分のみHTML編集画面にコピペするだけで複数の記事で流用できます。
  • スマホでタブを縦にする場合は「スマホで縦表示にするなら消す」の2行を消すとタブが縦に並びます。
  • 「ブログ初心者」「注意事項」のタブに記載の内容も確認してください。

  • タブは1記事あたり1箇所のみの利用を推奨します。
  • 1記事で複数のタブ切り替えデザインを表示するには、input-idとlabelを他と被らないように設定してください。
  • 記事内でのタブ利用はGoogleによるUXの評価は高くないようですので多用は禁物です。
  • 記事編集画面以外に、管理画面>デザイン>カスタマイズ>ヘッダ>「ブログタイトル下」などにコピペして利用することもできます。
  • ご利用のデザインテーマと相性が悪い場合は利用できないことがあります。

こんなふうに、タブ切り替え(タブメニュー)デザインを簡単に、コピペするだけで設定できます。

ということで、

はてなブログはいろんなデザインを取り入れることが可能です。

一緒にブログを楽しみましょう!

(なお、コードを記事で引用する場合(改変引用を含む)は当ブログからの引用であることを明記してください)