WordPressテーマ「hueman」追加CSSで文字色・サイズをカスタマイズ

こんにちは!なっぺです🐣

 

今回は現在私も使っているWordPressテーマ「 hueman 」のカスタマイズについてご紹介します。

hueman

hueman 自体もともとのデザインもオシャレなんですが、「外観→追加CSS」という機能が初めからついているため、子テーマを作らなくてもある程度のカスタマイズなら簡単に出来ます。

これはWordPress初心者にとっても嬉しいですね!

よく理解しないまま、親テーマの「テーマ編集(style.css)」を直接いじるのは、データが壊れる可能性があるので絶対にやめましょう!!

 

私も初心者ながら、見やすいカスタマイズを研究してきたので、備忘録がてらご紹介したいと思います。

 

 

見出しの大きさを変える

初期設定の各見出し文字の大きさのバランスが悪いと感じたため、それぞれ大きさを変更しました。

もちろん各記事内で変更することは可能ですが、いちいち変更させるのもめんどくさいので、「追加CSS」で一気に変えちゃいましょう。

CSS

/*見出しh2*/

h2{

font-size:1.5em;

}

font-size: でフォントのサイズ(文字の大きさ)を指定することができます。

emというのは、h1のフォントサイズ(テーマで決められている基本のフォントサイズ)に対する割合をあらわす単位です。

たとえばh2のフォントサイズが16pxだとすると、1.5emは24pxということになります。

 

font-sizeは、ほかにもpx(ピクセル)や%など、いろいろな単位でサイズを指定することができます。

 

POINT

「hueman」は見出しのサイズを変えるとホームの各見出し文字のサイズも変わるので、絶対値であるpx(ピクセル)よりemや%の方が調整がしやすいです。

追加CSSに数字を入れると即座に反映されるので(公開ボタンを押さなければ公開はされません)、確認しながら大きさを選んでみて下さい!

もし、反映されない場合は数字の後に「 !important;」を入れると反映されます。

 

 

使える見出し装飾素材

以下のサイトから見出しの装飾コードを取得できます。

特に見出しデザイン.comは豊富なデザインがありますし、調べると有難いことにいろんな方がデザインを載せていらっしゃるので参考にしてみてください。

見出し.com

http://midashi-design.com/

 

テンプレートキング

http://www.templateking.jp/sozai/title/

 

ブブンデザイン

http://bubundesignarchive.jp/mid/

 

ちなみに本文の文字の大きさやフォントはCSS編集ではなく、「外観」→「Webページデザイン」→「全般デザイン設定」で簡単に変えられます!

 

 

 

全体の文字を黒にしたい

hueman初期の記事内の文字色は灰色です。

ただこれだと全体的に記事がぼやけてしまって読みにくい…。

ので、全ての文字色を黒に変更しました。

CSS

/*本文の色*/

body{

color:#444;

}

 

/*タイトルの色*/

.entry h1 span,.entry h2 span,.entry h3 span,.entry h4 span{

color:#444

}

もしくは

ウェブブラウザでブログの画面を表示した後、調べたい場所で右クリック。

要素の検証(要素の検査)」を選択すると、CSSでどのような記述がされているのか表示されます。

右上に検索ボックスで調べると当該コードが表示されますので、そこで直接編集しても変えることができます。

 

 

おすすめ

コメントを残す

%d人のブロガーが「いいね」をつけました。