はじめてパパのしおり

育児記録、旅行や街の情報、物のレビューなどしていきます

マテリアルぽっぷをカスタマイズ8点実施しました

マテリアルぽっぷをカスタマイズします。

といっても知識はないので、ほぼコピペでやったカスタマイズを紹介します。

 

  

1.トップページを推奨の12記事に変更

マテリアルぽっぷは、一覧形式の12記事が推奨だったので、変更しました。

設定→詳細設定→トップページの記事数

f:id:pop-ran:20190316161723p:plain

 

2.アイキャッチ画像を設定する

マテリアルぽっぷは、カード形式で画像がある方がいいと思うので、

アイキャッチ画像を設定しました。

設定方法は、この記事で書きました。

www.popura-tree.club

 

  

3.パンくずリストにチェックを入れる

カテゴリーのリストを作成するため、パンくずリストにチェックを入れました。

デザイン→カスタマイズ→記事→パンくずリスト

 

〇記事

f:id:pop-ran:20190316172608p:plain

 

パンくずリストにチェックを入れる

f:id:pop-ran:20190316172653p:plain

 

 〇カテゴリーが設定されました。

f:id:pop-ran:20190316173106p:plain

 

 

4.見出しと装飾の設定

見出しと言えば、大見出し、中見出し、小見出しを使っています。

はてなブログでは、大見出しはh3、中見出しはh4、小見出しはh5ですが、

マテリアルぽっぷは、大見出しはh2、中見出しはh3、小見出しはh4を使っています。

h2を設定していないため、1ボタンで設定できるようにしました。 

1ボタンで設定するには、chrome拡張機能をインストールするとできます。

 

chrome拡張機能をインストールすると、

下の鉛筆みたいなマークができます。

これをクリックします。

f:id:pop-ran:20190321232608p:plain

 

クリックすると、下記のメニューが出てくるので、

大見出し(h2)にしたい文字を選んで、

赤枠をクリックすると、h2の見出しになります。

f:id:pop-ran:20190317163548p:plain

 

h2の見出しはこれ

h3の見出しはこれ

h4の見出しはこれ

h5の見出しはこれ

 

5.プロフィールの背景を変更する

プロフィール背景をこの若草山の画像に変更しました。

f:id:pop-ran:20190317160942j:plain

記事を書いている時に、写真を挿入。

HTML編集で、その写真の所を見ると、src=から始まるところがあるので、

その後につくURLを下の赤い部分に貼り付けて、

デザインCSSに追加すると、背景が設定されました。 

.hatena-module-profile .hatena-module-body {
background: url(https://) no-repeat center !important;
}

 

f:id:pop-ran:20190317165005p:plain

 

このボケ具合がいい感じ。

文字の色は、下の赤い部分を変えてデザインCSSへ。

.hatena-module-profile .hatena-module-body,.hatena-module-profile .hatena-module-body a {
color: #ffffff !important;
}

 

このプロフィールのカスタマイズはこちらに載っています。 

プロフィールのカスタマイズについて - マテリアルぽっぷ

 

6.文字などの配色を変更する。

このカスタマイズはこちらに載っています。

配色の変更方法 - マテリアルぽっぷ

 

茶色(#a0522d)とオレンジ(#ffa500)にしました。

色は、こちらを参考にしました。

www.colordic.org

 

7.メニューありの3カラムに変更する

 サイドにメニューなしの3カラム

f:id:pop-ran:20190322000130p:plain

 

サイドにメニューありの3カラムに変更

f:id:pop-ran:20190322000511p:plain

 

詳細はこちらに載っています。

PC版TOPページを記事のみ3カラムから、メニュー有りの3カラムに変更する方法 - マテリアルぽっぷ

 

 

8.メニューバーを追加

メニューバーを追加しました。

こちらの詳細はコチラです。

ブログタイトル、ヘッダー周りのカスタマイズについて - マテリアルぽっぷ

 

 

以上、カスタマイズ8点でした。

 

もう少しカスタマイズしました。第2弾はこちら。

www.popura-tree.club