Pocket

はじめに

こんばんは、プログラミングスクールに通いながらITエンジニア転職を目指しているごんにんごんです。

先日WordPressのテーマを変えてみたときの記事を投稿しましたが、その直後のお話です。
実は、テーマを変えたはいいけれど、フォントやレイアウト設定がバラバラになってしまったのです。

↑テーマ変更後のレイアウト崩れを一部抜粋

これではとても公開できるレベルではないので、いろいろ調べた結果、追加CSSを調整すれば解決できることがわかったので、共有したいと思います。

こういう方におすすめ

- テーマを入れたら、フォントとかエフェクトとかバラバラになってしまった!!
- ネットから拾ってきた画像だとサイズがバラバラで、見た目を揃えたい!!

追加CSSで調整したらどうなった??

BEFORE

主張の強いフォントサイズ、無機質な見出し、強調(backquote)の無い単調な文章などなど、テーマ変更で上がった気持ちが一瞬で落ち込みました。

AFTER


追加CSSにて、直したい要素にCSSを追記することで、思うようなレイアウトになりました!

追加CSSでカスタマイズしてみよう

さて、実際にカスタマイズをやってみましょう。

追加CSSとは、wordpressの機能の一つで、サイトデザインをカスタマイズできます。基礎的なCSSの知識があれば、このフォントサイズをこうしたい程度の修正であれば、簡単にできます。

かく言う私ごんにんごんも、プログラミングスクールでHTML/CSSを3日間学んだだけですが、上記のとおりできましたので、大丈夫です。

1. 外観→カスタマイズ→追加CSS

Image from Gyazo

2. 修正したい要素を特定する

ブラウザの検証機能を使って、どの要素か特定します。
Google chromeの場合、右クリック→検証と押すと、検証ウィンドウが立ち上がります。

※私の場合、記事をマークダウン方式で書いていたため、HTMLの構成はwordpress側がやってくれていたのでノータッチでした。なので、どれがどの要素か調べるところから始めたのです。

その後、特定した要素をCSSで修正していきます。

Image from Gyazo

3. 見出しの文字サイズを変えたいときは...

先ほどの検証機能で、見出しはh2要素ということがわかりましたので、
追加CSSにh2要素のフォントサイズを指定してみます。

Image from Gyazo

そうすると、画面右側のプレビューが変わるので、ちょうどいいフォントサイズを選べば、編集完了です。

まとめ

今回は追加CSSを使って、テーマ変更後のレイアウト修正のやり方をご紹介しました。
この方法を覚えていれば、今後テーマ変更しても、思うように微調整できますね。

それではでは。