ブログリニューアル！無料版でもできるはてなブログカスタマイズまとめ！
新野です。この度ブログをリニューアルいたしました。読者の方がより読みやすくなるように＆もっとブログに興味を持ってもらえるようにいろいろ試してみました。
リニューアルに伴ってブログ名も「土色鮮やか」から「アニおと!!見聞録~アニメと音楽の個人ブログ~」に変更させていただきました。
そもそも私がブログ始めたきっかけは、ブログの面白さが”執筆者の個人的な感想”にある、と思ったからなんですよね。2chまとめブログとかTwitterのまとめとかじゃなくて、執筆者が常に同じ価値観で書いている（まあ書いてるのが一人なので当然か）っていうのが大事だと感じているので、長いかな、とも思ったけど個人ブログというのを強調したブログ名にしました。
基本的にはこれまでと変わらず、アニメや音楽を見たり聞いたりしたものを書いていくものになります。というわけで、”見聞録”ですね。
ちなみにURLは以前と変わらず
https://azayaka-tuchiiro.hatenablog.com/
です。PROじゃないとURL変えれなかったのでそのままにしてます。
さて、今回の記事では、リニューアルの際に行ったカスタマイズと、参考にさせていただいたブログの紹介をしようと思います。特に、無料版のブログを出来る限りPROのブログと同じくらいのレベルに仕上げる、というのを目標にしました。
ちなみに現在、我がブログはこうなっています。
リニューアル前は大体こんな感じ。
結構違います。では、順番に見ていきましょう。
ブログテーマの変更
まず大きな違いとして、ブログテーマを変更しました。
実はずっと、トップページをカード型のレイアウトにするか一覧風のレイアウトのままで行くか悩んでいたんですよね。というかどちらかと言うとカード型はひと目で得られる情報が少なそうって思ってました。そんなときに、オークニさんの
このブログを拝見して、カード型の方が画像が映えそうだな～っという風に心変わりしました。得られる情報は少なくてもパッと見の印象はやっぱりカード型のほうが映えますね。
で、
リニューアル前に使っていたテーマはJOE (id:dreamark)さん制作の
になります。実はこれより前には
これを使っていたのですが、PC版はかっこいいけれどスマホ向けのレスポンシブデザインがなかったため、CONTNTSに変えた記憶があります。はてなブログは無料で貫き通したいため、無料版でもレスポンシブデザインが使えてカスタマイズしやすそうなテーマを探してたんです。
今回、カード型のブログにしたいということで相当悩みました。というのも、カード型レイアウトで最も有名なorefolder (id:c-miya)さん制作の
こちらのテーマでは、有料版のはてなブログPROに加入していないと
このようにカードにモロ広告がかぶさっちゃうんですよね。
そんな中で見つけたのがろくぜうどん（id:rokuzeudon）さんの
こちらのテーマです。現在もっぱら無料版ですがキレイにカード型レイアウトにできていると思いません？
ただ、おしゃれなテーマではありますが普通に適用させても無料版ではカード形レイアウトになってくれません。
上記のページを参考にしてブログのトップページを記事一覧表示にさせたことによって、カード型レイアウトにすることが出来ました。
あわせてブログのカラーをパステルオレンジにしてみました。
ヘッダー部のカスタマイズ
ヘッダー画像のサイズ伸縮
次に行ったのがヘッダー画像の変更です。これまでは適当に拾ってきたフリーの画像を使用していましたが、かわいいデザインにしたかったので自分で作ることにしました。
そうして出来たのがこの画像です。GIMPで適当にちゃちゃっと作りましたのでデザインが優れているとは思いませんが、可愛く出来たとは思います。
ただ、美少女日常アニメ風の４文字タイトルにギターとベースがシルエットになっている。後背景がピンクのドットっていうことでだいぶ「けいおん！」に寄ってしまいました。本当に寄せたわけではなくただ可愛くを意識してたら無意識にできていたんです。私は悪くない。
まあ近々ヘッダーを変える手立てはついているので、それまでの繋ぎってことになりますかね。
このヘッダー画像なんですけど、ブログの横幅いっぱいに表示させるのにこだわりました。リニューアル前だとタブレット表示の時にうまく表示されず画像がぼやけていたので、スマホやタブレットでもキレイに表示できるようにいろいろ調べました。そしてたどり着いたのがゴトー (id:hogehoge223) さんの
こちらの記事です。デバイスの解像度によって画像サイズを伸縮させるCSSを導入したら理想通りになりました！ゴトーさんのブログ、普通に読んでもユニークな文章で面白いですね。
ヘッダー下のおすすめ記事のカード
合わせて、おすすめ記事のカードも作りました。おすすめの記事のカードっていうのは
コレ！！のことです。
前述したZENO-TEALを使用しているブログはこぞっておすすめ記事を表示させていたのですが、ZENO-TEALではない私は出来ない…ヽ(｀Д´#)ﾉ ﾑｷｰ!!
そんなわけで探してみると、id:minimalgreenさんのブログより
こちらのエントリーが参考になりました！
記事のカスタマイズ
サブカテゴリ作り
これまでは私のブログのカテゴリーは悪く言えば適当、悪く言えば煩雑、悪く言えば見栄えが最悪でした。カテゴリをニコニコやPixivのタグみたいにいっぱい付けてたんですよね。でももう少し整理したいなと思って試行錯誤しました。
幸い、未だ記事数としては５０くらいなのでカテゴリを付け直すくらいならそんなに面倒じゃなかったです。
カテゴリの整理ということで一番最初に思いついたのは、カテゴリのツリー化です。パンくずリストを使っている方ならわかるかもしれませんが、あれをもっと細かく、階層的にしたいなと思いました。
参考になったのは池田仮名 (id:bulldra)さんの
こちらのエントリ。
各記事を編集して階層的なカテゴリを作ることが出来ました！
関連記事を記事の直下に表示
関連記事のプラグインはこれまでMilliard
Milliard関連ページをはてなブログで設定する方法 | シスウ株式会社
を使用していました。
はてなブログ無料版では記事下にプラグインを入れても、表示がこのように
本文とプラグインの間に広告が挟まってしまいます。これでは関連記事を見てもらえない…ということで
この記事の方法を応用して、記事本文の真下に関連記事を表示させることにしました！
それでしばらく使っていたんですが、どうもMilliardが爆重らしくページがちっとも表示されなくなることがありました。これはアカン。
関連記事のプラグインで一番軽いのはやっぱりはてなブログで標準で用意されてるプラグインだな、ということで標準を使うことにしました。
関連記事は普通に表示させても良かったのですが、
この方法で２列で表示させることにしました。
シェアボタンの設置
シェアボタンは記事の上と記事の下の２箇所に設置してあります。どんなデザインにしようかなーと悩んでいたのですが、
忍者ブログの「忍者おまとめボタン」を使って自由にデザインすることが出来ました。
フッター
上に戻るボタン
フッターには、上に戻るボタンを設置しました。
コレですね。
私はよくわからないのですが、あったほうが良いらしいと風のうわさで聞いたので…
フッターにはこれしかカスタマイズがありません。ブログがもっと充実してきたらサイトマップを作るかもしれませんが、現在は他にする予定もないですね。
今後の野望
いかがだったでしょうか。無料版はてなブログでどこまでできるのか、って考えるのもなかなか楽しかったです。
これからやろうと思っていることは、
・グローバルヘッダーメニューの作成
・Googleアドセンスを受ける
ことですかね。特に、グローバルヘッダーはサブカテゴリを作ったことによって階層型のヘッダーメニューが作れそうなので、直近の野望でもあります！
googleアドセンスは…どうなるかわかりませんが、可能であれば受けてみたいですね。
それではまた、よいブログライフを( ´Д｀)ﾉ~
