文字だけで本当に読まれると思ってる？情報は装飾でキレイに見せよう！

Rin

ブログを見やすくするためには装飾は欠かせません。というのも、文字だけのブログはほぼ読まれません。

私のブログ（節約図鑑）では、情報を整理するために独自にカスタマイズしたCSSを活用しています。

この装飾を利用するだけで、実はブログでの滞在時間はかなり伸びるんです。

こちらは節約図鑑のGoogleアナリティクスのデータ(2019/08/25-2019/08/31)です。滞在時間は結構長いことがわかりますよね。

こちらのnoteでは、節約図鑑で利用している装飾の一例を紹介しています。また、有料パートとして「オーダーメイドでのブログ装飾作成」の申し込み方法を記載しています。

これを読んでおけば、HTML・CSSによる装飾だけで情報をかなり整理できることがわかります。また、それによりブログの滞在時間の大幅な改善が可能です。

さらに有料パートでは、装飾の製作を丸投げをすることもできます。

節約図鑑で実装している装飾を紹介

クレジットカード紹介用のテーブルです。一目見てカードの情報がわかるようになっています。応用方法として、商品情報をまとめたいときなどに活用できると思います。

タイトル付きボックスです。シンプルで汎用性が高いので、どんな分野でも活用できると思います。

サービスまとめ表です。あるジャンルで記事を書いていて、各会社・商品の情報を一括で表示させたいときなどに役に立つと思います。


ここで紹介したものはほんの一例ですが、このように装飾を工夫することで煩雑になりがちな情報も見やすく整理することができます。

文字・文章だけでなく、ここで紹介したような表やボックスが使えるようになるとブログを書くのがもっと楽しくなるはずです。

CSSを編集する前にやっておくべき「子テーマのインストール」

親テーマのCSSに直接変更を加えると、テーマのアップデートをしたときにせっかく編集したCSSが変更されてしまいます。そのため、独自CSSを書き加えたいときは子テーマをダウンロード・アップロードしておきましょう。

子テーマの追加方法はテーマによって異なるので、詳細は各テーマの公式ページで確認してみてください。メジャーなテーマの公式リンクを掲載しておきます。

Cocoon子テーマ
JIN子テーマ
SANGO子テーマ
STORK子テーマ

有料note購入特典としてオリジナルのブログ装飾をお作りします

このnoteでは有料パートとして、あなただけのブログ装飾を1つオーダーメイドできる権利を販売しています。

こんなデザイン実装したいけどCSSとかHTMLはよくわからない…
あのサイトのあのデザインが素敵だからうちでも使いたい…！
自分好みにカスタマイズできないとモチベーションが…
ブログカスタマイズもしたいけど、それよりも記事を書くのに専念したい
自分で調べてやってみたけどうまくできなかった…

このような方におすすめです。

有料noteでのオリジナル装飾実装までの流れ

1. 有料パートで申し込み方法を記載しています。(TwitterまたはLINEアカウントが必要です)
2. デザインイメージをお伝えください。
3. 何度かやりとりしながら調整して1週間以内を目安に実装を完了します。

【注意】
私はデザイナーではないので、カラーやデザインはご指定ください。また、HTML・CSSのみで実装できないものには対応できません。

スムーズなやり取りのために、48時間以内の返信をお願いします。48時間以内に返信をいただけない場合、やり取りを終了させていただきます。

アフターサポートについて

スムーズにワードプレス内で装飾を実装できるところまでサポートします。装飾を追加してもらったはいいけど、自分で実装できなくて困った…ということにはなりませんのでご安心ください。

※プラグイン等のアップデートによる不具合には対応できませんのでご了承ください。

【最後に】このnote作成に至った経緯

このツイートにいくつか反応をいただけたため、今回のnote作成に至りました。

いまはデフォルトのままでも十分おしゃれなテーマがたくさんあるので、必ずしも必要ではないと思います。

ただ、逆に一般化しすぎているためにオリジナリティを出すのも難しくなっています。私のnoteを通じて、1人でも楽しくブログを続けられる人を増やせたら嬉しいです。

ここから先は

443字

¥ 1,000

この記事が気に入ったらサポートをしてみませんか？