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

関連記事

neko

過去のあの日あの時書いた記事を表示させるプラグイン「Remember Old Post Widget」

なんだか面白いなと思ったので導入してみたかったのですが、圧倒的な記事の少なさ。 なので、いつかこの

記事を読む

h2

ブログの見出しデザインに困ったのでこのジェネレータを使ってみた『 CSS見出しジェネレーター | Web道』

このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしているのですが、見

記事を読む

AW-i

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

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

記事を読む

Stinger-minimum

子テーマ"Stinger-minimum"を新しくなった「STINGER5」用に作りなおしました。

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

side-no

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

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

記事を読む

コメントを残す

3件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2016年7月
    « 12月    
     123
    45678910
    11121314151617
    18192021222324
    25262728293031
電子書籍ストア BookLive!
PAGE TOP ↑