テラのゲーム日記

テラのゲーム日記

ゲームの攻略やニュースをお届け!YouTubeやブログ運営、ITなど雑多に書いていきます

Game
YouTube
Blog
IT

はてなブログのデザインを一新した際に役立った記事をまとめてみた

はてなブログを一新しました

お久しぶりです、テラです。

「テラのゲーム日記」を始めたのが2016年の9月頃でした。最初に決めたデザインのまま、ブログを続けてきました。ですが、最近になって、

ブログでもっと色んな記事を書きたい...!

と思うようになったのです。 

そこで、重い腰を上げてブログのデザインを大きく変更することにしました。

まずはPC版のデザインを変更する

テーマを選択する

はてなブログには様々なブログテーマがあるので、自分のブログに合わせてテーマを選びます。はてなブログのテーマストアなんかを見てみるとよいでしょう。

テーマ ストア - はてなブログ

 

 

テラは「DUDE」というテーマにしました。なお、PC版とスマホ版のレイアウトを変えたかったため、今回はレスポンシブデザインは使用しません。

f:id:tera757:20180706221300p:plain

初めからデザインが素晴らしく、人気の高いテーマです。インストールしたら、これをより自分好みにカスタマイズしていきましょう。

 

カスタマイズ方法については以下の記事を参考にしました。

コピペで始めるはてなブログテーマDUDEのカスタマイズ集!フォント・色から自分らしく – F Lab.

 

これにより、ヘッダー画像を差し替えたり、左上に表示するブログ名とブログの簡単な説明文などを変更することができました。

ちなみに、ヘッダー画像はネットから拾ってきたイケてるフリー素材を拝借し、それを加工して作成しました。

 

 グローバルナビ(メニュー)を設置する

f:id:tera757:20180707113006p:plain

webサイトと言ったら、こんな感じのメニューがよく見られますよね。グローバルナビゲーションというもので、これがあるだけでサイトがどのような情報を発信しているのか見やすくなります。

テラのサイトでも導入しました。参考にしたサイトは以下の通りです。

 

トグルメニューを組み合わせて階層化!

グローバルナビにカーソルを合わせると、その下の階層が展開するようにしたい...

カテゴリが多い方にはうってつけだと思います。このやり方は以下の記事を参考にしました。

 

サイドバーを整える

お次はサイドバーを整えました。サイドバーに何を置くかは、ダッシュボードの>デザイン>カスタマイズ>サイドバー からできます。

そこで何を置くか、順番はどうするかを決めていきます。

 

また、その時にカテゴリーを設置しようと思ったのですが、テラのサイトはカテゴリーがかなりの数あります。

(例)「Game」「Game-Nintendo Switch」「Game-Nintendo Switch-ゼルダの伝説」

 のように親カテゴリーがあって、ハイフンで子カテゴリーを作ったりもしています。このカテゴリーが全部表示されると非常に見にくいので、これも階層化したものを設置しました。

f:id:tera757:20180707113340p:plain

このやり方については、以下の記事を参考にしました。

スマホ版のデザインを変更する

PC版では色々なサイトにお世話になってカスタマイズしていきました。ですが、スマホ版ではある1つのサイトにとてもお世話になりました。

このサイトはすごい!おしゃれにすっきりとカスタマイズすることができました。

テラのゲーム日記をスマホで見ている方はわかるかと思いますが、レイアウトは全部このサイトを参考にしています。

 

カスタマイズした部分を列挙すると...

ブログタイトル(テキストに見せかけた画像)、グローバルナビ(FontAwesomeの可愛いアイコンを使用)、トグルメニュー、おすすめラベル(チャンネル登録してね!の部分)、スライダー(画像が切り替わる部分)、フォローボタン 

こんな感じでスマホのデザインをカスタマイズしました!

 

PC版/スマホ版で使えるちょっとしたデザインに凝る 

f:id:tera757:20180707115900p:plain

この記事にも導入している吹き出し形式の文章。キャラ同士が会話することで内容がすっと入ってきやすかったり、自分の想いを表現するのには良いなぁと思い導入しました。

最初導入した際に、上手く表示されなかったのですが、既存のCSSよりも上にコードを記載することで、優先的にコードが反映されました。

導入自体は簡単なので、ぜひやってみてください!

 

ブログのデザインを一新してみて思ったこと

やっぱ楽しい!

ブログというペットを自分の手で育ててるみたいで楽しかったです。気づいたら4時間経ってた...ということもしばしばありました。

カスタマイズすることでSEOにも効果があるんだとか...?SEOに関してはそこまで詳しくないので、これからもっと学んでいきたいと思います。

また、せっかくブログを整えたので、これからはもっと更新頻度を高めて色んな情報を発信していきたいと思います!

 

この記事が誰かのブログカスタマイズの役に立てば幸いです。何かありましたら、コメントいただあけると分かる範囲でお答えします。