こんにちは！
あなたのブログの見出し、ちゃんと自分好みのデザインですか？
デフォルトのWordPressでは見出し1.2.3.4.5.6まであり、どれを選択しても文字のサイズが大きくなるだけで、カッコよくないし可愛くもないですよね。
とても質素です
しかし、cssをいじることで質素なブログからオシャレなブログにすることが可能になります。
こんな感じ
自力でCSSを設定するのは、初心者には難しいので、ここで教える手順に従って作業していただければ、なんのミスもなく設定できるのでよかったら最後までご覧下さい。
デザイン選び
なんといってもまずは、自分がどんなデザインにしたいかを決めましょう。
私もブックマークにして参照するほどの便利なサイトがあるので皆さんにも紹介します。
このサイトには多彩な見出しのデザインが掲載されていて、簡単にデザインのコードがコピーできます。
ここからcssの設定の仕方を書いていきますが、勘違いしやすい部分があるので絶対に最後まで読んでください。
設定方法
試しでこの見出しで設定していきます。
コードを表示をクリック
すると見慣れない文字列(コード)が出てくるので、全て選択してコピーしましょう。
続いてWordPressを開いていただき、外観をクリックして、CSS 編集ををクリックして下さい。
画面の左にメニューが出てくるので、追加 CSSをクリック
ここに先ほどコピーしたコードをCtrl + Vで貼り付けましょう。
これで見出し1の設定は完了、
見出し2を設定したい場合は、貼り付けたコードの「h1｛ ・・・ 」のh1の部分をh2にするだけです。
3以降も同じ手順で行いましょう。
そしたらちゃんと反映されているか確認してみましょう。
文字に見出し１・２・３を設定しました、下書きの時点ではデザインが変わってるように見えませんが、プレビューで見てみると・・・
しっかり反映されてますね(^▽^)/
デザインの色の変更方法
ラインの色をピンクや緑色などにしたい場合、cssコードを少しいじる必要があります。
#の部分を0~9、a~fの文字を入力することで色んな色に変えれます。
RGBのバーを動かして自分好みの色を見つけたら
上のカラーコードをコピーします
コピーしたカラーコードを先ほどのＣＳＳコードの赤丸の部分に張りかえれば完了です！
変更前
変更後
色が変わってますね！これらを使ってあなたのサイトの質を上げていきましょう。
コメント