こんにちは。
Smilefactoryten

代表 加藤敦志 です。

 

 

「見出し」

このキーワードで検索して
無料の画像をダウンロードしてみました。。

 

 

 

 

 

記事内に使う見出しデザイン

前回、見出しのデザインをカスタマイズ!

記事にまとめて見ました。

 

CSS編集に追加するだけでカスタマイズ完了!!

これですね!!

 


 

 

 

 

 

全ての「h」要素が?!

気が付かれた方は凄いです。

誰か気がついて

「加藤さんこれちょっと違いませんか?」

「加藤さん記事内の"h"要素だけカスタマイズしたいです」

 

指摘が来るかなぁ〜と思っていましたが。。

来なかった(笑)

 

前回のCSSですとこのようにカスタマイズされます!!

はい。
ブログ記事内全ての「h」要素がカスタマイズされます!!

 

 

 

 

そのままにしておくのもどうかと思うので。。

続!!

 

ということで修正版CSSを載せておきますね。!!

 

.skin-entryBody h2,.skin-entryBody h3,.skin-entryBody h4{border-left:3px solid #1a1aff;padding-left:10px;}

 

どこが変わったかと言いますと
ここが変わっています。

 

h2,h3,h4{border-left:3px solid #1a1aff;padding-left:10px;}

 

 

 

変更するとこうなります。

 

 

 

 

 

変更したCSS【修正済み

他の見出しの色

 

僕が勝手に選んだ色

修正版CSSのまとめです。
 

あっ!
大事なことをお伝えすること忘れていました。

 

このCSSは

今僕が使っているプロフィール写真が丸いデザイン

「リニューアルデザイン」用です。

 

 


 

【ケンブリッジブルー】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.skin-entryBody h2,.skin-entryBodyh3,.skin-entryBody h4{border-left:3px solid #25b7c0;padding-left:10px;}

 

 

 

【みずいろ】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.skin-entryBody h2,.skin-entryBody h3,.skin-entryBody h4{border-left:3px solid #ccffff;padding-left:10px;}

 

 

 

【むらさき】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.skin-entryBody h2,.skin-entryBody h3,.skin-entryBody h4{border-left:3px solid #920D96;padding-left:10px;}

 

 

 

【薄いむらさき】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.skin-entryBody h2,.skin-entryBody h3,.skin-entryBody h4{border-left:3px solid #cc66ff;padding-left:10px;}

 

 

 

【ピンク】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.skin-entryBody h2,.skin-entryBody h3,.skin-entryBody h4{border-left:3px solid #ff66cc;padding-left:10px;}

 

 

 

【薄いオレンジ】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.skin-entryBody h2,.skin-entryBody h3,.skin-entryBody h4{border-left:3px solid #FDD9CD;padding-left:10px;}

 

 

 

【やまぶきいろ:きいろ】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.skin-entryBody h2,.skin-entryBody h3,.skin-entryBody h4{border-left:3px solid #F8B500;padding-left:10px;}

 

 

 

【きみどりいろ】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.skin-entryBody h2,.skin-entryBody h3,.skin-entryBody h4{border-left:3px solid #4DAC26;padding-left:10px;}

 

 



 

 

新デザイン用

皆さんがお使いの

プロフィール写真が四角いデザインはこちらです

 

「新デザイン」用です。

 


 

【ケンブリッジブルー】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.articleText h2,.articleText h3, .articleText h4{border-left:3px solid #25b7c0;padding-left:10px;}

 

 

 

【みずいろ】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.articleText h2,.articleText h3, .articleText h4{border-left:3px solid #ccffff;padding-left:10px;}

 

 

 

【むらさき】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.articleText h2,.articleText h3, .articleText h4{border-left:3px solid #920D96;padding-left:10px;}

 

 

 

【薄いむらさき】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.articleText h2,.articleText h3, .articleText h4{border-left:3px solid #cc66ff;padding-left:10px;}

 

 

 

【ピンク】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.articleText h2,.articleText h3, .articleText h4{border-left:3px solid #ff66cc;padding-left:10px;}

 

 

 

【薄いオレンジ】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.articleText h2,.articleText h3, .articleText h4{border-left:3px solid #FDD9CD;padding-left:10px;}

 

 

 

【やまぶきいろ:きいろ】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.articleText h2,.articleText h3, .articleText h4{border-left:3px solid #F8B500;padding-left:10px;}

 

 

 

 

【きみどりいろ】

 

大見出し h2

 

大見出し h3

 

大見出し h4

 

.articleText h2,.articleText h3, .articleText h4{border-left:3px solid #4DAC26;padding-left:10px;}

 


 

 

これで一先ず
PC用見出しデザインは完了でしょうかね。。

 

実はもう一つ

どうしても気になる事があるのですが。。

 

それは次の時に。。

 

因みに今回の記事で
見出しの例えで使ったスクリーンショット画像の

詳細内容記事はこちらです。!!

 


ではまた。
Smilefactoryten
代表 加藤敦志 でした。

 

 

 

【加藤敦志のホームページはこちら↓】