簡単!サムネイル付お勧め記事をプラグインなしで好きな場所に表示する

2019-05-12カスタマイズプラグイン不要

おすすめの記事を表示したいけど、テーマには機能がない時、プラグインに頼らなくともウィジェットにHTMLを記述して簡単に表示する事が出来ます。

デザインもCSSで自在に編集可能。

ウィジェットエリアがある場所なら、どこにでも出したい場所に、いくつでも出したい記事数だけ表示できます。

 

※ルクセリタスには「カルーセルスライダー」機能もありますが、あまりたくさんの記事を表示せず、ナビゲーションなしにすればいけるかと思ったのですが、スマホではナビゲーションがないとすべてを表示する事が出来ない為、この方法を試してみました。

 

※今回は、サムネイル画像のみの表示ですが、タイトルを出したい場合も簡単な追記で可能。

 

表示例

PCでの見え方

ヘッダー下等 全幅エリア

7033_01

 

記事下等メインエリア

7033_04

 

サイドバーエリア

7033_03

 

スマホでの見え方

7033_02

 

実現方法

 

表示したいエリアのウィジェットに「カスタムHTML」を追加し、HTMLを記述します。

7033_05

HTML記述

 「カスタムHTML」に以下を記述します。
<div class="pickup_post">
<ul class="pickup_list">
<li><a href="記事URL"><img src="アイキャッチURL"></a></li>
<li><a href="記事URL"><img src="アイキャッチURL"></a></li>
<li><a href="記事URL"><img src="アイキャッチURL"></a></li>
<li><a href="記事URL"><img src="アイキャッチURL"></a></li>
</ul>
</div>

 

記事のURLと表示したいアイキャッチサムネイル画像URLを入れるだけ。

表示数もいくつでも可能です。

 

記事タイトルも表示したい場合

アイキャッチ画像で記事の内容がわからないような場合は、記事タイトルやキャッチコピーを追加して下さい。

 

<div class="pickup_post">
<ul class="pickup_list">
<li><a href="記事URL"><img src="アイキャッチURL"></a><span class="pickup_title">記事タイトル</span></li>
<li><a href="記事URL"><img src="アイキャッチURL"></a><span class="pickup_title">記事タイトル</span></li>
</ul>
</div>

 

CSSデザイン

サムネイルに影をつけ、オンマウスでふわっと浮き上がるようにデザインしています。

 以下をスタイルシート(style.css)に追記します。
/*お勧め記事*/
.pickup_post {
margin-top:10px;
padding:10px 35px;
}
.pickup_list {
display:flex;
justify-content:space-between;/*均等配置*/
flex-wrap: wrap;
box-shadow: 0 2px 5px #f0f0f0;
transition: .5s;
}
.pickup_list li{
list-style:none;
width:150px; /*サムネイルサイズ*/
}
/*影をつけて浮かぶ*/
.pickup_list li :hover {
box-shadow: 0 4px 20px #a5a5a5;
transform: translateY(-3px); /*移動距離*/
}

 

ホバーアニメーションを変える例

画像を傾けるアニメーション

/*オンマウスで傾ける*/
.pickup_list li {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pickup_list li:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}

 

 

記事をいくつ出すかにより、スマホやタブレットの見え方を考えて幅を調整して下さい。

 

以下も参考にして下さい。

 

スマホ・タブレット用

@media only screen and (max-width: 767px){
.pickup_post {
padding: 0;
margin: 0.5em 0;
width:100%;
}
.pickup_list {
margin:0.5em;
padding: 0.25em 0;
}
.pickup_list li{
width:48.5%;
margin: 0.25em 0;
}
}

 

 スマホで横3列にしたい場合は
.@media only screen and (max-width: 767px){
.pickup_post {
padding: 0;
margin: 0.5em 0;
width:100%;
}
.pickup_list {
margin:0.5em;
padding: 0.25em 0;
}
.pickup_list li{
width:33%;
margin: 0.25em 0;
}
}

 

5記事出したらタブレット・スマホでは

私個人の場合の対応ですのでご参考までに。

「スマホでも横並びで出すのはMAX5記事くらいまで?」

@media only screen and (max-width: 1199px){
.pickup_list li{
width:20%;
margin: 0.25em 0;
}
}
@media only screen and (max-width: 767px){
.pickup_post {
padding: 0;
margin: 0.5em 0;
width:100%;
}
.pickup_list {
margin:0.5em;
padding: 0.25em 0;
}
.pickup_list li{
width:20%;
margin: 0;
}
}

 

 結果:タブレット

7033_06

 

 結果:スマホ

7033_08

記事タイトル追加時

記事タイトルを追加した場合はそこで指定したクラス名でのCSS装飾も記述。

.pickup_title{
font-size: 14px;
color:#999;
}

 

当サイトのデザインまるごとコピーの場合

