タグ: Simplicity

こんにちは。ちゃぼP（@chabo0429）です。

WordPressのカスタマイズが一段落したので、これまでやったカスタマイズをまとめてみたいと思います。

それぞれの効果も人によっておそらく異なりますし、このままガサっと全部コピーしてしまうと、風の羅針盤のコピーサイトが出来てしまいますので、あくまで機能や目的、サイト全体のデザインバランスをよく検討したうえで、ご利用くださいね！

①Amazonリンク

【WordPress】Amazonリンクのおススメベスト3～TPOに合わせて最適なスタイルを！

アフィリエイトの定番、「Amazonアソシエイツ」。私のようにガジェット系のレビューをする人間にとって、大事なアマゾンへのリンクボックスですが、見た目がイマイチだと魅力も半減。ここはひとつ、魅力的な文章の最後に、ステキなリンクでAmazonへスマートに誘導しましょう！

ということで、goriさんのデザインをはじめ、いくつかのボックスを紹介しています。思えばこの記事から部長との縁が始まった記念すべき記事ですね。

②この記事が気に入ったら「いいね」しよう！ボックス

【WordPress】「この記事が気に入ったら いいね！しよう」を投稿ページに設置する方法

これはままはっくさんの元ネタの記事ですが、マテリアルだと「いいね」をしようとすると、サムネイルが切れてしまうという問題を抱えていたため、少しカスタマイズを加えました。

Simplicityを採用している部長のサイトでも使われています。見た目もイケてますね！

③新着記事には「New!」バッジを表示

【WordPress】WordPress用テーマ「マテリアル」新着記事に「New!」バッジを導入してみたよ

新しい記事は目立たせたい！

ブログ記事は通常、新しい記事から順番に表示されますが、公開したばかりの記事はひと目で「新しい記事」と分かってもらえるとアクセスアップにつながる可能性が高くなります。

ここでは公開後3日間以内の記事に、赤い「New!」バッジを表示させる方法を記載しています。新しい記事を目立たせたい方は是非どうぞ！

④ページ全文の「読むのにかかる時間」を表示

http://www.omoide-soko.jp/apps/wordpress/wordpress/709

本文の長い記事は、忙しい合間に読みにきてくれた人には全部読んでもらえない可能性が高くなります。そんな記事は「Pocket」にクリップしてもらって、あとで読んでもらえるようにするのも親切な設計。

ここではタイトル部分に全文を読む所要時間を「約○分」という形で表示しています。リンクボックスやコードは含まずに計算するので、純粋に「本文」のみの所要時間を表示してくれるので、記事の長さをパッと把握するのに便利ですよ！

⑤「リファラ」を伝えることができる「Celtispack」ブログカード

【WordPress】Celtispackで直接リンク形式のブログカードを作ってリファラを伝えよう

これは主に「マテリアル」に使う感じですが、プラグイン「Celtispack」を使うと、リファラ情報を相手に通知することができます。

「リファラ」とは、どこからサイトに飛んできたのかを示す情報で、例えばこの風の羅針盤に貼られている部長ナビのページへのリンクをクリックすると、部長のGoogleAnalyticsに「風の羅針盤からリンクで飛んできた人がいたよ！」と記録されるので、リンクしていることが相手に通知できるというものです。

Simplicityは、標準で「はてなブログカード」を装備しているので、このプラグインを入れなくても、ブログカードは表示できますが、リンク元が「hatenablog-parts.com」になります。そのため、リンク先のサイト側ではどのサイトからやってきたのかが分かりません。

この「Celticpack」は、リンク元がそのままリンク先に通知されるので、もしかしたらリンク先のブロガーさんに気づいてもらえるかも！？

⑥サムネイル付きページめくり機能

【WordPress】前の記事・次の記事へのサムネイル付きページめくり機能導入記

実は「マテリアル」にはページめくり機能が標準装備されておらず、何かいいものがないかと探していたところ、サムネイル付きのページめくり機能を紹介しているところがありました。

さっそく実装してみたところ、すごくいい感じ！

「直近のページを見たい！」という人には親切なページめくり機能。Simplicityには標準でページめくり機能は実装されていますが、ちょっと人と違った見た目がいい人におススメ。Simplicityでも多分実装できるはずです。試してないですが（笑）

⑦個別記事にシェアカウントを合計して表示

【WordPress】SNSシェア数を合計して表示する方法（マテリアル編）

