読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

【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

ページトップ