【コピペOK】タブメニューをWordPressブログに実装しよう

ブログを育てる

この記事では、HTML、CSS、JavaScriptの超シンプルなコードだけを使ってタブメニューを実装する手順を、プログラミングの知識が全くない方にも分かるように紹介しています。

コピペするだけで誰でも簡単に自分のブログにタブメニューを設置できますよ~。


ちなみにタブメニューとはこんなものです。実際にクリックしてタブを切り替えてみてくださいね〜。



このブログでは、タブメニューをサイドバーの最上段に設置し、サイトの周遊率向上に役立てています。

タブメニューのコード

タブメニューのコード

まず最初にタブメニューを実装するのに必要な全てのコードの枠組みを紹介してから、後でコードの使い方や要点の解説をします。

今回はHTML、CSS、JavaScriptの3種類のコードを使います。


もし他にもっとスマートなコードやわかりやすいコードがあるよ!という方はぜひコメントで共有していただけると幸いです。みんなでスマートなタブメニューを作っていきましょう!

HTML

<div class="widget-tabmenu">

<!-- ボタンに関する記述-->
<div class="tabmenu-title">
<div class="tabmenu-titlebtn blog-btn tabtitle-selected">ブログ</div>
<div class="tabmenu-titlebtn math-btn">数学</div>
<div class="tabmenu-titlebtn zisakupc-btn">自作PC</div>
</div>

<!-- アイテムに関する記述-->
<div class="tabmenu-itembox">

<a href="【URL1】">
<div class="tabmenu-item tabmenu-item-blog">
<img src="【画像のURL】" alt="【画像の説明】">
<p>【アイテム1(ブログの記事)】</p>
</div>
</a>
  
<a href="【URL2】">
<div class="tabmenu-item tabmenu-item-blog">
<img src="【画像のURL】" alt="【画像の説明】">
<p>【アイテム2(ブログの記事)】</p>
</div>
</a>
  
<a href="【URL3】">
<div class="tabmenu-item tabmenu-item-blog">
<img src="【画像のURL】" alt="【画像の説明】">
<p>【アイテム3(ブログの記事)】</p>
</div>
</a>

<a href="【URL4】">
<div class="tabmenu-item tabmenu-item-zisakupc none-display">
<img src="【画像のURL】" alt="【画像の説明】">
<p>【アイテム4(自作PCの記事)】</p>
</div>
</a>

<a href="【URL5】">
<div class="tabmenu-item tabmenu-item-zisakupc none-display">
<img src="【画像のURL】" alt="【画像の説明】">
<p>【アイテム5(自作PCの記事)】</p>
</div>
</a>

<a href="【URL6】">
<div class="tabmenu-item tabmenu-item-math none-display">
<img src="【画像のURL】" alt="【画像の説明】">
<p>【アイテム6(数学の記事)】</p>
</div>
</a>

</div>
</div>


CSS

/*ここからサイドバー調整*/
.widget-tabmenu{
margin:-20px; /**/
}

.tabmenu-title{
display:inline-flex;
justify-content: space-between;
width:100%;
height:4em; /*タブのボタンの高さ*/
}

.tabmenu-titlebtn{
display: flex;
justify-content: center;
align-items: center;
font-size:14px; /*ボタンの文字サイズ*/
font-weight:bold; /*ボタンの文字の太さ*/
color:#444; /*ボタンの文字色*/
flex-basis:33.33333%; /*3分割*/
flex-basis:-webkit-calc(100% / 3);
flex-basis:calc(100% / 3);
text-align:center; /*縦配置を中央に*/
background-color:#ddd; /*ボタンの色*/
border-bottom:2px solid #8a62bc; /*ボタン下の線*/
}

.tabmenu-titlebtn:hover{
opacity:0.7; /*ボタンホバー時の透明度*/
transition: 0.2s; /*アニメーションの時間*/
cursor: pointer;
}

.tabtitle-selected{
background-color:#8a62bc !important; /*選択しているボタンの色*/
color:white; /*選択しているボタンの文字色*/
}