これは元々部長のオーダーで作った機能ですね。既に部長のページでもお馴染みかと思います。風の羅針盤では個別記事の右上、それから記事下中央のシェアボタン上に表示しています。

プラグイン「SNS Count Cache」を使い、Twitter、Facebook、Pocket、Hatenaでのシェアをカウントしてくれますので、割と簡単に実装できます。これはイチオシです。

⑧トップページの最新記事を大きく目立たせる

【WordPress】トップページで最新記事を大きく表示する方法

これは風の羅針盤のトップページに表示している大きなアイキャッチと、下半分の半透明なタイトルエリアの実装方法です。この記事を書いた時と現在は若干デザインを変えていますので、元記事を修正しました。

テーマのデフォルトですと、ちょっとトップページが寂しかったので、最新記事を大きくした感じですね！

PCでは2記事、モバイルでは1記事のみを大きく表示するようにデザインしました。

⑨カテゴリ一覧固定ページを作成

【WordPress】マテリアルとSimplicityでカテゴリ一覧ページを作成する方法

カテゴリ一覧ページを固定ページとして作成して、それをグローバルメニューに表示しています。

記事がそれなりに多くなってくると、カテゴリをどうやって活かすかも重要になってきますので、簡単にわかりやすくカテゴリページにアクセスできるようにデザインしてみました。

⑩フォロワー数入りTwitter,Feedly,Push7フォローボックスを記事下に設置

【WordPress】記事下にTwitter,Feedly,Push7のフォローボタンを設置する方法

これも一応オリジナルです。プラグイン「SNS Count Cache」がTwitterやPush7に対応したため、それを利用してフォロワー数を表示できるようにしてみました。

フラットなタイル調にまとめてみましたが、色が強いので、サイトを選ぶかもしれませんね。

⑪関連記事をタイル風に並べて表示

【WordPress】関連記事をタイル風に並べて表示〜Simplicity,マテリアルカスタマイズ

これまで関連記事は一番左にアイキャッチ、右に記事タイトルが表示され、それが縦に並ぶ表示方法でした。

これをよりアイキャッチを目立たせ、スクエア風に見やすい関連記事にしてみました。これは部長のサイトでも実装済みです。

⑫カテゴリ別新着記事をヘッダー下に表示

【WordPress】ヘッダー下にカテゴリボックスを並べる方法（Simplicity,マテリアル）

以前は横に3枚でしたが、5枚に増やしました。ここは部長も同じデザインになっています。中の日付などの位置がちょっと違いますが、インパクト絶大です！

暖簾みたいですけどね（笑）

⑬個別記事下にアイキャッチ付きカテゴリリンクボックスを表示

【WordPress】アイキャッチ付きカテゴリリンクを個別記事に表示する（Simplicity,マテリアル）

これも部長のオーダーで実装済みです。アイキャッチがついたカテゴリリンクは、サイトの回遊率アップにとても効果的ですよ！

さいごに

これまで少しずつやってきたカスタマイズをまとめてみました。

改めて見ると、かなりいじってますね（笑）

でもかなり個性的＆見やすい状態になっていると思います。

WordPressのデザインに悩んでいる方も多いと思いますが、参考にしていただけると幸いです！

こんにちは。WordPressカスタマイズにハマっているちゃぼP（@chabo0429）です。

先日この風の羅針盤、それから部長サイトで、個別記事の一番下の部分にアイキャッチ付きのカテゴリページへのリンクが追加されております。

カテゴリをテキストで表示させるだけなら楽なのですが・・・やっぱりそこはアイキャッチ付きのカッコイイリンクの方が見栄えもいいし、分かりやすいですよね。

今日はその方法をご紹介していきます。

「Advanced Custom Fields」プラグインをインストール

通常、カテゴリにアイキャッチ画像は付与することができません。

アイキャッチをカテゴリに付加させるために、まずは「Advanced Custom Fields」というプラグインをインストールします。

インストールとアイキャッチ画像の追加については、以下のサイトに詳しく解説されていますので、参考にしてみてください。

カテゴリーごとに異なるアイキャッチ画像を表示する

single.phpにカテゴリリンクを挿入

プラグインのインストールと、カテゴリへのアイキャッチ画像の追加が完了したら、個別記事のカテゴリページへのリンクを挿入したい部分に、以下のコードを挿入します。

