【コピペでOK】ZENO-TEALのスマホ表示をUndershirt風に一列にするカスタマイズ
はてなブログテーマ、Under-shirtのスマホ表示が美しすぎる。
どうにかZENO-TEALでもそんな感じにしたいと思ったので、こうして記事にしてみました。なるべくシンプルで、今風な感じを目指してみました。
もちろんコピペでOKですよ!
CSSコピペでOK
コピペでOKってありがたいですよね。
僕も先人達に習い、初心者の方にも分かりやすく、ある程度自由に改変できるように解説を入れてみました。
褒めて!!!!
ちなみにこちらのスクショは、人柱 実験台テストに協力してくれたみっぷうさんのブログのスクショです。協力感謝。
注意点は後々書くとして、取り敢えずコードをどうぞ。
コードをCSSにコピペ
コピペでOK!!
以下で詳しく解説していきます。
2行目:色のコードを変えよう
.page-index #main-inner{
background:#eee;
}
は、背景色を指すCSSです。
こちらのサイト等で、お好きな色を指定していただければなと思います。オススメはグレー系。マテリアルデザイン風になりますよ。
グレーのボーダーで囲んであるので、 #fff; (白)でもOK。ちなみに僕のブログでは、 #f4f7fc; を指定しています。
5~12行目:見た目を変えよう
.page-index .entry {
border: 1px solid #ddd;
height: 70vw;
width: 90% !important;
margin-top: 10px;
padding: 0px 0 0 0;
border-radius: 10px;
}
この部分は、カード全体のカスタマイズです。width:90%;でカードの幅を指定しているので、もっとちっちゃくしたいという方は、値を小さくしてみてください。
また、height:70vw;は高さを指定している部分です。もっと縦長にしたいなら、大きな値にしてみてください。
マテリアルデザインが好きな方は、border~を消して、サルワカくんからお好きなbox-shadowを選んで使ってみましょう。
記事を丸っこくしたくない
11行目と30行目に、border-radiusが指定してあります。borde-radiusってなんだよって方は、丸っこくする奴ぐらいに思ってもらって構いません。
僕は、10pxで指定していますが、イラネって方は消してもらって構いません。ZENO-TEALのデザイン的には、消した方が綺麗かもしれません。
33~39行目 カテゴリーのデザインを変更
カテゴリーは、SANGOを意識して作っています。
記事を丸っこくしたくない方は、こちらのカテゴリーは、ZENO-TEAL的な表示に戻した方が良いでしょう。
33~39 行目を削除して以下のCSSを挿入してください。
@media screen and (max-width: 480px){
.page-index .entry-categories {
top: -40vw;
margin-right: 0;
border-radius: 0px;
max-width: 47vw;
}}
注意点
実装に当たって、いくつか注意点がございます。留意した上でご使用くださいませ。
まず、情報量が減る為、記事の一覧表示感が薄れてしまいます。また、アイキャッチを使用していない場合を想定していません。おそらく表示がおかしくなります。
是非一度ご確認ください。そして出来なければ言ってください。対応しますので。
一応ある程度知識がある方向け
コピペでOKと銘打ってはいますが、ある程度知識がある方向けの記事です。意外と難しかったりしますし、微調整が必要だったりすると思うので。
サルワカへの道は遠いです。ボノボなら分かるぐらいに思ってください。
ボノワカ
Special Thanks
このカスタマイズをするに当たって、参考にしたサイト、協力してくれた人をご紹介します。本当に感謝しかねえ。
rokuzeudonさん
はてなブログテーマ「Under-shirt」の作者さんです。
わざわざ僕のこのカスタマイズを使わなくても、Under-shirtを入れるだけでブログは綺麗になります。それぐらいすごいテーマです。是非一度ご検討を。
SANGO
Word-pressテーマである、SANGOも参考にさせていただきました。パクリと言われたらそれまでではあるのですが。(ONIHITODE糾弾した人でもあるので)
なるべくリスペクト全開で
みっぷうさん
みっぷうさんは、人柱になってもらいました。この記事を書いたのは、みっぷうさんの一言があったからでもあります。
まとめ
一応、ZENO-TEALのCSSを一切改変していないテストブログと、先述のみっぷうさんのブログでテストは行いましたが、人によってはCSSが適応されず、エラーが出るかもしれません。
そういった場合は、僕に気軽に声をかけてください。Twitterでしたらかなり早めに返信できると思うので。