Stinger3子テーマ「Stinger-minimum」のスマホテーマ対応をしました!

カテゴリー:WordPress    |    タグ:

Stinger3子テーマ「Stinger-minimum」のスマホテーマ対応をしました!
今回このスマホ用「Stinger-minimum」を作りました。 子テーマ「Stinger-minimum」っぽく仕上げられたかな?と思います。 informationこの記事でのカスタマイズバージョン:stinger3ver20131217

出来上がりの図

トップの状態の図です。 アイキャッチ150x150を想定していますが、もし大きくできるなら横幅いっぱいにして大きく表示させるといいかもしれません。 Test_WordPress

アイキャッチのサイズを変更したバージョン

アイキャッチを小さくしてタイトルを横に持ってきたバージョンです。ただこれだとタイトルが長い場合、回り込み解除をするとなんだかブサイクな感じになるのでどうかなと思ってしていません。タイトルが画像下に回り込んでもそんなことは気にならない方へ Test_WordPress-s

スマホテーマのCSSを適用しよう!

こちらは子テーマを使用されている方向けです。 スマホテーマの適用方法です。とっても簡単にできます。 親テーマ(今回なら「stinger3ver20131217」)のheader.phpを変更します。 こちら<!---css切り替え--->の5行目のところを 下記のように書き換えます。 あとは、スマホ用のCSSファイルを子テーマフォルダに入れるだけで適用されます。

スマホ用のCSSファイルダウンロード

今回2つファイルを用意しました。差分がわかるようにコメントアウトしているファイルと必要のないところは消しているファイルです。 最終使用されるときはコメントアウトのところは消して使ってください。消さないで使用されるとたくさん読み込みを行ってしまうので、表示速度に影響がでるかもしれません。 以下からダウンロードしてください。

差分がわかるCSS

コメントアウトした下に今回作成している要素が書いてあります。ほんとうに少しですが、コメントも入れておきました。 smart-diff.zip

差分のないCSS

このまま使用できます。 smart-nondiff.zip

アイキャッチが小さいCSS(差分あり)

アイキャッチ画像のサイズを80x80に設定しています。 smart-diff-smallimage.zip

まとめ

今回作成していて、自身のブログは構造といいますか、元のphpファイルをゴニョゴニョ…としているので大きく変更することができるのですが、Stinger-minimumは構造を大きく変更することなくデザインのみなので結構制限ができてしまいスマホ用テーマはなかなか手ごわいなぁと感じました。 なにかのお役にたてれば幸いです。

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2014/04/12    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

ohajiki

ol要素をCSSで装飾(デザイン)する方法を実践したみたので備忘録

サイドバーの所に、WordPress Popular Postsを使ってランキングを表示させてみた際

記事を読む

side-no

Stinger3でスマホ用子テーマを使っている方はここにご注意だ!と思ったところ

最近スマホ用子テーマを作成したのですが、その方のブログを見たときはっ!っとなり、気になったので。

記事を読む

AW-i

【簡単導入】ブログにアイコンフォント「FontAwesome」を使ってみよう!

このカスタマイズの中で導入の手順や使い方を割愛したので、今日はその「FontAwesome」の使い方

記事を読む

ELLY95_hanatotegami

ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する

このブログの記事したにある購読スペース(RSS登録とかTwitter、Facebook、Google

記事を読む

wordpress-logo-1-550x350

PCとスマホで別のものを表示させることのできるウィジェットプラグイン

PCではこれを表示させて、スマホでは別のものをというように表示を別々にするウィジェットプラグインです

記事を読む

コメントを残す

3件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2016年5月
    « 12月    
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031  
電子書籍ストア BookLive!
PAGE TOP ↑