はてなブログのデザインに困ってて、なかなか書くことに集中できない人へ。
わたしがやったカスタマイズを一挙に紹介していきます。
よろしければ、ぜひ参考にして下さい。
ブログを見やすくすれば、多く記事を読んでもらえたり、拡散してもらえるようになります。
「カスタマイズの方法が分からないです。」って人でも、web制作できる方々分かりやすく説明しているので、マネするだけで大丈夫です。
とは言っても最初は大変なので、少しずつカスタマイズするのをおススメします。
ブログデザインを完璧に仕上げようとしたら、キリがないのでほどほどに！
ぼくが使ってるテーマは【Booklyn】です。ぜひ参考に。
- Lv.1 初心者で何からすればいいのか分からない人向け
- Lv.2 慣れてきたから工夫してみたい人向け
- Lv.3 だいぶ理解したからこだわりたい人向け
- Lv.4 ある程度のコード読めますって人向け
- Lv.5 あっ、わたし全て網羅してるんでって人向け
Lv.1 初心者で何からすればいいのか分からない人向け
まずはグローバルメニュー設置
グローバルメニューってのはこれのことです！
参考にした記事を紹介
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE
わたしが使っているテーマBrooklynの創設者のカスタマイズ方法です。
同じ人が作ってるから互換性が良いと思って、コレにしました。
もちろん、他グローバルメニューでも大丈夫ですけどね。
メニューはプロフィールとか、ポートフォリオとか、読んでもらいたい記事とか、とにかく見てほしいところに設定するのがおススメです。
Lv.2 慣れてきたから工夫してみたい人向け
シェアボタンをつけて、シェアしてもらおう
せっかく書いたブログなんだから、みんなに見てもらいたい。
SNSで気軽にシェアできるように、シェアボタンを設置しましょう。
参考にした記事紹介
【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life
拡散してもらうことが目的なので、まずはベーシックで実績のあるものでいいでしょう。
紹介したブログのyukihyさんは、はてなブログのweb制作の記事が分かりやすいので、おススメです。
ぜひ、このブログもシェアしてくれると嬉しいです！！
フォローボタンをつけて、フォローしてもらおう
定期購読してもらうなら、友達になるのがベストです。友達いっぱいたら、単純に嬉しいですしね。
参考にした記事紹介
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
コピペOK！読者になるボタンやSNSフォローボタンのカスタムCSS - 急がば 急いでまわれ！
ボタンは貼りたい場所や好みによって、変わってきます。わたしが2種類使っていますので、２つ紹介してみました。
Lv.3 だいぶ理解したからこだわりたい人向け
見出しデザインのカスタマイズ
ここらへんまで来ると、デザインにもこだわりたいという人が出てくると思います。
まずは簡単に見出しのデザインを変えて、色をいじったりしてみてはどうでしょうか。
参考にした記事紹介
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ - NO TITLE
はてなブログを簡単カスタマイズ！②見出しのデザイン変更編 - 無題で行こう
Blooklynのカスタマイズ
Blooklynのベースの色は黒になってます。自分の好きな色に変えたい人はぜひやってみてください。好みの問題なので、黒で大丈夫であればスルーでしてください。
参考にした記事紹介
はてなブログテンプレート【Brooklyn】のカスタマイズ集 - Style 21世紀×Deaf×INFP
いままでコピペでしたが、cssをいじる入り口に来ました。まずは簡単なところから、少しずつデザインをカスタマイズをしてみてはどうでしょう。
最初にも伝えたけど、のめり込み注意ですよ！ぼくはだいぶ、のめり込んだりしちゃってますけど。
Lv.4 ある程度のコード読めますって人向け
コードが徐々に読めようになってきたら、ここまでできていたら、大半のことはググればできるようになってます。
少しずつ自分好みにカスタマイズしていきましょう。
フキダシをつくってみる
フキダシがあると、見ている人が一休みできるので、おススメします。
会話の文章もかけて、読者に伝わりやすいのもいいところですね。
参考にした記事紹介
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - NO TITLE
あとは、色変えたり、サイズ変えたりちょっとした微調整で大丈夫です。
Lv.5 あっ、わたし全て網羅してるんでって人向け
もうきみに教えることはない。逆におしえてくださいお願いします。
まとめ
- Lv.1 初心者で何からすればいいのか分からない人向け
- Lv.2 慣れてきたから工夫してみたい人向け
- Lv.3 だいぶ理解したからこだわりたい人向け
- Lv.4 ある程度のコード読めますって人向け
- Lv.5 あっ、わたし全て網羅してるんでって人向け
もっと、ブログをおしゃれにしたい。プログラミングをやってみたい。
わたしのおススメの教科書のせておきますので、よかったらどうぞ。
この1冊読破すれば、もう心配なし。