<!--同タグ・同カテゴリー記事を出力-->
<?php

	$tags = get_the_tags();
	$categories = get_the_category();
	$id = get_the_ID();
	$args;


	if($categories){
		$cat_array = array();
		foreach($categories as $category){
			array_push($cat_array, $category->slug);
			if($cats_string)$cats_string .= ",";
			$cats_string .= $category->slug;
		}
	}

	if($tags){
		$tag_array = array();
		foreach($tags as $tag){	
			array_push($tag_array, $tag->slug);
		}

		$args = array(
			'tax_query' => array(
				'relation' => 'OR',
				array(
					'taxonomy' => 'category',
					'field' => 'slug',
					'terms' => $cat_array,
					'include_children' => true,
					'operator' => 'IN'
				),
				array(
					'taxonomy' => 'post_tag',
					'field' => 'slug',
					'terms' => $tag_array,
					'include_children' => false,
					'operator' => 'IN'
				)
			),
			'post__not_in' => array($id),
			'orderby'=>'rand',
			'posts_per_page' => $count
		);
	}else{
		$args = array(
			'category_name' => $cats_string,
			'post__not_in' => array($id),
			'orderby'=>'rand',
			'posts_per_page' => $count
		);
	}

	$the_query = new WP_Query($args);
	if($the_query->post_count > 0){ ?>

		<div class="cat-attention">
		<p>この記事に関連するカテゴリ内の記事はこちら</p>
		</div>
		<?php if($categories){ ?>
			<?php foreach($categories as $category){ ?>
			<div class="same-categories">
				<?php
				// カテゴリーのアイキャッチ画像を表示する
				$image = get_field('category-image', 'category_' . $category->cat_ID);
				?><a href="<?php echo home_url().'/?cat='.$category->cat_ID; ?>"><div class="cat-image-single">
				<?php echo wp_get_attachment_image($image['id']);
				?></div>

				<div class="cat-desc-single">
				<?php echo $category->name; ?>
				</div></a>
			</div>
			<?php } ?>
			<!-- .same-categories -->
		<?php } ?>
	<?php }
?>

ちなみに、このコードだと、カテゴリ名がそのままタイトルに表示されますので、カテゴリの説明を表示させたい場合は、73行目の、

				<?php echo $category->name; ?>

を以下のように変更すると、カテゴリのディスクリプション（説明）を表示させることができます。

				<?php echo $category->category_description; ?>

どちらを表示させるかは、サイトのデザインに合わせて設定してみてください。

ちなみに部長はカテゴリ名を、ちゃぼPはディスクリプションを表示させています。

最後にstyle.cssでデザインを調整

これでソースコードは完成ですので、あとはスタイルシートでデザインを調整します。

.cat-image {
	float: left;
	margin-bottom: 10px;
	margin-right: 10px;
}
.cat-desc {
	margin: 0;
	font-size: 1.5em;
}
.cat-image-single {
	float: left;
	margin-bottom: 0px;
	margin-right: 10px;
}
.cat-desc-single {
	margin-left: 10px;
	font-size: 1.5em;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.same-categories {
	margin-bottom: 8px;
	width: 100%;
	height: 150px;
	border: 1px solid #ddd;
	float: left;
}
.same-categories a{
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	transition: color .3s;
}
.same-categories a:hover{
	color: #ff0000;
	background-color: #ffffdd;
	text-decoration: none;
}
.cat-attention{
	color: #ffffff;
	background-color: #000000;
	width: 100%;
	height: 30px;
	font-size: 1.3em;
	text-align: center;
	margin-bottom: 5px;
}

これがPC用です。モバイル表示の時は少し文字を小さくしないとはみ出てしまう場合があるので、

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

.cat-attention{
	font-size: 0.95em;
}
.cat-desc-single {
	font-size: 1.3em;
}

}

これを追加しています。

完成イメージ

これで完成です。イメージはこちら。

個別記事の最下部に、カテゴリに設定したアイキャッチとディスクリプションが表示されています。

ちなみに、「きょうのちゃぼP」の記事は単一カテゴリにしか属していませんが、

複数カテゴリに属する記事には、その記事が属する複数のカテゴリが縦に並んで表示されます。

部長の記事はこんな感じ。ページめくりの前に挿入しています。こちらはカテゴリ名をそのまま表示しています。

一方のモバイル表示はというと、

きちんと文字も小さくなって、綺麗に枠に収まっています。

