わいのりLABO

わいのりLABO

☆漫画・アニメ・ゲームなどについてつぶやきます☆

わいのりLABO

【カスタマイズ】タイトル下に注目記事(おすすめ記事)を表示

f:id:wainori2199:20180523130315j:plain

 

こんばんは。

今日の夕食は寿司の、わいのり研究所です。

  

さてカスタマイズ記事の続編です。

今回は「タイトル下に注目記事(おすすめ記事)を表示」するカスタマイズです。

 

あ!( ゚Д゚)

言い忘れてましたが、これはPCとタブレットのみ表示できます。

スマホは画面の幅の関係で表示できないようです。

 

 

「タイトル下に注目記事(おすすめ記事)を表示」

 

「Innocent」のカスタマイズページを紹介します。

 

moonnote.hateblo.jp

 

テーマを「Innocent」に決めた一番の理由がこれです!

 

私的には、この機能は外せなかったです。

 

「注目記事」はサイドバーにも表示できますが、これはタイトル下に表示してくれるので、非常に目立ちます。

 

また、自分としても、よく読まれている記事が一目でわかるので面白いです。

 

しかも「Innocent」は、この注目記事を自動で抽出してくれます。

これは「Innocent」独自のカスタマイズのようでして、私が調べた限りでは、他のテーマではできないみたいです。(できないというより、カスタマイズすれば実現可能なのかもしれません。詳しくなくてごめんなさい。)

 

設置方法

 

以下のHTMLを「ヘッダ」→「タイトル下」にコピペします。

 

Attention list

 

はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました - MoonNote」より引用

 

私のブログではタイトル下に7つ表示されていますよね?(PCの場合)

これは4行目の部分を「5」から「7」に変更しているからです。

 

data-count="5"

 

7つ表示に変更したのは、サムネイル(アイキャッチ?)を小さくすることで、上下の高さを抑えたかったからです。

5つ表示だと画像が大きくなってしまうので、上下の高さがありすぎて圧迫感がありました。

 

タイトル部分を一行で表示

 

私はこのカスタマイズも行ないましたよ。

うまく説明できないですが、やってみてください。

 


    #recommend-entries .urllist-title-link {
    background: rgba(0, 0, 0, 0.5);
    padding: 9px 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

 

最後に

 

というわけで、今回は以上です。

次回は「グローバルメニュー」を紹介します。

お楽しみに♪(*´▽`*)

 

『いやー、カスタマイズってホントにいいもんですね!』

金曜ロードショー水野晴郎

 

『それでは、さよなら。さよなら。さよなら。』

日曜洋画劇場淀川長治

 

今回もお付き合いいただきまして、ありがとうございました。