キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

STINGER5 の子テーマ「 SIMPLESTER 」を導入する時の注意点

      2015/02/18

STINGER5 の子テーマ「 SIMPLESTER 」を導入する時の注意点

これからのカスタマイズが楽しみ、キャリコ( @calicocatxyz )です。

ブログの子テーマを SIMPLESTER にしてから、何だか今までよりも自分のブログが好きになったような気がします♪これからもっとキャリコ色をつけていければ、さらに気に入ること間違いないでしょう。

そんな SIMPLESTER ですが、導入時に気を付けたいことがあります。必ず変更しなければならないのがスマホ表示の padding 修正だけですが、いくつか気になった部分をラテに教えてもらいます。それじゃあ、よろしくね♪

ラテ

こんにちは、ラテにゃ。

キャリコさんがお気に入りの SIMPLESTER は、もちろんラテも気に入ってるにゃ。今後はカスタマイズ記事も増やしていこうと思ってるんだけど、今日はその第1弾として修正したところを紹介するにゃ。

Ads by Google

SIMPLESTER の修正個所

スマホ表示の左右の padding

これは必須レベルの修正だにゃ。パソコンでの表示は問題ないんだけど、スマホで見たときに左右の padding が大きくて、アドセンスがずれていたり記事の幅が狭く表示されていると指摘を受けたにゃ。

それはマズイと思いスマホでチェックしてみると、こんな感じの状態だったにゃ。

スマホ表示の左右の padding 修正前

ただ、これは簡単に修正することが出来るから焦る必要はないにゃ。ダッシュボードの外観からテーマの編集を開いて、下の方にあるmedia Queries タブレットサイズ(最高780pxのサイズ)ってところを修正するにゃ。

↓ この表示部分に1行追加するだけ!

これで余白の調整は完了にゃ。

ゆうやさんからも、のぶさんからも大丈夫と言って頂けたにゃ♪ちなみにゆうやさんは iPhone5、キャリコが iPhone5s、のぶさんが iPhone6 と、ちょうどバラけていてそれぞれのデバイスから見て問題なくて安心したにゃ。

スマホ表示の左右の padding  修正後

それにしても… こうやってすぐに指摘をしてもらえるなんて、キャリコさんは幸せ者だと思うにゃ。

ぱんくずリストの margin

スマホ表示を直してる時に気付いたんだけど、ぱんくずリストが2行になってしまうと、上下がくっついてしまうのが気になったにゃ。これは SIMPLESTER じゃなくて STINGER5 のスタイルシートに追記すれば大丈夫にゃ。

↓ ぱんくずの部分に1行追加するだけ!

これだけで上下に隙間が出来て見やすくなったにゃ。

ぱんくずリストの margin

まとめ

導入時の修正は以上の2点で、ほかにも気づいたところがあれば随時アップしていくにゃ。

関連リンク

STINGER5 を手軽にデザインするなら SIMPLESTER がオススメ!

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - SIMPLESTER

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 を手軽にデザインするなら SIMPLESTER がオススメ!
STINGER5 を手軽にデザインするなら SIMPLESTER がオススメ!

装いを新たに、キャリコ( @calicocatxyz )です。 さて、ご覧の通り …

SIMPLESTER の誰にも気づかれない自己満足カスタマイズ
SIMPLESTER の誰にも気づかれない自己満足カスタマイズ

あまりカスタマイズするところがなかった、キャリコ( @calicocatxyz …