テーマ『SWELL』カスタマイズ|ボックスナビを設置する方法【図解】

SWELLに、ぽんひろさんが制作したボックスナビを設置したいな

そんな人に向けてワードプレステーマ「SWELL」にボックスナビを設置する方法をわかりやすく解説します。

こんにちは!くろすけ(krsk8655)です。

こちらの記事を参考にSWELLにボックスナビゲーションを設置してみたいと思います。

目次

ボックスナビは回遊率のアップに効果あり!?

ボックスナビゲーション(テーマによってはボックスメニューとも呼びます)はメリットがたくさん!

  • 画像を使っているので直感的にわかりやすい
  • ボタン風のリンクに思わずタップしたくなる
  • スマートフォンやタブレットと相性が良い

例えば、記事下に設置することで記事を読み終えた読者に次のアクションを促すことができ、サイトの回遊率がアップします。

また、ぼんひろさんのカスタマイズは、

  • HTMLとCSSで作られているからどこでも設置可能
  • アイコンはFontAwesome、画像どちらでも可能
  • PC、スマホに対応したレスポンシブデザイン

といった「かゆいところに手が届く」仕様が施されています。

くろすけ

前置きが長くなりましたが、さっそくボックスナビゲーションを作成していきましょう。

SWELLにボックスナビを設置する方法

ボックスナビゲーションを設置するまでの手順はものすごくシンプル!

  1. ボックスナビゲーションのCSSを貼り付ける
  2. SWELL用にコードを一か所だ変更する
  3. HTMLを好きな場所に貼り付ける
くろすけ

画像をたくさん使って解説するので安心してくださいね

CSSをコピペ

ボックスナビゲーションのCSSコードは、

  1. 子テーマ
  2. 追加CSS

①または②のどちらか片方に貼り付ければOK。

子テーマの場所

ボックスナビゲーション 子テーマ 貼り付け場所
【外観】⇒【テーマエディター】

追加CSSの場所

ボックスナビゲーション 追加CSSの場所
【外観】⇒【カスタマイズ】
ボックスナビゲーション 追加CSS 貼り付け場所
テーマカスタマイザーの【追加CSS】
くろすけ

コードは少し長いですがすべてコピーしてくださいね

/************************************
** ボックスナビ
************************************/
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0;
padding:0;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/4);/* 4列 */
flex-basis: calc(100%/4);/* 4列 */
margin:0;
padding:0;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:100px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}
/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
	.p-nav ul li{
		-ms-flex-preferred-size: calc(100%/2);/* 2列 */
		flex-basis: calc(100%/2);/* 2列 */
	}
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#f6a068;/* アイコン色 */
}
くろすけ

無事にコードを貼り付けることができたでしょうか?

次はSWELLのサイドバーでボックスナビゲーションを表示させるために一か所だけコードに変更を加えます。

SWELL用にコードを変更する

CSSを見てもらうと76行目〜80行目に「/* サイドバー */」と記載されている箇所があります。

変更前のコード

/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}

上記コードの「.sidebar」を「#sidebar」に変更してください。

変更後のコード

/* サイドバー */
#sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}

「#」の記号は音楽記号のシャープ「♯」と形が似ていますが意味はまったく違います。キーボードを英数入力に切り替えて[Shiftキー]+[F3]で入力するようにしましょう。

HTMLをコピペ

CSSコードを追加することができたらボックスナビゲーションを設置したい場所に下記のHTMLコードを貼り付けます。

<div class="p-nav">
<ul>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
</ul>
</div>

上記のコードを貼り付けるとパソコンでは横8列×縦2列スマホ・タブレットでは横2列×縦8列のボックスナビゲーションが設置されます。

アイコンの数は必要に応じて増やしたり、減らしたりできるので、

  • アイコンを増やすとき下記のコードを追記
  • アイコンを減らすとき下記のコードを削除
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
くろすけ

ただし、アイコンの数にはひとつだけ注意点あり!

ボックスナビゲーションのアイコンは必ず偶数にすること。

リンク先URLについて

ボックスナビゲーションのリンク先URLを変更することで、

  • 個別の投稿ページ
  • 固定ページプロフィール、サイトマップ、お問い合わせフォームなど
  • カテゴリーページ
  • タグページ

