読者です 読者をやめる 読者になる 読者になる

なまけものの全力

なまけものが頑張ってみるブログ。DIYが好き。空き家を改修して、愉快なコミュニティーを創りたい。

初心者向け!わたしが使った、はてなブログのカスタマイズまとめ(PC版)

 

はてなブログのデザインに困ってて、なかなか書くことに集中できない人へ。

わたしがやったカスタマイズを一挙に紹介していきます。

よろしければ、ぜひ参考にして下さい。

f:id:hinokichi:20170317152830j:plain

 

ブログを見やすくすれば、多く記事を読んでもらえたり、拡散してもらえるようになります。

「カスタマイズの方法が分からないです。」って人でも、web制作できる方々分かりやすく説明しているので、マネするだけで大丈夫です。

とは言っても最初は大変なので、少しずつカスタマイズするのをおススメします。

ブログデザインを完璧に仕上げようとしたら、キリがないのでほどほどに!

ぼくが使ってるテーマは【Booklyn】です。ぜひ参考に。

 

 

Lv.1 初心者で何からすればいいのか分からない人向け

まずはグローバルメニュー設置

 グローバルメニューってのはこれのことです!


f:id:hinokichi:20170317160823j:image

 

参考にした記事を紹介

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE

わたしが使っているテーマBrooklynの創設者のカスタマイズ方法です。

同じ人が作ってるから互換性が良いと思って、コレにしました。

もちろん、他グローバルメニューでも大丈夫ですけどね。

 

メニューはプロフィールとか、ポートフォリオとか、読んでもらいたい記事とか、とにかく見てほしいところに設定するのがおススメです。

 

Lv.2 慣れてきたから工夫してみたい人向け

 シェアボタンをつけて、シェアしてもらおう

せっかく書いたブログなんだから、みんなに見てもらいたい。

SNSで気軽にシェアできるように、シェアボタンを設置しましょう。

 

参考にした記事紹介

【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life

拡散してもらうことが目的なので、まずはベーシックで実績のあるものでいいでしょう。

紹介したブログのyukihyさんは、はてなブログのweb制作の記事が分かりやすいので、おススメです。

 

ぜひ、このブログもシェアしてくれると嬉しいです!!

 

フォローボタンをつけて、フォローしてもらおう

定期購読してもらうなら、友達になるのがベストです。友達いっぱいたら、単純に嬉しいですしね。

参考にした記事紹介

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life

 コピペOK!読者になるボタンやSNSフォローボタンのカスタムCSS - 急がば 急いでまわれ!

ボタンは貼りたい場所や好みによって、変わってきます。わたしが2種類使っていますので、2つ紹介してみました。

 

Lv.3 だいぶ理解したからこだわりたい人向け

見出しデザインのカスタマイズ

ここらへんまで来ると、デザインにもこだわりたいという人が出てくると思います。

まずは簡単に見出しのデザインを変えて、色をいじったりしてみてはどうでしょうか。

 

参考にした記事紹介

コピペで簡単!CSSではてなブログの見出しをカスタマイズ! - NO TITLE

はてなブログを簡単カスタマイズ!②見出しのデザイン変更編 - 無題で行こう

 

Blooklynのカスタマイズ

Blooklynのベースの色は黒になってます。自分の好きな色に変えたい人はぜひやってみてください。好みの問題なので、黒で大丈夫であればスルーでしてください。

 

参考にした記事紹介

はてなブログテンプレート【Brooklyn】のカスタマイズ集 - Style 21世紀×Deaf×INFP

 いままでコピペでしたが、cssをいじる入り口に来ました。まずは簡単なところから、少しずつデザインをカスタマイズをしてみてはどうでしょう。

 

最初にも伝えたけど、のめり込み注意ですよ!ぼくはだいぶ、のめり込んだりしちゃってますけど。

 

Lv.4 ある程度のコード読めますって人向け

コードが徐々に読めようになってきたら、ここまでできていたら、大半のことはググればできるようになってます。

少しずつ自分好みにカスタマイズしていきましょう。

 フキダシをつくってみる

フキダシがあると、見ている人が一休みできるので、おススメします。

会話の文章もかけて、読者に伝わりやすいのもいいところですね。

 

参考にした記事紹介

吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - NO TITLE

 あとは、色変えたり、サイズ変えたりちょっとした微調整で大丈夫です。

 

Lv.5 あっ、わたし全て網羅してるんでって人向け

もうきみに教えることはない。逆におしえてくださいお願いします。

 

まとめ

もっと、ブログをおしゃれにしたい。プログラミングをやってみたい。

わたしのおススメの教科書のせておきますので、よかったらどうぞ。

この1冊読破すれば、もう心配なし。

 

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

 

 

f:id:hinokichi:20170317181818j:plain