当サイトのテーマ『STORK19』はこちら

【STORK19】追加CSSを利用したボックスメニューの作り方

『STROK19』でブログを作る時にCocoonでできるボックスメニューを作るための備忘録です

STORK19ではデフォルトでボックスメニュー機能はありませんが、このやり方できれいなボックスメニューが実装できます

スマホ特化型テーマ『STORK19』



※本記事はぽんひろさんのこちらの記事を参考にさせていただきました

ボックスメニューを作る事前準備

まずはボックスメニューを作る事前準備として追加CSSへコードを記載しておく必要があります

追加CSSへコードをコピペ

STORK19の「追加CSS」へ下記のコードをコピペします

子テーマのstyle.cssへ追加してもOKです

追加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;
}




記事・固定ページにボックスメニューを表示するやり方

ボックスメニューを貼りたい記事・固定ページで、「ショートコード」を選択してから下記のコードを貼り付けます

このアイコンを選択
<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>

貼り付けるとこんな感じの表示になります↓↓

PC表示の場合

横4列、縦2列表示になります

スマホ表示の場合

横2列、縦4列表示になります

スマホのハンバーガーメニューやPC用のサイドバーにボックスメニューを作りたい場合は、下で解説しています




アイコンにFontAwesomeを利用するやり方

上記までの操作ではまだアイコンとリンクがないので、まずはアイコンを変更していきます

今回はFontAwesomeを利用してアイコンの変更をしていきます

FontAwesomeのトップページへいく

今回は無料のフリー素材を使ったやり方を解説していきます

FontAwesomeのトップページ上部にある「アイコン」を押すと下記の画像のページになるので、「無料」の部分を押します

気に入ったアイコンを選択する

気に入ったアイコンがあれば選択します

今回は例として一番左上の「家」でやってみます

コードをコピーする

記事内のショートコードに貼り付けする

最初にコードを貼り付けた部分の「画像、もしくはFontAwesome」と書いてある部分に上でコピーしたコードを貼り付けます

また「タイトル」も今回は「家」に変更しています

必要分のアイコンとタイトルを編集していく

上記のコードは8メニュー分のコードになっているため、必要な分のメニューのアイコンとタイトルを編集したら残りは消してOKです

ただしメニューを奇数にすると表示が格好悪くなるので注意!

8個のアイコンとタイトルを変更してみるとこんな感じになります

PC表示の場合

横4列、縦2列表示になります

スマホ表示の場合

横2列、縦4列表示になります

リンクURLを入れていく

最後はショートコードの「リンク先URL」部分に、自分が繋げたいURLを入れたら完成です

うまくいかない場合は「”」の間にちゃんとURLを入れたか確認してください




ハンバーガーメニューやサイドバーに表示したい場合のやり方

スマホのハンバーガーメニューやサイドバーに表示したい場合は、ウィジェット画面で「カスタムHTML」を使ってコードを貼り付ける必要があります

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

外観 → ウィジェット

STORK19ではスマホのハンバーガーメニューやサイドバーなど色々なところにカスタムHTMLを入れることができるので、ボックスメニューを表示したい箇所にこれを入れます

カスタムHTML→任意の場所にウィジェット追加

今回はPC:メインサイドバーに表示

タイトルは不要であれば消してください

良ければ下にあるSAVEを押します

PC画面で確認すると表示されました

PC画面では画像のように表示されました

同じようにスマホのハンバーガーメニューに表示させたい場合は、「SP:ハンバーガーメニュー」の箇所にカスタムHTMLを追加してやればOKです




アイコンの色を変えたい場合のやり方

コードを修正することでアイコンの色を変えられます

ボックスメニュー用アイコンの色を変更したい場合は、追加CSSに貼り付けたコードを修正すれば変更可能です(赤字部分)

貼り付けたコードの一番下らへんにある「アイコン色」横のカラーコードを変更すればOKです

/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}

まとめ

今回はCocoonに標準搭載されているボックスメニューをSTORK19で実装する方法を書いていきました

↓↓手順のまとめ↓↓

ボックスメニューを実装する手順
  • 追加CSSへコードを追加する(事前準備)
  • 記事内でショートコードを使ってhtmlコードを記載する
  • スマホのハンバーガーメニューなどに追加したい場合はウィジェットで「カスタムHTML」を追加してやる
  • FontAwesomeのアイコンを使ってきれいにまとめる
  • 任意のリンクURLをコードに貼り付ける

STORK19はスマホに特化したwordpress用テーマです

当サイトもSTORK19を使用しており、ブログ初心者の私でも簡単にブログを作成することができています

有料テーマをまだ使っていない方や良いテーマをお探しの方は是非STORK19を試してみてください

価格は買い切り:11,000円(税込)



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA