チェリーパイが焼けたわよ

さいたま市の子育て情報やグルメ情報を発信しています。

ブログテーマを「マテリアルぽっぷ」に変更【カスタマイズまとめ】

f:id:cherrypie-saitama:20190328151542j:plain

このたび、ブログテーマを「マテリアルぽっぷ」に変更しました。

 

ブログ開設から丁度1ヶ月が経ちますが、実はずっと物足りなかったデザインのこと。

記事作成を優先していたのでなかなか手が出ずに放置していましたが、デザインも大切だよねということで、ようやく重い腰を上げてテーマの変更と簡単なカスタマイズを行いました。

 

今回は、私が行ったカスタマイズを備忘録として残しておきます。

同じように「マテリアルぽっぷのカスタマイズをしたいけど少し面倒だな...」と考えているブログ初心者の方の参考になれば幸いです。

ちなみに私はCSSについてはあまり知識が無いので、ほとんどコピペのみでOKなカスタマイズしか行っていません。初心者の方でもOKです。

 

どうして「マテリアルぽっぷ」を選んだの?

f:id:cherrypie-saitama:20190328122143j:plain

「マテリアルぽっぷ」は、今流行のカード型デザインで、レスポンシブ対応のテーマです。

作者様曰く「コテコテしたデザインが好きな方にオススメ」とのことで、可愛いフォントと全体的に丸っこいデザインが特徴です。

個人的には、トップのカード型一覧表示が、タイトルの文字数に関わらず全て同じ大きさで表示されるところが好きです。タイトルが長い場合は切れてしまいますが、カードの大きさがバラバラになるよりはしっくりきます。

 

人気テーマなので、最初はテーマストアで発見しましたが、プレビューしてみると全体的に画像やフォントが大きく、窮屈な印象を受けたので、迷ったものの使うまでには至らず...

しかし後日、他の方のブログで素敵にカスタマイズされているのを拝見し、「これだ」と確信。私もカスタマイズに挑戦してみることにしました。

 

やってみたカスタマイズ一覧

カスタマイズは、基本的に作者様が作成しているデモサイトを参照して行いました。(初心者にはありがたいですね~)

以下、行ったカスタマイズ毎に参照した記事をシェアさせていただきます

 

推奨されている必須設定

適切な表示にするために必須の設定が2つあります。(パンくずリストと記事毎のサムネイル設定)

こちらは特にこだわりが無かったので、何の疑問も持たずにすぐやりました。笑

demo-mamegoro.hatenablog.com

 

記事のみ3カラムからメニュー有りの3カラムへ

デフォルトでは、トップのメニューは記事一覧の下のページ下部に配置されていますが、やはりプロフィールやカテゴリーはサイドにあった方が使い勝手が良かったので、以下の変更を行いました。

demo-mamegoro.hatenablog.com

 

ブログタイトル・ヘッダー周り

ブログタイトルの下にメニューを付けたかったので、以下の記事を参照して変更しました。

同じ記事内で、SNSへのリンクボタンの付け方と、ブログタイトルを画像に変更する方法も併せて説明されています。

demo-mamegoro.hatenablog.com

 

私はメニューの部分にカテゴリーを表示させたいのですが、まだ方法を調べていないので、カスタマイズが完了したら追記しようと思います。現在は、ホームとプロフィールのボタンを暫定で残してあります。

 

配色

デフォルトでは、青を基調にピンクの差し色が入る配色ですが、ピンクを基調に緑の差し色が入るデザインに変更しました。この辺はまだ色々な配色を試してみたいので、これから遊んでいこうと思います。

demo-mamegoro.hatenablog.com

 

カスタマイズの際に必要となるカラーコードは、以下のサイトを参照しました。

www.netyasun.com

 

プロフィール

以下の記事で、サイドメニューのプロフィール項目の各種表示・非表示の設定、背景画像の変更、SNSリンクの追加について説明されています。

demo-mamegoro.hatenablog.com

 

私の場合は、SNSへのリンクボタンを、ブログタイトルの下ではなくプロフィールに付けました。

また、背景画像については、しっくりくるものがまだ見つかっていないので、とりあえず何も無しにしています。上記記事にある画像差し替え用のコードをデザインCSSに追加して、赤字部分を空白にしている状態です。

これはこれでアリかと思い始めています。

 

フッター

以下記事の通りに追加しました。

demo-mamegoro.hatenablog.com

 

サムネイル

デフォルトだと、トップのカード型一覧表示のサムネイルが強制的にカットされてしまい、あまり見栄えが良くないです。

カットされる部分を少なくして、画像のほぼ全体を表示させるカスタマイズ方法については、デモサイトで以下の記事が紹介されていたので、参照しました。コピペ一発OKで簡単でした。

これで、せっかく加工した画像が変なところで切り取られてしまう心配は無し。

www.imuza.com

 

フォントサイズ

このテーマの一番の悩みどころ(個人的に)は、フォントサイズが大きいこと。スマホ表示は特に大きく感じます。

私は文字数が多くなりがちなので、フォントが大きすぎると画面が文字で埋まってしまい、ちと辛いところ。

以下の記事を参照して、PC表示を17px、スマホ表示を16pxに変更しました。(すみません、元のサイズはわかりません)

だいぶ見やすくすっきりして、満足満足♬

www.okuni.me

 

カスタマイズしてみた感想

はてなブログでの初めてのカスタマイズでしたが、デザインCSSにコピペしたコードをどんどん貼っていくだけなので、初心者でも楽々でした。(元々こういう作業は好きな方ですが)

「マテリアルぽっぷ」は、カスタマイズ無しでも十分「プロっぽい」感じのテーマですが、カスタマイズすることで自分の細かいニーズを全て詰め込むことができて、大満足~♬

当ブログは子育て中のパパ・ママやその子供たちに読んでほしい内容なので、ポップな見た目でより興味を持ってもらえると良いなぁと思っています。

 

また少しずつ「こうしたい」が出てくると思うので、カスタマイズしたらこちらに追記していきたいと思います。

(そうしないと、どのコードが何のカスタマイズだったか、すぐにわからなくなる自信あり)