ブログをカスタマイズしてみました！使用テーマ「マテリアルぽっぷ」
「おすすめブログの新着」への掲載も終わり、毎日更新も少しペースダウンすることにしました。
そんなわけで昨日は以前から気になっていたブログのカスタマイズに挑戦！
現在使用中のテーマはこちらの「マテリアルぽっぷ」です。
見た目の可愛さが気に入ってこちらのテーマを使わせていただいています。
タイトルを文字から画像に
タイトルが文字の場合パソコンからは問題ないんですが、スマホからだとこんな感じで途中で改行されてしまうのが地味に気になっていました。
こちらを参考にヘッダのタイトル下とデザインCSSにコードを追加して、タイトルを画像にしてみました。
サンプルの画像のサイズは817×158でしたが、
ちょっと大きめに1000×200で作ってみました。
これでパソコンから見てもスマホから見てもスッキリと表示されるようになりました！
タイトル下にメニューを追加
先ほどの記事を参考にタイトルの下にメニューを追加しました。
ヘッダの中のタイトルの下に以下のコードを追加するだけです！
<div class="top-menu-bar">
<ul>
<li><a href="/"><i class="blogicon-home"></i> Home</a></li>
<li><a href="/about"><i class="blogicon-user"></i> Profile</a></li>
<li><a href="/archive"><i class="blogicon-pages"></i> Archives</a></li>
<li><a href="プライバシーポリシーURL"><i class="blogicon-good"></i> Policy</a></li>
<li><a href="メールフォームURL"><i class="blogicon-mail"></i> Mail</a></li>
</ul>
</div>
このブログは現在プライバシーポリシーがaboutのページにあるので、メニューの内容とリンク先を少しアレンジしました。
プロフィールの背景と文字色変更
こちらはそのままでも可愛くていいかなぁと思ったんですが試しにやってみました。
プロフィールの背景を変えるには、
１．好きな写真をはてなフォトライフにアップロード
２．以下のコードの赤い部分をデザインCSSに追加
.hatena-module-profile .hatena-module-body {
background: url(//abcdefghijk-sample.co.jp) no-repeat center !important;
}
３．赤字部分をアップロードしたURLに置き換えればOK
※アップロードした画像を右クリックして「画像アドレスをコピー」でURLがコピーされます。
写真が暗めで文字が目立たない場合は文字を白色や薄い色に変えてみましょう。
以下のコードをデザインCSSに追加すればOKです。
.hatena-module-profile .hatena-module-body,.hatena-module-profile .hatena-module-body a {
color: #ffffff !important;
}
#ffffffは白のカラーコードです。ここを好きな色のカラーコードに置き換えれば文字の色が変わります。
配色も好きな色に変えることが出来ますが、私はこの２色の組み合わせが好きだったので変更していません。変更の仕方はこちらに書いてあります。
配色を変えるとガラッとイメージが変わりますね！
スポンサーリンク
