ふつうのテキスト

PCとスマホで見た目のデザインを変える[Stingerカスタマイズ]

こんにちは。身長は177センチメートル毎時のdaiです。こんばんは!

このブログも2ヶ月目にしてようやくRSS登録ボタンを置いたので、
ぜひ登録してもらえると喜びます!主に私が喜びます!私だけが喜びます!

Stingerカスタマイズについて

medium_5385090723

このブログのテーマはSEOに強いというStingerを使っています。
そのカスタマイズ性の高さから、結構デザインをいじり倒しています。

そして、デザインをいじっている途中で、私はある壁にぶつかりました。

PCで見た時とスマホで見た時の見た目をちょっと変えたい

ということです。

PCで見る分にはいいんだけど、スマホでこの部分みたらレイアウト崩れるなーとか、
この部分はスマホの時だけ表示させたいなーとか、

微妙にPCとスマホでデザインを変えたいということは何度もありました。

なので、ちょっちょっと簡単なコードを入れるだけでPCとスマホの見た目を変えることができます。
もちろんStingerだけでなく、他のテーマを使用されてる方でも活用できますよ。

photo credit: david anderson : da-photography via photopin cc

 

手順はたったの2ステップ!

ステップ1

下のコードをそのままコピーして、function.phpに貼り付けましょう。

「function.php」の場所:
ワードプレスの管理画面の左メニューの「外観」→「テーマ編集」と進むと、
右側の「テンプレート」の中に「テーマのための関数(function.php)」があります。
これを開き、一番下のほうにコピペしましょう。

※「?>」の印よりも上に貼ること!

ステップ2

下のコードを、実際にPCとスマホで分けたいところに貼ります。

トップページならhome.php、サイドバーならsidebar.php、個別記事ならsingle.phpと、目的のファイルで自由に使うことができます。

またこれを使えば、「PCの時だけ表示したい内容」「スマホの時だけ表示したい内容」など自由自在です☆

 

Stingerカスタマイズについて

medium_5438832695

photo credit: eva.pébar via photopin cc

 

最初にも述べましたが、Stingerは本当に自由自在にカスタマイズができ、
自分色に染めることが可能です。

当ブログへも、「Stingerカスタマイズ」「Stinger カスタマイズ css」「Stinger スマホ デザイン」「ピーマンの美味しい食べ方」などの検索ワードでお越しになる方が増えました。

もし当ブログをご覧になって、「この部分どうやって作ってるんだ」などご不明のところや気になったところがありましたら、お気軽にtwitterからご連絡くだされば、デザイン関係のことはまず問題なくお答えできるかと思います。(ついでにフォローもお待ちしております、ぐへへへへ)

なお、当ブログがありがたいことに高速化に成功し、GTmetrixでダブルA評価を出してます。
そのあたりのことを書いた記事
gtmetrixでダブルA評価達成!ワードプレス高速化のためにやったこと

その他のwordpress関連記事はこちら

 

今後共、同じブロガー同士、協力しあっていいデザインを目指していきましょう!

ではでは!(*´∀`*)

ついでに読みたい