【はてなブログ】テーマを「マテリアルぽっぷ」に変更してみました

記事内に広告を含みます

はてなブログのテーマをマテリアルぽっぷに変更

今まで使っていたテーマの「CONTENS」もとても使いやすかったんです。

グローバルメニューとか対話形式、カエレバ・ヨメレバも適用済みだったり細かいCSSカスタマイズもあってとてもありがたかったのですが、

流行りのカード型レイアウトにしてみたくなったんです。(*´・∀<)

カード型レイアウトの「マテリアルぽっぷ」

はてなブログのテーマにはカード型レイアウトのものがいくつかあります。

ちなみにこちらのブログでオススメのカード型レイアウトのテーマが紹介されてます。

まぁこれを見て、よし「カード型に変えよう!」と思った部分もあります。

blog.minimal-green.com

 

ZENO-TEAL」がすごくいいなと思ったのですが、全記事に「続きを読む」の設定が必須なんですよね……

絶対に設定を忘れる自信があるので……

「続きを読む」の設定が必要のないものから選びます。

 

で、「マテリアルぽっぷ」か「UnderShirt」かで悩んだのですが、

「UnderShirt」のシンプル・スタイリッシュなデザインより、ポップな感じの「マテリアルぽっぷ」の方が合うかなぁと「マテリアルぽっぷ」のテーマを導入させてもらいました。

テーマを変更する時は「デザインCSS」をバックアップしておく

はてなブログのテーマを変更すると、「デザインCSS」に入れていたものがバッサリと消えてしまいます。

そうなるととっても悲しいのでテーマ変更の前に必ずバックアップはとっておこうね。

まぁ「CONTENS」がほんと、痒い所に手が届くくらい色んな部分がすでにCSS適用されてたので、たいしてバックアップ取るまでもなかったんだけど。

インストールしたらデモブログの解説記事を確認

マテリアルぽっぷ」をインストールしたら気になる箇所をカスタマイズして行きます。

あと記事を一覧形式にしてる場合は「サムネイル」の設定が必須です。

他にもパンくずの設定をオンにしておきましょう。

このあたりの設定は「マテリアルぽっぷ」のデモサイトに載っているので必ず確認しよう。

demo-mamegoro.hatenablog.com

パソコン版の記事一覧表示を3カラムから2カラムに変更

「マテリアルぽっぷ」をインストールしただけだと、デフォルトではTOPページの記事一覧表示が3カラムになっています。

そしてプロフィールや最新記事などのサイドメニューは記事一覧の下に表示される形になっています。

これを記事一覧2カラム+サイドバーの、要するにサイドバーありの3カラム表示に変更することもできます。

そのやり方もこちらの記事で紹介されてます。

CSSのコピペ一発で完了です。簡単。

demo-mamegoro.hatenablog.com

ヘッダーエリアとグローバルメニューのカスタマイズ

「マテリアルぽっぷ」のデモサイトを見ると、左上にツイッターなどのアイコンが表示されてます。

この辺の表示の設定と、ヘッダー下のグローバルメニューなどのカスタマイズ方法はこちらの記事を参考にちまちまと設定しました。

demo-mamegoro.hatenablog.com

せっかくなのでこの機会にちゃんとグローバルメニューを設定しようかなと。

あまりに記事が取り止めなさすぎてメニュー項目に悩んでますが……

TOPの一覧表示のサムネイルを設定

TOPページに表示される記事一覧のサムネイルが、デフォルトのままだと正方形にカットされてしまい、あまり見た目がキレイじゃありません。

そこでこちらの記事で紹介されているコードを使うといい感じになります。

ちょっとした修正は必要です。

www.imuza.com

カエレバ・ヨメレバの設定

カエレバ・ヨメレバはCSSを設定してあげないとデフォルトのままの表示になってしまいます。

それだとちょっとやっぱり、わかりにくいし見た目もあれなんでCSSで整えてあげましょう。

demo-mamegoro.hatenablog.com

www.tsubasa-note.blog

www.ituore.com

www.yukihy.com

 

このあたりの記事がほんとにとっても参考になります。

いやほんとありがたいです。

 

つばさのーと」さんがカエレバ・ヨメレバのCSSジェネレーターを作成されてます。

めっちゃ便利です。すごい。

www.tsubasa-note.blog

おいおい細々カスタムしていきます

このあたりまで設定してチカラ尽きました……

早いなっヾ(- -;)

 

あとは暇暇にちょっとずつカスタマイズしていきます。

表示崩れとかないかの確認がてら過去記事も見直そうかな。

 

まずはヘッダーの画像を作るぞ٩( ᐛ )و

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA