コピペで設置するWordPressの見出し

パソコンが苦手な起業家のための
集まる集客®テクニカルコーチ
田尻佐和子です。

 

コピペでWordPressの見出しを設置する方法です。

適用しているテーマによって、
H2かH3は、判断して置き換えてくださいね。

 

記事のタイトルがH2で設定されていれば、
H3で設置してください。

以下サンプルはH3で記述していますので、
H2やH4で設置する場合は書き換えてくださいね。

 

外観のテーマ編集を開き、
style.cssが表示されていることを確認してください。
style.cssの一番下に以下のサンプルコードを追記して更新してください。

スクリーンショット 2016-10-06 23.42.13.png

 

サンプル1

スクリーンショット 2016-10-06 23.29.36.png

サンプルコード

h3 {
    padding-bottom: .5em;
    border-bottom: 2px solid #ccc;
}

#ccc

のところは色コードなので、

 

ピンクにするなら

サンプルコード

h3 {
    padding-bottom: .5em;
    border-bottom: 2px solid #DD4989;
}

と、色コードを変更します。

スクリーンショット 2016-10-06 23.31.49.png

 

サンプル2

スクリーンショット 2016-10-06 23.34.22.png

サンプルコード

h3 {
    padding: .25em 0 .25em .75em;
    border-left: 6px solid #2B4E9E;
}

 

サンプル3

スクリーンショット 2016-10-06 23.36.11.png

サンプルコード

h3 {
    padding: .25em 0 .5em .75em;
    border-left: 6px solid #FD5A2A;
    border-bottom: 1px solid #FD5A2A;
}

 

サンプル4

スクリーンショット 2016-10-06 23.38.18.png

サンプルコード

h3 {
    padding: .5em .75em;
    background-color: #F2DDE3;
    border-bottom: 1px solid #EF88A7;
}

 

サンプル5

スクリーンショット 2016-10-06 23.40.05.png

サンプルコード

h3 {
    padding: .5em .75em;
    background-color: #C0E8E2;
    border-left: 6px solid #87D3C8;
}

 

投稿画面側では、見出しにしたい部分を選択して、
段落のところを、見出し3を選んでください。

スクリーンショット 2016-10-06 23.51.34.png

 

色コードは、おなじみのこちらで調べてみてくださいね。

http://www.color-sample.com/

参考になれば嬉しいです。