.tabmenu-itembox a{
	text-decoration:none;
}

.tabmenu-item{
width:90%;
margin:0 auto;
display: inline-flex;
display: flex;
align-items:center;
border-bottom:1px dashed gray; /*各アイテムの区切り線*/
padding:10px 0; /*各アイテムの上下方向の間隔*/
color:#555; /*アイテムの文字色*/
font-size:14px; /*アイテムの文字サイズ*/
font-weight:bold; /*アイテムの文字の太さ*/
}

.tabmenu-item img{
padding-right:10px; /*画像と文字の間隔*/
}

.tabmenu-item:hover{
opacity:0.6; /*アイテムホバー時の透明度*/
transition: 0.5s; /*アニメーションの時間*/
cursor:pointer;
}

.none-display {
display: none;
}


JavaScript

$(function(){

//ボタンに割り振る機能
  $(".tabmenu-titlebtn").click(function(){
    $(".tabmenu-titlebtn").removeClass("tabtitle-selected");
    $(this).addClass("tabtitle-selected");
  });

//ボタンとアイテムに割り振る機能
  $(".zisakupc-btn").click(function(){
    $(".tabmenu-item").addClass("none-display");
    $(".tabmenu-item-zisakupc").removeClass("none-display");
  });

  $(".blog-btn").click(function(){
    $(".tabmenu-item").addClass("none-display");
    $(".tabmenu-item-blog").removeClass("none-display");
  });

	$(".math-btn").click(function(){
    $(".tabmenu-item").addClass("none-display");
    $(".tabmenu-item-math").removeClass("none-display");
  });

});


コードをコピペする場所

タブメニューを実装したいWordPressブログに、上の3種類のコードをコピペしていきます。それぞれ貼り付ける場所が違うので、1つずつ解説します。

HTMLを貼る場所

タブメニューをどこに設置するかでHTMLを貼る場所が変わります。
タブメニューを設置しやすそうな「サイドメニュー」と「本文中」の2パターンを紹介しておきます。

サイドメニューの場合

ウィジェット画面の行き方

WordPressのメニューバーから、「外観 → ウィジェット」をクリックします。


カスタムHTMLをサイドバーに追加

カスタムHTMLをサイドバーに追加します。


カスタムHTMLにコードを貼り付け

追加したカスタムHTMLに、コードを貼り付けて保存します。


本文中の場合

ブロック挿入からカスタムHTMLを挿入

投稿編集ページで、ブロック挿入からカスタムHTMLを挿入します。


HTMLを貼り付け

コードを貼ります。


CSSを貼る場所

テーマエディターの行き方

WordPressのメニューバーから、「外観 → テーマエディター」をクリックします。


CSSを貼り付け

使用中のテーマのstyle.cssが選択されていることを確認し、コードを貼り付けてファイルを更新をクリックします。


JavaScriptを貼る場所

テーマエディターの行き方

WordPressのメニューバーから、「外観 → テーマエディター」をクリックします。


javascript.jsの行き方

javascript.jsをクリックします。


JavaScriptを貼り付け

コードを貼り付けて、ファイルを更新をクリックします。


タブメニューの仕組みと使い方

タブメニューの構造1

まずタブメニューをブロックごとに分けると、上の画像のようになっています。
ボタンをクリックすると、それに対応するアイテムが表示されるという簡単な仕組みです。


タブメニューの構造2



クラスについて

ここから具体的なコードの使い方を見ていきますが、そこで「クラス」という言葉が登場します。
クラスとは、HTMLの要素が持つステータスのようなもので、「このクラスを持っている人はこういう仕事をしてくださいね~」というのを設定するために使います。

1つの要素に対して、複数のクラスを持たせることができます。


1. まずはボタンを変更する

ボタンやアイテムの内容全てHTMLで編集します。


上で紹介したHTMLのうち、ボタンに関する記述はこの部分です。4行目~8行目ですね。

<div class="tabmenu-title">
<div class="tabmenu-titlebtn blog-btn tabtitle-selected">ブログ</div>
<div class="tabmenu-titlebtn math-btn">数学</div>
<div class="tabmenu-titlebtn zisakupc-btn">自作PC</div>
</div>



