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というテーマをもとにゴニョゴニョ…カスタマイズしています。今回はこ

記事を読む

wordpress-logo-1-550x350

記事の読了時間”およそ○○分”を表示してくれるプラグイン「estimated」

こういうプラグインあったんですね。探せばだいたい見つかるWordPressプラグイン素敵です! 読

記事を読む

wordpress_stickers_everywhere

WordPress3.7がリリースされたので変更点の確認と気をつけるべき点をメモ

自分のプライベートブログなので、いつもは何となく変更点をさっくり見てさっさとアップデートしているので

記事を読む

mac

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

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

記事を読む

jet

バージョンアップしたJetpackがマークダウン対応されたので使ってみた

待ちに待っていた! Jetpackバージョンアップ(バージョン 2.8)でMarkdownが新しく

記事を読む

コメントを残す

3件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2016年8月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