サイドバーの最新記事設定に関して
サイドバーに、画像つき最新記事をセットする方法。
↓とりあえず、下記のサイトで指示通りにする。
はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNote
手に入れたHTML＆JS
デザイン＞カスタマイズ＞サイドバー＞＋モジュールを追加＞HTML内
モジュールにはタイトルを書かずに、本文だけにコピペする。
<!-- HTML : new_entries -->
<div class="hatena-module-title">
<a href="/archive">最新記事</a>
</div>
<!-- 新しい記事を表示する -->
<div id="new_entries_feed" align="center">Now Loading...</div>
<!-- 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://ucchon.hatenablog.com/";
var feed = new google.feeds.Feed( blogURL+ "rss");
//取得するフィード数
feed.setNumEntries(5);
//実際に読む込む
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://fc00.deviantart.net/fs70/f/2014/164/3/f/adventures_of_gamba_by_ucchon-d7m3o9u.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
デザイン＞カスタマイズ＞デザインCSS内
とりあえず、全部コピペ。
/* ----- NEW_ENTRY ----- */
.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(15, 15, 15, 0.60);
width: 90%;
height: 100px;
margin-top: 0px;
padding: 0 5%;
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 {
background: rgba(255, 255, 255, 0.05);
color: transparent;
text-shadow: none;
padding-top: 100px;
}
.htbl_new_entry_text span.entry_title {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
font-size: 14px;
font-weight: lighter;
}
.htbl_new_entry_text span.entry_date {
position: absolute;
bottom: 0;
right: 5px;
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
text-shadow: none;
}
結果、問題が発生しました。
見たらわかりますが、左の画像は縦に延ばされています。
そして、上下が切れています。
気に入らない・・・。
（画像が無くなりました、すみません）
私がやりたい表示方法が、以下の通り。
横長だった場合は、上下に空白を残して画面中央に設置。
縦長だった場合は、上下が切れた状態のまま画面中央に設置。
横幅を基準にしています。
本当は、縦横で短い方の幅を基準に合わせて長い部分を切り取って、中央に持って行きたいです・・・。
でも、多分その時その時の基準を変えると複雑になりそうだから、素人の私には無理そうかも。
・・・と言う事で現状では、幅を揃えて縦は中央に合わせたいんです。
↓以下が、変えた部分。
.htbl_new_entry {
position: relative;
background: #ddd;
width: 100%;
height: 100px;
overflow: hidden;
margin-top:1px;→ 3px; ←記事の間のスペースを少し広げた
border-radius:1px;→ 10px; ←四隅の角を丸くした
}
.htbl_new_entry_img {
position: relative;
top: -9px;←上にずれるので、消した
min-height: 118px;→ height: auto; ←高さの最小値指定をオート指定に変えた
max-width: 160px; ←追加で幅の最大値指定を160pxにした
}
.htbl_new_entry_text span.entry_date {
position: absolute;
bottom: 0;
right:5px;→ 10px; ←角を丸くしたので、日付の表示位置を少し左にずらした
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
text-shadow: none;
}
そして、現状の状態になりました。
これだと、画像が上揃えになってしまう・・・と言う問題があります。
中央に持っていきたい・・・。
かずや先生のアドバイスが来ました。
Kazuya
ざっと見ただけだから画像縮小とかはわからないのだけど、画像の中央配置はこれでいけるかも。
.entry-content img {
display: block;
margin-left: auto;
margin-right: auto;
}
こいつの副作用は画像要素を「display: block;」と指定して元のインライン要素からブロックレベル要素というのに変更しているから、サンプルデザインみたいな文字を回り込みがそのままだと出来なくなりやす。
お試しあれ～
うーん、文字の回り込みが出来ないのは、痛いかも・・・。
元を見れば分かりますが、CSSに書かれていたもので「img」がつくセレクタ（セレクタって言葉の使い方あってる？ｗ）は.htbl_new_entry_imgしかありませんでしたので、この中に入れて試してみましたが変化なし。
それではと、別の行に上の物をそのままコピペして追加してみましたが、やはり変化なしでした。
かずや、わざわざ調べてくれてありがとう～。
私の方でも、引き続き調べてみます。
完全に上手くいったら、コピペ出来るソースを公開する予定です。
