マテリアルぽっぷをカスタマイズ８点実施しました
マテリアルぽっぷをカスタマイズします。
といっても知識はないので、ほぼコピペでやったカスタマイズを紹介します。
- １．トップページを推奨の１２記事に変更
- ２．アイキャッチ画像を設定する
- ３．パンくずリストにチェックを入れる
- ４．見出しと装飾の設定
- ｈ２の見出しはこれ
- ５．プロフィールの背景を変更する
- ６．文字などの配色を変更する。
- ７．メニューありの３カラムに変更する
- ８．メニューバーを追加
１．トップページを推奨の１２記事に変更
マテリアルぽっぷは、一覧形式の１２記事が推奨だったので、変更しました。
設定→詳細設定→トップページの記事数
２．アイキャッチ画像を設定する
マテリアルぽっぷは、カード形式で画像がある方がいいと思うので、
アイキャッチ画像を設定しました。
設定方法は、この記事で書きました。
３．パンくずリストにチェックを入れる
カテゴリーのリストを作成するため、パンくずリストにチェックを入れました。
デザイン→カスタマイズ→記事→パンくずリスト
〇記事
〇パンくずリストにチェックを入れる
〇カテゴリーが設定されました。
４．見出しと装飾の設定
見出しと言えば、大見出し、中見出し、小見出しを使っています。
はてなブログでは、大見出しはｈ３、中見出しはｈ４、小見出しはｈ５ですが、
マテリアルぽっぷは、大見出しはｈ２、中見出しはｈ３、小見出しはｈ４を使っています。
ｈ２を設定していないため、１ボタンで設定できるようにしました。
１ボタンで設定するには、chromeの拡張機能をインストールするとできます。
下の鉛筆みたいなマークができます。
これをクリックします。
クリックすると、下記のメニューが出てくるので、
大見出し（ｈ２）にしたい文字を選んで、
赤枠をクリックすると、ｈ２の見出しになります。
ｈ２の見出しはこれ
ｈ３の見出しはこれ
ｈ４の見出しはこれ
ｈ５の見出しはこれ
５．プロフィールの背景を変更する
プロフィール背景をこの若草山の画像に変更しました。
記事を書いている時に、写真を挿入。
HTML編集で、その写真の所を見ると、src=から始まるところがあるので、
その後につくURLを下の赤い部分に貼り付けて、
デザインCSSに追加すると、背景が設定されました。
.hatena-module-profile .hatena-module-body {
background: url(https://) no-repeat center !important;
}
このボケ具合がいい感じ。
文字の色は、下の赤い部分を変えてデザインCSSへ。
.hatena-module-profile .hatena-module-body,.hatena-module-profile .hatena-module-body a {
color: #ffffff !important;
}
このプロフィールのカスタマイズはこちらに載っています。
６．文字などの配色を変更する。
このカスタマイズはこちらに載っています。
茶色（#a0522d）とオレンジ（#ffa500）にしました。
色は、こちらを参考にしました。
７．メニューありの３カラムに変更する
サイドにメニューなしの３カラム
サイドにメニューありの３カラムに変更
詳細はこちらに載っています。
PC版TOPページを記事のみ3カラムから、メニュー有りの3カラムに変更する方法 - マテリアルぽっぷ
８．メニューバーを追加
メニューバーを追加しました。
こちらの詳細はコチラです。
ブログタイトル、ヘッダー周りのカスタマイズについて - マテリアルぽっぷ
以上、カスタマイズ８点でした。
もう少しカスタマイズしました。第２弾はこちら。
