カード型デザインをもう少し考える

2017年4月12日

当ページのリンクには広告が含まれています。

今のこのテーマや、テーマストアに投稿したZENO-TEALではいわゆるカード型デザインとなっています。これの書き方など、もう少し考えてみました。結論は出ていないのですが、頭を整理するためにも書きます。

このブログのテーマのように、自分だけが使う、しかもブログのほぼ始まりからずっとというのであればいくらでも俺ルールを使えるのですが、テーマストアに投稿するなど、自分以外の人が使うことを考えると、なかなか難しいです。

カード型デザインについては、そのやり方を主に3つ考えてみました。

INDEX

1.最初の画像をアイキャッチとする

今使っている方法です。cssで本文の最初に出てくる画像をposition:absolute;で引っ張り出し、無理やりその位置に置いています。

ただ、この方法だと「記事の最初にアイキャッチ的な画像を置いている」というのが前提となります。これがなかなか厳しい人も多いようです。また、記事ページにおいては表示位置を変えるのは難しい（面倒）です。

2.記事の最初に専用のクラスを持つdivを置く

最初の画像をアイキャッチとするのとあまり変わりませんが、記事の最初に以下のような記述をするルールを作ります。

<div class="eyechatch">
<img src="画像url" />
</div>

このeyecatchクラスをcssでposition:absolute;を使って記事の上に表示させたり。これなら記事ページでも本文とは関係なくアイキャッチとして記事タイトルよりも上に表示したりできそう。
ただし、これを使う以前の記事は変わらないし、今後テーマを変える時に面倒。

3.記事ページにアイキャッチを表示

トップページではできないのですが、記事ページではその記事に設定されたアイキャッチを表示することができます。

javaScriptでmeta内のproperty属性から画像を取得する方法| 絶版あかみる

このページを参考にして、以下のように記述します。

<script>
function productImg() {
var pi = document.getElementsByTagName('meta');
for(i=0;i<pi.length;i++){
if(pi[i].getAttribute("property")=="og:image"){
return pi[i].getAttribute("content");
}
}
return "";
}
document.write('<img src="' + productImg() + '" />');
</script>

これでこの記事のアイキャッチに設定されたものが下に表示されます。

記事のタイトル下にでもこういったコードを入れておけば、記事内でアイキャッチ画像を表示できます。

はてなブログではアイキャッチ画像を「ブログ用のもの」「記事内の画像」「URL指定」で設定できます。記事内に表示のない画像でも可です。これを使うと記事ページでは本文やタイトルの上にアイキャッチ画像を表示、なんてこともできそうです。そして最大の利点は、これまでの記事を修正したりしなくていいということ。これまでの記事にもアイキャッチはすでに設定されているはずなので、そういったやり方を変えないで済みます。

ただ、先にも書きましたがトップページではできません。（方法を見つけられてないです。）