風の羅針盤 | Destination of winds.

【WordPress】テーマ「マテリアル」のスマホ画面をスケルトンに!

time 2015/11/10  所要時間:約 4

【WordPress】テーマ「マテリアル」のスマホ画面をスケルトンに!

WordPressのテーマを「マテリアル」に変更してしばらく経ちましたが、このテーマは見た目もすっきりしていて本当に見やすいですね。

このテーマの特徴の一つに、画面のサイズに応じて、メインカラムの列数が

3列+サイドバー→3列→2列→1列

となる機能があります。

列数が少なくなると、その分の列が下へ回り込む設計になっているので、見ている端末の画面サイズに応じて、最適な文字や画像の大きさを保ちながら、じっくりサイトを見ることが出来ます。

 

ただ、私がシミッタレなせいもあって、できるだけ多くの情報を表示させたいがあまり、サイドバーに多くのウィジェットを置いたり、一度に表示させる記事数を削れなかったりしてしまうという悲しい状況に・・・

すると、特にスマートフォンで閲覧する場合はかなりの量スクロールをしないと、画面の下の方を表示することが出来ず、なんとか出来ないかなあ、と考え試行錯誤していたのですが、

これは結構いいんじゃね?

と思える表示ができたので、ご紹介します。

 

スポンサーリンク

新着記事のボックスを半透明にして、文字をアイキャッチの上に表示

スマホ用のサイトでは、画面上半分にアイキャッチ画像、下半分にタイトルや日付が入っています。

このサイトでは、

スマホ用ビュー1

こんな感じです。ちなみに、赤い「New!」バッジはコレも私でつけたものなので、こちらを参考に。

 

画面はiPhone6ですが、一度に表示できる領域は記事一つ半分ほどです。

ここで、ちょうど半分のアイキャッチ分の大きさのボックスに、文字を被せて表示することは出来ないか調べてみました。

そうすれば単純に専有する場所が単純に考えて半分になり、その分縦のスクロールを短く出来ます。

 

ただ、これはスマホで表示させた時に限ります。画面の大きなパソコンやタブレットではあまり意味が無いですし、デザインを崩してしまいかねませんから、ここも工夫が必要ですね。

 

style.cssにスマホ用の記述が出来る!!

そうなんです。このテーマはスマホ表示時にだけ適用されるスタイルシートが書けるのです。ほんとうに便利!

「外観」-「テーマの編集」から、style.cssを開いて、

と記載されている部分を探します。

この下の部分に、以下のコードを貼り付けます。

たったこれだけです。

ここでやっていることは、

  1. ボックス内の文字の大きさの調整
  2. アイキャッチの上に文字を被せるため、画像にグラデーションをかけ、下から上に向かって明るくなるようにし、且つ透明にする
  3. 被せる文字をホワイト色にし、シャドウ(影)をつける
  4. 新着記事の下にあるカテゴリボックス内の記事の文字の再定義

です。こうすることで、このような表示になりました。

スマホ用ビュー2

う~ん、いい感じ(笑)

だいぶ感じが変わりますね。

同時に一度に表示される記事が約3つ(ちょっと切れてますけど 汗)になって、スペースも節約できました。

 

スマホ用に記事の表示数も少なくしてみる

これはおまけですが、ついでにスマホで表示させた際に一度に表示する記事の数をちょっと少なく出来ないかも試してみました。

全てはスクロール節約のためです ^^;

function.phpへ挿入

loop.php編集前

loop.php編集後

cat_lists.php編集前

cat_lists.php編集後

それぞれloop.phpとcat_list.phpの最初の部分を書き換えます。

上記でテーマカスタマイザーの設定にかかわらず、スマホの場合トップページの新着記事数は6件固定、カテゴリごとの記事は1カテゴリ当たり最大3件固定になります。

 

ちなみに、loop.phpとcat_list.phpは子テーマフォルダにファイルをコピーしてから編集することをオススメします。

特にfunction.phpは編集を間違うと全く表示されなくなったりしてしまいますので、バックアップ&自己責任でよろしくお願いしますね。

最後に作者のNobuoさん、勝手にいじってしまってゴメンナサイ!

スポンサーリンク

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

down

コメントする




*

この記事の関連カテゴリ

関連記事



スポンサーリンク