にリンク先を指定することができます。

アイコンを画像で作成する方法

ボックスナビゲーションのアイコンを画像で作成する場合は画像、もしくはFontAwesomeの部分を画像ファイルのURLに置き換えます。

  1. ワードプレスの管理画面から【メディア】⇒【新規追加】をクリック
  2. 「ファイルを選択」から画像をアップロードする
  3. 画像ファイルのURLを確認する

上記のURLをボックスナビゲーションのHTMLコードに貼り付けても画像として表示されません

画像を表示させるために<img>タグを使って画像ファイルのURLを囲みます。

<img src="アイコンとして表示させたい画像ファイルのURL">

上記のコードをボックスナビゲーションの画像、もしくはFontAwesomeの部分に貼り付けましょう。

アイコンをFontAwesomeで作成する方法

ボックスナビゲーションのアイコンをFont Awesomeで作成する場合は画像、もしくはFontAwesomeの部分をアイコンのクラス名に置き換えます。

Font Awesomeってなに?

Font Awesomeはウェブページ上で文字と同じように表示できるアイコンのこと。画像でアイコンを作成するのとは違って「拡大してもぼやけない・縮小してもつぶれない・色やサイズを簡単に変えられる」といったメリットがあります。

まず、SWELLでFont Awesomeを表示させるための設定をおこないましょう。設定の変更はクリックひとつでOK。

  1. ワードプレスの管理画面から【SWELL設定】をクリック
  2. タブを【Font Awesome】に切り替える
  3. CSSで読み込むを選択する
ワードプレス管理画面から【SWELL設定】へ
くろすけ

最後に【変更を保存】を忘れずに!

次にFont Awesomeのアイコン検索ページから使用したいアイコンを見つけましょう。

Font Awesomeアイコン検索ページ

無料版だけでも1609個のアイコンを使用することができるので好きなアイコンを探すのが大変ですよね。

左側にあるタグを指定することで使いたいアイコンを絞り込むことができます。

例えば、次のようなバスケットボールのアイコンの使いたいときは左上に<i class="fas fa-basketball-ball"></i>と書かれているのが確認できるでしょうか?

アイコン詳細画面
アイコンのクラス名の確認場所

こちらのコードをHTMLコードの「画像、もしくはFontAwesome」に貼り付けることでFont Awesomeをアイコンとして表示させることができます。

くろすけ

実際にタップできるボックスナビゲーションを作ってみました

パソコンでは横4列、スマホでは縦2列に表示されているのではないでしょうか?

ボックスナビゲーションはSWELLのウィジェットを使えばサイドバーやフッターなど好きな場所に配置することができます。

記事内にボックスナビを設置する方法

ボックスナビゲーションはトップページやサイドバー、フッターといった箇所だけではなく記事内にも設置することができます。

SWELLで記事内にHTMLコードを追加するためにはカスタムHTMLというブロックを使用します。

STEP
[カスタムHTML]ブロックを選択する

ツールバーの「+」でブロックを追加します。

「ブロックの検索」にカスタムと入力してもいいですし、そのままスクロールしてもOK。[カスタムHTML]をクリックしましょう。

STEP
HTMLコードを貼り付ける

空欄のカスタムHTMLブロックが表示されます。

ボックスナビゲーションのHTMLコードを貼り付けましょう♪

SWELLのサイドバーにボックスナビを設置する方法

ボックスナビゲーションをサイドバーに設置するためにはウィジェットを使います。

STEP
ワードプレスの管理画面から【外観】⇒【ウィジェット】を開く
STEP
サイドバーウィジェットにカスタムHTMLを追加する
STEP
ボックスナビゲーションのHTMLコードを貼り付ける

ボックスナビゲーションをサイドバーに設置するための手順は以上です。

くろすけ

最後にサイドバーがきちんと表示されているか確認しましょう。

まとめ

ボックスナビゲーションは、まだSWELLに実装されていない機能ですがイメージ通りに設置することができたでしょうか?

読者の視覚に訴えかけることができるボックスナビゲーション。好きな場所に設置することができて使い方は無限大。

この記事をきっかけに、あなたのサイトのコンテンツが充実することを願っています。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
よかったらシェアしてね!

コメント

コメントする

目次
閉じる