最新記事モジュール完成、そして・・・

Flickrのクリエイティブ・コモンズ画像貼り付け、便利ですね。
とりあえず最新記事ちょこちょこいじりつつ導入出来ました。

忘れないようカスタマイズ済みのHTMLとCSS貼っつけときます。オリジナルは前記事の参考サイトを参照してください。

html

<!-- HTML : new_entries -->
<div class="hatena-module-title">
 最新記事
</div>
<!-- 新しい記事を表示する -->
<div id="new_entries_feed" align="center">Now Loading...</div>
<div class="htbl_new_entry">
<div class="htbl_new_entries_more">
 <a href="/archive" class="new_entry">
<span class="entry_title">more...</span>
</a>
</div></div>

javascript

<!-- SCRIPT : new_entries_feed -->
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
 //RSSフィードの取得
 var blogURL = "http://touyoubuntu.hatenablog.com/";
 var feed = new google.feeds.Feed( blogURL+ "rss");
 //取得するフィード数
 feed.setNumEntries(7);
 //実際に読む込む
 feed.load(function(result) {
 //読み込めたか判別
  if (!result.error) {
   //表示部分を選択
   var container = document.getElementById("new_entries_feed");
   //変数の初期化
   var useFeed = "";
   //Feedの処理
   for (var i = 0; i < result.feed.entries.length; i++) {
    //Feedを一つ抽出
    var entry = result.feed.entries[i];
    //日付を抽出
    var pdate = new Date(entry.publishedDate);
    var strdate = (pdate.getMonth() + 1) + '月' + pdate.getDate() + '日';
    //画像がない場合を考慮
    var no_image = 'http://img.f.hatena.ne.jp/images/fotolife/t/touyou1121/20131220/20131220213824.jpg';
    //最初の画像を抽出
    var first_image = (entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/) != null) ? entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/) : no_image.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/);

    //リストに突っ込む
    useFeed += '<div class="htbl_new_entry"><a href="' + entry.link + '"><img class="htbl_new_entry_img" src="' + first_image[0] + '"><div class="htbl_new_entry_text"><span class="entry_title">' + entry.title + '</span><span class="entry_date">' + strdate + '</span></div></a></div>';
   }
  //リストを表示させる
  container.innerHTML = '<div class="htbl_new_entries">' + useFeed + '</div>';
 }
 });
}
google.setOnLoadCallback(initialize);
</script>

css

/* ----- NEW_ENTRY ----- */
.htbl_new_entries_more {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  background: rgba(50, 50, 50, 0.65);
  width: 270px;
  height: 100px;
  margin-top: 0px;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
.htbl_new_entries_more:hover {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.65);
  width: 270px;
  height: 100px;
  margin-top: 0px;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
.htbl_new_entries_more span.entry_title {
  display: table-cell;
  vertical-align: middle;
  text-align:middle; 
  height: 100px;
  font-size: 30px;
  font-weight: lighter;
}
a.new_entry:link {
    color: white;
    text-decoration:none;
}
a.new_entry:visited {
    color: white;
    text-decoration:none;
}
a.new_entry:hover {
    color: white;
    text-decoration:none;
}
a.new_entry:active {
    color: white;
    text-decoration:none;
}
.htbl_new_entries {
  height: 100%;
  width: 100%;
}
.htbl_new_entry {
  position: relative;
  background: #ddd;
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin-top: 1px;
  border-radius: 1px;
}
.htbl_new_entry_img { position: relative; top: -9px; min-height: 118px;}
.htbl_new_entry_text {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  background: rgba(100, 100, 100, 0.65);
  width: 270px;
  height: 100px;
  margin-top: 0px;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
.htbl_new_entry_text:hover {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.65);
  width: 270px;
  height: 100px;
  margin-top: 0px;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
.htbl_new_entry_text span.entry_title {
  display: table-cell;
  vertical-align: middle;
  text-align:left; 
  height: 100px;
  font-size: 14px;
  font-weight: bold;
}
.htbl_new_entry_text span.entry_date {
  position: absolute;
  bottom: 0;
  right: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

以上です。

そういえば冬休み前のクールのドラマどんどん終わっていきます。
なんだかんだで見てしまって時間取られてたので受験生的には好ましい状況だったりするんですが・・・ｗ

リーガル・ハイ・・・実は何話か見てないんですが、キャラクターのやりとりの中で世の中へのメッセージを発しつつしっかりオチをつけていく、良いドラマでしたね。
クロコーチはクロコーチで正義が勝てない世の中の不条理を如実に描ききってた気がします。
DoctorXは最後の最後まで完璧を追求しますしね。１クール全体で勧善懲悪がなりたっているような。

まぁそんな時間とれないので詳しくは感想書けないんですが、どれも面白くいい息抜きになりました。

さてもうすぐで今年も終わり、センターが近づいてきています。
成長曲線の単調増加・・・二学期の伸び率が微妙でしたがこれが関数y=x^3であることを信じて、以後も頑張っていこうと思います♪

ではでは(^O^)