とうふday

テーマ「Codomisu-Flat」導入!ブログレイアウト大きく変更しました!


SPONSORED LINK
人気記事セレクション ☆︎

どうもーぬつですー

しばらくほったらかしだったPC表示のブログレイアウトを大きく変更しました

 

f:id:nututenpura:20171201134242p:plain

 

こんな感じに変更

このブログのアクセスは7割くらいがスマホなのでPCサイトはシンプルなデザインにしました

 

きっかけはコチラの記事

 

久しぶりにブログデザインを大きく変更したので、協力していただいた人達をご紹介します - 力こそパワー

 

最近スプラトゥーン2でご一緒させてもらうことが多いうぃるさんの記事を見て、

「このデザインまさに求めてたものやんけ!」

ということで秒で導入を決断(・∀・)

 

今回は参考にさせていただきましたサイト様を紹介させていただきます

 

 

テーマを変更しました

 

最近はてなブログ界隈でも導入する人が増えているテーマ「Codomisu-Flatを導入しました

ページ全体の幅が広いのと、メニューを上にしてシンプルな作りにしたかったのでまさに理想的なテーマです

ちなみにスマホサイトもこのテーマを作成されたこどみすさんのものを使用させてもらってます

 

 

これらのカスタマイズを無料で配布してくれるなんて神としか思えない

普通にお金出してでもほしいレベル

 

メニューはグローバルメニューにしたかったので以前と同じものを使用

ゆきひーさんのメニューをそのまま流用させていただきました

 

 

フォローボタンを変更しました

最近一眼で撮った写真を載せるためにインスタグラムを始めたので

インスタのフォローボタンを載せました

 


こちらの記事を参考にさせていただきました

ボタンって動くとついつい目がいってしまうと思うので動きがあるといいですね

 

サイドメニューのタブ化

f:id:nututenpura:20171201134748p:plain

 

jQueryを使ったタイプだとうまくタブにならなかったので使わないでも実装できるタイプを使用

こちらの記事を参考にさせていただきました

 

 

ちなみにタブ化して関連記事などを一番下にして固定化する場合は

間に空白のHTMLモジュールを1つ入れてやるとうまいこと反映されます

 

サイドバーの固定についてはコチラの記事をどうぞ

 


記事一覧をちょっと浮き出る仕様にしました

f:id:nututenpura:20171201134242p:plain

 

トップ画面を見てもらうと、記事のまわりのふちに影がついて微妙に浮き出ています

これもちょっと立体的だとおしゃれだなーということで導入(

 

こちらの記事を参考にさせていただきました

 

 

 まとめ

先人の知恵はやはり偉大です

自分にはできないことをさらっとやっていて、かつそれを無償で紹介してくれているのだから

 

今回のカスタマイズは上記で紹介させていただいた記事を基に自分でやりましたが

ど素人の割にはかなりうまくできたかなと満足しています

 

参考にさせていただいたすべての方に感謝を!

 

ぬつ