建設現場デジタルサイネージの「モニたろう」と「モニすけ」ブログ

建設現場に大型LEDビジョンや液晶ディスプレイで現場のICT化を促進する提案を行うヤマト広告公式ブログ

ヤマト広告公式ブログ
大型LEDビジョンモニたろうや液晶モニターモニすけなど
デジタルサイネージ提案で建設現場のICT化を促進します!

【WordPress】ループの中に横線や区切り線を追加

f:id:yamato-ugaki:20161102200348j:plain


こんにちは。
Web相談所です。


WordPress便利帳を更新しました。

今回は、WordPressの、投稿やカスタム投稿のループ出力のなかに罫線・区切り線を追加する方法についてです。

Webサイトのデザインについて

f:id:yamato-ugaki:20161102200516g:plain


たまにデザイナーさんからいただくと、このような感じで改行のときに横線がはいっていることがあります。
商品も整列されてみやすいですし、デザイン面で見るとかなり意味のあるものになります。


f:id:yamato-ugaki:20161102201051g:plain


しかし、コーディングするときに、こういった商品などはカスタム投稿で管理することが多いため、Webサイトへの表示はループを使用することが多いです。

ループというのは、

f:id:yamato-ugaki:20161102201510g:plain
商品の表示デザインを1つだけ記載して、残りは商品があるだけ表示しておいて、と自動で書き出してもらうものです。
となると実際にHTMLで指定するのは一つ(炊飯器1)のデザインだけなので残りの2~最後までは完璧に手が離れてしまいます。

そのため、4番目のあと、8番目の後だけに横線を追加するのはンン?と頭を捻りました。

ソースコード


f:id:yamato-ugaki:20161102201542p:plain


この線を追加するためのソースコード
WordPress便利帳で公開いたしましたのでよろしくお願いします。



wp-notebook.com

ページトップ