テーマ（ページビルダー／プラグイン含む）に依存すると、着せ替えの時に苦しむこととなる。独自の装飾が使われているケースがほとんどのため、ほぼ全てがエラーになるからだ。そこで、極力一般的なHTML／CSSを使った装飾を使うこととする。
下記は、Astra＋Elementorで使用した装飾一覧。他の組み合わせでもそのまま使えるかを検証する。
スクロールテーブル
横スクロールするテーブルを使えば、スマートフォン閲覧時でもテーブルが不格好に縦に広がることはない。テーブルの列数が多い場合や、テキストが多めになる場合はお勧め。
スクロールテーブル サンプル
※このテーブルは、横にスクロールします。
| no. | 項目 | 備考 |
| テキスト | テキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキスト |
htmlコード
<div class="scroll-table">
<p>※このテーブルは、横にスクロールします。</p>
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 20%; background-color: #1e50a2;"><span style="color: #ffffff;">no.</span></td>
<td style="width: 40%; background-color: #1e50a2;"><span style="color: #ffffff;">項目</span></td>
<td style="width: 40%; background-color: #1e50a2;"><span style="color: #ffffff;">備考</span></td>
</tr>
<tr>
<td style="width: 20%;">テキスト</td>
<td style="width: 40%;">テキストテキストテキストテキストテキスト</td>
<td style="width: 40%;">テキストテキストテキストテキストテキスト</td>
</tr>
</tbody>
</table>
</div>CSSコード
スクロールテーブルを初めて使う場合は、上記htmlに加えて下記CSSを「追加CSS」にペーストする必要がある。
/* 横スクロールテーブル */
.scroll-table {
overflow: auto; /* 横スクロールバーを表示 */
white-space: nowrap; /* セル内にあるテキストの折り返しを禁止 */
}テキストの着色
テキストの着色は数クリックで対応可能だが、今後も乗り換えの可能性はゼロではない。なので、着色もテーマやプラグインに依存しないようこだわろう。下記がサンプルだ（当然、CSSは不要）。
テキストサンプル
赤文字のテキスト（太字）
htmlコード
<!-- wp:paragraph -->
<p><span style="color: #ff0000;"><b>赤文字のテキスト（太字）</b></span></p>
<!-- /wp:paragraph -->マーカー
投稿内テキストの色は変えられるが、そればかりでも単調だし、多用し過ぎるとうるさく感じる。そんなときのアクセントとして気に入っているのがマーカーだ。サンプルは下記参照。CSSは不要だ。
マーカー1 サンプル
マーカーのテスト（黄色・クレヨン風）
htmlコード
<span style="box-shadow: 0px -6px 5px -3px rgba(240,250,79,0.6) inset,0px 8px 4px -2px #ffff66">マーカーのテスト（黄色・クレヨン風）</span>マーカー1 サンプル（太字）
Yellow：ここに文字を入力
htmlコード
<!-- wp:paragraph -->
<p><span style="box-shadow: 0px -6px 5px -3px rgba(240,250,79,0.6) inset,0px 8px 4px -2px #ffff66"><b>Yellow：ここに文字を入力</b></span></p>
<!-- /wp:paragraph -->マーカー2 サンプル
マーカーのテスト（ピンク・クレヨン風）
htmlコード
<span style="box-shadow: 0px -6px 5px -3px rgba(242,163,202,0.6) inset,0px 8px 4px -2px #fcc2cc;">マーカーのテスト（ピンク・クレヨン風）</span>マーカー2 サンプル （太字）
Pink：ここに文字を入力
htmlコード
<!-- wp:paragraph -->
<p><span style="box-shadow: 0px -6px 5px -3px rgba(242,163,202,0.6) inset,0px 8px 4px -2px #fcc2cc;"><b>Pink：ここに文字を入力</b></span></p>
<!-- /wp:paragraph -->囲い枠
テキストコンテンツは単調になりがちなので、要所要所を目立たせる必要がある。そんな時に使える装飾が囲み枠だ。だが、Gutenbergには囲み枠というブロックが無いので、自作する必要がある。登録済みブロック及びHTML/CSSは下記参照。
囲い枠1 ノーマル（テキストベース）
囲い枠1・ここに文章を入力
htmlコード
<div class="box1">
<p>囲い枠1・ここに文章を入力</p>
</div>CSSコード
.box1{
padding: 0.5em 1em;
margin: 2em 0;
color: #5d627b;
background: white;
border-top: solid 5px #5d627b;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box1 p {
margin: 0;
padding: 0;
}囲い枠1 リストベース
「ul/ol」を書き換えればナンバー有り／なしどちらでも対応可。
htmlコード
- ナンバー付きリスト
- ナンバー付きリスト
- ナンバー付きリスト
<!-- wp:html -->
<div class="box1">
<ol>
<li>ナンバー付きリスト</li>
<li>ナンバー付きリスト</li>
<li>ナンバー付きリスト</li>
</ol>
</div>
<!-- /wp:html -->CSSコード
CSSはノーマルのまま。
囲い枠2 ノーマル （テキストベース）
囲い枠2・ここに文章を入力
htmlコード
<div class="box2">
<p>囲い枠2・ここに文章を入力</p>
</div>CSSコード
.box2 {
margin: 2em 0;
background: #dcefff;
}
.box2 .box-title {
font-size: 1.2em;
background: #5fb3f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box2 p {
padding: 15px 20px;
margin: 0;
}囲い枠2 リストベース
「ul/ol」を書き換えればナンバー有り／なしどちらでも対応可。
- ナンバーなしリスト
- ナンバーなしリスト
- ナンバーなしリスト
htmlコード
ここに囲い枠2（リスト）html
<!-- wp:html -->
<div class="box2">
<ul>
<li>ナンバーなしリスト</li>
<li>ナンバーなしリスト</li>
<li>ナンバーなしリスト</li>
</ul>
</div>
<!-- /wp:html -->CSSコード
CSSはノーマルのまま。
見出し（投稿用）
Elementorしかり、Starter Templatesもしかりで、ほとんどの見出し（大きな文字の部分）は普通にhタグを使っている。つまり、投稿の見出しはもう少し凝ったものを…とカスタマイズしてしまうと、固定ページの見出しにもそのデザインが反映されてしまう。
そこで、投稿用の見出しはクラス指定を行い、再利用ブロックに登録しておけばトラブルを防げる。下記はクラス指定した見出しの例だ。
投稿用見出し（H2） サンプル
クラス指定したH2見出し
htmlコード
<h2 class="heading01">クラス指定したH2見出し</h2>CSSコード
.heading01 {
padding: .5em .75em;
background: rgb(30,80,162);
background: linear-gradient(332deg, rgba(30,80,162,1) 0%, rgba(123,190,231,1) 35%, rgba(222,245,250,1) 87%);
border: solid 1px #ccc;
}投稿用見出し（H3） サンプル
クラス指定したH3見出し
htmlコード
<h3 class="heading02">クラス指定したH3見出し</h3>CSSコード
.heading02{
padding: .5rem 1.5rem;
margin-bottom: 0.2rem;
background-image: linear-gradient(180deg, rgba(30,80,162,1) 0%, rgba(123,190,231,1) 35%, rgba(222,245,250,1) 87%);
background-repeat: no-repeat;
background-size: 0.5rem 100%;
}投稿用見出し（H4） サンプル
クラス指定したH4見出し
htmlコード
<h4 class="heading03">クラス指定したH4見出し</h4>CSSコード
.heading03{
position: relative;
padding: 1rem .75rem;
}
.heading03:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
content: '';
background: rgb(30,80,162);
background: linear-gradient(10deg, rgba(30,80,162,1) 0%, rgba(123,190,231,1) 35%, rgba(222,245,250,1) 87%);
}