ホームページお作りします

ホームページへのブログの読み込みは完成したので、
今度はこれを少し改造してみようと思います。

今は↓画像のうち、ブログタイトルをクリックした時だけ元のブログ記事に飛べます。
これをもうちょっとクリックしやすくします。



<CSSファイル変更>
yomikomi.css を開いてください。
.rss_entry の｛｝の中身に以下の１行を追加します。

display :block;

これでエントリーのボックスがブロック要素になります。
１回分のエントリ全部が１つの要素として扱えるようになります。

＜JavaScriptファイル変更＞
次に yomikomi.js を開いてください。
青字部分が追加や変更箇所になります。

google.load("feeds", "1");
function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);
feed.load(dispfeed);
function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr +='<a href="' + entry.link + '">';
htmlstr +='<div class="rss_entry">';
htmlstr +='<div class="rss_title"><h3>' + entry.title + '</h3></div>';
htmlstr +='<div class="rss_main">';
var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
if(imgCheck){
htmlstr += '<div class="rss_img"><img ' + imgCheck[0] + ' width=120></div>';
}
htmlstr +='<div class="rss_content">';
htmlstr += '<p>' + entry.contentSnippet.substring(0, 150) + '</p>';
var strdate = createDateString(entry.publishedDate);
htmlstr += '<p>' + strdate + '</p></div>';
htmlstr +='<div class="clear"><hr></div>';
htmlstr +='</div></div></a>';
}
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
};
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}
google.setOnLoadCallback(initialize);

これでタイトルから日付まで、空白部分を含めて
エントリのどこをクリックしても該当ブログのページに飛べるようになりました。