[say]自分のCSSの実力を試したくて、はてなブログのテーマを作成しています。[/say]
問題点
月別アーカイブの記事を上のように配置できたのはいいのですが、画像がおかしなことになっています。2枚重なったような表示になるのです。
[codebox title=”わたしの書いたCSS”]
.page-archive .entry-thumb {
width: 300px;
height: 200px;
position: relative;
right: 9px;
bottom: 1px;
background-size:contain !important;
}
[/codebox]
コードを見る限りは大丈夫そうなのに…。そこで、chromeの検証機能を使ってCSSやHTMLを覗いてみることにしました。
[codebox title=”HTML”]
<div class="entry-thumb" style="background-image: url
('https://cdn.image.st-hatena.com/image/square/8b8c27bedbb63962ae6972d630b20c07b7f3c9cd/
backend=imagemagick;height=500;quality=80;version=1;width=500/
https%3A%2F%2Fcdn-ak.f.st-
hatena.com%2Fimages%2Ffotolife%2Fh%2Fhatenablog%
2F20101106%2F20101106100658.jpg');">
</div>
[/codebox]
クラス名entry-thumbはサムネのことです。HTML内でCSSを使って背景画像のURL、つまりサムネのURLを取得しています。
squareという文字や％？だらけのURLからなんらかのプログラムでURLを受け取っていることが予想できます。
またsquareという文字から、画像を正方形にするプログラムが組まれているのではないかと考えました。高さ・幅も500になってるし。
[sen]
解決策
その１
画像アドレスをコピーしてさっきのURLを置き換えれば、検証上はきれいに表示できました。
しかしJavascriptでのサムネURLの取得方法がわかりません。頑張って調べます。
その２
[codebox title=”コード”]
[/codebox]
一番初めに書いたこのコードを消去します。
すると下の画像のようになりました。真ん中を拡大して切り抜いたもの、と言えばよいのでしょうか。
アイキャッチを風景にしている場合は十分この方法でOKですが、文字入りのアイキャッチの場合ピントがずれるので、かっこ悪いです。
[sen]
さいごに
JavascriptでのサムネURLの取得方法を頑張って書きます。ジャバスクリプトは全く分からないので、ひたすらググるしかなさそうです。
おすすめの参考サイトあれば、コメント欄で教えてくださるととても嬉しいです。
コメント