Godios CSS カスタマイズ | WordPress 初心者がThemeをカスタマイズしてみた

“爆速”。この言葉に惹かれたWordpress初心者の私はGodiosをWordpressテーマとして導入。ちょこっとだけCSSをいじってみたので、それを公開してみる。

Godiosって何だ?

Godios“とは、PHPで動くブログCMSのWordpressの無料テーマの1つ。無料テーマの中でも表示速度が”爆速”と言われている。実際に速いかどうかは分からない。

https://godios.simmon.design/

GodiosのCSSをカスタマイズ

インストール方法は公式サイト様にお任せして、この記事では、Godiosのカスタマイズ方法をご紹介する。カスタマイズといっても大きな変更ではなく、CSSをいじってちょこっと見た目を変えるだけである。ここでは、 リストの点の色 を変えることに注目する。しかし、他の要素の変更もできるように、変更したい要素を探し変更できるようにご説明する。

カスタマイズに必要なもの

カスタマイズに必要なものは、Chromeブラウザだ。これだけ用意してもらえれば問題ない。FirefoxやSafariでも良いが、ここではそれらのブラウザでの方法については触れない。

カスタマイズする箇所を選定

どこをカスタマイズするか。それは、その人それぞれだ。まずは、Godiosで目立つように感じる“li”要素つまりリストの点の色を変えてみよう。

カスタマイズする箇所のidやclassを特定

1→2→3→4

カスタマイズしたい場所が決まったら、Chromeの機能を使って、その要素に付与されている”id”や”class”を特定する。そのためには、キーボードの”F12″キーを押して、開発者モードを開く。そして、その画面の一番左上にある四角と矢印のアイコンをクリック(1)。次に、変更したい箇所をクリック(2)。

クリックすると、その場所に応じて開発者モードの画面が変わる。“Elements”タブに、選択した箇所が灰色の背景色で表示されていると思う(3)。そこが今回変更したい要素だ。”class”や”id”はどうなっているだろうか。

次に、“Styles”を見る。ここには、”Elements”タブで選択されている箇所に対応するCSSが表示されている。CSSの勉強を少ししなければならない点だが、ここを見ると、before要素を使ってリストの点の色を表示していることがわかる。更に、“nth-of-type(hoge)”というプロパティによって、交互に色が入れ替わっていることもわかる(4)。

つまり、”li”要素つまりリストの点の色を変えるには、この部分の“background-color”を変える必要があることがわかる。

カスタマイズしたい箇所のCSSを追加CSS欄に入力

カスタマイズしたいCSSを特定したので、後は“background-color”を変更して入力するだけだ。どこにCSSを入力するか。それは、テーマのカスタマイズ画面で可能だ。その”追加CSS”欄をクリックする。

追加CSS欄の位置

そこに以下のように入力する。

“#entry-content…”の長い要素の選択の部分は、さきほど調べたCSSで指定されているものをコピーしただけだ。今回指定したのは”nth-of-type(odd)”なので、奇数番目(1,3,5,7..)のリストの点の色。”background-color”に”rgba”で指定した。

もし偶数番目のリストの点の色を変えたければ以下のようにする。

GodiosのCSSをカスタマイズ|サンプル

ここまでで、GodiosのCSSをカスタマイズする一例として、リストの点の色を変更するCSSをご紹介したが、その他のカスタマイズ例をサンプルとしてご紹介する。

H2,H3,H4要素をカスタマイズするサンプル

本文は、Godiosの場合、id”entry-content”で囲まれている。そして、”::before”要素でH2やH3要素の左横には淡い色の縦線が引かれている。この線を消すには”background-color”を”transparent”にする。

Godiosのデフォルトでは、H2とH3の違いがわかりにくい気がするので(私だけかもしれないが)、いっそのこと”background”に色をつけてフォントの色”color”を白色にしている。

“ul”リストの余白をつくるサンプル

Godiosのデフォルトでは、ulリストの上部に余白がない(今後アップデートされるかもしれない)。それで、”margin-top 15px”を指定した。

送信ボタンの色を変えるサンプル

まとめ

Godiosはいいぞ。

共有する

このエントリーをはてなブックマークに追加

コメントをする

メールアドレスが公開されることはありません。
*のついている項目は必須です。


*