読者です 読者をやめる 読者になる 読者になる

サイドバーの最新記事設定に関して

サイドバーに、画像つき最新記事をセットする方法。
↓とりあえず、下記のサイトで指示通りにする。
はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #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;
}


↓結果が以下の通り。
最新記事コピペのみ


問題が発生しました。
サイドバーの幅指定が160だったようなので、参照元画像を右に置いて比べてみた。(2倍に表示している)
最新記事コピペのみ 元画像
見たらわかりますが、左の画像は縦に延ばされています。
そして、上下が切れています。
気に入らない・・・。


私がやりたい表示方法が、以下の通り。
理想横長画像 理想縦長画像
横長だった場合は、左のように上下に空白を残して画面中央に設置。
縦長だった場合は、右のように上下が切れた状態のまま画面中央に設置。
横幅を基準にしています。
本当は、縦横で短い方の幅を基準に合わせて長い部分を切り取って、中央に持って行きたいです・・・。
でも、多分その時その時の基準を変えると複雑になりそうだから、素人の私には無理そうかも。
・・・と言う事で現状では、幅を揃えて縦は中央に合わせたいんです。



↓以下が、変えた部分。

.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」がつくセレクタセレクタって言葉の使い方あってる?w)は.htbl_new_entry_imgしかありませんでしたので、この中に入れて試してみましたが変化なし。
それではと、別の行に上の物をそのままコピペして追加してみましたが、やはり変化なしでした。
かずや、わざわざ調べてくれてありがとう~。

私の方でも、引き続き調べてみます。
完全に上手くいったら、コピペ出来るソースを公開する予定です。


※ここにある物の著作権は、「うっちょん」または「マナ」にあります。 無断転載等は禁止しています。
© 2002 ucchon    © 2014 mana