コピペで設置する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/

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

 

▼無料メルマガ登録で電子書籍ダウンロードできます▼

テクニカルサロン電子書籍無料ダウンロード

 

田尻 佐和子
未来のお客様が集まるヒットルートを創る
集まる集客®WEBプランナー田尻佐和子です。
2013年8月より集まる集客®プロデューサーズラボラトリーにて活動しています。
創るプロではなく勝たせるプロとなる!
教えるプロではなく考動させるプロとなる!
集まる集客で、日本で一番起業家を勝たせる
プロ集団を目指しています!

与える達人となり、「花よりも花を咲かせる土になれ。」をモットーに、WEBが苦手というだけで、ツールやシステムをうまく活用できない方のために下支えし、ご自身の専門の研究に時間を使って欲しいと思っています。世の中の人の役に立ちたいと熱い思いを持った起業家のために、パソコン操作・Facebook・WordPress・アメブロ・エージェントメール・PayPal・Skype・Gmail・Evernote・Keynoteなど、集まる集客に必要なツールの用語解説、操作方法、活用方法などを誰よりも優しく解説しています!

最新無料電子書籍「お客様が面白いように動いてくれる! Facebookからブログへの
動線を強化する 3ポイントレッスン」
▼ダウンロードはこちらから▼