【NEW!】初心者にピッタリ! たった60分で出来ちゃったコピペだけのブログカスタマイズ！
「初心者がはてなブログを綺麗にカスタマイズする」方法 を紹介しちゃうよっ！
目次はこちらっ👇
本ページの改修は、CSSを利用してはてなブログデザインを改修しているよっ！
皆様の環境によって、挙動が違う可能性があるので、必ずバックアップなどを取りつつ、自己責任で試していただけると幸いですっm(_ _)m
第一章：なぜブログを改修したのかっ！
本ブログ読者様の70%がスマホで読んでくださっていると気づきましたっ！
うん
なので、この前初めてスマホ版のデザインチェックをしたのっ
うん？
死ぬほど読みにくいなって・・・。申し訳ないなって・・・。
生き返って・・・
善は急げっ！出来る限りブログを読みやすく直していくよっ！
良かった・・・
第二章：ブログを読みやすく改修するメリット
まず、第一章の補足をちょっと行うよ！
"はてなブログ標準機能"のアクセス解析でわかるのは以下の要素なんだっ！
"はてなブログ標準機能"のアクセス解析でわかること
- アクセス数
- アクセス元サイト
- アクセス先のページ
足りないンですわっ！ということで、ブログ再稼働あと、グーグルアナリティクスさんの設定を行っていて、先日ようやく設定が完了したのです。
グーグルアナリティクスでわかったこと
- デバイス：70%の方がスマホで閲覧してくださっている！
- チャネル：50%が検索、40%の方がTwitter経由！
と初めて知ったわけですっ！
いつも見てくださっている方本当にありがとうございますっ！
ん？スマホ？そういえば、記事を書く時もチェックするときもPCだったなと思ったら！とても！見にくい！なので即改修を決断しましたっ！
ブログ改修で見込まれるメリット
- リピート率の改善
- 滞在時間の改善
何より、ブログって自分の家/仕事場/宝物的な感じで書いているので、そもそもできるだけ見やすく素敵な形にしたいっ！という思いはあります。
それとは別に、"効果"として目指しているのは、リピート率の改善と滞在時間の改善です。最近の悩みとして、記事が多い時は訪問者が増える、記事が少ない時は訪問者が減る、新規訪問者は増えるがリピートしてくださる方は少ないという点があります。
スマホの方が7割と考えると納得です・・・。私なら、2度訪れることはなさそうなデザインだったと思うからです。また、ぱっと見の読みにくさは、直帰率も高めてしまうので、できるだけじっくり読んでもらえると嬉しいなあという目標もあります。
第三章：ブログを読みやすくするための3ステップ！
はてなブログのデザインを変更する方法っ！
ブログ管理画面、左サイドバーにある「デザイン」をクリックっ！
スパナマーククリックから、CSSのところにコードを入力します！
ここにデザイン変更のコードを入れると、ブログ全体に適用されます！
「最後に変更を保存する」をクリックするのをお忘れなくっ！
注意点として、元からはいっているコードは消さないようにしましょう！最悪ブログが動かなくなってしまったり、壊れたりしてしまうので、CSSは既存のコードに付け足していくようにしましょうっ！
ステップ1：はてなブログの文字サイズを変更する！
文字サイズは16.8pxに設定っ！以下をCSSに張り付けましたっ！
/* 文字サイズを大きく */
.entry-content p {font-size: 16.8px;}
@media screen and (max-width: 480px){.entry-content p {font-size: 16px;}}
こちらは、色々なサイトからピックアップして作ったので、
ちょっとキメラっぽいコードになってしまいました。
16.8pxは、そういうルールがあるというより、自分で実際に記事を読んで確認して、最適かなと思うサイズを選んだ形になります！数値のところを変更すると、文字のサイズを変更できますよっ！
ステップ2：はてなブログの行間を狭くする
(サルワカ様ご記載の方法を参考にしましたっ！)
行と行の間があまりにも広すぎるっ！以下をCSSに張り付けましたっ！
/* 行間を狭く */
.entry-content p { line-height: 1.8em; margin:0; font-size: 1em}
これ一発で、かなり見やすくなりました！！
ただ、本文の行間は変えられたけど、タイトルの行間がまだ広い！
ということでひたすら解決方法を探し・・・
(モーリーのメモ様ご記載の方法を参考にしましたっ！)
記事タイトルの行間も変更完了！以下をCSSに張り付けましたっ！
/* 記事タイトル */
.entry-title a{
line-height: 1em; /* 行の高さ */
}
ここまでで、かなり以前と比べて読んでいられるデザインに変わりました！
調べる過程で、どうしても面白そうな改修があったので、
"会話形式の導入"にもトライしてみました！
ステップ3：はてなブログで会話形式ができるようにする！
(SHIROMAG様ご記載の方法を参考にしましたっ！)
こちら、コードが人によって違うのと、方法を書いても参考サイト様の丸パクリになってしまうので、実践してみたいっ！という方は、SHIROMAG様の丁寧丁寧丁寧な解説に従えば、私と同じく30min以内に実践できちゃいます！
このような感じで！
会話できるようになっちゃうよ！
参考：フリーアイコンをお借りしていますっ！
とてもとても素敵なアイコン用画像をお借りしています！
興味のある方は、必ず作者様プロフィール欄を熟読をお願いしますm(_ _)m
この後目指しているさらなる改修っ！
(リンクは、やせっぽち寄稿文様)
トップページ固定化検討中！ ワードプレスを比較して、一番弱いなと思うのがトップページの持ち方なんだけど、変えるかどうか検討中だよっ！
おしゃれ極まる・・・という感じだけど、デメリットもありそうだから要精査なんだ！
「見出し」デザイン変更検討中！今の大見出し、中見出しも気に入っているけど、初期に仮置きで設定しているものだから、本格的に改修を検討中だよ！でもあまり色を使いすぎるのも、見にくくなっちゃうから慎重に選んでいるね！
さて、いかがでしたでしょうか？自分のサイトの読みづらさにはびっくりしましたが、これからも、できるだけ失敗したり改善したりを繰り返していこうと思います！
私は0から情報探しから始めたので、1時間とちょっとかかってしまいましたが、この情報を適用するだけなら、30分で出来ちゃうかも知れませんね！
いいね！と思った方はTwitterフォローをお願いします～！
最新情報はTwitterで共有しています(∩´∀｀)∩
(今回一番衝撃だったのはこんな素敵な絵に出会えたことかも・・・)
(あままつ様改めてありがとうございます！)
