IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【はてなブログカスタマイズ】注目記事一覧ページを作る方法「リアルタイム」

サイドバーには表示できるけど、注目記事だけの記事を作りたいのにできないという方に役立つであろうはてなブログカスタマイズ情報です。

 

ページに表示したい注目記事の情報を決める

 まず、デザイン設定のカスタマイズからサイドバーを選びます。

 モジュール追加で注目記事を選びます。そこで、注目記事一覧の表示設定をします。

要素をコピーする

注目記事モジュールの追加設定が終わり適用したら、そのモジュールのHTMLをコピーします。

 

コピーの仕方は、注目記事のうえにカーソルを置き右クリックから開発ツールを開きます。(検証を選択する)

f:id:Surprisedblog:20190924080003p:plain

 

開発ツールからHTMLファイルを見ることができますので、注目記事モジュールをコピーします。WEBページと開発ツールの関係は、ページでハイライトされているものが開発ツールのHTMLの要素にあたります。

f:id:Surprisedblog:20190531223000p:plain

 

開発ツールについて

www.it-the-best.com

 

 

記事または固定ページ(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>とその中身を消して)上のコードの状態にすればサイドバーのような注目記事一覧を表示させられるはずです。

 

補足

表示する情報を変えたければ、コピーしたもののなかにclassがたくさん書かれたdivがあるはずです。そのクラスの内容がモジュールの表示設定に当たります。それらの値を変更することで、表示形式を変えることができます。

一部説明

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)
画像の横幅
画像の縦幅
一覧に表示させる記事本文か概要の文字数