画像の取り方
Recent Postsはローカルでビルドするときに作るので
Octopressの中で設定してある値を使ったり出来ますが、
はてなブックマークのリストは実際表示するときにJavaScriptで作るので
同じような事は出来ません。
以前のリストの取り方だと、リストの中には
ページのタイトル、リンクとブックマーク数くらいしか無いので
画像を取るためには直接各ページにアクセスするか、
もしくは各ページ用の画像を適当な規則で決めたURLにおいておくかする必要があります。
最初、各ページの画像を作っておいておこうかと思ったんですが、
ちょっと面倒なので別の方法を。
ちょっと探したら、Feedを取ってきてその中の画像を使うという方法があったので、
これを参考にさせてもらいました。
【修正済】コピペで簡単！ はてなブログの人気記事を画像付きで表示させる方法。 - #ChiroruLab
この方法だとタイトルやリンクもこの中で一緒に取ってくることになります。
source/_includes/custom/asides/hatebu.htmlを下のように変更します。
source/_includes/custom/asides/hatebu.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| {% if site.hatena_popular_posts %}
<section>
<h1><a href="http://b.hatena.ne.jp/entrylist?mode=rss&sort=count&url={{site.url}}">Popular Posts</a></h1>
<div id="hatena-bookmark-widget"><div>
<ul>
</ul>
</div>
<script src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function getHatebuEntries() {
var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&sort=count&url={{site.url}}");
feed.setNumEntries({% if site.hatena_popular_num %}{{site.hatena_popular_num}}{% else %}10{% endif %});
feed.load(function(result) {
if (!result.error) {
var f = document.createDocumentFragment();
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var l = document.createElement('li');
var d = document.createElement('div');
d.className="group";
var wrap = document.createElement('div');
wrap.className="title-smallthumb";
var imglink = document.createElement('a');
imglink.href = entry.link;
var img = document.createElement('img');
img.src = entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/)[0];
imglink.appendChild(img);
wrap.appendChild(imglink);
d.appendChild(wrap);
var title = document.createElement('a');
title.href = entry.link;
title.className = 'hatena-bookmark-entrytitle';
title.appendChild(document.createTextNode(entry.title.replace(/ #.*/,"").replace(/ - rcm.*/,"")));
d.appendChild(title);
d.appendChild(document.createElement('br'));
var count = document.createElement('a');
count.href = '//b.hatena.ne.jp/entry/' + entry.link;
var users = document.createElement('img');
users.src="http://b.hatena.ne.jp/entry/image/" + entry.link;
count.appendChild(users);
d.appendChild(count);
l.appendChild(document.createElement('div').appendChild(d));
f.appendChild(l);
}
var t = document.getElementById('hatena-bookmark-widget').getElementsByTagName('ul')[0];
t.appendChild(f);
}
});
}
google.setOnLoadCallback(getHatebuEntries);
</script>
</section>
{% endif %}
|
各ページの画像の設定
各ページの画像は自動的に設定されますが、自分で変更することも出来ます。
変更するにはFirefoxかGoogle Chromeではてなブックマークの拡張を入れる必要があります。
はてなブックマークFirefox拡張で新しいインターネットを体験しよう
はてなブックマークGoogle Chrome拡張で新しい情報を発見しよう
これらの拡張経由でブックマーク編集ページを表示させると
画像を設定できる所があるのでそれで変更すればOK。
