記事URLが変わりました!詳細はコチラから!

はてなブログのレイアウトをカスタマイズするために参考にした記事まとめ

はてなブログのレイアウトをカスタマイズするために参考にした記事まとめ

ぼーる丸
どうも、バーチャルブロガーのぼーる丸です。

今まで使用していたブログテーマ「Brooklyn」も悪くはなかったのですが、

もうちょいこだわってみようかな!と思い半日でレイアウトを改造しました!

実はほぼコピペなんですが、情報を集めるだけでも結構大変だったので参考になれば!

テーマ変更

テーマには「Coffee Break」を採用しました。

きっかけは下記記事なんですけど、ここまで作り込むことはできなくても

参考にできるところは参考にしてデザインをスッキリさせよう!という狙いです。

プライバシーポリシー&フッタ設置

これマジで知らなかったので「ありがてえ…」ってなったんですが、

アドセンスを導入する場合はプライバシーポリシーを設置するべきなんだそうです。

そしてプラポへのリンク用にフッタも設置!

ぼーる丸
これで安心だね!(アドセンス審査が通るとは言ってない)

(「オークニズム」さんばかりですみません…めっちゃ参考にさせていただきました。)

ヘッダメニュー設置

下記記事を参考にヘッダメニューを設置しました!

画面サイズによって表示が変わるハイテクなメニューです!

SNS共有ボタンデザイン変更

なんかはてなブログデフォルトのボタンちっこいな…これでは押しにくい!

と思ったので、押しやすそうなデザインのSNS共有ボタンに変更しました!

CSSは下記記事を参考にしたよ!

テーマデザイン自体をカスタマイズ

テーマデザイン自体を編集する画面がどこにも無くて、あれ?おかしいなーって探しまわっていたのですが、

デザインCSS内でcssファイルを参照しているみたいでした。

下記記事を見つけられなかったら未だにおろおろしていたことでしょう。

おかげで、ちょっと都合が悪い動きをするところは改変できました!

あとは下記記事で記事一覧のリンクボタンをふわっとさせる動作とか追加!

書いた人を記事下に掲載

閲覧する側にとっては、誰が記事書いてるかわかって助かる!ってなる機能

これはつけるっきゃない!というわけで下記記事を参考に導入しました!

読者&フォローボタン追加

読者ボタン、もうちょっとわかりやすいところにあった方が良いな~って思ったので

これも下記記事を参考に記事下に追加しました!

TOPページのはてなスターを非表示化

TOPページにはてなスターが表示されているとレスポンスが悪くなるみたいです!

ちょっと見た目寂しくなっちゃいますが、自分は消すことにしました!

関連記事追加

当ブログではてなブログ標準の関連記事を使うと、CSSの関係で表示がおかしくなるので

外部の関連記事で表示する方法を採用しました!

(※ただ設置したはずなんですが、表示されない…記事が少ないからかな?)

とりあえずはしばらくこのレイアウトで!

SEO対策など含め、ブログの設定をいじり倒してきましたが

大体必要な部分は実装できたかなと思います!

あんまり凝りすぎてもキリが無いし、そのうちまた変えたくなる頃が来ると思うのでこの辺で!

ではでは!