WordPress Theme Sparklingのmobile表示時のスタイル調整


このブログはWordpressのテーマとしてcolorlibというところが提供しているSparklingというやつを使っています。

なかなかシンプルなデザインで気に入ってはいるのですが、iPhoneなどの携帯で見たときに各記事のボックスのスタイルのpaddingが大きすぎて、内容が細く表示されてしまうのが嫌でスタイルを調整することにしました。

post-inner-contentというcssクラスがpadding: 45px 50px;と指定されており、横にかなり幅を取ってしまっていました。

調整するためにはwordpressの管理画面のAppearance->Editorをまず開きます。

そこには現在適用されているThemeのコードを編集できるエディターが表示されるので、CSSファイル(style.css)の中の該当クラスを探します。

以下のように横を20pxに変更します。

.post-inner-content {
  padding: 45px 20px;
  background-color: #fff;
  border: 1px solid #dadada;
  border-top: none;
}

保存後に、モバイルでチェック。。

Before
スクリーンショット 2014-05-31 13.15.13

After
スクリーンショット 2014-05-31 13.15.39

まぁまぁ良くなったかな!