どうも、しょうしーどです。
まだまだ、Wordpressの初心者の私。投稿を書きながら見てもらう人が見やすいようにデザインの変更に奮闘中です。
テーマはシンプルなデザインな「Cocoon」を使用しています。
今回はサイドバーのデザインの変更にチャレンジしましたがなかなかうまくいかず試行錯誤をしながらなんとか自分の好みのデザインに変更するできました。
また、忘れてしまわないようにデザイン変更のやり方をまとめておきます。間違っている部分もあるかもしれませんが、同じ悩みを抱えている人の少しでも手助けになればと思います。
では、早速スタートします。
Cocoonのデザイン
デフォルトデザイン
無料で使用できる「Cocoon」、デフォルトデザインはとてもシンプルで扱いやすい感じがします。
何もデザインを変更しなければサイドバー のデザインはこんな感じです。
見出しは薄いグレー色の背景、文字は黒とシンプルなデザインですよね。最初はこのデザインでもいいかなと思っていました。
しかし、だんだん欲が出てきたのか自分好みのデザインに変更したいという気持ちが湧いてきました。
デザイン変更後
私好みのデザインに変更したのがこちら。
よりシンプルな感じに出来上がっていますが、サイドバーの見出しデザインはあまり派手にしないという考えのもとデザインの変更をしています。
デザインの変更手順
外観＞テーマエディタのStyle.cssにコードを書き込む
文字の大きさ、文字の色などはコードを入れることで自由に変更できますので好みに合わせて変更をしてみてください。
まずはWordPressの外観→テーマエディタに移ります。
style.cssというものが表示されます。
すでにいろんなコードが書かれていると思いますが、そこはみなかったことにして一番下までスクロールします。
そして以下のコードを記載してください。
数字を変更したり、線の種類なども好きなデザインに変更できます。また、色のコードは下記を参照してお好みで設定してみてください
外観＞カスタマイズ＞追加のcssにコードを書き込む
別の方法も紹介します。
外観＞カスタマイズを選択する
カスタマイズの中に「追加のCSS」があるのでそこにコードを書き込む
上に記載のコードを書き込むと同じようにデザインが変更できます。
こちらでやった方が自分が追加したい部分だけ見れるし、コードを入力するたびに変化が見られるので間違っていたり、変化がなかった時にすぐに気づけるのでここでの作業するものありです。
見出しのテーマ名の変更の仕方
今まではあくまでデザインの変更についてです。表示文字などは別の場所で変更する必要がありますのでこちらも記載しておきます
外観＞ウィジェットに移動して
サイドバーに入っている項目の「タイトル」を変更することで文字を変更できます。英語にするのか日本語にするのかでまた雰囲気が変わるのでこちらもしっかりと考えるとまた違うデザインに変更できます。
これでデザイン変更は以上です。
まとめ
いかがでしたか？
今回はサイドバーのデザイン変更に関しての私の忘れ防止用に書いています。コードを変えれば様々なデザインにすることができるので自分の好きなデザインができるようにチャレンジしてみてはいかがでしょうか？
わたしもこれからもっといろんなことに挑戦をし続けようと思います
それでは、また。
コメント