2015年5月27日水曜日

スタイルシートを使ってブログの中に見出しをつくる


(2015.5.27現在の情報です)
ブログを書いているときに『余白』を取りたい場合にどうするかという記事から、ネット上で生成できるスタイルシートを使えばできるよという記事を書きました。
今日はスタイルシートでよりビジュアル面にインパクトを持たせることができる、スタイルシートのジェネレーターを紹介します。

見出しをつくる その1

私の記事でも↑のように見出しをつけていますが、この装飾はスタイルシートでしています。
こういったことを簡単に実現するのが、

好きな色でCSS見出しが作れます | スタイルシート見出しメーカー というサイト

サイトにアクセスをしたら、まずサンプルカラーセットを選びます。
色のイメージが明確になっている人はサンプルを使わなくてもOK。

サンプルカラーを選んでから色を調整したほうがやりやすい

サンプルカラーセットを選んだら下のcolorにセットされます。
調整したいcolorのボックスをクリックしてから右側のカラーピッカーで色を選びます。


対応するCSSをコピー

生成された左の候補と右側のHTMLは一行ずつ対応しています。
一番上が良いと思ったら、右側<p class="menuRibbon">menuRibbon</p>をコピーして、自分のブログ記事内(HTMLが編集できる部分)に貼り付けます。
CSSから対応するものを選び、コピーします。ここでは上で選んだmenuRibbonです。

この部分をコピーして、自分のブログ記事内(HTMLが編集できる部分)に貼り付けるのですが、赤字の部分をコピーしたものの前後に付け加えてください。
<style type="text/css">
<!--
.menuRibbon {
margin:0 0 10px 0;
padding:2px 8px;
background:#029EBC;
color:#EBF7FA;
line-height:140%;
font-weight:bold;
}
-->
</style>

こんな感じになります。


見出しをつくる その2

見出しをリボンや吹き出しのようにするのはこちら

WEB道 というサイト

ジェネレーターの操作はカンタン

こちらも見出しの種類や背景や文字の色を指定するだけ。
ジェネレートボタンを押せば生成されます。
生成されたコードを先ほどと同じようにコピーすればOK。
こんな感じになります。
見出しのサンプル

ね、インパクトも出るし、文章の区切りもつくので、見やすいでしょ。

この手のインパクトを持たせるものはたくさんあるので、こんなキーワードで検索してみてください。
『CSS ジェネレーター』


ちなみに見出しには見出しのタグH1、H2、H3・・・といったタグで囲むのがいいです。
HTMLのルールにも沿っているし、SEO(検索エンジン対策)としても有効です。
この話はまた別の機会にでも。