プラグインの導入などもあって、少々手間がかかりますが、カテゴリページへのリンクを目立たせることでサイト内の回遊率アップに実際効果があるようで、カテゴリページへのアクセスが増加していますので、これはいい感じかも！

私の作成したコードは、simplicityとマテリアルで動作していますが、基本的なコードはテーマに左右されないはずなので、試してみてくださいね！

ぜひ試してみてくださいね！

こんにちは。ちゃぼP（@chabo0429）です。

今日のちゃぼPでも触れましたが、トップページのカテゴリ新着ボックスを3つから5つに増やしました。

早速部長も実装して、両サイトともなんだかトップページに暖簾がかかったようになっております（笑）

というわけで、今日はその実装方法をご紹介します。

カテゴリ新着ボックスは、「main」カラム前に挿入すること

これまでのカテゴリ新着ボックスは、メインカラムのトップ部分に挿入していましたが、それだと横に3枚が限界でした。というのも、サイドバーがヘッダーのすぐ下から始まってしまうため、メインカラムの幅しか使えませんでしたので、これを横いっぱいに使えるようにします。

トップページの要素を読み込む順番は、「ヘッダー」→「メイン・サイド」→「メイン」→「サイド」→「フッター」の順番で読み込みます。

そのため、「メイン」にボックスを挿入してしまうと、サイドバーがその前から始まってしまうのです。

そこで、ヘッダーの直後に挿入することにします。

Simplicityの場合は「before-main.php」に挿入

Simplicityの場合は、あらかじめ子テーマの中に「before-main.php」が存在していますので、そこにコードを挿入します。

<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
?>

〜ここにコード挿入〜

すごく簡単ですね。よくSimplicityでヘッダー下に画像を挿入しているサイトを見かけますが、ここに入れていたんですね。

マテリアルの場合は「header.php」に挿入

マテリアルの場合はちょっと気をつけなければいけません。トップページを読み込む際には「header.php」→「loop.php」の順番でファイルを読み込みますが、loop.phpを読み込む時には、すでにメインカラムが始まっているので、header.phpに挿入しなければなりません。

（省略）

<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

</div>
</nav>

<div class="main-side">

〜ここにコードを挿入〜

<div class="main">

このように、メインカラムが始まる前にコードを挿入します。

表示部ソースコード

実際にボックスを表示するは両テーマとも同じです。

<?php if ( is_home() || is_front_page() ) : ?>
	<?php if (is_mobile()) :?>
	<?php else: ?>
		<?php if ($paged <= 1): ?>
			<!-- 新着カテゴリ1 -->
			<div class="cat_article1">

			<?php
			    $cat = '（スラッグ名１）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名１）">カテゴリ１</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ2 -->
			<div class="cat_article2">

			<?php
			    $cat = '（スラッグ名２）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名２）">カテゴリ２</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ3 -->
			<div class="cat_article3">

			<?php
			    $cat = '（スラッグ名３）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名３）">カテゴリ３</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ4 -->
			<div class="cat_article4">

			<?php
			    $cat = '（スラッグ名４）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名４）">カテゴリ４</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ5 -->
			<div class="cat_article5">

			<?php
			    $cat = '（スラッグ名５）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名５）">カテゴリ５</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>
		<?php endif; ?>
	<?php endif; ?>
<?php endif; ?>

「スラッグ１〜５」はご自分のサイトのカテゴリのスラッグ名に書き換えます。「カテゴリ１〜５」は、ボックスのインデックスに表示させたいカテゴリ名に書き換えます。

style.cssでデザインを整えます

最後に、デザインを整えます。

