どうも、しょうしーどです。
まだまだ、Wordpressの初心者の私。投稿を書きながら見てもらう人が見やすいようにデザインの変更に奮闘中です。
テーマはシンプルなデザインな「Cocoon」を使用しています。
今回はサイドバーのデザインの変更にチャレンジしましたがなかなかうまくいかず試行錯誤をしながらなんとか自分の好みのデザインに変更するできました。
また、忘れてしまわないようにデザイン変更のやり方をまとめておきます。間違っている部分もあるかもしれませんが、同じ悩みを抱えている人の少しでも手助けになればと思います。
では、早速スタートします。
Cocoonのデザイン
デフォルトデザイン
無料で使用できる「Cocoon」、デフォルトデザインはとてもシンプルで扱いやすい感じがします。
何もデザインを変更しなければサイドバー のデザインはこんな感じです。
見出しは薄いグレー色の背景、文字は黒とシンプルなデザインですよね。最初はこのデザインでもいいかなと思っていました。
しかし、だんだん欲が出てきたのか自分好みのデザインに変更したいという気持ちが湧いてきました。
デザイン変更後
私好みのデザインに変更したのがこちら。
よりシンプルな感じに出来上がっていますが、サイドバーの見出しデザインはあまり派手にしないという考えのもとデザインの変更をしています。
デザインの変更手順
外観＞テーマエディタのStyle.cssにコードを書き込む
文字の大きさ、文字の色などはコードを入れることで自由に変更できますので好みに合わせて変更をしてみてください。
まずはWordPressの外観→テーマエディタに移ります。
style.cssというものが表示されます。
すでにいろんなコードが書かれていると思いますが、そこはみなかったことにして一番下までスクロールします。
そして以下のコードを記載してください。
数字を変更したり、線の種類なども好きなデザインに変更できます。また、色のコードは下記を参照してお好みで設定してみてください
外観＞カスタマイズ＞追加のcssにコードを書き込む
別の方法も紹介します。
外観＞カスタマイズを選択する
カスタマイズの中に「追加のCSS」があるのでそこにコードを書き込む
上に記載のコードを書き込むと同じようにデザインが変更できます。
こちらでやった方が自分が追加したい部分だけ見れるし、コードを入力するたびに変化が見られるので間違っていたり、変化がなかった時にすぐに気づけるのでここでの作業するものありです。
見出しのテーマ名の変更の仕方
今まではあくまでデザインの変更についてです。表示文字などは別の場所で変更する必要がありますのでこちらも記載しておきます
外観＞ウィジェットに移動して
サイドバーに入っている項目の「タイトル」を変更することで文字を変更できます。英語にするのか日本語にするのかでまた雰囲気が変わるのでこちらもしっかりと考えるとまた違うデザインに変更できます。
これでデザイン変更は以上です。
まとめ
いかがでしたか？
今回はサイドバーのデザイン変更に関しての私の忘れ防止用に書いています。コードを変えれば様々なデザインにすることができるので自分の好きなデザインができるようにチャレンジしてみてはいかがでしょうか？
わたしもこれからもっといろんなことに挑戦をし続けようと思います
それでは、また。
この記事を書いた人
-
３３歳の２児のパパです。
９年目サラリーマンの仕事術や育児、キャンプに関する情報を配信しています。
本業と副業を両立しながら家族を幸せにする計画を実行中です。
将来の収益化に向け、日々Webビジネスを独学で勉強中です。
ぜひ、皆さんと一緒に成長していく仲間を募集してます！一緒に切磋琢磨していきませんか？
最新の投稿
Webライター2023.06.02副業初心者必見！現役副業Webライターがおすすめするライティング講座5選を解説！
副業2023.05.23初心者向け！副業Webライターの始め方
ブログ2023.05.06ブログ運営に向いている人・向いていない人の特徴を解説します
副業2023.04.29副業で開業届を出す必要があるの？出す時のベストのタイミングを教えます
コメント