スマホサイト制作日誌（４）WPTouchの記事リストのデザインを変更する |

前の記事：スマホサイト制作日誌（３）WPTouchのオリジナルテーマを作る

それでは、いよいよカスタマイズスタートです。（前ふり長っ！）
私が目指すカスタマイズ項目は以下の通り。
【必須】

背景画像は削除する
記事リストの要素を整理し、一記事のスペースを節約。
記事リスト以外の要素をTOPに載せる。

【できれば】

SNSへのフォローボタンを配置。
ヘッダーをオリジナルロゴにする。
タグ・カテゴリメニューを呼び出すボタンをわかりやすくする。
PCサイトにある固定ページも追加する。

要は、「TOPページをもっと見やすく、にぎやかに！」。
できるところからコツコツと、できないコトはあきらめも肝心。
（合宿で学んだしねっｗｗ！）

※ここからすべて
/wp-content/plugins/wptouch/themes/jkadent（テーマ名）/　内のファイルのことを記述していきます。

背景画像を削除する

これは一番簡単。
header.php 内の５行目あたりの
【変更前】

<body class="<?php wptouch_core_body_background(); ?> <?php wptouch_idevice_classes(); ?>">

を
【変更後】

<body class=" <?php wptouch_idevice_classes(); ?>">

にするだけです。

TOPページの記事リストを整理する

これが前回までのTOPページ。最新記事リストにはいらない情報もあり、一記事がかなりスペースを取っているので、整理します。
index.php　の166行目あたりの

<div class="post-author">
<?php if ($wptouch_settings['post-cal-thumb'] != 'calendar-icons') { ?>
<span class="lead"><?php _e("Written on", "wptouch"); ?></span>
 <?php echo get_the_time('d.m.Y') ?> 
<?php _e("at", "wptouch"); ?> <?php echo get_the_time('G:i') ?><br /><?php if (!bnc_show_author()) { echo '<br />';} ?><?php } ?>
<?php if (bnc_show_author()) { ?><span class="lead"><?php _e("By", "wptouch"); ?></span> <?php the_author(); ?><br /><?php } ?>
<?php if (bnc_show_categories()) { echo('<span class="lead">' . __( 'Categories', 'wptouch' ) . ':</span> '); the_category(', '); echo('<br />'); } ?> 
<?php if (bnc_show_tags() && get_the_tags()) { the_tags('<span class="lead">' . __( 'Tags', 'wptouch' ) . ':</span> ', ', ', ''); } ?>
</div>

を

<div class="post-author">
<?php if ($wptouch_settings['post-cal-thumb'] != 'calendar-icons') { ?> 
<?php echo get_the_time('Y.m.d') ?><?php } ?> |
 <?php if (bnc_show_author()) { ?><span class="lead"><?php _e("By", "wptouch"); ?></span> <?php the_author(); ?><br /><?php } ?>
 <?php if (bnc_show_categories()) { echo the_category(', '); echo('<br />'); } ?>    
</div>

にしました。行は折り返してますのでちょっと見にくいんですが、要は、
「投稿：(日付) at(時間)　カテゴリー：(カテゴリー名)　タグ：(タグ名)」　から、
「（日付）｜（カテゴリー名）」　の２要素だけを残して1行にしたということです。

記事タイトルの角丸枠を取り除く

一記事ずつ囲んだ角丸四角形も縦スペースを無駄に使うので撤去します。

style.css の763行あたりのクラス　「.post」を編集します。

【変更前】

.post {
	background-color: #fff;
	padding: 10px;
	margin-bottom: 12px;
	margin-right: 10px;
	margin-left: 10px;
	border: 1px solid #b1b1b1;
	-webkit-border-radius: 8px;
	position: relative;
	z-index: 0;
		box-shadow: rgba(255,255,255,.8) 0px 1px 0px;
}

【変更後】

.post {
	background-color: #fff;
	padding: 10px;
        border-bottom: 1px solid #999;
        }

こうすると、角丸四角形が消え、リストっぽく並べることができました。

これは単に縦幅節約だけの問題ではなく、スマートフォンの小さな画面でいかにユーザーに効率よくコンテンツを読んでもらうかを突き詰めていく小さな一歩です。
また、他の要素をTOPに盛り込むためには、記事リストとの統一感が必要なので、その後の追加項目のことも考えて、デザインするといいと思いました。

次は、新しいコンテンツ要素の追加方法を書きます。　　　

次の記事：スマホサイト制作日誌（５）WPTouchテーマのTOP画面に任意のコンテンツを配置する　

★お知らせ★

現在すでに、カスタマイズ終了後のサイトをアップロードしています。
スマートフォンから「家電女子.net」（https://jkaden.net/）をご覧になりながら読むと、よりわかりやすいかもしれません。

スマホサイト制作日誌（４）WPTouchの記事リストのデザインを変更する

背景画像を削除する

TOPページの記事リストを整理する

記事タイトルの角丸枠を取り除く

2 thoughts on “スマホサイト制作日誌（４）WPTouchの記事リストのデザインを変更する”

コメントを残すコメントをキャンセル

背景画像を削除する

TOPページの記事リストを整理する

記事タイトルの角丸枠を取り除く

2 thoughts on “スマホサイト制作日誌（４）WPTouchの記事リストのデザインを変更する”

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル