• TOP
• Web技術
• WordPress
• ブログにオリジナルのカバー画像を設置する方法

ホンモノの私はどーれだっ！
どうも@knk_nです。

今回、当ブログトップにカバー画像を付けてみました。
設置前、設置中に思ったことを書き留めておきます。

サムネイルライクなトップ画像、その手があったか！

最近、私も大変お世話になっている「ごりゅご.com」の@goryugoさんがブログテーマを変えたそうです。

ブログ名が「ひらがな+.com」なんていいセンスしてるぜ。あれ？ここもそうか。

参考: ブログデザインをリニューアルしました | ごりゅご.com

一番驚いたのが、サムネイルスタイルなトップ画像を使っていたことです。
わたしゃ、目からウロコがおちた気分でした。その手があったか！！

さらに、グラフィック系のソフトをまったく使っていない私でも画像を組み合わせるタイプの画像なら作れるのではないか！

私もブログトップに画像を付けることを決意いたしました。

記事アイキャッチを並べるという発想

さてどんな画像を並べてやろうかと考えたときに、真っ先に出たもの。

「記事のアイキャッチはどうだろう」

「百聞は一見にしかず」ということ

例えばこの夕日の美しさ。どんなに言葉を尽くしてもこの一枚には敵いませんよね。

関連記事や最新記事、Facebookのポストに至るまでキチンと記事アイキャッチを用意されている方が多いですよね。
さて、なぜでしょうか。

それはタイトル・文章よりも（もちろんタイトル・文章ともに大切であることは言うまでもありませんが）画像のもつイメージの強さを利用しようと考えているからだろうと思います。

アイキャッチに記事を象徴する、あるいはその記事に関する画像が選ばれるのはこのような理由があるからでしょう。

どんなブログか一発でわかる

さて、アイキャッチはその記事を象徴、あるいは記事に関する画像がたいてい選ばれます。
その画像をトップに配置するということはどのような意味を持つのでしょう。

アイキャッチをブログトップに配置すると「このブログにはこんな記事がありますよ」というアピールになります。
当ブログはEvernote、Mac、iPhoneなどのネタを主に扱っていますが文字以上に画像だとアピールができますよね。

もうひとつここで個人的に大事だと思っていることは、「アイキャッチの選び方」です。トップに表示されブログの顔になるのだとすれば、今までよりもアイキャッチは真剣に選ばないとね。

なんてったってオリジナル！

記事のアイキャッチは個々で当然異なってくるので、同じように作ってもオリジナリティあふれるカバー画像を設置することができます。

アクセスするたびにカバー画像が変わる楽しさ

画像の選択はランダムにしているのでアクセスするたびにカバー画像が変わります。
記事の数と配置のパターン数を考えると何通りあるか考えたくなくなりますね。ちなみに記事の数は今後も増え続けていく予定なのでパターン数も増え続けていくわけです。オモシロイダロ。

アイキャッチ対象の画像が見つからない場合は私のアイコンを表示させています。

なかなかレアですが私だらけのこんなキモチワルイパターンも見られるかもしれませんね。

記事アイキャッチのカバー画像を表示させる方法

アイキャッチはこちらの方法で取得しています。（そもそもアイキャッチ画像なんて設定してない…）

参考: WPtouchカスタマイズ番外編 -サムネイル用画像をコントロールしよう- | けんけん.com

PHPファイルはこんな感じ

<div class="headerImg">
	<a href="<?php echo home_url(); ?>" alt="<?php bloginfo('name'); ?>">
		<?php if (have_posts()) : query_posts('posts_per_page=33&orderby=rand'); ?>
			<?php while (have_posts()) : the_post(); ?>
				<li class="headerImg_thumb">
					<img src="<?php echo new_catch_that_image(); ?>" width="90" height="90"/>
				</li>
			<?php endwhile; wp_reset_query(); ?>
		<?php endif; ?>
	</a>
</div>

サイドバーにタブコンテンツを設置したときに紹介させてもらった、記事リストの応用です。記事リストといってもアイキャッチのみですが。

参考: jQueryを使ったスムースなタブメニュー | ウェビメモ

CSSはこんな感じ。

.headerImg_thumb {
	list-style: none;
	position: relative;
	height: 90px;
	width: 90px;
	float: left;
}

サイズなど細かな部分は各自調整するといいです。

おわりに

ブログ名の部分ももっとこだわりたかったのですがモチベーション的にギブアップ。次回またいじることがあればもう少しここは考えたい。とりあえずブログ名が分かる程度にはしておいた。

ひさびさにブログをいじったついでに、以前導入した雑誌風なトップページをやめて普通のよくあるやつに。少し試したけどあまり合わなかった。

WordPressデザインブックを買ったら、これまでの経験を生かしてゼロからWordPressテーマを再自作しようと思ってる。
（自作熱が燃え上がっていろいろ手につかなくなるのがわかり切ってるので、まだ買ってない。）

そのときにもこのカバー画像はぜひとも引き継ぎたい。

カバー画像作るのメンドクサイ(´・ω・｀)という方にはぜひオススメしたい方法です。
実際にページを訪れて、一度見てみてください。