以下の2デザインあります。

  • シンプルにアイキャッチを表示するデザイン
  • カテゴリーラベルとテキストを画像に載せるデザイン

 

パターン1

タイトル文字は任意テキストですので、

アイキャッチ画像で記事内容がわかる場合はこちらを使ってテキストなしで利用して下さい。

ヘッダー下あすすめ記事

CSS
ルクセリタスの場合:Luxelitas→子テーマの編集で「スタイルシート」に記述

/************************/
/*ヘッダー下のお勧め記事*/
/************************/
.pickup_post {
margin-top:10px;
padding:10px 35px;
}
.pickup_list {
display:flex;
justify-content:space-between;/*均等配置*/
flex-wrap: wrap;
box-shadow: 0 2px 5px #f0f0f0;
transition: .5s;
}
.pickup_list li{
list-style:none;
width:150px; /*サムネイルサイズ*/
}
.pickup_list li img{border-radius:8px;}
/*オンマウスで傾ける*/
.pickup_list li {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pickup_list li:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
@media only screen and (max-width: 1199px){
.pickup_list li{
width:20%;
margin: 0.25em 0;
}
}
@media only screen and (max-width: 767px){
.pickup_post {
padding: 0;
margin: 0.5em 0;
width:100%;
}
.pickup_list {
margin:0.5em;
padding: 0.25em 0;
}
.pickup_list li{
width:20%;
margin: 0;
}
}

 

HTML
ルクセリタスの場合:ヘッダー下ウィジェットにカスタムHTMLを追加して以下を記述。

<div class="pickup_post">
<ul class="pickup_list">
<li><a href="記事URL"><img src="アイキャッチURL" alt="記事説明"></a><br>記事タイトル</li>
<li><a href="記事URL"><img src="アイキャッチURL" alt="記事説明"></a><br>記事タイトル</li>
<li><a href="記事URL"><img src="アイキャッチURL" alt="記事説明"></a><br>記事タイトル</li>
<li><a href="記事URL"><img src="アイキャッチURL" alt="記事説明"></a><br>記事タイトル</li>
</ul>
</div>

 

記事タイトルをテキスト表示しない場合は、各項目の「<br>~記事タイトル」を削除して下さい。

 

パターン2

画像の上にタイトル文字と、カテゴリーラベルを載せたデザイン

PC

ヘッダー下あすすめ記事

 

スマホ

ヘッダー下あすすめ記事

 

CSS

/************************/
/*ヘッダー下のお勧め記事*/
/************************/
.pickup_post {
margin-top:10px;
padding:10px 15px;
}
.pickup {position: relative;}
.pickup_list li.pickup p {
position: absolute;
top: 50PX;
left: 5px;;
color: #fff;
font-size: 16px;
font-weight:bold;
letter-spacing:0.5px;
text-decoration: none;
line-height: 1.2;
text-shadow: 0 0 7px rgba(0,0,0.3);
}
.pickup_list li.pickup span {
position: absolute;
top: 0;
left: 0;
margin: 0;
color: white;
background: rgba(251,138,138,0.6);
font-size: 15px;
line-height: 1;
padding: 5px 10px;
}
.pickup_list {
display:flex;
justify-content:space-between;/*均等配置*/
flex-wrap: wrap;
box-shadow: 0 2px 5px #f0f0f0;
transition: .5s;
}
.pickup_list li{
list-style:none;
width:150px; /*サムネイルサイズ*/
}
.pickup_list li img{border-radius:8px;}
/*オンマウスで傾ける*/
.pickup_list li {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.pickup_list li:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
@media only screen and (max-width: 1199px){
.pickup_list li{
width:20%;
margin: 0.25em 0;
}
}
@media only screen and (max-width: 767px){
.pickup_post {
padding: 0;
margin: 0.5em 0;
width:100%;
}
.pickup_list {
margin:0.5em;
padding: 0.25em 0;
}
.pickup_list li{
width:48.5%;
margin: 0.25em 0;
}
}

 

HTML

<div class="pickup_post">
<ul class="pickup_list">
<li><a href="記事URL"><img src="アイキャッチURL" alt="記事説明"><span class="pickup-label">カテゴリー</span><p>記事タイトル</p></a></li>
<li><a href="記事URL"><img src="アイキャッチURL" alt="記事説明"><span class="pickup-label">カテゴリー</span><p>記事タイトル</p></a></li>
<li><a href="記事URL"><img src="アイキャッチURL" alt="記事説明"><span class="pickup-label">カテゴリー</span><p>記事タイトル</p></a></li>
<li><a href="記事URL"><img src="アイキャッチURL" alt="記事説明"><span class="pickup-label">カテゴリー</span><p>記事タイトル</p></a></li>
</ul>
</div>

 

その他のカスタマイズは以下もご覧ください。