はじめにこのブログに設定したテーマはMinimalismだったんですがUndershirtに変更しました。
また新たに始めた瞑想に関する特化ブログ「日々これ修行日」も開設し、テーマはSmoothを使用。
2つのブログのテーマのカスタマイズにまつわる内容です。
過去のカスタム記事↓
ipadlife.yokonote.com
【目次】
【1】 前へ次へボタン問題
【2】 スマホ画面のトップをカード型に(UnderShirt)
【3】 見出しをデザインする
【4】サイドバーカスタム(Smooth)
【5】スマホのトップページを一覧形式に(Smooth)
【1】前へ次へボタン問題
今回なぜテーマを変更したか？それは「前へ次へボタン」問題です。
いろいろいじったけどMinimalismではスマホだと「前へ次へボタン」が出ない(!!)ことがわかりまして。（正式にはページネーションと呼ぶらしい。“ページャー“が一覧ページ用）
私は結構このページボタンを使ってブログを読んだりします。他の記事も読んでみようと思ったときに一番手軽なのでこれ必須だと思うんですよ…。
ということで悩んだ末、MinimalismからUndershirtに変更です。
テーマを無事変更し
前へ次へボタンをもう少し目立つようにバックに色をつけたりカスタマイズ。
が、時間かけていろいろ試したが崩れてしまう。なぜ…
なので太字にするのみにしておきました。
CSSのコードはこれです↓
/* 前へ次へボタン太字*/
.pager-next a,.pager-prev a{
font-weight: bold;
}
こんな感じになりました。これくらいであればそこそこ目立っていいかなと。
【2】スマホ画面のトップをカード型に(UnderShirt)
Minimalismのときは
スマホのトップ画面を一覧形式(iPadやPCではカード型)にカスタマイズしてたんですが、
UnderShirtにしたことで、スマホもカード型にすることに。さっそく変更。
フジブロさんのブログを参考に作成させていただきました！ありがとうございます！
www.fuji-blo.com
これにプラスちょいカスタム。
本文を消すCSSコードを追加…ググって調べました。
/* 記事一覧の説明文を非表示にし、余白をなくす */
.archive-entry-body .entry-content {
display: none;
}
カテゴリーも非表示に。CSSはこちらからコピペさせていただきました。
nasumi-my-life.hatenablog.com
その結果出来上がったスマホのトップ画面はこんな感じ↓
他にもタイトルの行間も詰めるCSSも追記してます…確か。
【3】見出しをデザインする
さて、Undershirtにしたら今度は仕切り線が端から端にいかなくなりました。
マークダウン形式でブログを書いてるんですが
ーーー
↑このように半角でハイフンを連続して入れると横に一直線仕切り線ができて
記事を整理できます。
それがこうなってしまう。
なので、見出しをデザインして仕切っぽくなるように変更。
こちらのブログを参考にさせていただきました！
saruwakakun.com
それにより画面を仕切ることができました。
【4】サイドバーカスタム(Smooth)
次にこのブログの後に開設した「日々これ修行日」ブログのテーマについて。
meisou.yokonote.com
こちらは内容に合わせてSmoothを選びました。
やはりポイントはレスポンシブデザインかどうかということと、スマホでの「前へ次へボタン」の搭載でした。
実際インストールしてみたところこのテーマはシンプルでいいんですが、サイドバーの見出し文字がやたらと大きく(しかもなぜか明朝体)そしてわかりにくい。そのためサイドバーをカスタマイズ。参考記事はこちらです↓ ありがとうございます！
blog.minimal-green.com
サイドバーが見やすくなり、全体的に可愛くなりました。満足！
あ、ちなみに記事本文のフォントはこのブログと同じにしています（CSS）。フォントは同じだがこのブログよりも少し文字間を開けて設定しました。が、ルートエンドポイントを通ったときになんか文字間が変わってしまってるっぽいのです。サブブログ同士 文字間の設定が入れ替わったりしてる感じもする…。どうやって治すのかは謎です。
【5】スマホのトップページを一覧形式に(Smooth)
これがちょっと大変でした。
Smoothだと上記の方法ではスマホでカード型にカスタマイズできず。
なので一覧形式を見やすくカスタマイズしました。
PC、タブレットでのトップページをカード型にカスタムするため、はてなの表示形式の設定を「一覧形式」にしています。
PCあるいはタブレットでのトップ画面↑
◆カスタマイズに関する過去記事はこちら
そのため、スマホに関してのトップページは何も手を加えないとこんな感じになってます。
なのでこれを
というカスタマイズをしました。
デザインCSSに打つコードとしては、
@media (max-width: 767px){
}
このメディアクエリを使えばスマホ表示の設定ができる、と。
このコードの｛ ｝内に設定を書き込めばいいんですね。学びました。
参考ブログ
simadzu.hatenablog.com
本文を3行にするCSS(-webkit-line-clamp: 3;)の使用例を探していたところこちらの記事を見つけることができました。ありがとうございます！
その他にタグを消すCSS追記(前述と同じ)
日付を消したりも追記(日付を消すCSS↓)。
.archive-entry-header .date {
display: none;
これらのすべてのコードをメディアクエリの｛ ｝内に追記しました。
そしてこのブログのトップページは
広告が入ると非常に見ずらいのでCSSで広告非表示に。
/* トップページのみGoogleアドセンスを非表示にする */
.page-index .adsbygoogle {
display: none !important;
}
アドセンス側でも設定できるけどこの方が簡単。
そしてようやくこういう形にようやくできた…!!↓
以上がここんとこのカスタマイズでした。
あともう一個新たに特化ブログを開設したいのでまだまだがんばります。
