【コピペOK！】記事をリッチに見せるパーツを作ってみたのでシェアします

こんにちは。Cocoonいじりが止まらないLeoです。

ってことで、今日の話題はCSSで作った、

記事を読みやすくする？

そういうパーツの話です！

文章をより豊かに、読みやすくする工夫は必要

ボクが今Cocoonで使っている見出しについてはこちらの記事でまとめてありますが、デフォルトで使う人よりCSSを書いて好みのデザインにする人の方が多い気がします。

そうです、コード的には「H1」とか「H2」で書かれる見出しは基本的に文章を読みやすくするための装飾です。

ボクは各段落前に置くH2タグは結構大きく取っていますが、

多くのブログで囲ったり、文字を大きくしたりしてメリハリをつけています。

その後、H3、H4タグくらいまでは使うと思いますが、

SEO的には順番は守るべきだとか、使う量についても気にしろとかいろいろ言われています。

が、

これ以外にも文章を見やすくしたり、

リッチにしたりするためにブロガーは工夫をこらします。

写真やイラストをぶち込ものもひとつやし、ボクが最近気に入って使っている吹き出しのやつ↓

せっかくブログに来てもらったのですから、より読みやすく、そして内容が頭に入るような書き方、構成、見せ方は工夫したいものです。

CSSをぶち込むだけ！見出し風の挿入パーツ4つ

ってことで今回新たにパーツを作ってみたわけですが、

工夫次第でいくらでも増産できるやつなのでご自身の書くスタイルとか、好みに合わせてカスタマイズしてお使いください！

作ってみた4つのパーツ

はい！こんなやつです。

実はボクはH4タグが一番上のと同じデザインで使っているため、記事の途中で同じような表記を入れたいときにはH4たぐを使っていたのですが、

SEO的には最善ではないという話もあるので、今後はこれを使っていこうと思います。

🌟さらに6種類追加したったった！

使い方

使い方はそれぞれかもですが、例えば、

的に文中に入れると良くないかな？と。

文字列の前に来るアイコンは、Fontawesomeを使っているので、自分で変えてカスタマイズ可能です。もちろん色も。

コード

.p-check{
	position:relative;
	display: block;
	padding: 0;
	margin: 26px 10px -4px 24px !important;
	color: #192a56;
	font-size: 20px;
	font-weight: 500;
}
.p-check:before{
	font-family:"FontAwesome";
	content:"\f00c";
	color: #00cec9;
	font-size: 20px;
	position: absolute;	
	top: 0px;
	left: -24px;
}
.p-check:after{
	display: block;
	content: '';
	position: absolute;
	top: 8px;
	left: -20px;
	width: 6px;
	height: 6px;
}

「.p-check」の部分は好きな名前に変えて下さい。

なお、↑これは、

そして、

<div class="p-check">ここに文字</div>

プラグインの「AddQuicktag」に登録するといつでもサクッと引っ張り出せるのでオススメですよ！

まとめ

以上、今回はサクッと紹介しました！

Cocoonで「こういうことできたら」と思っている方の役に立つ情報なら幸いです！

今度改めて書こうと思いますが、ライオンの言う通りカスタマイズをずっとやってたり、こうしてカスタマイズしないと思い通りの記事構成が作れないなら、

いっそさっさと有料テーマを買うべきだと言う考えに近づいています。

ボクは国内で売られるテーマとしては「THE THOR」と「AFFINGER5（WING）」いう有料テーマだけ使ったことがありますが、有名どころとして、

• SANGO
• JIN
• AFFINGER5

の3つが気になっています。

それぞれ10,000円〜15,000円くらいしますがどれか買ってみようかな〜と画策中です。