どうも。ブログカスタマイズがうまくいってルンルン気分の噂のササキです。
ブログのカスタマイズがうまくいって最高におしゃれになったそれなりにおしゃれになったってことで、私がカスタマイズするのに参考にしたサイトたち+αを紹介したいと思います。
+αってなんだ?って思うかもしれませんが+αには私の長い長い自慢話が入ります。みなさんにはたんまりと聞いてもらいます。覚悟してください。
はい。冗談です。「私の使っているテーマは〇〇だ!いえい!」とかそういう感じのが入ります。
カスタマイズ後のデザイン
PC画面
スマホ画面
とりあえずカスタマイズ後(現在のデザイン)はこんな感じ。本当はbefore&afterみたいな感じでかっこよくやりたかったんですけど、記事にすることなんか考えずにどんどんカスタマイズした結果元に戻すのがすごくめんどくさくなったのでこれだけです。
ササキの頭のなか
「ちょっとまて。今回グダグダすぎないか?まあいいか。」
カスタマイズをしたのはスマホ画面が多く、PC画面はテンプレにヘッダー画像加えてちょっとカスタマイズした感じなので今回紹介するのはスマホメインになります。
それでは紹介行きましょう!
<PC編> カスタマイズ
使用したテーマ
「Brooklyn」
<採用した理由>
白黒基調のデザインがかっこよくて好みだったから。CSSが最初から記述されているから楽。レスポンシブデザインだったから。
このテーマ使っているひとといえばこの方。
あきばはらさんこのテーマものすごく使いこなしているんですよね。私はせっかくレスポンシブなんだからスマホでもこのテーマでいこうと思ってやってみたんですがまとまりのない見てて具合悪くなるデザインになってしまいました。しかし、あきばはらさんのブログはPCでもスマホでもすごくすっきりしています。ぜひ見てみてください。
読者ボタン・SNSフォローボタン等
これらはテーマの作者さんが公開しているものをそのまま使わせて頂きました。
このサイトでできること一覧 ※「Brooklyn」を使用したときしか使えません。
グローバルナビの設置
グローバルナビの設置(一般ユーザー向け)
グローバルナビの設置(はてなPro向け)
シェアボタンの設置
モノトーンのシェアボタン
カラフルなシェアボタン
読者登録ボタンの設置
ブラックの読者登録ボタン
レッドの読者登録ボタン
WEBフォントの設定
このテーマについて
PCはこれにタイトルをヘッダー画像に置き換えただけ!このサイトだけですべて済んじゃいましたw
ちなみにタイトルをヘッダー画像に置き換える方法はこちらを参考に。
<スマホ編> カスタマイズ
使用したテーマ
デフォルト。というかレスポンシブデザイン以外はデフォルトしか使えなかった気がします。こちらもヘッダー画像を加えました。
トップページの記事一覧
日付部分をおしゃれにしサムネイルは縁取りしました。
参考したサイトはこちら。このサイトは本当に使えるカスタマイズばかりを紹介してくれています。
ヘッダー画像下のメニューバー
これです。これ。
どんな項目を追加しようかと悩みに悩んだ結果「涙を拭けよ」さんのが一番いいなってなって全く同じにしました。ハイ。パクリました。すみません!
SNSフォローボタン
そうそうこの丸いおしゃれなやつ。いいですよね。実はね!これもね!「涙を拭けよ」さんと同じww ほんとすみませんw
参考にしたサイトはこちら。
見出し
見出しはこんな感じで中見出しと小見出しでデザインを分けました。何もカスタマイズしてないものとくらべると圧倒的に見やすくなります!
SNSシェアボタン
見て分かるんと思うんですが、どうやってもなぜかGoogle+とPocketのアイコンが表示されないんですよね。解決方法が分かる方はコメントお願いします。
<追記>
おかげ様で解決しました。参考サイトの「まずやること」をやっていなかった事が原因でしたw
参考にしたサイトはこちら。
フッターのはてな関連のリンクを消す
自分のブログに関係ないこのリンクを消しちゃいます。
参考サイトはこちら!
これで終わり!!
最後に
まとめてみて思ったこと。
カスタマイズというかこれただのコピペの乱用じゃねえかwww
まあ初心者にも簡単にできるってことですw
サイトのデザインってPV数上げたり読者増やしたりするのにすごく重要だとおもうんですよね。
初心者の方やデザイン変えたいなと思っている方は是非にしてみてください!
それではまた次回!