上のコードの2行目〜4行目の、<div class=”tabmenu-titlebtn 〜 〜”> と </div>で囲われた部分がボタンに表示される文言になります。上の例だとブログ、数学、自作PCの3つのボタンを作っていることになります。

各ボタンに与えられているクラスは以下の通りです。

クラス名役割
共通クラスtabmenu-titlebtnタブメニューのボタンとして機能させる
個別クラスblog-btn
math-btn
zisakupc-btn
各ボタンと各アイテムを結びつけるためにつける(後でJavaScriptの記述に使う)
選択クラスtabtitle-selectedどのボタンがクリックされた状態かを判別するためにつける



各ボタンには共通のtabmenu-titlebtnというクラスと、個別のクラスが付与されています。
個別のクラスはボタンに応じて変更しておくと、後のJavaScriptの記述がわかりやすくなります。(例えばボタンが「ガジェット」なら、gadget-btnとか)。

tabtitle-selectedクラスは、デフォルトで表示しておきたいタブのボタン1つにだけ書いておきます。このクラスがあるボタンのアイテムが、ページに訪れたときに最初に表示されている状態になります。


ボタンが持つクラスまとめ



また、ボタンの数は自由に変更できます変更する場合はCSS変更の必要あり、後述)。
増やす場合も他と同じように記述してください。

<div class="tabmenu-title">
<div class="tabmenu-titlebtn blog-btn tabtitle-selected">ブログ</div>
<div class="tabmenu-titlebtn math-btn">数学</div>
<div class="tabmenu-titlebtn zisakupc-btn">自作PC</div>
<div class="tabmenu-titlebtn gadget-btn">ガジェット</div> 
</div>



2. アイテムを作る

アイテムの構造



アイテムに関する記述は、以下で1セットになります。アイテムはいくつ増やしても大丈夫ですよ〜。

<a href="【URL】">
<div class="tabmenu-item 【tabmenu-item-○○】 【none-display】">
<img src="【画像のURL】" alt="【画像の説明】">
<p>【アイテム名】</p>
</div>
</a>



【】で囲まれた部分を編集していきます。

内容備考
【URL】クリックした先のURL
【tabmenu-item-〇〇】アイテムのジャンルを区別するためのクラスジャンルに合わせてクラス名を変更しておくとわかりやすい。例えばジャンルが「ブログ」なら、tabmenu-item-blog、「ガジェット」ならtabmenu-item-gadgetにするなど。
(後でJavaScriptの記述に使う。)
none-displayデフォルトで表示するジャンルのアイテム以外に書く例えば、「ブログ」のジャンルをデフォルトで表示したい場合は、tabmenu-item-blog以外のdivにnone-displayを記述する。
【画像のURL】使用する画像のURL見本のタブメニューでは、24×24のpng画像を使用。
なくてもOK。
【画像の説明】画像を説明する文章
【アイテム名】表示したいタイトルや文章



none-displayは、アイテムの表示・非表示に関するクラスで、タブメニューを機能させるための非常に重要なクラスです。
none-displayなしでアイテムを表示、none-displayありでアイテムを非表示となります。

このnone-displayを、各ボタンによって付けたり外したりする機能を実装することで、ボタンに対応したジャンルのアイテムだけを表示させることができます。


が、ページを読み込んだ最初の状態だけはこちらで指定しておく必要があります。最初に表示させておきたいジャンル以外のアイテムにnone-displayを記述します。


クラスまとめ

クラスに関する記述が若干ややこしいかなと思いますので、軽くまとめておきます。


例えば、デフォルトでブログのジャンルのアイテムを表示しておきたい場合、以下のようになります。赤字の部分が好きに変更できる部分になります。

ボタンのクラス

ボタン共通クラスボタン個別クラスボタン選択クラス
ブログtabmenu-titlebtnblog-btntabtitle-selected
自作PCtabmenu-titlebtnzisakupc-btn
数学tabmenu-titlebtnmath-btn


