【要検証】投稿用ブロック

AD Area
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table of Contents

テーマ(ページビルダー/プラグイン含む)に依存すると、着せ替えの時に苦しむこととなる。独自の装飾が使われているケースがほとんどのため、ほぼ全てがエラーになるからだ。そこで、極力一般的な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コード

  1. ナンバー付きリスト
  2. ナンバー付きリスト
  3. ナンバー付きリスト
<!-- 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%);
}
Recommends
Sleeping Puppy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Recent posts
This is the Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table of Contents

BIOHAZARD®は株式会社カプコンの登録商標です。
Play Station®は株式会社ソニー・インタラクティブエンタテインメントの登録商標です。

もっと楽しみたい?それならこちらをチェック
あなたは、CAPCOMが運営する「バイオハザードポータル」をご存じだろうか? 最新情報はもちろん、世界中のプレイヤーのデータを見たり、オンラインイベント、ランキング、チャレンジへ参加したりと楽しい仕掛けが満載だ。 バイオハザードポータルの登録は無料。今すぐ下のボタンからアクセスして、詳細を確認して欲しい。
Shingo Matsuura
Shingo Matsuura

マーケター/コピーライター。STRATEGY SUPPLIER所属。お気に入りゲームは「バイオハザードシリーズ」。最近「バイオハザード0 HD」にどっぷりハマったのがきっかけで、このサイトの題材として取り上げることとしました。