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

関連記事

ELLY95_hanatotegami

【Stinger3カスタマイズ】少し落ち着いたのでこのブログで変更したところを書き留めておく備忘録 #1

このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしています。今回はこ

記事を読む

piyo

子テーマ「Stinger-minimum」の全貌を備忘録+CSS3のtext-shadow

子テーマ「Stinger-minimum」をリリースしてから早いくとせ。。経ちました最近ブログにお問

記事を読む

Adventskalender

様々な想いを込めて。わたしが思う・考えるStiger3のデザイン  #Stinger-WP

皆さん!遂に2013年のAdvent Calendarが始まりました!この記事は#Stinger A

記事を読む

カスタマイザー-i

新しくパワーアップされた「STINGER5」のテーマカスタマイザーを使ってみよう!

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

記事を読む

mac

WordPressの自動挿入されるpタグを削除する方法

WordPressにはpタグを自動挿入してくれる機能(auto paragraph)というものがあり

記事を読む

コメントを残す

3件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

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