初心者がSimplicityのスマホ表示をカスタマイズしてみた。

ブログをはじめて4か月、有料のテーマや無料のテーマをいくつも使ってきましたが「Simplicity」の使用期間が長い気がします。

理由は、私みたいな初心者でも「PageSpeed Insights」でパソコン/モバイルの両方で90点くらいはKEEPできること(Autoptimize、W3 Total Cache ←これをちゃんと設定する必要ありますが・・・)、またsearchconsoleでもエラーを吐きません。

GTmetrixでも良い感じになりました。

screenshot_20160319_022904

これだけで十分です。

でも、スマホ表示だけがゴチャゴチャしてて好きになれなかったので初心者なりにやってみました。

スマホ表示が気に入らなかった最大の理由はサムネイルの部分なのでこの当たりを手探りで非表示にして、その部分を穴埋めしました。(PCのサムネイル表示は生かしておきます)

Simplicityのスマホ表示を変更するには外観>テーマの編集>mobile.cssをクリックします。

screenshot_20160329_122124 (Custom)

以下、好きなものを書き込みファイルを更新することで変更できます。

.entry-read a{display:none;} ・・・続きを読むを削除
.entry-thumb img {display:none;} ・・・サムネイルの部分を削除
.post-meta{display:none;}・・・何月何日 カテゴリーの部分を削除

これで結構スッキリしましたがユーザーエージェントを変更してアイフォン表示にすると右寄りになっていたのでサムネイルをなかったことにしました。

.entry-card-content { margin-left: 0px;} ・・・左に寄せる

タイトルと説明文のところのスペースが狭くなっていたので少しだけ広げます。

.entry h2 {margin-bottom: 16px; margin-top: 0;}・・・タイトルと説明文の間を広げる(16pxの部分)

タイトルとタイトルまでのあいだが詰まって息苦しかったので、少し広げます(30pxの部分)

#main .post, #main .page {margin-bottom: 30px;}・・・記事と記事の距離を広げる

区切り線の色(#e6e6e6)を変更。区切り線の太さは1pxの数字を変更する

#main .entry {border-bottom: 1px solid #e6e6e6; padding-bottom: 16px;}

タイトル部分の文字の大きさなどを変更。

.article h1 {
margin-top: 10px;←上のスペース
margin-bottom: 20px;←下のスペース
font-size: 20px; ←文字の大きさ部分。好きな数字を入力
font-weight: 600; ←100単位で文字の太さが変更できます
line-height: 150%; ←文字間の幅
}

文章内の文字サイズも好きなものに変更します。

.article {
font-size: 13px; 文字サイズです。数字が大きいほど文字が大きくなります。
color: #555; ←文字色
font-family: ‘Hiragino Kaku Gothic ProN’,Meiryo,sans-serif; ←お好きな文字を選択
}

で、後日少し変更を加えました。

2016_03_22_22.02.55 (Custom)

サイトタイトルの部分をこんな感じにして

#site-title a {
text-decoration: none;
color: #444444;
font-size: 35px;
font-weight: normal;
text-shadow: 0px 1px 0px rgb(255, 255, 255), 1px 2px 2px rgb(170, 170, 170);
}

.post-meta{display:none;}を削除

タイトルをこんな感じです

.entry h2 a {
margin-top: 20px;
margin-bottom: 20px;
font-size:14px !important;
text-shadow: 0px 1px 0px rgb(255, 255, 255), 1px 2px 2px rgb(170, 170, 170);
font-weight:bold;
}

シャドウは好みの問題なのでやらなくてもいいと思いますが「Twenty Fourteen」みたいになりましたw

そのあとにサイドバー等の表示が邪魔だったのでプラグイン「Simple Widget Logic」でスマホで表示させたくないものを選択しました。「Simple Widget Logic」をインスト-ルするとウィジェットの下の部分に下記の枠が追加されますので、人気記事などスマホで表示させたくない場合は、そのウィジェットに !wp_is_mobile() と書き込んで保存して下さい。逆にPCのみ表示させたい場合は wp_is_mobile() でOKです。

この設定でSimplicityのスマホ表示だと記事下に表示されてしまうサイドバーの部分が見えなくなるのでスッキリすると思います。

これでSimplicityのスマホ表示も、そこそこよくなると思います。

screenshot_20160329_123614

スポンサーリンク