はてなブログテーマをRougeにしてみた

f:id:ishikawayulio:20151114230803j:plain

はてなブログってWordpressのようにデザイン的に凝ることできないんじゃないかって思われがちなんだけどさ。

はてなブログをやっているブロガーで、このデザインいいなぁって思っていたはてなブロガーがいたんだよ。

あわよくば自分もそのデザインにしたいみたいなね。たまに毒を吐く (id:dokuwohaku) さんのブログなんだけどさ。

もうね、無料はてなブログでここまでデザインすることができるんだってびっくりした。

たまに毒を吐くさんの過去記事を読んだらさ。ブログデザインについて記事にしていたんだよ。

こりゃ自分もたまに毒を吐くさんのようなブログデザインにするしかないなって思いました。

はてなブログテーマは「Rouge」がおすすめらしい

dokuwohaku.hateblo.jp

難しいことは分からないんだけどさ。Rougeはレスポンシブ対応しているみたいでね。タブレットやスマホからでもいい感じに表示されるみたい。

タブレットの表示

f:id:ishikawayulio:20151114213033j:plain

iPhone5S表示

f:id:ishikawayulio:20151114213517j:plain

ということで、さっそくブログテーマをRougeに変えたんだ。

広告表示はこちらを参考にした

wedges.hatenablog.com

いざRougeにしたけどさ、ブログにアドセンスの広告を掲載しているからね。どんな感じにしたらいいのかなって思ったんだよ。

そしたらね、Rougeのブログテーマを作成されたWedges (id:wedges)さんが広告に関して記事にしていました。記事の手順にそって広告の配置をしてみたんだ。

グローバルメニューはこちらを参考にした

www.yukihy.com

グローバルメニューに関してはね、ゆきひー (id:ftmaccho) さんが記事にしていました。

グローバルメニューって何だ? って思う人もいるでしょう。グローバルメニューの画像を表示します。

パソコンからの表示

f:id:ishikawayulio:20151114215826j:plain

こんな感じで表示されるみたい。

タブレットやスマホからの表示

赤い枠MENUを押すと

f:id:ishikawayulio:20151114220235j:plain

こんな感じでメニューが開く

f:id:ishikawayulio:20151114223407j:plain

もうね、はてなブログでもこんな感じのデザインにすることができるだぞ~って叫びたい。はてなブログも進化しているんだよ。

はてなブログトップページに記事一覧表示はこちらを参考にした

dokuwohaku.hateblo.jp

こんな感じの表示をね。

f:id:ishikawayulio:20151114224502j:plain

ブログのトップページにでるようにしたんだ。ブログを読んでいるわけだからTOPページにいってもらうのが早いよね。

もうね、記事がずらーと並んでいてさ。どうぞお好きな記事を見てくださ~いみたいなね。本屋の主人になった気分になりました。

※こちらに関しては元に戻すことにしました。

ユーリオ的まとめ

今回、自分のはてなブログデザインはRougeを使うことにしたんだけどね。世の中にはまだまだたくさんのはてなブログデザインがある。

好みは人それぞれだからさ。どんなはてなブログのデザインを使おうといいんだよ。

ただね、デザインに凝ってみたいけどやり方が分からないのならさ。Rougeにしてみるのもありかもしれない。

自分が記事中に紹介した記事は分かりやすくてね。手順にそってコピーペーストさえできればできることだからさ。

どうせなら自分がいいなぁと思うはてなブログのデザインでブログやるのもいいじゃないかな。それではブログデザインの参考にしてもらえれば幸いです。

※現在、こちらのブログテーマは使っていません。