2012年09月09日
基本形完成
基本ソースが出来上がったので、
ボックスの色分けをやめてノーマルな感じにしてみました。
こういった見た目の設定変更はCSSファイルをいじるだけですぐにできます。
一応完成した↑の設定のソースをまとめておきます。
<●HTMLファイル●>
<head>と</head>の間に以下の２行。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/yomikomi.js"></script>
<body>と</body>の間で、ブログを表示させたいところに以下の１行。
<div class="feed"></div>
<●scriptファイル(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 +='<div class="rss_entry">';
htmlstr +='<div class="rss_title"><h3><a href="' + entry.link + '">' + entry.title + '</a></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>';
}
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);
<●CSSファイル（yomikomi.css）●>
.feed{
border :1px solid #000;
}
.rss_entry{
width :450px;
margin :10px;
}
.rss_title{
width :99%;
background-color :#33f;
padding :2px 0 0 2px;
margin :0 0 5px 0;
}
.rss_title a{
color :#ff0;
font-size :14px;
}
.rss_main{
width :100%;
}
.rss_img{
margin :4px 0 0 0;
float :left;
display :table-cell;
vertical-align :middle;
overflow :visible;
}
.rss_content{
width :310px;
margin :0 0 0 10px;
float :right;
}
JavaScriptの各ソースの働きを次のエントリで残しておきます（自分用）
ボックスの色分けをやめてノーマルな感じにしてみました。
こういった見た目の設定変更はCSSファイルをいじるだけですぐにできます。
一応完成した↑の設定のソースをまとめておきます。
<●HTMLファイル●>
<head>と</head>の間に以下の２行。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="./js/yomikomi.js"></script>
<body>と</body>の間で、ブログを表示させたいところに以下の１行。
<div class="feed"></div>
<●scriptファイル(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 +='<div class="rss_entry">';
htmlstr +='<div class="rss_title"><h3><a href="' + entry.link + '">' + entry.title + '</a></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>';
}
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);
<●CSSファイル（yomikomi.css）●>
.feed{
border :1px solid #000;
}
.rss_entry{
width :450px;
margin :10px;
}
.rss_title{
width :99%;
background-color :#33f;
padding :2px 0 0 2px;
margin :0 0 5px 0;
}
.rss_title a{
color :#ff0;
font-size :14px;
}
.rss_main{
width :100%;
}
.rss_img{
margin :4px 0 0 0;
float :left;
display :table-cell;
vertical-align :middle;
overflow :visible;
}
.rss_content{
width :310px;
margin :0 0 0 10px;
float :right;
}
JavaScriptの各ソースの働きを次のエントリで残しておきます（自分用）
オマケ）本記事へリンクしやすくする改造
JavaScriptソース解説（自分用）
CSSで整形する（JavaScriptに組み込み）
CSSで整形する（準備段階）
記事内の画像を読み込む
西暦112年？！
JavaScriptソース解説（自分用）
CSSで整形する（JavaScriptに組み込み）
CSSで整形する（準備段階）
記事内の画像を読み込む
西暦112年？！
Posted by石上 昌子at15:03
ブログの読み込み
