(cache) はてなブログサイドバーの高度なカスタマイズで何か出来ないか考えた結果

はてなブログカスタマイズで半日潰したはとです。こんにちはこんばんは

１週間程前にはてなブログに新機能が出たのを知っていますか？ダッシュボードにある右側のお知らせにも載っていますが、『サイドバーの記事一覧モジュールで、変数を用いた高度なカスタマイズをできるようにしました』という誰得機能です！　いろんな要素の順番を入れ替えられるだけ？なんて思っていますが、これを使って何か出来ないかと考えていました。

具体的に出来ることは、変数を様々なHTMLで用いてオリジナルな「最新記事」「関連記事」「注目記事」の３つをつくれることです。しかし、サムネイルは通常のほうが大きくできるし、タイトルと本文冒頭の文字数も高度なカスタマイズのほうが少ない文字数になります。うーんうーん

カード型のリンクを作りやすいかもしれない

というわけで、今回はサムネイル、日時、本文冒頭の３つをリンクで囲った、カード型のリンクを作ってみました。
ちなみにですが、ブックマーク数とカテゴリーの２つは自動でリンクタグがつきます。
そのため、リンクタグをリンクタグで囲む事は出来ないので、今回は除外しました。

色々と考えた結果、カード型のリンクを記事下に入れ込むカスタマイズを作ることに決めたので、その過程を書いていきます。

どのようなHTMLが吐き出されるか

少し脱線です。

高度なカスタマイズで吐き出されるHTMLは、

div.hatena-module > div.hatena-module-title+div.hatena-module-body > ul.hatena-urllist > li.urllist-item > div.urllist-item-inner > オリジナルカスタマイズ

って感じになっていて、リストの中に吐き出されるのは今までと変わらないみたいです。マニアックな話です。

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

Javascriptでサイドバーから記事下へ移動させる

今回は記事下のカスタマイズ出来る部分をまるごと移動させる方法を取りました。以前追加していたシェアボタンのカスタマイズも一緒に移動させちゃいます。

利用するJavascriptは以下の通りです。

<script>
/**
 *    関連記事用
 */
var relatedDiv = document.getElementsByClassName('hatena-module-related-entries');
var customfoot = document.getElementsByClassName('customized-footer')[0];
var socialDiv  = document.getElementsByClassName('social-buttons')[0];
if (relatedDiv.length) {customfoot.appendChild(relatedDiv[0]);};
socialDiv.parentNode.insertBefore(customfoot, socialDiv.nextSibling);
</script>

一度、関連記事を記事下のカスタマイズエリアの中に移動させて、次に、元々あるソーシャルボタン機能の後ろにまとめて移動させています。

javascriptを追記する場所等は、以前書いた記事を参考にして下さい。

CSSで整える

ととのいましたー

<style>
.hatena-module-related-entries {
  display: none;
}
.customized-footer .hatena-module-related-entries {
  display: block;
}
.customized-footer .hatena-module {
  margin: 16px 0;
}
.customized-footer .hatena-module-title {
  margin-bottom: 16px;
  padding: 5px 10px;
  background: #5bb86b;
  font-size: 1.5em;
  font-weight: normal;
  color: #f5f5f5;
  border: none;
  line-height: normal;
}
.customized-footer .hatena-module-body {
  margin: 0;
  margin-left: -16px;
  padding: 0;
  border: none;
}
.customized-footer .hatena-module-body:after {
  content: "";
  display: block;
  clear: both;
}
.customized-footer .urllist-with-thumbnails .urllist-item {
  border: none;
  display: block;
  width: 33.3%;
  float: left;
  clear: none;
}
.customized-footer .urllist-with-thumbnails .urllist-item:nth-of-type(3n+1) {
  clear: both;
}
.customized-footer .urllist-with-thumbnails .urllist-item-inner {
  margin-left: 16px;
  margin-bottom: 16px;
  padding: 0;
}
.customized-footer .hatena-urllist a.related-link {
  margin: 0;
  padding: 0;
  padding-bottom: 16px;
  line-height: 1;
  text-decoration: none;
  background-color: #fff;
  display: block;
  box-shadow: 0 0 10px #E2E2E2;
  border-radius: 3px;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.related-thumbnail {
  position: relative;
  width: 100%;
}
.related-thumbnail::before {
  content: "";
  display: block;
  padding-top: 50%;
}
.related-thumbnail-inner {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
}
.related-thumbnail-image {
  margin-top: -25%;
  width: 100%;
  height: auto;
  display: block;
}
.related-title,
.related-date,
.related-description {
  margin: 16px 7% 0;
  color: #333;
  overflow: hidden;
}
.related-title {
  font-size: 16px;
  line-height: 20px;
  height: 40px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.related-date {
  font-size: 10px;
  line-height: 1;
  font-family: Verdana;
}
.related-description {
  font-size: 11px;
  line-height: 13px;
  margin-bottom: 0;
  height: 39px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.customized-footer .urllist-item:hover,
.customized-footer .urllist-item:focus {
  background: transparent;
}

.customized-footer .hatena-urllist a.related-link:hover,
.customized-footer .hatena-urllist a.related-link:focus {
  box-shadow: 0 0 10px #252525;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.customized-footer .hatena-urllist a.related-link:hover .related-title,
.customized-footer .hatena-urllist a.related-link:focus .related-title{
  color: #0092CA;
}

@media (max-width: 768px) {
  .customized-footer .hatena-urllist li {
    padding: 0;
  }
}

@media (max-width: 425px) {
  .customized-footer .urllist-with-thumbnails .urllist-item {
    padding: 0 3%;
    border: none;
    display: block;
    width: auto;
    float: inherit;
    clear: none;
  }
  .customized-footer .hatena-urllist a.related-link {
    padding-bottom: 0;
  }
  .related-link::after {
    content: "";
    display: block;
    clear: both;
  }
  .related-thumbnail {
    width: 100px;
    float: left;
  }
  .related-thumbnail::before {
    content: inherit;
    display: none;
  }
  .related-thumbnail-inner {
    position: static;
    border-radius: 3px 0 0 3px;
  }
  .related-thumbnail-image {
    margin: 0;
  }
  .related-title,
  .related-date {
    margin: 0;
    padding: 8px 3% 0;
    height: auto;
    max-height: 68px;
  }
  .related-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .related-description {
    display: none;
  }
}
</style>