CSS:フローチャートをCSSで作成

お見積もりまでの流れや、作業の流れなどのフローを作成する場合の
チャートのCSSです。
見た目はこんな感じ。

paddingあたりは調整してください。

CSS:FAQなどのリストで文字を下げる

通常の2行目以降のインデント下げは以下。

ただ、これでは3行目以降がうまくいかないし
FAQなどのリストの場合も不便。

CSSで2行目以降の文字を下げて、FAQを作る

イメージはこんな感じ。

ただ、文字をpxで指定するなどガチガチなので、ご自信で改変してくださいませ。

WordPressでサムネイル付きの特定カテゴリを最新5件取得する

いつも忘れるので。備忘録。

主にコーポレートサイトを制作することが多いのですが、最新記事以外にコラムなどとしてサムネイル写真付きでトップページに最新5件出したい、ということがあります。
プラス、記事内容を少し出したいということも。
よくニュースサイトなどで見かけるやつです。

  • 特定カテゴリのみ
  • 最新5件
  • リストにして
  • サムネイル付き
  • 記事内容を文字数指定

これ全部やっちゃいます。

「news」というスラッグ名のカテゴリを最新5件、サムネイル付き&記事内容を文字数指定して抽出しています。

カテゴリの指定

カテゴリの指定は2行目。スラッグ名を入力。

最新の記事数を指定

3行目に記事数の指定を行なっています。最新5件出す様にしています。

記事内容の取得する文字数を指定

21行目に記事内容の文字数を指定しています。
0というのは何文字目から抜き出すか、ということなのでここでは「0文字目から30文字目まで抜き出す」という指定になっています。

アイキャッチがないときの処理

アイキャッチがないときの処理は14行目にあります。
ないときはFontAwesomeでアイコンを出すようにしています。
FontAwesomeでアイコンを出すには内に読み込むなどの処理が必要ですが、ここで書くと長くなるので、こちらがとても丁寧に説明してくださっています。とても簡単ですのでここを参考にどうぞ。
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
別にこれでなくても、Noimageの画像をつくって表示させるのでも大丈夫です。