エピソードのリストを作るよ③

こんにちは。三連休を楽しんでらっしゃるでしょうか？　先週は日記を書いたのでお休みしましたが、今回はこれでリストを作るのは終わりにします。

前回のおさらい

前回はこんな感じで、投稿データを読み込むところまで行いました。

今度はこれをきちんとhtmlの形にして返り値にとして返します。

読み込んだ投稿データを使ってhtmlを組むわよ

ご存知の通りこのままでは表示できません。……いや表示は出来るんですが、リンクにすることは出来ません(；・∀・)というわけで、読み込んだ投稿データを使ってhtmlを組みます。

組んだhtmlはこんな感じです

	//投稿を取得
	$post_list = get_posts($args);

	//返すすhtmlを作っていく
	$return_html = '<div id="title_list">';

	//話数の初期化
	$story_count = 1;

	//リスト部分を作る
	if($post_list){
		foreach($post_list as $post){
			$return_html = $return_html . '<div class="title_area">'
										. '<a href="'.get_permalink($post -> ID).'" alt="'.$post->post_title.'">'
										. '<span class="title">'. $story_count . ' . ' . $post->post_title .'</span>'
										. '<span class="date">'. $post->post_date . '</span>'
										. '</a>'
										. '</div>';
			//話数をすすめる
			$story_count = $story_count + 1;
		}

	}
	else{
		$return_html = $return_html . 'まだなにもないわよ';
	}

こんな感じ。一応投稿データがまだないときのことを考えて（要はタイトルは作ったけど、まだエピソードを書いてない状態）、投稿データが見当たらなかったら『ないわよ』と表示されるようにしてあります。ヒアドキュメントを使わないのはめんどくさいから(；・∀・)　なんかうまくつかえないんですよねーあれ。

では、実際にどうなったかと言うと……

うん。悪くない感じです。

ちなみに投稿データが何も見つからなかった場合は……

うん。ちゃんと『ないわよ』と言ってきてますね。ゆくゆくはちゃんと表示の文言を考えるとして、とりあえずはこれでよしとします。

CSSでそれっぽい表示にするわよ

しかしこのままではホントにそのままの表示なので、CSSでそれっぽい表示に装飾してあげることにします。

というわけで、先程のコードにこんな変更を加えました。

	//投稿を取得
	$post_list = get_posts($args);

	//返すすhtmlを作っていく
	$return_html = '<div id="title_list">';

	//話数の初期化
	$story_count = 1;

	//リスト部分を作る
	if($post_list){
		foreach($post_list as $post){
			$return_html = $return_html . '<div class="title_area">'
										. '<a href="'.get_permalink($post -> ID).'" alt="'.$post->post_title.'">'
										. '<span class="title">'. $story_count . ' . ' . $post->post_title .'</span>'
										. '<span class="date">'. $post->post_date . '</span>'
										. '</a>'
										. '</div>';
			//話数をすすめる
			$story_count = $story_count + 1;
		}

		//CSSの作成
$css = <<<__LONG_STRRING__
<style>
#title_list{
	width:100%;
	height:auto;
}
.title_area{
	width:100%;
	height:auto;
	font-size:1rem;
	line-height:2.5rem;
	border-bottom:solid 1px rgb(200,200,200);
}
.title_area a{
	display:block;
	width:100%;
	height:100%;
	padding:5px;
	color:#333;
	text-decoration:none;
	transition:all 2s;
}
.title_area a:hover{
	background:#ffffe0;
	color:#00008b;
}
.title,
.date{
	display:inline-block;
	width:60%;
}
.date{
	width:40%;
	text-align:right;
}


</style>
__LONG_STRRING__;

	}
	else{
		$return_html = $return_html . 'まだなにもないわよ';
	}
	
	$return_html = $css.$return_html . '</div>';

こんな感じです。変わったのはCSSのところのヒアドキュメント。さっきは『ヒアドキュメント使いたくない』とダダを捏ねた舌の根も乾かないうちにヒアドキュメントを使ってますが、それはヒアドキュメントじゃないとここはめんどくさいんじゃないかなぁ……と思ったからです。

一応、投稿データがない場合はCSSは追加しないようにしてます。

というわけで、これで表示はどうなったのかというと……

うん。いい感じ。

ちなみに色が変わっているのは、マウスオーバーしたときです。『transition:all 2s;』を設定してるので、ふわっと色が変わるようにしてます。

このままだと長いサブタイトルの場合にどうひょうじになるかとか色々と問題はありますが、とりあえずはこれで良いことにします。長かったリスト作成の話も、これで終わりですね。

余談ですが、トップの絵はこのnoteで記事を書いてるときのワシです。昨日夜ふかしをしたせいか、今日は非常に眠いのです……(；・∀・)