Contents
はじめに
こんばんは、プログラミングスクールに通いながらITエンジニア転職を目指しているごんにんごんです。
先日WordPressのテーマを変えてみたときの記事を投稿しましたが、その直後のお話です。
実は、テーマを変えたはいいけれど、フォントやレイアウト設定がバラバラになってしまったのです。
↑テーマ変更後のレイアウト崩れを一部抜粋
これではとても公開できるレベルではないので、いろいろ調べた結果、追加CSSを調整すれば解決できることがわかったので、共有したいと思います。
こういう方におすすめ
- テーマを入れたら、フォントとかエフェクトとかバラバラになってしまった!!
- ネットから拾ってきた画像だとサイズがバラバラで、見た目を揃えたい!!
追加CSSで調整したらどうなった??
BEFORE
主張の強いフォントサイズ、無機質な見出し、強調(backquote)の無い単調な文章などなど、テーマ変更で上がった気持ちが一瞬で落ち込みました。
AFTER
追加CSSにて、直したい要素にCSSを追記することで、思うようなレイアウトになりました!
追加CSSでカスタマイズしてみよう
さて、実際にカスタマイズをやってみましょう。
追加CSSとは、wordpressの機能の一つで、サイトデザインをカスタマイズできます。基礎的なCSSの知識があれば、このフォントサイズをこうしたい程度の修正であれば、簡単にできます。
かく言う私ごんにんごんも、プログラミングスクールでHTML/CSSを3日間学んだだけですが、上記のとおりできましたので、大丈夫です。
1. 外観→カスタマイズ→追加CSS
2. 修正したい要素を特定する
ブラウザの検証機能を使って、どの要素か特定します。
Google chromeの場合、右クリック→検証と押すと、検証ウィンドウが立ち上がります。
※私の場合、記事をマークダウン方式で書いていたため、HTMLの構成はwordpress側がやってくれていたのでノータッチでした。なので、どれがどの要素か調べるところから始めたのです。
その後、特定した要素をCSSで修正していきます。
3. 見出しの文字サイズを変えたいときは...
先ほどの検証機能で、見出しはh2要素ということがわかりましたので、
追加CSSにh2要素のフォントサイズを指定してみます。
そうすると、画面右側のプレビューが変わるので、ちょうどいいフォントサイズを選べば、編集完了です。
まとめ
今回は追加CSSを使って、テーマ変更後のレイアウト修正のやり方をご紹介しました。
この方法を覚えていれば、今後テーマ変更しても、思うように微調整できますね。
それではでは。