はてなブログのアーカイブページに続きを読むリンクを追加してみる Javascript編

f:id:aruku-hato:20170415025329p:plain

Javascriptはあまり得意ではないはとです。こんにちはこんばんは

今回は初めてはてなブログカスタマイズの記事を書こうと思います。このブログも地味に自作のテーマなんですよ。パソコンの大きい画面で見るとタイトルが縦書きになってたりする突拍子もない事をやっています。他にもレスポンシブデザインにしてたり、色々と。

まあ、未だにWindowsで確認していないんですが\(^o^)/

そんなことは置いといて、パソコンで見た時のはてなブログアーカイブページって、リンクを押しづらいとか感じたことはありませんか。ない人もいるとは思いますが、少なくとも自分は思います。トップページに飛んだ時にアーカイブに飛ばすブログも多い中、これはイカンぞと一人思っていたりします。

f:id:aruku-hato:20170415025945p:plain

何もしていない状態だと、記事タイトルかサムネイル画像をクリックした時に記事に飛びます。スマホだと記事セクションのどこを押しても飛べるんですけどね。
なので、今回はアーカイブに『続きをよむ』リンクをJavascriptで強引に付け足す方法を提案してみます。

f:id:aruku-hato:20170415025419p:plain

自分のブログに付け足すと上の画像のような感じになります。

追加するJavascript

<script>
/*----------------------------------
  archiveページの続きを読む用
  参照元: http://aruku-hato.hatenablog.com/entry/entry-see-more
----------------------------------*/
var archives = document.getElementsByClassName('archive-entry');

if ( archives.length ) {
  for (var i = 0, j = archives.length ; j > i; i++) (function(n){
    var entryLink = archives[i].getElementsByClassName('entry-title-link')[0].href;

    var more = document.createElement('a');
    more.innerText = "続きを読む";
    more.setAttribute('class', 'entry-see-more entry-see-more-new');
    more.setAttribute('href', entryLink);

    var div = document.createElement('div');
    div.setAttribute('class', 'entry-content entry-content-new');
    div.appendChild(more);

    archives[i].appendChild(div);
  })(i);
}
</script>

このJavascriptを追加するだけで割りとまともな見た目になるように、トップページの続きを読むと同じ見た目になるようにclassを割り当てています。

しかしながら、それぞれ利用しているテーマが違うので思ったような見た目になることは無いかもしれません。

CSSで調整してみる

<style>
/*----------------------------------
  archiveページの続きを読む用
  参照元: http://aruku-hato.hatenablog.com/entry/entry-see-more
----------------------------------*/
.entry-content.entry-content-new {
  clear: both;
  margin: 3px 0;
  padding: 0;
  text-align: right;
  border: none;
}
.entry-see-more.entry-see-more-new {
  background-color: #333; /* リンクの背景色 */
  color: #fff;            /* リンクの文字色 */
  width: 180px;           /* リンクの幅 */
  display: inline-block;
  font-size: 14px;
  line-height: 40px;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.entry-see-more.entry-see-more-new:hover {
  background-color: #555;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
</style>

あくまで一例です。

f:id:aruku-hato:20170415025419p:plain

自分のブログでJavascriptCSSを付け足すと、上の画像のような感じになります。
まあ、最初の方に出した画像と同じですが。
あくまで自分のブログの話なので、それぞれのテーマでどのような感じになるかは正直な所わかりません。

そこまで変になることは無いと思いますが、CSSで色々と調整してみてください。

カスタマイズ方法

多くの人がカスタマイズで色々と追加しているとは思いますが、一応JavascriptCSSをどこに書き込めば良いのかを記述しておきます。

ダッシュボードのデザイン

f:id:aruku-hato:20170415025438p:plain

デザイン設定のカスタマイズタブ

f:id:aruku-hato:20170415025444p:plain

フッター

f:id:aruku-hato:20170415025450p:plain

貼り付ける

f:id:aruku-hato:20170415025456p:plain

既に何かを記入済みの人は、追記して下さい。その際、バックアップは忘れずに!

既にscriptタグやstyleタグがある人は、その中に追記してみても良いとおもいます。

最後に

初めてのカスタマイズ記事でした。正直な所、需要はあるかよくわかりません。けど、ネタ的に記事を書いてみました。

もちろんコピペオッケーです。効果は地味ですけどね。
うまく動かなかったらごめんなさい。

ちなみにですが、自分ではこれは使っていません。CSSで無理やりクリック領域を増やす方法を使っています。ですが、コチラのJavascriptで追加するほうが汎用性があると思った次第です。

CSS版もそのうち書くかもしれませんね。

こちらからは以上です。

広告を非表示にする