記事一覧モジュールのclass名を『hatena-module-custom-pickupSlider』とすることで、このレイアウトが適用されます。
本モジュールは、指定したカテゴリー記事が一定件数以上の場合にスライダーで表示されます。
画像は幅:高さ=16:9の縦横比のものを使用してください。（推奨サイズ 幅800px：高さ450px）
アイキャッチを記事に設定しない場合はスライドが空白となってしまうため、必ずアイキャッチ設定を行なってください。
特定のカテゴリの最新記事をこのモジュールに表示する場合
管理画面 > [デザイン] > [トップページメインカラム] > [ピックアップ]にて設定を行います。
[カテゴリー]にて表示するカテゴリーを選択できます。
他項目の設定については『「最新記事」を表示する』を参考にしてください。
記事の表示順を変更する
投稿日が新しい順に表示されます。
表示順を変更するには、管理画面 > [記事の管理] から対象記事を選択し、 [編集オプション] > [投稿日時]にて記事の投稿日を変更してください。
表示する記事をHTMLで選択する場合
管理画面 > [デザイン] > [トップページメインカラム] > [ピックアップ(HTML設定)]にて設定を行います。
HTMLを適宜編集してください。
表示数の増減は、下記HTMLli～/liタグの塊を増やす、または減らすことで変更することが可能です。
<li class="urllist-item">
<div class="urllist-item-inner">
<a class="urllist-image-link" href="遷移先URL">
<img class="urllist-image" alt="" src="画像URL">
</a>
<a href="遷移先URL" class="urllist-title-link">テキストテキストテキスト</a>
</div>
</li>
公開時にはモジュールタイトル『ピックアップ(HTML設定)』を適宜変更してください。
モジュールを復活させたい
HTML設定版の本モジュールを削除後に復活させたい場合の手順を解説します。
1. [モジュールを追加]からHTMLモジュールを追加
2. 下記のHTMLを貼り付ける
<ul class="hatena-urllist urllist-with-thumbnails">
<li class="urllist-item">
<div class="urllist-item-inner">
<a class="urllist-image-link" href="遷移先URL">
<img class="urllist-image" alt="" src="画像URL">
</a>
<a href="遷移先URL" class="urllist-title-link">テキストテキストテキスト</a>
</div>
</li>
<li class="urllist-item">
<div class="urllist-item-inner">
<a class="urllist-image-link" href="遷移先URL">
<img class="urllist-image" alt="" src="画像URL">
</a>
<a href="遷移先URL" class="urllist-title-link">テキストテキストテキスト</a>
</div>
</li>
<li class="urllist-item">
<div class="urllist-item-inner">
<a class="urllist-image-link" href="遷移先URL">
<img class="urllist-image" alt="" src="画像URL">
</a>
<a href="遷移先URL" class="urllist-title-link">テキストテキストテキスト</a>
</div>
</li>
</ul>
3. [高度な設定] を開き、class名に『pickupSlider』と設定する
スライダーが有効になる条件
本モジュールはデザインの関係上、表示する記事が少ない場合はスライダー化されません。
スライダーを有効にしたい場合は下記の記事数をご用意ください。
PC / タブレット：表示するカテゴリーに３記事以上ある
SP：表示するカテゴリーに２記事以上ある