ブログを見やすく凝っている人は、見出しをうまく使いこなしている人が多い件。

By華見団子

見出し

ブログを見やすく凝っている人は、見出しをうまく使いこなしている人が多い件。


いったい、こういう見出しはどうやってるの?と疑問に思ってググってみた。


そして、最近見出しの使い方を知りました。



上↑の見出し3種は、FC2ブログPC版テンプレート製作者による固有見出し機能
『FC2 ブログ 見出し CSS』でググっていたらたどり着きました。
見出しがテンプレートのCSSに書き込まれていたとは気が付きませんでした。
(上3つの見出しは僕のブログでは使うことはなさそうですけど・・・。)
CSSを弄り、自分のブログに合う色にする事も可能ですが、今回は見出しの色はそのままの使用しました。

一般的にネット上で配布している見出しを自分のブログUIに合う色にしてみた。


↑をベースに自分で作った見出し。

ただ、見出しはあまりやりすぎると目立つために文中が見辛くなる。
ブログ主のセンスが重要視される。

やり方は使用しているテンプレートにCSSを書き加えて、ブログを書く時にHTMLで発動

テンプレートにCSSを書き込む時に、h1~h3までを使うと、使用しているテンプレートのCSS/HTMLと競合してしまいUI自体の文字色がおかしくなり戸惑いましたが、
それを避けるためには、独自に発動条件になるCSSとHTMLを作ればいいと気がついた。

例えばこんな感じに

【元のCSS】
 ↓
h2 {
padding: .5em;
position: relative;
}
h2:after {
content: "";
width:100%;
height:4px;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(to right, #7ED1E6, rgba(255,255,255,0) 100%);
}


【CSS始まりのh1/h2/h3を独自の.thinlyに変えて】
 ↓
.thinly {
padding: .3em;
position: relative;
}
.thinly:after {
content: "";
width:100%;
height:3px;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(to right, #918674, rgba(255,255,255,0) 100%);
}
↑をテンプレートに書き込み 保存
(線の色/太さを変えてあります。)


発動させるには 記事を書く時に
<h3 class="thinly">テキスト</h3>
<>は半角で使用する 半角でブログに書くとHTMLと認識されてしまうので、この場では全角で書いてます。
テキスト←ここに文を入れる
ネット上で配布されている見出しCSSの始まり、 h1/h2/h3等を.thinlyに変え
HTMLのclassを独自の"thinly"に変更で競合しなくなりました。
(h○は文字の大きさと優先度)
『.thinlyは』一例ですので、CSSの始まり『.キーワード』と、
そのキーワードを呼び出すHTML【<h3 class="キーワード">テキスト</h3>】を同じキーワードにすれば呼び出せます。
HTML側のキーワードには『.』はいりません。
ただ、キーワードはテンプレートを構成しているCSSと被らないキーワードにした方が良いです。

見出しのHTMLは使用しているIMEに辞書登録しておけば簡単に呼び出せます。
僕の場合は『見出し』で呼び出せるように登録してます。

もっと早く見出しの使い方に気がつけばよかったです。

↑の見出しはよく見かける気がします。(色違いで)
見出しを文中にうまく取り込んでいる方のブログを見ると、見出しが自然体なので、あまり気にせず見ているかと思います。

どうやったら自分のブログが見やすくなるかと、ふと思い立ち
見やすいブログと自分のブログを比較してみて気が付きました。

見やすいブログはそれなりに、いろいろと技術的なことを盛り込んでいる方が多いのです!

画像拡大の『Lightbox』や『colorbox』 見出しをうまく使いこなしたりと、
このブログはなんだか見やすい!と感じるブログのブログ主は、他人から見られた時、いかに見やすくなるように工夫を凝らしていると気が付きました。

僕の場合、CSSやHTMLを特に学んでいたわけではなく
どうしたらこんな風に見やすく出来るんだろう??と思い、ググってみてネット上で学び
それを実践して、テンプレートの改造やこういった見出しなんかを使用しています。

やる気とググる気力があれば結構できるものです。

RIDLEYは自転車王国ベルギーのメーカー

 ⇧
ベルギーの国旗カラー風見出しなんてのも出来ます。

CSS/HTMLの英数字を見ただけで、イミワカンナイ無理~(;´Д`) と思ってしまう方

諦めたら


今後は、見出しをブログの文中にうまく取り入れてみようかと思います。
※スマホからの閲覧では見出しがうまく反映されない場合があります。
※ガラケーには対応しておりません。



スポンサーサイト



Share

Comments 0

There are no comments yet.

Leave a reply