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

プログラマノススメ

学生プログラマー(見習い)やってます。ちょっとしたネタからプログラミングまで幅広いジャンルの記事を投稿してます。

はてなブログをカスタマイズする際に役立つサイト10選!

ブログ運営 おすすめ記事

どうも。ブログカスタマイズがうまくいってルンルン気分の噂のササキです。

 ブログのカスタマイズがうまくいって最高におしゃれになったそれなりにおしゃれになったってことで、私がカスタマイズするのに参考にしたサイトたち+αを紹介したいと思います。

+αってなんだ?って思うかもしれませんが+αには私の長い長い自慢話が入ります。みなさんにはたんまりと聞いてもらいます。覚悟してください。
はい。冗談です。「私の使っているテーマは〇〇だ!いえい!」とかそういう感じのが入ります。

【スポンサードリンク】

 

カスタマイズ後のデザイン

PC画面

f:id:kosencoder:20160304222939p:plain

スマホ画面

f:id:kosencoder:20160304224203j:plainf:id:kosencoder:20160304224200j:plain

 

 とりあえずカスタマイズ後(現在のデザイン)はこんな感じ。本当はbefore&afterみたいな感じでかっこよくやりたかったんですけど、記事にすることなんか考えずにどんどんカスタマイズした結果元に戻すのがすごくめんどくさくなったのでこれだけです。

 ササキの頭のなか
「ちょっとまて。今回グダグダすぎないか?まあいいか。」

カスタマイズをしたのはスマホ画面が多く、PC画面はテンプレにヘッダー画像加えてちょっとカスタマイズした感じなので今回紹介するのはスマホメインになります。

それでは紹介行きましょう!

<PC編> カスタマイズ 

使用したテーマ

「Brooklyn」

<採用した理由>

白黒基調のデザインがかっこよくて好みだったから。CSSが最初から記述されているから楽。レスポンシブデザインだったから。

shiromatakumi.hatenablog.com

このテーマ使っているひとといえばこの方。

enter101.hatenablog.com

あきばはらさんこのテーマものすごく使いこなしているんですよね。私はせっかくレスポンシブなんだからスマホでもこのテーマでいこうと思ってやってみたんですがまとまりのない見てて具合悪くなるデザインになってしまいました。しかし、あきばはらさんのブログはPCでもスマホでもすごくすっきりしています。ぜひ見てみてください。

 

読者ボタン・SNSフォローボタン等

f:id:kosencoder:20160304231537p:plain

これらはテーマの作者さんが公開しているものをそのまま使わせて頂きました。

shiromatakumi.hatenablog.com

 

このサイトでできること一覧 ※「Brooklyn」を使用したときしか使えません。

グローバルナビの設置
グローバルナビの設置(一般ユーザー向け)
グローバルナビの設置(はてなPro向け)
シェアボタンの設置
モノトーンのシェアボタン
カラフルなシェアボタン
読者登録ボタンの設置
ブラックの読者登録ボタン
レッドの読者登録ボタン
WEBフォントの設定
このテーマについて

PCはこれにタイトルをヘッダー画像に置き換えただけ!このサイトだけですべて済んじゃいましたw

ちなみにタイトルをヘッダー画像に置き換える方法はこちらを参考に。

to-torinos.hatenablog.com

<スマホ編> カスタマイズ

使用したテーマ

デフォルト。というかレスポンシブデザイン以外はデフォルトしか使えなかった気がします。こちらもヘッダー画像を加えました。

トップページの記事一覧

日付部分をおしゃれにしサムネイルは縁取りしました。

f:id:kosencoder:20160304233822j:plain

参考したサイトはこちら。このサイトは本当に使えるカスタマイズばかりを紹介してくれています。

tsukuruiroiro.h

 

ヘッダー画像下のメニューバー

これです。これ。

f:id:kosencoder:20160304234434j:plain

maroom.hateblo.jp

どんな項目を追加しようかと悩みに悩んだ結果「涙を拭けよ」さんのが一番いいなってなって全く同じにしました。ハイ。パクリました。すみません!

 

SNSフォローボタン

f:id:kosencoder:20160304235005j:plain

そうそうこの丸いおしゃれなやつ。いいですよね。実はね!これもね!「涙を拭けよ」さんと同じww ほんとすみませんw

参考にしたサイトはこちら。

www.yukihy.com

見出し

f:id:kosencoder:20160305021731j:plain

見出しはこんな感じで中見出しと小見出しでデザインを分けました。何もカスタマイズしてないものとくらべると圧倒的に見やすくなります!

www.yukihy.com

SNSシェアボタン

 

f:id:kosencoder:20160304235530j:plain

見て分かるんと思うんですが、どうやってもなぜかGoogle+とPocketのアイコンが表示されないんですよね。解決方法が分かる方はコメントお願いします。

<追記>

おかげ様で解決しました。参考サイトの「まずやること」をやっていなかった事が原因でしたw

参考にしたサイトはこちら。

www.ituore.com

 フッターのはてな関連のリンクを消す

f:id:kosencoder:20160305022157j:plain

自分のブログに関係ないこのリンクを消しちゃいます。

参考サイトはこちら!

moneyreport.hatenablog.com

 

 

これで終わり!!

最後に

まとめてみて思ったこと。


カスタマイズというかこれただのコピペの乱用じゃねえかwww

まあ初心者にも簡単にできるってことですw

サイトのデザインってPV数上げたり読者増やしたりするのにすごく重要だとおもうんですよね。

初心者の方やデザイン変えたいなと思っている方は是非にしてみてください!

 

 それではまた次回!