【cocoon】サイドバーにボックスナビを設置する方法を誰よりも丁寧に解説

【cocoon】サイドバーにボックスナビを設置する方法を誰よりも丁寧に解説ブログ
スポンサーリンク

・ブログにボックスメニューを設置したい
・CSSファイルを触るのに抵抗がある
・ブログが消えちゃったらどうしよう…
・ぽんひろさんの記事を読んだけど、イマイチよく理解できていない…


そんな方に読んでもらいたい記事です!


wordpressテーマ「cocoon」を使っているブログのサイドバーに、ボックスメニューを設置する5ステップを解説します。

【サイドにボックスメニューを設置する方法】

①CSSをコピー
②CSSを貼りつける
③アイコンを決める
④HTMLコードをコピー
⑤ウィジェットでボックスメニューを追加



私は、コードとかCSSがさっぱりわからない状態で、適当に触ってブログが消えちゃったらどうしよう…という思いから、ボックスメニューの設置にためらっていました。


しかし今回、ぽんひろさんの記事にしたがい勇気を出して挑戦したところ、無事に設置することに成功!

あおい
あおい

所要時間1時間ほどで、「コードなんて難しくて無理!」という方でも問題なく設置できるように解説したので、ぜひ参考にしてください!



「ぽんひろさんのブログを読んだけど、イマイチよくわからなかった・・・」という方でも、この記事を読むことでより理解が深められるはずです。

編集を始める前に、念のためブログのバックアップを取っておくことをおすすめします。

スポンサーリンク

【cocoon】サイドバーにボックスメニューを設置する方法



WordPressテーマにcocoonを使用している方が、サイドバーにボックスメニューを設置する手順は以下の5ステップです。

【サイドにボックスメニューを設置する方法】

手順①CSSをコピー
手順②CSSを貼りつける
手順③アイコンを決める
手順④HTMLコードをコピー
手順⑤ウィジェットでボックスメニューを追加

ぜひ、ぽんひろさんの記事と一緒に読み進めてみてください!

手順①CSSをコピー


まず、ぽんひろさんのブログにあるCSSコードをコピーします。

手順②CSSを貼りつける


次に、先ほどコピーしたコードをCSSに貼りつけます。

ダッシュボードのサイドメニューから「外観」→「テーマエディター」→「style.css」に貼りつける

待って!CSSを開いたけど、なんかすでに入力されてるものもあり、どこに貼りつければいいのかわからない!(泣)


と、CSSを開いて固まってしまった人はいませんか?

・・・それ、私です。笑

私は、超ド素人かつ、「CSSってなに?いじってブログが変になったら怖いからできるだけ触りたくない」というタイプの人間だったので、先ほどコピーしたコードをどこに貼りつけるのかもわかりませんでした。笑

でも安心してください!



結論からいうと、先ほどコピーしたコードは、既存のCSSコードの一番下に貼りつければオッケーです。

すでに入力されているものを消したり、その上にコードを貼りつけたりしなくていいんだね

手順③アイコンを決める



次に、ボックスメニューのアイコンにするための画像を決めます。

使うのは「Font Awesome」です。


使いたいアイコンを見つけたら、コードの部分をコピーしておきます。

この時点ではコードをコピーせずに、別ウィンドウに開いておくだけにすると、このあとHTMLコードを貼りつけながら各アイコンのコードを貼りつけることができるので便利かもです。

手順④HTMLコードをコピー


また、ぽんひろさんのブログ記事に戻り、HTMLコードをコピーします。

手順⑤ウィジェットでボックスメニューを追加



HTMLコードをコピーしたら、サイドバーのウィジェットにボックスメニューを作成します。

ダッシュボードのサイドメニューから「外観」→「ウィジェット」


「カスタムHTML」→設置する場所を「サイドバー」に選択し、ウィジェットを追加します。


ウィジェットを追加すると、内容のところにHTMLコードを入力できるようになります。

先ほどコピーしたHTMLコードをここに貼りつけましょう。

「タイトル」となっている部分は、完成したメニューの上部に表示されるものです。
「メニュー」など、自分の好きなものに変更してください。

コードを貼りつけるとこんな感じ ▼


あとは、HTMLコードの必要な部分を変更していきます。
変更が必要なのは3ヶ所。

リンク先URL
画像、もしくはFontAwesome
タイトル


↑上の画像のアンダーラインの色と一致させています



リンク先URL」の部分には、リンクさせたいカテゴリーのページや特定記事のURLを貼りつけます。

画像、もしくはFontAwesome」には、先ほど見つけておいたFontAwesomeのアイコンのコードを貼りつけます。

タイトル」の部分には、そのメニューのタイトルを入れましょう。
例:国際恋愛カテゴリーで作る場合は「国際恋愛」



最後に「保存」をクリックしたら完了です!

ちゃんと表示されているか確認してみましょう!

あおい
あおい

このようなメニューが設置できていれば成功です!

おまけ:アイコンの色を変更したい場合



FontAwesomeのアイコンの色を変更する方法を解説します。


アイコンの色を変えたいときは、再びCSSファイルを編集します。


1番上にある色がアイコンのベースカラーになっています。

自分の好きな色のカラーコードを該当箇所に貼りつけることで、アイコンの色を変更できます。


■カラーコードを見つけるのは、こんなサイトが便利です ≫WEB色見本

アイコンごとに色を変えたい場合は、
/* fontawesome(2番目) */
/* fontawesome(3番目) */

という項目ごとにカラーコードを貼りつけてください。

まとめ



今回ボックスメニューを設置したのは、

・見た目を良くするため
・ブログの回遊率を上げるため
・読者にわかりやすい設計にするため

です。

また時間が経ってから効果が出てきたら共有しますね




【関連記事】
誰でも簡単!自分らしいブログ用アイコンをココナラで作成する手順

【cocoon】超簡単!吹き出し機能の使い方【設定変更のみ】

タイトルとURLをコピーしました