・ブログにボックスメニューを設置したい
・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コードの必要な部分を変更していきます。
変更が必要なのは３ヶ所。
①リンク先URL
②画像、もしくはFontAwesome
③タイトル
↑上の画像のアンダーラインの色と一致させています
「リンク先URL」の部分には、リンクさせたいカテゴリーのページや特定記事のURLを貼りつけます。
「画像、もしくはFontAwesome」には、先ほど見つけておいたFontAwesomeのアイコンのコードを貼りつけます。
「タイトル」の部分には、そのメニューのタイトルを入れましょう。
例：国際恋愛カテゴリーで作る場合は「国際恋愛」
最後に「保存」をクリックしたら完了です！
ちゃんと表示されているか確認してみましょう！
このようなメニューが設置できていれば成功です！
おまけ：アイコンの色を変更したい場合
FontAwesomeのアイコンの色を変更する方法を解説します。
アイコンの色を変えたいときは、再びCSSファイルを編集します。
1番上にある色がアイコンのベースカラーになっています。
自分の好きな色のカラーコードを該当箇所に貼りつけることで、アイコンの色を変更できます。
■カラーコードを見つけるのは、こんなサイトが便利です ≫WEB色見本
アイコンごとに色を変えたい場合は、
/* fontawesome(2番目) */
/* fontawesome(3番目) */
という項目ごとにカラーコードを貼りつけてください。
まとめ
今回ボックスメニューを設置したのは、
・見た目を良くするため
・ブログの回遊率を上げるため
・読者にわかりやすい設計にするため
です。
また時間が経ってから効果が出てきたら共有しますね
【関連記事】
≫誰でも簡単！自分らしいブログ用アイコンをココナラで作成する手順
≫【cocoon】超簡単！吹き出し機能の使い方【設定変更のみ】