/* 最新のカテゴリ記事
--------------------------------------------------------- */
.cat_article1 {
	margin:0 0px 15px 0px;
	float: left;
	width: 19.6%;
}
.cat_article2 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article3 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article4 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article5 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article_thumb {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.cat_article1 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article1 .anchor:hover, .cat_article1 .anchor:active {
	text-decoration: underline;
}
.cat_article1 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article1 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article1 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article1 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article1 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article2 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article2 .anchor:hover, .cat_article2 .anchor:active {
	text-decoration: underline;
}
.cat_article2 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article2 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article2 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article2 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article2 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article3 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article3 .anchor:hover, .cat_article3 .anchor:active {
	text-decoration: underline;
}
.cat_article3 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article3 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article3 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article3 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article3 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article4 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article4 .anchor:hover, .cat_article4 .anchor:active {
	text-decoration: underline;
}
.cat_article4 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article4 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article4 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article4 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article4 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article5 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article5 .anchor:hover, .cat_article5 .anchor:active {
	text-decoration: underline;
}
.cat_article5 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article5 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article5 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article5 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article5 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat-update{
	font-size: 0.7em;
	position:absolute;
	top:0px;
	left:0px;
	color: #fff;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
}
.cat_text_area {
	padding: 0 4px 0;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	color: #fff;
	font-weight: bold;
	overflow: hidden;
	height: 80px;
	line-height: 20px;
	font-size: 15px;
	text-decoration: none;
	background: rgba(3,3,3,0.6);
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(2,2,2,1.0)));
	background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(2,2,2,1.0));
	text-shadow: 0 0 5px rgba(0,0,0,1.0);
}
.postcat1 {
	position:absolute;
	top:0px;
	right:0px;
	background-color: #EA3382;
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 0px 10px 0;
}
/* ここまで

ボックスの横幅やマージンはサイトによって微妙に違うと思いますので、適宜調整を。

完成

これでボックスの完成。実際に表示させてみましょう。

横幅もバッチリ合いました！

ある程度のカテゴリが増えてくると、アイキャッチ付きのカテゴリボックスはインパクトもあって、回遊率アップにも効果的・・かなとも思っています（笑）

こんな感じで自由にカスタマイズできるのも、WordPressのいいところです。是非皆さんのサイトもお試しあれ！

こんにちは。ちゃぼP（@chabo0429）です。

WordPressのテーマですが、皆さんは何を使っていますか？

この風の羅針盤ではNobuoさん（@Nobuo_Create）制作のマテリアルを使わせてもらっていますが、かなりカスタマイズしてしまっていて、原型をとどめないほどになってしまいました・・・

トップページなんて、もはやサイドバー以外はほぼオリジナルがありませんが、今のデザインは実は結構お気に入りです（笑）

今回はまたまた部長のオーダーが入りまして、個別記事の下部に表示される「関連記事」を変更したいとのこと。

これまではリスト形式の表示で、左側にアイキャッチのサムネイル画像、その右側に記事タイトルならび、これが縦一列になって幾つか表示されていました。

これを「gori.me風にしたい！」とのことで、上部にアイキャッチ、下部にタイトルで、これがワンセットになって横に幾つか並ぶ、いわゆるタイル風のデザインにしたいとのこと。

かなり大掛かりなデザイン変更となりましたが、基本的にスタイルシートだけの変更でなんとかなりそうだったので、チャレンジしてみました。

部長のブログはわいひらさん（@yhira）制作の「Simplicity」ですので、標準のテーマカスタマイザーで同じようなデザインに変更することは可能です。ただ、ちょっと枠線がなかったり、タイトル文字が大きかったりと微調整が必要な部分があり、モバイル表示もちょっと崩れてしまっていたので、以下のようにカスタマイズしてみました。

1-1.【Simplicity】PC表示用コードをstyle.cssへ追記

まずは、PC表示用のデザインを整えます。こちらはSimplicity用のコードです。

/* 関連記事をタイル調へ変更 */
.related-entry-title a {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: block;
    height: 120px;
    width: 210px;
}

.related-entry-thumbnail {
    text-align: left;
    margin-bottom: 15px;
    margin-left: 5px;
    margin-right: 5px;
    width: 213px;
    height: 310px;
    border: 1px solid #ddd;
    float: left;
}

.related-entry-thumbnail img {
    width: 213px;
    height: 200px;
    margin-bottom: 0;
}

.related-entry-thumbnail .related-entry-content {
    font-size: 0.9em;
}

.related-entry-thumbnail .related-entry-content a {
    font-size: 0.8em;
}

.related-entry-thumbnail .related-entry-content {
    margin: -15px 0px 0;
}

