PTM・Products-フリースタイル

カスタム・ポストタイプ「Products」は
カスタムフィールドでレイアウトする基本カテゴリ「Product-item」と、自由形式で書ける「Product-item-free」があり
Products一覧を見ると、2カテゴリが時系列で並んでいます。

「Product-item-free」は投稿タイトルさえ表示しない真っ白のカンバスですが、投稿欄だけで下の画像のようなレイアウトも表示できます。

---

ヘッディング・スタイル

<h2>ヘッディング1</h2>
<h3>ヘッディング2</h3>
<h4>ヘッディング3</h4>

サンプルコードの値には「Product-item」でのカスタムフィールド名をそのまま書きました。
ヘッディング1は、通常は「投稿タイトル」となる製品名を見出し・Heading（ヘッディング）：h2タグで入れます。

---

ただし従来の製品紹介を入力するには、まず1000px横幅の箱に入れることをproduct-wrapperクラスで決めています。

<div class="product-wrapper">
</div>

よって、エディターへのコピー用の空タグは

<div class="product-wrapper">
	<h2>＊</h2>
	<h3>＊</h3>
	<h4>＊</h4>
</div>

---

2カラム・スタイル

いちばん多用しそうな左本文・右写真のタイプの外箱名はgrid-two

<article class="grid-two">
</article>

左右2つの箱枠がいるのでコピー用の空タグは
Divタグを2つ並べた

<article class="grid-two">
	<div>左</div>
	<div>右</div>
</article>

---

2カラム・スタイル（左画像）

<article class="grid-left">
	<div>左</div>
	<div>右</div>
</article>

---

カラム・スタイルの種類

ここで疑問になるのは、多用するgrid-twoクラスで、中味だけ置く順番を変えれば、そのまま「左右逆バージョン」になりそうです。

が、ここでは片方は「画像を置くブロック」と意識しているスタイルのため、中の箱・グリッドとして置いている「div」の伸び率（横幅を決定する率）を外箱のgrid-twoやgrid-leftというClass名で分けています。

要約すると「articleの指定クラスに依存して、内箱divグリッドサイズが変わる仕様にしている」という事です。

他に用意しているカラム・スタイルを先に紹介します。

• 左テキスト｜右画像＝grid-two
• 左画像｜右テキスト＝grid-left
• 左右が均等に50％｜50％に並ぶ＝grid-wsingle
• 横3カラム＝grid-3

---

2カラム・均等

写真などを2列配置で並べたい場合には、grid-wsingle
Double・Singleでwsingleというおかしな命名ですが、均等に50％：50％で箱が置かれるイメージです。

<article class="grid-wsingle">
	<div>左</div>
	<div>右</div>
</article>

---

3カラム・スタイル

横3列のレイアウトにするため、中の箱数：divも3つ縦に並べて書きます。

<article class="grid-3">
	<div>左</div>
	<div>中央</div>
	<div>右</div>
</article>

---

ここまでのカラム・スタイルは、「Product-item」カスタムフィールドで「追加写真1・2・3」をレイアウトするために使っています。

「Product-item-free」でも同じクラス名でHTMLタグを投稿すると、まったく同じ外観を「表示する順番の縛りなく」使えることがわかりました。

「Product-item-free」の用途は、カスタムフィールドの配置順では自由にアウトプットしきれないケースにも対応するためのイレギュラー投稿用です。

<div class="product-wrapper"> <!-- すべて class="product-wrapper" の中にネストして書く -->
	<h2>＊</h2>
	<h3>＊</h3>
	<h4>＊</h4>
	<article class="grid-two"> <!-- article に指定するグリッドのスタイル名を適したものに変更 -->
		<div>左</div>
		<div>右</div>
	</article>
</div> <!-- class="product-wrapper" の終了 -->

---

製品データシート・リンク

製品データシート

<p class="gen__mb--40 gen__mt--20 gen__ivam"><a href="#"><img src="http://localhost:10008/wp-content/uploads/2022/01/icon-pdf100.gif" alt="PDF" width="50" height="50">製品データシート</a></p>

「PDFアイコン」と「製品データシート」というテキストを、余白調整のクラス指定した段落タグで囲み、別タブリンクをつけています。

<a href="#"> <!-- ＃をPDFファイルURLに -->

1つ上のスニペットコードをコピーしたあと
アンカーリンクの値”#”をPDFファイルのURLに置き換えて完成です。

---

ZIPファイル・リンク

オプション：BlueTooth通信 Android用アプリケーション

<p class="gen__mb--40 gen__mt--20 gen__ivam"><a href="＃"><img src="https://www.ptm-co.jp/img/icon-zip.gif" alt="ZIP" width="50" height="50">リンクテキスト</a></p>

「ZIPアイコン」と任意のリンクテキストを表示するタグは
アンカーリンクの値”#”をZIPファイルのURLに置き換え、ファイル名称をリンクテキストに書き換えて完成します。

<a href="#"> <!-- ＃をZIPファイルURLに -->
<img src="........height="50">リンクテキスト</a> <!-- リンクテキストを書き換え-->

---

イメージ・タグ

<img class="fit-picture"
     src="media/pexels-photo-cat.jpg"
     alt="White Cat">

MDN の 「HTML 要素リファレンス」からコピペした一般的な<img>タグの書き方です。
MDNから引用すると

• src 属性は必須で、埋め込みたい画像へのパスを入れます。
• alt 属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために非常に有用です。

この例のようにCSS class=”＊”でサイズが決められていない場合
サイズ指定をしないと、画像の元サイズのままWebページに埋め込まれます。

先に出てきたPDFやZIPアイコンの画像は、横：width=”50″ 縦：height=”50″ と指定し、実際サイズの1/2サイズで表示しています。

<img src="/img/icon-zip.gif" alt="ZIP" width="50" height="50">

画像にリンクをつける場合はアンカータグで囲います。

<a href="#">
<img src="/img/icon-zip.gif" alt="ZIP" width="50" height="50">
</a>

---

参考

以上で「Products」へのフリースタイル投稿をまとめましたが、HTMLタグの意味・用途がモヤッとして（何を書いてるかわからない）状態にストレスを感じる場合や、好奇心のある方は、前述の MDN Web Docs で検索フィールドを使い慣れると実例付きのコードや説明を読むことができます。