アイテムのクラス

アイテム共通クラスジャンル別のクラスアイテム非表示クラス
ブログの記事1tabmenu-itemtabmenu-item-blog
ブログの記事2tabmenu-itemtabmenu-item-blog
ブログの記事3tabmenu-itemtabmenu-item-blog
自作PCの記事1tabmenu-itemtabmenu-item-zisakupcnone-display
自作PCの記事2tabmenu-itemtabmenu-item-zisakupcnone-display
数学の記事1tabmenu-itemtabmenu-item-mathnone-display


3. 見た目をカスタマイズする

次にCSSで見た目をカスタマイズしていきます。
最初に紹介したコードの中に、なるべく解説をコメントアウトで入れているので、それを見ながらカスタマイズしていってください。


要点だけ解説しておきます。

行数記述内容
20〜22
flex-basis:33.33333%; /*3分割*/
flex-basis:-webkit-calc(100% / 3);
flex-basis:calc(100% / 3);
ボタンのサイズを均等に分けるための記述。
この場合は3等分(1つあたり33.33333%)

2、4、5等分など、100を割り切れる数で分割する場合は、
「flex-basis:○○%;」
1行のみでOK
(○○内は100を分割する数で割った数字)
25
border-bottom:2px solid #8a62bc; /*ボタン下の線*/
各ブロックの下に線を引くための記述。
border-bottom:線の太さ 線の種類 線の色;で記述する。
線の種類は、
・solid … 実線
・dashed … 破線
・dotted … 点線
などがある。
49
border-bottom:1px dashed gray; /*各アイテムの区切り線*/
50
padding:10px 0; /*各アイテムの上下方向の間隔*/
アイテムの間隔を調整するための記述。
padding:上下方向 左右方向;で調整できる。


4. 機能を実装する

最後に、JavaScriptでタブメニューとしての機能を実装していきます。


まず前半部分(1行目〜8行目)のボタンに割り振る機能の部分は編集不要です。



中盤以降のボタンとアイテムに割り振る機能の部分を編集します。9行目〜にあたる部分です。
以下で1セットになります。このセットは、ボタンの数だけ用意する必要があります。

//ボタンとアイテムに割り振る機能
  $(".zisakupc-btn").click(function(){
    $(".tabmenu-item").addClass("none-display");
    $(".tabmenu-item-zisakupc").removeClass("none-display");
  });



編集するのは以下の2箇所。各文言の先頭にあるドット(.)←コレは必ず必要です。

行数文言変更内容
2.zisakupc-btn1. まずはボタンを変更する」で設定したボタンの個別のクラス.blog-btn
.gadget-btnなど
4.tabmenu-item-zisakupc2. アイテムを作る」で設定したボタンに対応するジャンルを区別するためのクラス.tabmenu-item-blog
.tabmenu-item-mathなど



上のコードを和訳すると、「全てのアイテムにnone-displayクラスを与えたあと、自作PCのアイテムだけnone-displayクラスを外してあげてね」という内容になります。

JavaScriptの動作1

さらに噛み砕いて説明すると、「ボタンを押したら一旦全部のアイテムを非表示にする、その後に必要なアイテムだけ表示する」ということ。


JavaScriptの動作2



まとめ:タブメニューで回遊率アップを狙おう!

いかがでしたか。難しい部分もあったかもですが、解説通りにコピペして編集すれば、あなたのブログにも簡単にタブメニューを実装することができます。

もし分からない点や分かりにくい部分などがあれば、この記事のコメントや私のTwitter(@K4mmerU)のDMなどにお気軽にご質問ください。できる限り対応させていただきます!


では!

この記事を書いた人

現役理学部数学科学生。ブログ「令和に生きる」を運営中。ガキの頃からパソコンを触るのが大好きだった男。Mac歴12年。現在はメインでWindows自作PC、サブでMacbook Airを使用。プログラミング、動画編集できます。プログラミングは主にPythonユーザーです。旅行とゲームが好きです。

かんまる/現役数学科ブロガーをフォローする
ブログを育てる
令和に生きる

コメント