ブログのテーマを Stinger 3 に変更した時のカスタマイズの続きです。そもそものテーマ変更の目的だったモバイルでの表示向上というテーマを忘れかけていた @azur256 です。

今日は、モバイルのテーマ変更について書いておきたいと思います。

モバイル用のCSSを子テーマで設定する

Stinger 3 はモバイル専用に smart.css というファイルを持っています。モバイル用にスタイルを変更するためには、この smart.css を変更する必要があるのですが、このファイルを子テーマに持っていって変更しても反映されません。

これは smart.css の読み込みの方法に依存して発生していますので、まずは、この部分を修正したいと思います。

smart.css は header.php の中で以下のようにして読み込まれています。


この get_template_directory_uri() は子テーマの場所ではなくテーマ本体の場所を指してしまいますので、ここを子テーマの場所の URL を返すことができる関数 “get_stylesheet_directory_uri()” に変更します。



こうすることで子テーマの下の smart.css を読み込めるようになります。

smart.css を作ってカスタマイズ

子テーマの下の smart.css は親テーマからコピーするのではなく、新たにファイルを作成して、少しのおまじないと変更分のみを入れます。

「おまじない」とはこんなコードです。この内容だけを書いた新しいファイルを smart.css という名前で保存してください。


これで親テーマの smart.css の内容を読み込むようになります。今回、stinger 3 のフォルダ名が stinger3ver20130925 となっています。今後、バージョンアップされた時にフォルダ名が変わると思うので、その時は、忘れずにこのパスを変更する必要があります。

さて、このファイルには、基本的に style.css に入れた変更をそのまま入れるのですが、幾つかモバイル用にさらに変更をいれました。

一つは、関連するエントリを表示するための CSS です。PC 版の場合、関連エントリの末尾に Tweet 数やはてブ数を画像表示しているのですが、モバイル版の場合はタイトルを表示する領域が狭くなってしまうので、この画像を非表示にするように CSS を変更しました。


それとソーシャルボタンのサイズも PC 版よりも小さめに変更しました。


少しは見やすい画面になったでしょうか。



モバイル用も PC 用も一つのスタイルファイルで変更した方がいちいち直さなくて楽、と思っていたのですが、こうやってそれぞれに適した画面イメージを作れるのは便利ですね。同じ部分だけ共通のCSSファイルを作ってメンテナンスするなどしながら、うまく使い分けていきたいと思います。

WordPress 関連のエントリ

インストールや設定変更とデータ移行

プラグイン

バージョンアップ

カスタマイズ

Stinger 3関連

チューニング

MAMPを使ったバックアップサイトの構築

開発関連

---

最後まで読んでいただきありがとうございます。

左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします

RSSリーダへの登録は こちら からどうぞ。