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

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

folder WordPress

1 新着記事のボックスを半透明にして、文字をアイキャッチの上に表示
- 1.1 style.cssにスマホ用の記述が出来る！！
2 スマホ用に記事の表示数も少なくしてみる

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

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

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

となる機能があります。

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

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

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

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

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

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

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

このサイトでは、

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

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

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

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

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

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

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

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

@media screen and (max-width: 450px) {

1	@media screen and (max-width: 450px) {

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

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

.post{
	width: 100%;
	float: none;
	margin-right: 0;
	position: relative;
}

.post-info{
	width: 100%;
	padding: 0px;
	position: absolute;
	bottom: 0px;
	color: white;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));　/* Safari,Google Chrome用 */  
	padding: 20px;  
}

.up-date{
	font-size: 0.8em;
	color: #fff;
	float: left;
	text-shadow:2px 2px 3px rgba(0,0,0,1);
}

.post-title{
	color: #fff;
	font-size: 1.0em;
	font-weight: bold;
	padding: 3px 0 0;
	line-height: 1.5;
	clear: both;
	text-shadow:2px 2px 3px rgba(0,0,0,1);
}

.post-title a{
	color: #fff;
	text-decoration: none;
}

.content-header .up-date,
.content-header .cat-link{
	text-align: right;
	float: none;
	font-size: 0.8em;
	color: #666;
	text-shadow: initial;
}

.min-box .post{
	width: initial;
	float: initial;
	margin-right: initial;
	position: initial;
}

.min-box .post-info{
	padding: initial;
	position: initial;
	bottom: initial;
	color: initial;
	background: initial;
}

.min-box .up-date{
	font-size: 0.7em;
	color: initial;
	float: initial;
	text-shadow: initial;
}

.min-box .post-title{
	color: initial;
	font-size: 0.8em;
	font-weight:initial;
	padding: initial;
	line-height: initial;
	clear: initial;
	text-shadow:initial;
}

.min-box .post-title a{
	color: initial;
	text-decoration: initial;
}

.post{

width: 100%;

float: none;

margin-right: 0;

position: relative;

}

.post-info{

width: 100%;

padding: 0px;

position: absolute;

bottom: 0px;

color: white;

background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));　/* Safari,Google Chrome用 */

padding: 20px;

}

.up-date{

font-size: 0.8em;

color: #fff;

float: left;

text-shadow:2px 2px 3px rgba(0,0,0,1);

}

.post-title{

color: #fff;

font-size: 1.0em;

font-weight: bold;

padding: 3px 0 0;

line-height: 1.5;

clear: both;

text-shadow:2px 2px 3px rgba(0,0,0,1);

}

.post-title a{

color: #fff;

text-decoration: none;

}

.content-header .up-date,

.content-header .cat-link{

text-align: right;

float: none;

font-size: 0.8em;

color: #666;

text-shadow: initial;

}

.min-box .post{

width: initial;

float: initial;

margin-right: initial;

position: initial;

}

.min-box .post-info{

padding: initial;

position: initial;

bottom: initial;

color: initial;

background: initial;

}

.min-box .up-date{

font-size: 0.7em;

color: initial;

float: initial;

text-shadow: initial;

}

.min-box .post-title{

color: initial;

font-size: 0.8em;

font-weight:initial;

padding: initial;

line-height: initial;

clear: initial;

text-shadow:initial;

}

.min-box .post-title a{

color: initial;

text-decoration: initial;

}

たったこれだけです。

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

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

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

う～ん、いい感じ（笑）

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

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

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

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

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

function.phpへ挿入

//スマホ表示分岐
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

//スマホ表示分岐

function is_mobile(){

$useragents = array(

'iPhone', // iPhone

'iPod', // iPod touch

'Android.*Mobile', // 1.5+ Android *** Only mobile

'Windows.*Phone', // *** Windows Phone

'dream', // Pre 1.5 Android

'CUPCAKE', // 1.5+ Android

'blackberry9500', // Storm

'blackberry9530', // Storm

'blackberry9520', // Storm v2

'blackberry9550', // Storm v2

'blackberry9800', // Torch

'webOS', // Palm Pre Experimental

'incognito', // Other iPhone browser

'webmate' // Other iPhone browser

);

$pattern = '/'.implode('|', $useragents).'/i';

return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);

}

loop.php編集前

<?php
$row_new = get_row_new_post();   //New postで表示する行数
$count = 1;
?>

<?php

$row_new = get_row_new_post(); //New postで表示する行数

$count = 1;

loop.php編集後

<?php if (is_mobile()) :?>
<?php 
$row_new = 2; //モバイルで表示する記事数
$count = 1;
?>
<?php else: ?>
<?php
$row_new = get_row_new_post();   //New postで表示する行数
$count = 1;
?>
<?php endif; ?>

<?php if (is_mobile()) :?>

<?php

$row_new = 2; //モバイルで表示する記事数

$count = 1;

<?php else: ?>

<?php

$row_new = get_row_new_post(); //New postで表示する行数

$count = 1;

<?php endif; ?>

cat_lists.php編集前

<?php 
$count_cat = get_count_cat_post(); //カテゴリーごとに表示する記事数
?>

<?php

$count_cat = get_count_cat_post(); //カテゴリーごとに表示する記事数

cat_lists.php編集後

<?php if (is_mobile()) :?>
<?php 
$count_cat = 3; //モバイルで表示する記事数
?>
<?php else: ?>
<?php 
$count_cat = get_count_cat_post(); //カテゴリーごとに表示する記事数
?>
<?php endif; ?>