読者です 読者をやめる 読者になる 読者になる

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

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

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

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

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

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

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

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

どのような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

関連記事の『高度なカスタマイズを使う』に貼り付けたHTML

関連記事をサイドバーに追加する方法は、『カスタマイズ > サイドバー > +モジュールを追加 > 関連記事』です。

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

具体的な方法は、最初に貼り付けたリンクに書いてあります。

貼り付けたHTMLは以下の通りです。

<a href="{Permalink}" class="related-link">
  <div class="related-thumbnail">
    <p class="related-thumbnail-inner">
      <img src="{ImageURL}" alt="{Title}" class="related-thumbnail-image">
    </p>
  </div>
  <p class="related-title">{Title}</p>
  <p class="related-date"><time>{Date}</time></p>
  <p class="related-description">{EntryBody}</p>
</a>

HTML5はブロック要素もリンクで囲えるのはもう一般的なのでしょうか。というわけで、リンクで色々と囲ってクリックしやすいようにしました。

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>

サイドにある時は関連記事の表示を消して、下に移動した時に表示させる雑な方法です。
自分のブログに合わせたCSSなので、色々と突っ込みどころがあるかもしれません\(^o^)/
CSSを綺麗に書くのは苦手ですす。

あと、2行3列になるようにしているので、関連記事が3の倍数ではない場合は欠けた状態で表示されます。

完成形がコチラ

完成形の画像を載せておきます。

f:id:aruku-hato:20170417034931j:plain

まあ、下に載ってるのでそこを見たほうが早い気もします。

最後に

カスタマイズの記事というよりも備忘録的な記事になってしまいました。

もちろんコピペOKなんですが、またもやカスタムテーマごとにCSSの挙動がことなるので、CSSがある程度理解できる人にしかオススメできません。

カスタマイズ記事はコードのコピペが主なので、記事を作るのは楽ですね。それまでが面倒くさいんですが\(^o^)/

コチラからは以上です。

広告を非表示にする