こんにちは。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;
}このコードをstyle.cssにぶち込んでいただければOK。
「.p-check」の部分は好きな名前に変えて下さい。
なお、↑これは、
なるほどわかりやすい
そして、
<div class="p-check">ここに文字</div>これが本文にぶち込むタグです。
プラグインの「AddQuicktag」に登録するといつでもサクッと引っ張り出せるのでオススメですよ！
まとめ
以上、今回はサクッと紹介しました！
Cocoonで「こういうことできたら」と思っている方の役に立つ情報なら幸いです！
今度改めて書こうと思いますが、ライオンの言う通りカスタマイズをずっとやってたり、こうしてカスタマイズしないと思い通りの記事構成が作れないなら、
いっそさっさと有料テーマを買うべきだと言う考えに近づいています。
ボクは国内で売られるテーマとしては「THE THOR」と「AFFINGER5（WING）」いう有料テーマだけ使ったことがありますが、有名どころとして、
- SANGO
- JIN
- AFFINGER5
の3つが気になっています。
それぞれ10,000円〜15,000円くらいしますがどれか買ってみようかな〜と画策中です。
