Cocoonのサイドバーのデザインを変更する方法を紹介！




※当サイトはアフェリエイト広告を利用しています

ブログ
2020.08.30

どうも、しょうしーどです。

まだまだ、Wordpressの初心者の私。投稿を書きながら見てもらう人が見やすいようにデザインの変更に奮闘中です。

テーマはシンプルなデザインな「Cocoon」を使用しています。

今回はサイドバーのデザインの変更にチャレンジしましたがなかなかうまくいかず試行錯誤をしながらなんとか自分の好みのデザインに変更するできました。

また、忘れてしまわないようにデザイン変更のやり方をまとめておきます。間違っている部分もあるかもしれませんが、同じ悩みを抱えている人の少しでも手助けになればと思います。

では、早速スタートします。




Cocoonのデザイン

デフォルトデザイン

無料で使用できる「Cocoon」、デフォルトデザインはとてもシンプルで扱いやすい感じがします。

何もデザインを変更しなければサイドバー のデザインはこんな感じです。

見出しは薄いグレー色の背景、文字は黒とシンプルなデザインですよね。最初はこのデザインでもいいかなと思っていました。

しかし、だんだん欲が出てきたのか自分好みのデザインに変更したいという気持ちが湧いてきました。

デザイン変更後

私好みのデザインに変更したのがこちら。

よりシンプルな感じに出来上がっていますが、サイドバーの見出しデザインはあまり派手にしないという考えのもとデザインの変更をしています。

デザインの変更手順

外観＞テーマエディタのStyle.cssにコードを書き込む

文字の大きさ、文字の色などはコードを入れることで自由に変更できますので好みに合わせて変更をしてみてください。

まずはWordPressの外観→テーマエディタに移ります。

style.cssというものが表示されます。

すでにいろんなコードが書かれていると思いますが、そこはみなかったことにして一番下までスクロールします。

そして以下のコードを記載してください。

それぞれの意味はこんな感じです
#sidebar h3{
　color: #333;
　background: none;　→背景色なし
　text-align:center;　　→文字の配置：中央
　border-bottom: 4px solid #000033;　→下線の太さ、線の種類、線の色
　letter-spacing: 0.5em;　→文字の間隔
　font-size: 20px;　　　　→文字サイズ
}

数字を変更したり、線の種類なども好きなデザインに変更できます。また、色のコードは下記を参照してお好みで設定してみてください

web色見本　原色大辞典

外観＞カスタマイズ＞追加のcssにコードを書き込む

別の方法も紹介します。

外観＞カスタマイズを選択する

カスタマイズの中に「追加のCSS」があるのでそこにコードを書き込む

上に記載のコードを書き込むと同じようにデザインが変更できます。

こちらでやった方が自分が追加したい部分だけ見れるし、コードを入力するたびに変化が見られるので間違っていたり、変化がなかった時にすぐに気づけるのでここでの作業するものありです。

見出しのテーマ名の変更の仕方

今まではあくまでデザインの変更についてです。表示文字などは別の場所で変更する必要がありますのでこちらも記載しておきます

外観＞ウィジェットに移動して

サイドバーに入っている項目の「タイトル」を変更することで文字を変更できます。英語にするのか日本語にするのかでまた雰囲気が変わるのでこちらもしっかりと考えるとまた違うデザインに変更できます。

これでデザイン変更は以上です。

まとめ

いかがでしたか？

今回はサイドバーのデザイン変更に関しての私の忘れ防止用に書いています。コードを変えれば様々なデザインにすることができるので自分の好きなデザインができるようにチャレンジしてみてはいかがでしょうか？

わたしもこれからもっといろんなことに挑戦をし続けようと思います

それでは、また。

この記事を書いた人

しょうしーど
しょうしーど
３5歳の２児のパパです。
12年目サラリーマンが副業（Webライター・Web制作）やブログに関する情報を配信しています。
本業と副業を両立しながら家族を幸せにする計画を実行中です。

将来のために日々、独学で勉強し成長しています！
ぜひ、皆さんと一緒に成長していく仲間を募集してます！一緒に切磋琢磨していきませんか？

コメント