【WordPress】超簡単!見出しのデザインを自分好みに変更する方法

雑記
この記事は約3分で読めます。

こんにちは!

あなたのブログの見出し、ちゃんと自分好みのデザインですか?

デフォルトのWordPressでは見出し1.2.3.4.5.6まであり、どれを選択しても文字のサイズが大きくなるだけで、カッコよくないし可愛くもないですよね。

とても質素です

しかし、cssをいじることで質素なブログからオシャレなブログにすることが可能になります。

こんな感じ

 

自力でCSSを設定するのは、初心者には難しいので、ここで教える手順に従って作業していただければ、なんのミスもなく設定できるのでよかったら最後までご覧下さい。

スポンサードリンク

デザイン選び

なんといってもまずは、自分がどんなデザインにしたいかを決めましょう。

私もブックマークにして参照するほどの便利なサイトがあるので皆さんにも紹介します。

>>>こちらのサイト

 

 

このサイトには多彩な見出しのデザインが掲載されていて、簡単にデザインのコードがコピーできます。

ここからcssの設定の仕方を書いていきますが、勘違いしやすい部分があるので絶対に最後まで読んでください。

設定方法

試しでこの見出しで設定していきます。
コードを表示をクリック


すると見慣れない文字列(コード)が出てくるので、全て選択してコピーしましょう。

続いてWordPressを開いていただき、外観をクリックして、CSS 編集ををクリックして下さい。

 

画面の左にメニューが出てくるので、追加 CSSをクリック

ここに先ほどコピーしたコードをCtrl + Vで貼り付けましょう。

これで見出し1の設定は完了、
見出し2を設定したい場合は、貼り付けたコードの「h1{ ・・・ 」のh1の部分をh2にするだけです。

3以降も同じ手順で行いましょう。
そしたらちゃんと反映されているか確認してみましょう。

 

文字に見出し1・2・3を設定しました、下書きの時点ではデザインが変わってるように見えませんが、プレビューで見てみると・・・

しっかり反映されてますね(^▽^)/

デザインの色の変更方法

ラインの色をピンクや緑色などにしたい場合、cssコードを少しいじる必要があります。

#の部分を0~9、a~fの文字を入力することで色んな色に変えれます。

>>>こちらのサイトから色のコードを取得が可能です。

 

RGBのバーを動かして自分好みの色を見つけたら

上のカラーコードをコピーします

コピーしたカラーコードを先ほどのCSSコードの赤丸の部分に張りかえれば完了です!

変更前

 


変更後

色が変わってますね!これらを使ってあなたのサイトの質を上げていきましょう。

コメント