IT the Best
サイドバーには表示できるけど、注目記事だけの記事を作りたいのにできないという方に役立つであろうはてなブログカスタマイズ情報です。
当カスタマイズははてなブログの注目記事モジュールのHTMLコードをコピーして、注目記事一覧を表示させるものですが、環境によっては正常に動作しない可能性があります。
ページに表示したい注目記事の情報を決める
まず、デザイン設定のカスタマイズからサイドバーを選びます。
次に、モジュール追加で注目記事を選びます。そこで、注目記事一覧の表示設定をします。
スマホのブラウザからの場合は、PC版表示にする必要があります。
はてなブログのダッシュボードからページ下部のPC版をタップします。
要素をコピーする
ここからは、PC環境での作業です。開発者ツールが利用できるスマホのブラウザは限られているため、スマホからの場合は、当記事にあるHTMLコードをコピーして注目記事を表示することが可能です。
注目記事モジュールの追加設定が終わり適用したら、そのモジュールのHTMLコードをコピーします。
コピーの仕方は、注目記事のうえにカーソルを置き右クリック、または「F12」から開発ツールを開きます。(検証を選択する)
開発ツールからHTMLファイルを見ることができますので、注目記事モジュールをコピーします。WEBページと開発ツールの関係は、ページでハイライトされているものが開発ツールのHTMLの要素にあたります。
開発ツールについて
記事または固定ページ(PROのみ)に貼り付ける
注目記事一覧を表示させたいページにコピーしたコードを貼り付けます。
箱だけ残して中身を消す
下のコードが注目記事一覧を表示させるための箱のようなものになります。
<div class="hatena-module hatena-module-entries-access-ranking"
data-count="10" data-source="access" data-enable_customize_format="0" data-display_entry_category="0"
data-display_entry_image="1" data-display_entry_image_size_width="130" data-display_entry_image_size_height="100"
data-display_entry_body_length="100" data-display_entry_date="1" data-display_entry_title_length="20"
data-restrict_entry_title_length="0" data-display_bookmark_count="1">
<div class="hatena-module-body"> </div>
</div> <div class="hatena-module-body">のなかには<ul>タグで囲まれた注目記事がリストで存在しています。そのリストを消して(<ul>とその中身を消して)上のコードの状態にすればサイドバーのような注目記事一覧を表示させられるはずです。
このコードからでも注目記事を表示させることができます。画像の有無や記事概要の文字数などは、HTML要素のそれぞれのdataの値を変更することで設定を変えることができます。
補足
表示する情報を変える場合は、コピーしたもののなかにdataから始まる文字列がたくさん書かれたdivがあるはずです。そのdataがモジュールの表示設定に当たります。それらの値を変更することで、表示形式を変えることができます。
一部説明
data-display_entry_image="1"
data-display_entry_image_size_width="130"
data-display_entry_image_size_height="100"
data-display_entry_body_length="100"画像の表示/非表示(1/0)
画像の横幅
画像の縦幅
一覧に表示させる記事本文か概要の文字数
