こんにちは
しのさんです(´▽｀*)
今回は、見出しをお洒落に装飾するコードをご紹介していきます！
いろんなブログを見ていたら、見出しをお洒落にしている方もいらっしゃいますよね。
私も「どうやってやるんだろ？」「いいな～！！」って思っていました！
ついに見出しの装飾の仕方をマスターしたのでご紹介したいと思います！
おすすめ記事▶PV数をアップさせたいなら、過去記事をリライトしろ！
おすすめ記事▶ワードプレスで月間1000pv達成したよ！到達時の記事数や期間を解説。
▼目次▼
見出しとはなんぞや？
見出しとはまさに↑のこと！！
記事の中の内容を細かく、分かり易くタイトル付けしたものですね。
私は、ワードプレスで記事を書いているのですが、ワードプレスなら下記の画像のところで見出しを付けることができます！
ワードプレスに備わってる機能だけだと、大きな太文字として表現されます。
そのまま使ってもいいんですけど、記事をもっと華やかにしたいときにコードを追加して装飾することも可能なんです！
見出しの装飾コード４選
それでは、私のお気に入りの見出しの装飾コードをご紹介したいと思います！
１．見出しサンプル
↑のような見出しを作るコードは↓です！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
h3#sample{ position: relative; color: #ffffff; background: #0790cd; font-size: 16pt ; border: 3px solid #4aecfb; margin: 10px 10px 23px 10px; padding: 10px 5px 10px 10px; border-radius: 3px; box-shadow:1px 3px 7px 0px #666666 ; } h3#sample:after, h3#danraku3:before { content: ""; position: absolute; top: 100%; height: 0; width: 0; } h3#sample:after { left: 40px; border: 10px solid transparent; border-top: 10px solid #0790cd; } h3#sample:before { left: 37px; border: 13px solid transparent; border-top: 13px solid #4aecfb; } |
２．見出しサンプル
|
1 2 3 4 5 6 7 8 |
h3#sample{ margin: 0 0 1.5em; padding: 0.8em; border-left: 7px solid #B92A2C; border-bottom: 1px dashed #B92A2C; font-size: 1.143em; font-weight: bold; } |
３．見出しサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
h3#sample{ position: relative; margin: 0 0 1.5em; padding: 0.8em 0 0.8em 1.5em; border: 2px solid #B92A2C; font-size: 1.143em; font-weight: bold; } h3#sample:before{ content: ""; position: absolute; background: #B92A2C; top: 50%; left: 0.5em; margin-top :-15px; height: 30px; width: 8px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } |
４．見出しサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h3#sample{ color: #111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; border-bottom: 2px solid #B92A2C; box-shadow: 0 1px 0 #aaaaaa; -webkit-box-shadow: 0 1px 0 #aaaaaa; -moz-box-shadow: 0 1px 0 #aaaaaa; text-shadow: #999999 0px 1px 1px; } h3#sample{ font-size:3.0em; } |
プラグインのAddQuicktagをインストールしよう！
プラグインから「AddQuicktag」を検索して、インストールしてください。
このプラグインを使うことで、装飾見出しを出すことがすごく楽になります！
インストールしていただくと、設定のところに↓の画像赤丸〇の部分が出てきます。
クリックすると、次の画面が出てきます。
ラベル名は好きなように設定してください。
開始タグは下のコードを打ち込んでください。
|
1 |
<h3 id="danraku3"> |
「“ ”」の中身は好きにカスタマイズしてOKです。
自分の分かり易いものにしてください。
「h3」の部分は、自分の好きな大きさのものにしてください。
私は見出しは「h2」をよく使います。
終了タグは下のコードにしてください。
|
1 |
</h3> |
そして、右側のチェックをすべて✔してください。
画像の矢印の部分をクリックすると、すべてにチェックされます。
最後に「変更を保存」をクリックしてくださいね。
追加SCCにコードを追加しよう！
次にワードブレスの「外観」から「カスタマイズ」に行きます。
「カスタマイズ」から「追加CSS」に行きます。
「追加CSS」をクリックすると、コードを追加できます。
下の画像の赤丸〇の部分ですね。
ご紹介した「見出しサンプル」をコピーして貼り付けます。
サンプルコードでは上の画像の赤い下線の部分が「sample」になっているので、プラグインのAddQuicktagで決めた「開始タグ」の「” ”」の部分を入力します。
「sample」の部分とは下の画像の赤い下線の部分ですね。
「sample」の部分はすべて変更してください。
開始タグの「” ”」の部分とは、青い下線の部分ですね。
きちんと反映されているか試してみよう！
いつも通り、「投稿」から「新規追加」で、新しい記事を出してみます。
すると、赤丸〇の部分が出来ています！
実際に見出しが設定された通り反映されるか、試してみて下さいね！
関連記事▶さあ、アフィリエイトを始めよ！
関連記事▶おすすめレンタルサーバー
コメント