「はてなブログカスタマイズ」 | 記事内の写真を記事タイトル下に持ってくる

　記事上に何かコンテンツを入れていると、記事内で張り付けた写真を一番上に表示させることができません。

　そこで、記事内の一番上にある写真をタイトル下に持ってくるようにカスタマイズしました。

<script>
        //記事内の一番上の写真
            var entry_top_img=document.getElementsByClassName("hatena-fotolife")[0]
            //記事タイトル
            var entry_title=document.getElementsByClassName("entry-title")[0]
            console.log(entry_top_img.src,entry_title.innerHTML)
            //要素の直後に追加
            entry_title.parentNode.insertBefore(entry_top_img, entry_title.nextSibling);
            //{追加先要素}.parentNode.insertBefore({追加要素}, {追加先要素}.nextSibling);   
</script>

写真がないときにエラーをはかせないために、trycatchで囲みます。

<script>
        try {
        //記事内の一番上の写真
            var entry_top_img=document.getElementsByClassName("hatena-fotolife")[0]
            //記事タイトル
            var entry_title=document.getElementsByClassName("entry-title")[0]
            console.log(entry_top_img.src,entry_title.innerHTML)
            //要素の直後に追加
            entry_title.parentNode.insertBefore(entry_top_img, entry_title.nextSibling);
            //{追加先要素}.parentNode.insertBefore({追加要素}, {追加先要素}.nextSibling);   
        } catch (error) {}
    </script>

　ここまででは、記事内の一番上の写真をタイトル下に持ってくるので、タイトル下に持っていきたくない写真も動かしてしまいます。

そこで、記事内の一番上の要素が写真の場合のみ動かすことにします。

<script>
    var entry_content=document.getElementsByClassName("entry-content")[0]
    var e_c_firstelement=entry_content.firstElementChild
    var e_c_fe_firstelement=e_c_firstelement.firstElementChild
    var flag_entry_content_phototop=false
        try {
            if (e_c_fe_firstelement.tagName=="IMG") {
                flag_entry_content_phototop=!flag_entry_content_phototop
                //記事内トップ要素(写真)
                var entry_top_img=e_c_fe_firstelement
            }
        } catch (error) {}
        if(flag_entry_content_phototop){
                //記事タイトル
                var entry_title=document.getElementsByClassName("entry-title")[0]
                //要素の直後に追加
                entry_title.parentNode.insertBefore(entry_top_img, entry_title.nextSibling);
                //{追加先要素}.parentNode.insertBefore({追加要素}, {追加先要素}.nextSibling);   
        }
</script>

　私の記事編集環境でははてなブログ側が、自動的にPタグで記事を囲むので、記事内の最初の要素を取得してから、写真かを判断します。

このとき、tagnameの返り値は大文字になるので「IMG」と大文字にして比較します。