「Similar Posts」を横並びにするカスタム | STUDIO-colorz

Category

Memu

facebook
search button
検索ボックス

© STUDIO-colorz All rights reserved.

20166/14

「Similar Posts」を横並びにするカスタム

関連記事の表示が簡単にできるプラグイン「Similar Posts」
デフォルトの状態では縦に表示されますが、横に4つずつ並べたい時ありますよね。
関連記事は縦並びだけではないんです。

大丈夫！
カスタムしちゃいましょう！
簡単だけどついつい忘れちゃうので、自分用も兼ねて記しておきます。

参考にしてみてくださいね。

「Similar Posts」を横並びにするカスタム

参考URL
http://gucciz03.com/kanrengazou-954

CSSで要素を横並びにする方法まとめ


<div class="cate"><?php the_category('','','')?></div>	
<div class="ymd-single"><?php the_time('Y/m/d'); ?></div>

↓

<ul class="grid-kanren">
	<li class="kanren-listitem01">{php: the_category('','',''); }</li>
        <li class="kanren-listitem02">{php: the_time('Y.m.d'); }</li>
</ul>

1

2

3

4

5

6

7

8

9

10

11

<div class="cate"><?php the_category('','','')?></div>

<div class="ymd-single"><?php the_time('Y/m/d'); ?></div>

↓

<ul class="grid-kanren">

<li class="kanren-listitem01">{php: the_category('','',''); }</li>

<li class="kanren-listitem02">{php: the_time('Y.m.d'); }</li>

</ul>

【解説】
一目瞭然ですが、
リストにすることで簡単に縦並びから横並びにカスタムできます。

お試しあれ♪

似たようなプラグインでこんなのもあるよ。

サムネイル付きで関連記事を表示するプラグイン「WordPress Related Posts」を選んだ９つの理由

WEB DESIGN

関連記事

20214/24

使いやすそうなサイトを厳選！AIが顔画像を加工しているサイト6選

結婚式の集合写真で目をつむってしまったり、ネクタイが歪んでいたり、昔そういう写真の修正をしていたこともあります。また、少し痩せているように…

20214/16

オンライン上でかわいく写真加工してくれるサイト紹介するよ

スマホで写真加工する方も多いかと思いますが、私は断然PC派です。そんなPC派な方に、パソコンで作業するときに役立つ、オンライン上でかわいく…

20207/16

ファビコンの設定の仕方

「https」に変更してから、ファビコンも表示されなくなったので、再設定しようといろいろ調べてたら・・・やだ！めちゃ簡単…

20207/11

コロナで注目されている契約書　ネットで契約書を結ぶ時代【CloudSign – クラウドサイン】

今日は私がお世話になっているオンライン契約書をご紹介致します。フリーランスでお仕事をする場合、欠かせないのが契約書になってきます…

20202/7

WEBデザイナーさん必見！　おすすめのポートフォリオ【無料WordPressテーマ】

WEBデザイナーさんが自分の作品を見せる時に、ポートフォリオがまとめられたら見やすいですよね。私が使ったことのあるテーマから、これか…

ページ上部へ戻る