PTM・Products-フリースタイル

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

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


ヘッディング・スタイル

Max Sample Post

製品仕様 ミリ波MIMOレーダ製品評価キット(2.5D/ 2DHR)​

79GHz帯 国内電波法技術適合審査取得済み

<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カラム・スタイル

「Product-item」では投稿欄に書くテキストを
2カラムの左側、1つめのDivの中に書きます


画像は2カラムの右側、2つめのDivの中にイメージタグで書きます

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

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

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

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

2カラム・スタイル(左画像)

画像を左に、文章を右側したい場合は「grid-left」クラスを使います。

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

カラム・スタイルの種類

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

が、ここでは片方は「画像を置くブロック」と意識しているスタイルのため、中の箱・グリッドとして置いている「div」の伸び率(横幅を決定する率)を外箱のgrid-twogrid-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" の終了 -->

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

PDF製品データシート

<p class="gen__mb--40 gen__mt--20 gen__ivam"><a href="#"><img src="https://www.ptm-co.jp/img/icon-pdf100.gif" alt="PDF" width="50" height="50">製品データシート</a></p>

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

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

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


ZIPファイル・リンク

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> <!-- リンクテキストを書き換え-->

イメージ・タグ

White Cat
<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 で検索フィールドを使い慣れると実例付きのコードや説明を読むことができます。