.related-entry-thumbnail .related-entry-content:hover {background-color:#ffffe1;}

ここでは、

• テキストの左寄せ（中央寄せ解除）
• 画像・テキストボックスの位置調整
• テキストのフォントサイズ変更
• マウスオーバー時の背景色の設定とボックス全体をリンク化
• 枠線の設定

を行っています。これでPC表示での関連記事は以下のようになります。

今回は横3列、縦2列の配置としました。キレイに揃いましたね。

続いて、モバイル表示の調整を行います。

1-2.【Simplicity】モバイル表示用コードをstyle.cssへ追記

モバイルの表示は、PC用のデザインをそのまま使うと表示が崩れるので、モバイル専用のデザインを設定します。ちなみに、アクセス端末がモバイルか否かは、表示画面の幅で決まります。

@media screen and (max-width: 736px) {
.related-entry-title a {
    text-decoration: none;
    font-size: 13px;
    color: #333;
    width: 100%;
    height: 90px;
}

.related-entry-thumbnail .related-entry-content {
    margin: -15px 0px 0;
}

.related-entry-thumbnail {
    text-align: left;
    width: 46.6%;
    height: 240px;
    margin-left: 5px;
    margin-right: 5px;
    float: left;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    line-height: 1.4;
    overflow: hidden;
}

.related-entry-thumbnail img {
    width: 200px;
    height: 150px;
}
}

@media screen and (max-width: 359px) {
#related-entries .related-entry-thumbnail {
    margin: 0 3px 0  !important;
    width: 46.6%  !important;
    margin-bottom: 1em  !important;
    height: 240px  !important;
}
}

ここでは、media screenのmax-widthプロパティを使って、表示する画面の横ピクセル数が「736px以下の場合」「359px以下の場合」の2パターンを設定します。

この「736px」は、iPadよりも小さい端末で適用されます。一般的な中型〜大型のスマホはここに含まれます。

「359px」については、iPhoneSEなどの4インチ以下の端末用です。

これを適用することで、モバイル表示はこんな感じでになります。

モバイル表示は、横幅が狭いので、横2列、縦3列としました。ちなみに特別なことはやっておらず、サイズと間隔の調整のみです。

2-1.【マテリアル】PC表示用コードをstyle.cssへ追記

ここでは、風の羅針盤のテーマ「マテリアル」用のカスタムコードを紹介します。

まずはPC表示用から。

.kanren .thumb-box{
	max-width: none;
	height: 150px;
	width: 200px;
	float: none;
}
.kanren ul a{
	color: #000;
	text-decoration: none;
	display: block;
	height: 250px;
	transition: color .3s;
}
.kanren ul a:hover{
	color: #ff0000;
	background-color: #ffffdd;
	text-decoration: none;
}
.kanren ul li {
	margin-left: 7px;
	margin-right: 7px;
	width: 200px;
	height: 250px;
	border: 1px solid #ddd;
	float: left;
}
.kanren-post-name {
	font-size: 0.9em;
}

やっていることはSImplicity版と同じです。出来上がりはこうなります。

文字の大きさは、Simplicity版より若干大きく、サムネイルを横長にしてみました。

追加でマウスオーバー時に「徐々に文字色が変化」するフェード効果を足しています。

それ以外は同じデザインです。続いてモバイル表示に進みます。

2-2.【マテリアル】モバイル表示用コードをstyle.cssへ追記

Simplicity版と同じで、ここでも端末の736pxの横幅表示をモバイルの判断材料とします。

@media screen and (max-width: 736px) {
.kanren .thumb-box {
    max-width: none;
    height: 100px;
    width: 100%;
    float: none;
}
.kanren-post-name {
	font-size: 0.8em;
}
.kanren ul li {
	width: 46.6%;
	height: 200px;
	margin-left: 5px;
	margin-right: 5px;
}
}

これをstyle.cssに追加します。

出来上がりはこんな感じになります。ここでもサムネイルは横長表示です。

イイ感じに仕上がりました！！

さいごに

部長オーダーのテーマ改造計画でしたが、WordPressの改造は結構楽しいものです。

また、Simplicityはかなりたくさんのブログで採用しているテーマだと思いますので、改造することで個性が強調されますし、是非オススメです。

Simplicity、マテリアルを使用しているサイトでしたら、すぐに使えると思いますので、参考にしてみてください！

ご自身のサイトで使われる際は是非フォロー・コメントいただけると嬉しいです！！

部長ナビのページ・gori.meもヨロシクね！

↓ちゃぼPがスタッフを務める部長のサイト。最近彼は「発注」という言葉をよく使うが、金銭的な絡みは全くない。盛岡名物である「冷麺にわんこそばつける」が調子に乗っている最近の部長の口グセ。

http://nabi1080.com/

↓部長が敬愛する師匠「g.O.R.i」さんのサイト。月間400万PVを超える巨大サイト。デザイン面で大いに参考にさせていただいている。とても見やすいサイトでスッキリしている。素晴らしい！

http://gori.me/