ビジュアルな記事のタイトルを実現する、はてなブログカスタマイズ
こんにちはnasustです。
アイキャッチ画像とタイトルを組み合わせて、ビジュアルなタイトルを表現するカスタマイズです。
癖が強いカスタマイズですので自分のブログに採用する場合は、検討してから導入してください。
これは記事の先頭がアイキャッチ画像であると前提としています。アイキャッチ画像ではない場合は何もしません。
対応するブログに編集形式
このカスタマイズは以下の編集形式に対応しています
技術的な解説
以下の様に記事の先頭がアイキャッチ画像になるようなhtmlを想定しています。この判定をJavaScriptで行っています。判定に失敗場合は何もしないようにしています。
見たまま
<div class="entry-content"> <p><img class="hatena-fotolife" title="f:id:nasust:20170119111709j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nasust/20170119/20170119111709.jpg" alt="f:id:nasust:20170119111709j:plain" /></p>
<div class="entry-content"> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nasust/20170114/20170114205216.jpg" alt="f:id:nasust:20170114205216j:plain" title="f:id:nasust:20170114205216j:plain" class="hatena-fotolife" itemprop="image"></span></p>
判定に成功した場合は以下のようにJavaScriptでhtmlを変更します。
<div class="entry-content"> <div class="eyecache"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nasust/20170114/20170114205216.jpg" alt="f:id:nasust:20170114205216j:plain" title="f:id:nasust:20170114205216j:plain" class="hatena-fotolife" itemprop="image"> <header class="entry-header"> ・・・ </header> </div>
JQuery
JQueryが必要です、導入していない場合はヘッダに追加してください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
JavaScript
以下のJavaScriptを記事下に追加します。
<script> (function(){ var entryContent = $(".entry-content"); var entryContentEl = entryContent.get(0); if( entryContentEl.childNodes.length > 2 ){ var textNode = entryContentEl.childNodes[0]; if( textNode.nodeType === Node.TEXT_NODE && /[\S]+/m.test( textNode.textContent ) === false ){ var pEl = entryContentEl.childNodes[1]; if( pEl.childNodes.length > 0 ){ var span = $( pEl.childNodes[0] ) if( span.is("span[itemtype='http://schema.org/Photograph']") ){ span.wrap( "<div class='eyecache'></div>" ); var eyecache = span.parent(); eyecache.append( $(".entry-header") ); eyecache.prependTo(entryContent); pEl.parentNode.removeChild(pEl); }else if( span.is("img[class='hatena-fotolife']") ){ span.wrap( "<div class='eyecache'></div>" ); var eyecache = span.parent(); eyecache.append( $(".entry-header") ); eyecache.prependTo(entryContent); } } } } }()); </script>
CSS
.entry-content .eyecache{ position:relative; padding: 0px; margin: 0px; } .entry-content .eyecache img{ display: block; width: 100% !important; height: auto !important; margin: 0px !important; padding: 0px !important; } .entry-content .eyecache .entry-header{ position:absolute; left:0px; bottom:0px; width: calc( 100% - 40px ); padding: 20px; margin: 0px !important; background: linear-gradient( rgba(0,0,0,0) , rgba(0,0,0,0.8) ); } .entry-content .eyecache .entry-header .entry-date{ margin: 0px !important; padding: 0px !important; text-shadow: 0px 0px 3px rgba(0,0,0,0.5); } .entry-content .eyecache .entry-header .entry-date a, .entry-content .eyecache .entry-header .entry-date a:link, .entry-content .eyecache .entry-header .entry-date a:visited, .entry-content .eyecache .entry-header .entry-date a:active, .entry-content .eyecache .entry-header .entry-date a:hover{ margin: 0px !important; padding: 0px !important; color:#FFFFFF; } .entry-content .eyecache .entry-header .entry-title{ color:#FFFFFF; line-height: 120%; background-color: transparent; padding: 0px !important; margin: 0px !important; margin-top: 0.5em !important; margin-bottom: 1em !important; text-shadow: 0px 0px 3px rgba(0,0,0,0.5); } .entry-content .eyecache .entry-header .entry-title a, .entry-content .eyecache .entry-header .entry-title a:link, .entry-content .eyecache .entry-header .entry-title a:active, .entry-content .eyecache .entry-header .entry-title a:hover, .entry-content .eyecache .entry-header .entry-title a:visited{ color:#FFFFFF; padding: 0px !important; margin: 0px !important; } .entry-content .eyecache .entry-header .entry-categories{ padding: 0px !important; margin: 0px !important; } .entry-content .eyecache .entry-header .entry-categories a{ border: 1px solid #FFF; font-size: 11px; padding: 3px; }
最後に
タイトルがビジュアル的に表現すると記事の雰囲気がグッと出てきますね。
関連記事
