猫とCANDYとワンピース

WEBの迷路でさまようruruの気になる情報を発信しちゃうね

*

本日の人気記事

wordpress-5秒で見出しタグをかわいくする方法を10秒で説明

      2015/09/10

 

はいはい。時間ないからすぐ本題。

まず前提としてプラグインの「Simple Custom CSS」を入れて有効化してくだしゃい。

サクサク行きますね。

 

見出しのh3タグをカスタマイズします

 

それでは今回の見た目から

beforebefore

 

afterafter

 

これを目指します

それでは手順です。

①今回のコードをコピーして下さい。

 

編集画面を開きます。

wordpressの管理画面→外観→Custom CSSです

編集画面

 

空いているところに先ほどのコードを貼り付けます。

FireShot Pro Screen Capture #046 - 'Simple Custom CSS ‹ 猫とCANDYとワンピース — WordPress' - ab-10_com_wp-admin_themes_php_page=simple-custom-css_php

 

以上です。お疲れ様でした。チャンチャン!(笑)

 

ちょっとだけ説明

 

「 !important 」わたしのブログはstinger5とその子テーマのsimplesterを使っていますのでスタイル表記に関しては優先度があります。今回のカスタマイズを最優先させるためのコードです。

「 border-bottom: 」ここに続けてラインの太さやデザイン、色を書きます。

 

太さについて

数値で指定数値にpxやemやexなどの単位をつけてできます。
pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化。
emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位。
あるいは、
キーワードで指定thin(細い)、medium(普通)、thick(太い)のうち、いずれかを指定します。
キーワードで指定する場合、実際に表示される太さはブラウザにより異なります。

形について

solid 1本線で表示。
double 2本線で表示。
groove 立体的に窪んだ線で表示。
ridge 立体的に隆起した線で表示。
inset 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示。
上下左右の一部だけに指定しても立体感は出ません。
outset 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示。
上下左右の一部だけに指定しても立体感は出ません。
dashed 破線で表示されます。
dotted 点線で表示されます。

色について

わたしが参考にしている色見本はパステルカラー色見本です。

ここで好きな色を見つけて#を含めてコピペします。

上記のgrooveにした場合、影が付くので指定した色よりかなり暗くなります。

今回のridgeの場合も少し影が付くので濃くなります。

 

以上でーす♪

おつかれさまでしたー。.。o♡

 

 - wordpress , ,

シェアしてくれるとすごくよろこびます。.。o♡