このブログは阪神タイガースをネタにして個人的に楽しみながら応援している日記ブログなのですが、なんとなくアドセンス申請してみたら通ってしまいました。
そうなるとはてなの広告が邪魔だったので勢いでPro化してしまったのです。
Pro化したからにはちょっとカスタマイズしてやろうとminimalismに変えてみたのです。
初めに一気にカスタマイズをしたので、どなたかの参考にでもなれば、とまとめました。ま、ありがちなやつです。
minimalismタイトル画像
はい、早速毎度お馴染み「はてなのレスポンシブテーマでタイトル画像がPCでは様々な余白があるのにスマホでは真ん中だけ拡大してしまう」事案です。このminimalismも例に漏れずやってくれます。
そもそもテキスト入りの画像はSEO的にいかがなものかなどという専門的な意見は無視してまんまとテキスト入り画像を使っております。タイトルフォントを変えただけのように見えるでしょうが画像です。これでもタイトルはCanvaでつくりました（笑）。え？こんな程度のを？とか言わないっ！
さ、画像サイズは皆様ご存知1000x200、デザイン>スパナ>ヘッダー、で画像をアップしました。もちろん「画像のみ表示」です。
するとどうでしょう、見事なほどの余白。そしてスマホで見ると当然タイトル中央の部分がタイトル領域いっぱいにぼやけて表示されてます。
ググりにググりまくった末に辿り着いたのでもはやどなたの記事だったかも定かではございませんご了承下さい。とにかくこのお陰で今の姿を作れました。
はい、どうぞ。
デザイン>スパナ>{}デザインCSSです。
/* ヘッダー画像の比率の調整↓ */
.header-image-only #blog-title #blog-title-inner {
position: relative;
background-size: cover;
height: auto;
}
.header-image-only #blog-title #blog-title-inner:before {
display: block;
content: "";
width: 100%;
padding-top: 15%;
}
.header-image-only #blog-title #blog-title-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* ヘッダー上下の余白を取る */
#blog-title {
margin: 0 auto;
padding: 0;
}
/* ヘッダー画像の比率の調整↑ */
/* ヘッダースマホ対策 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 55px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 60px;
}
}
heightやpaddingの数値を変えれば微調整できます。
minimalism文字サイズ
デフォルトでは小さいです。そして行間が目立ちます。もの静かな記事ならこれでもいいかもしれません。或いは若者だけしか読者がいないとかでもこれでいいですね。あと小さい文字フェチの人向けのブログとか、15px依存症、または17px以上恐怖症の人向け（笑）………
っていうか、とにかく小さすぎました。
で、ソッコー文字サイズ変更。
17pxの2.2em。
デザイン>スパナ>{}デザインCSS
/*フォントサイズ*/
.entry-content p {font-size: 17px;}
/*行の高さ*/
.entry-content {line-height:2.2em;}
これまた数値を変えてお好みに調整して下さい。
minimalismのフッターにコピーライト
訳もなくはてなっぽさを消したかったのでデフォルトのヘッダーフッターは消しました。はてなProなので。
しかしヘッダーはともかく、フッターはなんらかの形がないとブログの終わり感がありません。読んでいて、あれ？まだ続くのかなと思わせといて終わりやったんかい！とツッコまなければならなくなります。
なのでオリジナルの美麗フッターを装備しました。プライバシーポリシーとお問い合わせフォームのリンクもぶち込んどきました。
まず、固定ページでプライバシーポリシーとお問い合わせフォームを作って下さい。フォームはグーグルフォームで簡単です。グーグルフォームの作り方は検索してもらえばたくさんヒットしますのでそちらをご覧下さい。
デザイン>スパナ>フッター
<div id="copyright"><b>Copyright © あなたのブログタイトル</b><br><b>All rights reserved.</b><br>
<a href="https://あなたのプライバシーポリシーのURL">プライバシーポリシー</a> | <a href="https://あなたのお問合せフォームのURL">お問合わせ</a>
</div>
で、{}デザインCSSに、
/*コピーライト*/
#copyright {
padding: 10px;
text-align: center;
background: #fafafa;/*背景色*/
font-size: 10px;
color:#4682b4;/*文字の色*/
}
色はお好みで。
WEB色見本 原色大辞典 - HTMLカラーコード
minimalismフォローボタン
特製「はてなの読者登録ボタン」と「feedlyボタン」も設定できます。僕は使ってないけど。
あとminimalismはスマホではページャーが表示されないのでサイドバーにモジュールで最新記事5件、月間アーカイブ、カテゴリーを、記事下へ関連記事表示させています。
ページャーを設置しようかとも思いましたがちょっとややこしそうだったので諦めました。
フォローボタンは置きたいところに以下をペーストすればOKです。
<!--フォローボタン--><div class="follow-btn" ><span style="font-size:80%; text-align:center"><b> \follow me/</b></span><br><a class="hatena" href="http://blog.hatena.ne.jp/あなたのはてなid/あなたのURL/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i></a> <a class="feedly" href="http://feedly.com/i/subscription/feed/http://あなたのURL/feed" target="_blank"><i class="blogicon-rss lg"></i></a> </div>
で、{}デザインCSSに、
.follow-btn{
width: 100%;
text-align: left;
margin-bottom: 10px;
}
.follow-btn a {
display: inline-block;
width: 40px;
height: 40px;
font-size: 22px;
text-align: center;
text-decoration: none;
border-radius: 5px;
color: #ffffff;
}
.follow-btn .hatena {
background: #3D3F44;
}
.follow-btn .feedly {
background: #3d3f44;
}
.follow-btn .hatena:hover {
background: #B5B5B5;
}
.follow-btn .feedly:hover {
background: #b5b5b5;
}
これまたカラー等は色々お好みで変えて下さい。
minimalismシェアボタン
これも僕は使ってませんが、あらかじめ用意されております。
はい、こちら
シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳
あ、あと、記事末尾のid表示と時刻表示も消しました。{}デザインCSSです。
/*記事下のIDと時刻非表示*/
span.author.vcard{
display:none;
}
span.entry-footer-time {
display: none;
}
/*記事下のIDと時刻非表示*/
最後に
グローバルメニューとかもちょこちょこっと簡単に実装できますがこれまた使ってないのでスルーしました。使いたい方はminimalismグローバルボタンとでも検索してもらえればおそらくなんらかわんさかヒットします。
あと、見出し。
これも僕のこんなブログには不要なので使ってませんが必要ならちょっとググればたくさん出てきますのでご自分で好きなのやっちゃってください。
ま、そんなわけで、
この記事がどなたかのお役に立てば幸いです。
