トップ > ツール・ソフト系-はてなブログ設定 > サイドバーの最新記事設定（画像表示の完成版）

サイドバーの最新記事設定（画像表示の完成版）

ツール・ソフト系-はてなブログ設定 ツール・ソフト系

かずや先生が、新たなソースを作ってくれました。
ついに、JSに手を出した(゜∇゜)！
大元からの変更の纏め。

・角を丸くする。
・記事の間を調整。
・縦横比は元画像のまま。
・画像は常に中央に表示。
・縦横比で短い方を優先して、はみ出た側は切り取る。
　　　　　↑ここが新たな変更


↓私と同じようにしたい場合は、まずは下記のサイトで指示通りにする。
はてなブログの「最新記事」を画像付きにするコードを作るやつ。 - #ChiroruNote

そして、サイドバーに貼り付けるHTML＆JSソースの

<script type="text/javascript">

</script>

範囲内に、以下のソースを追加コピペして下さい。
かずや先生曰く、「この範囲内に入れてくれれば、何処に入れても動くはず」・・・らしい。
私は、直下の最初に入れました。

/*****
 「はてなブログの「最新記事」を画像付きにするコード(http://chiroru.hateblo.jp/entry/2014/01/10/183449)」
 このスクリプトに画像比率から表示する画像に対応した微調整を施す拡張です。
*****/


///////////// 初期設定用変数 ここから /////////////

/*
 RATIO_MAX と RATIO_MIN について
 画像の比率に対する動作を任意に設定する場合は0以外の整数を設定します。
 数値は横÷縦の式を基準とします。
 たとえばTVのような横長画角は「1.78」で正方形は「1」といった感じです。
 逆に縦長の場合は1以下の数値になり、TVを90度回転させた場合は「0.5625」になります。
 設定値によって以下のクラス名を「htbl_new_entry」に追加します。
 RATIO_MAX で設定した値より大きい(より横長)場合は「htbl_new_entry_img_max」を追加します。
 RATIO_MIN で設定した値より小さい(より縦長)場合は「htbl_new_entry_img_min」を追加します。
 0の場合は枠内のサイズから自動で比率を計算します。
*/
var RATIO_MAX = 1.7;
var RATIO_MIN = 0.9;

var DEBUG = false; //true = コンソールにデバッグログを出力。false = 出力しない。

//HTMLクラスのデフォルト名。
var CN_BASE = 'htbl_new_entries';
var CN_ENTRY = 'htbl_new_entry';
var CN_IMG = 'htbl_new_entry_img';
var CN_MAX = 'htbl_new_entry_img_max';
var CN_MIN = 'htbl_new_entry_img_min';

///////////// 初期設定用変数 ここまで /////////////



/*
 画像の情報を取得及び比率の設定をします。
*/
var loadImage = function(evt) {
    try {
        var img = evt.target;
        var htbl_new_entry = img.parentElement.parentElement;
        var ratio_img = img.naturalWidth / img.naturalHeight;
        var ratio_base = htbl_new_entry.clientWidth / htbl_new_entry.clientHeight;
        
        if(RATIO_MAX) {
            if(RATIO_MAX < ratio_img)
                htbl_new_entry.className += ' ' + CN_MAX;
        } else {
            if(ratio_base < ratio_img)
                htbl_new_entry.className += ' ' + CN_MAX;
        }
        if(RATIO_MIN) {
            if(RATIO_MIN > ratio_img)
                htbl_new_entry.className += ' ' + CN_MIN;
        } else {
            if(ratio_base > ratio_img)
                htbl_new_entry.className += ' ' + CN_MIN;
        }
        debug('image : W=%d, H=%d, R=%f', img.naturalHeight, img.naturalWidth, ratio_img);
        debug('%s : W=%d, H=%d, R=%f CN=%s', CN_ENTRY, htbl_new_entry.clientWidth, 
            htbl_new_entry.clientHeight, ratio_base, htbl_new_entry.className);
    } catch(e) {
        console.error(e);
    }
}

/*
 DEBUG = true で console.log にデバッグメッセージを渡す。
*/
function debug() {
    if(DEBUG)
        console.log.apply(console, arguments);
}

/*
 サイドバー要素にフックし、画像情報読み込みの準備をします。
*/
var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function(mutation) {
        try {
            debug('mutation : type=%s, length=%d', mutation.type, mutation.addedNodes.length);
            if(0 < mutation.addedNodes.length) {
                debug('mutation : nodeName=%s, class=%s', mutation.addedNodes[0].nodeName, mutation.addedNodes[0].className);
                if(CN_BASE == mutation.addedNodes[0].className) {
                    var imgs = document.getElementsByClassName(CN_IMG);
                    debug('mutation : img_len=%s', imgs.length);
                    for(var i = 0; i < imgs.length; i++) {
                        imgs[i].addEventListener('load', loadImage, false);
                    }
                    observer.disconnect();
                }
            }
        } catch(e) {
            console.error(e);
        }
    });
});
observer.observe(document.documentElement, { attributes: false, childList: true, characterData: false, subtree: true });


それから、CSSはこちらをコピペして使って下さい。
.htbl_new_entry_img 内が、大きく変わりました。
※数値は各自で調整して下さい＆素人なので上手く行かなかったらごめんなさい。

/* ----- 最新記事設定 ----- */
.htbl_new_entries {
height: 100%;
width: 100%;
}
.htbl_new_entry {
position: relative;
background: #000000;　　 /* 余白の背景を黒にした */
width: 100%;
height: 100px;　　/* 多分ここが縦幅サイズを指定する所 */
overflow: hidden;
margin-top: 3px;　　 /* 記事の間のスペースを少し広げた */
border-radius: 10px;　　/* 四隅の角を丸くした */
}


/*サイドバー画像の基本スタイル*/
.htbl_new_entry_img {
position: relative;

top: 50%;

  • webkit-transform: translateY(-50%);
  • ms-transform: translateY(-50%);
  • o-transform: translateY(-50%);
  • moz-transform: translateY(-50%);

transform: translateY(-50%);

max-height: 100%;
max-width: 100% !important;
}


/*サイドバー画像が閾値以上に横長だった場合のスタイル*/
.htbl_new_entry.htbl_new_entry_img_max .htbl_new_entry_img {
margin-left: 50%;

  • webkit-transform: translate(-50%, -50%);
  • ms-transform: translate(-50%, -50%);
  • o-transform: translate(-50%, -50%);
  • moz-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

max-width: none !important;
}


/*サイドバー画像が閾値以上に縦長だった場合のスタイル*/
.htbl_new_entry.htbl_new_entry_img_min .htbl_new_entry_img {
max-height: none;
}


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: 10px;　　/*日付の表示位置を少し左にずらした*/
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
text-shadow: none;
}

比率で出してるので、ここと違うサイドバーの幅でも上手く行く・・・と思います(´・ω・｀)


私がJSを調べる前に、かずや先生が何とかしてくれました。
「ソースの公表も加工も好きなだけどうぞ」とのお言葉をいただいたので、皆さん好きに使ってください(*´д｀*)


次の目標「カテゴリ名を追加」
今度は、自分で調べるぞーヽ(｀д´)ノ
先生に頼ってばかりじゃ、駄目だよねっ！


※ここにある物の著作権は「うっちょん」または「マナ」にあり、 無断転載・複製・加工等は禁止しています。
画像の直リンクも止めて下さい。
【お問い合わせ】ucchon@hotmail.com
© 2002 ucchon    © 2014 mana