(更新日: 2022/11/23)

【Manablog Copy】AddQuicktagで扱うデザインをブロックエディターで使う

Theme WordPress

こんにちは、タカです。

当サイトではManablog Copyをテーマにしつつ、ブロックエディターで記事を書いています。

※ブロックエディターで記事を書いている理由は下記で紹介しています↓
» 【Manablog Copy レビュー】ブロックエディターで記事を書いてみた

そんな方に朗報

manablogのデザインが使えるようになるまで時間がかかります。
やや複雑な手順があるので僕が普段使用してるデザインをみなさんに共有します。

なので、今回紹介する方法が唯一の方法です。
ストレスフリーで作業できるので、ぜひ参考にしてください。

本記事の内容

紹介するデザインは全て使いやすいように元デザインを少しいじっています。
ご了承ください。

AddQuicktagで扱うデザインをブロックエディターで使う

デザインをただコピペしても今回紹介するデザインは使えません。

カスタムHTMLを使用

今回紹介するデザインは、基本的に「カスタムHTML」という機能を使います。
※ブロックエディター編集画面から「＋」→「カスタムHTML」を選択

上記を踏まえた上でデザインを紹介していきます。

では、そろそろ紹介していきます。

①：グレーボックス

1つ目はグレーボックス。
manablogではかなり使用頻度が高いデザインです。

HTMLコード

<div class="pre">ここに入力</div>

上記コードをカスタムHTMLに貼り付けると、下記のような感じ。

画面表示

②：チェックマーク

2つ目はチェックボックス。
グレーボックス同様、manablogでは頻繁に使用されているデザインです。

HTMLコード

<p class="point">
<i class="fa fa-check" aria-hidden="true"></i> ここに入力
</p>

/iの後ろにスペースがあるのはキレイに表示させるためです。
カスタマイズはお任せします。

上記コードをカスタムHTMLに貼り付けると、下記のような感じ。

ここに入力

③：画像(レスポンシブ)

3つ目は、画像を挿入するカスタムHTMLです。
ブロックエディターにも最初から画像を挿入する機能はあります。

しかし、ブロックエディターの機能で画像挿入すると自動的にリサイズされるのでカスタムHTMLで挿入します。

HTMLコード

<img src="ここに画像URLを貼り付け" alt="" width="100%">

width="100"でレスポンシブ表記になるので本来のサイズで表示されます。

上記のコードをカスタムHTMLに貼り付け、画像URLを挿入すると下記のような感じ。

画面表示

※上記の説明でわからない方は、下の記事で詳しく解説しています。

関連記事挿入した画像がリサイズ表示される問題を解決

④：プログラミングコード

4つ目はプログラミングコード。
manablogでは、主にPHPやCSSコードなどのコードを強調させたい時に使用されています。

HTMLコード

<pre><code class="language-php">ここにコードを入力</code></pre>

ここにコードを入力欄にプラグラミングコードを入力、コピペしたら上記のように背景が黒いボックスになり文字が白く表示されます。

上記コードをカスタムHTMLに貼り付けると、下記のような感じ。

画面表示

ここにコードを入力

⑤：YouTube動画の埋め込み

5つ目は、YouTube動画の埋め込み。
その名の通り、YouTubeの動画を記事内に埋め込むためのコードです。

HTMLコード

<div class="YoutubeWrapper">ここにYouTube動画を埋め込む</div>

実はYouTube動画も画像同様リサイズ表示されてしまうので、レスポンシブにしたい人用って感じです。
※「共有」→「埋め込む」でコピペして貼り付け

上記コードをカスタムHTMLに貼り付け、YouTube動画URLを貼り付けると下記のような感じ。

画面表示

カスタムHTMLを使わずに動画をそのまま貼り付けると、スマホ表示したときデザインが崩れるので注意してください。

こんな感じに崩れる

⑥：注意ボックス

6つ目は、注意ボックス。

manablogではあまり使われていませんが、使い方も少なからずいるはずなので貼っておきます。

HTMLコード

<div class="memo">
<div class="memo-title">
注意
</div>
<p>ここに書いた内容がボックスに表示されます。<br>
お試しください。</p>
</div>

このデザインは、CSSにも貼り付ける必要があるので、「カスタマイズ→追加 CSS」で1番上にコピー&ペーストしてください。

CSSコード

.memo {
	background: #fff7d9;
	color: #545454;
	margin-bottom: 1.5em;
	margin-left: 5%;
	margin-right: 5%;
	padding: 1em;
}

.memo-title {
	content: "\f303";
	color: #ff6600;
	margin-left: 0.5em;
	margin-bottom: 0.5em;
	margin-top: 0px;
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
}

.memo-title:before {
	content: "\f040";
	background: #ff6600;
	color: #fff;
	margin: 0 0.2em 0.2em 0;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
	font-family: FontAwesome;
	font-weight: normal;
}

.memo p {
	margin: 0 0 5px;
	coloer: #333333;
}

上記コードをカスタムHTMLに貼り付けると、下記のような感じ。

画面表示

<br>で改行できます。

⑦：会話吹き出し

7つ目は、会話吹き出し。
manablogでは記事の最初に使われています。

HTMLコード

<div class="talk clearfix">
<div class="col-md-3 col-xs-3 img">
	<img src="ここに画像URL" alt="" class="img-responsive ">
</div>
<div class="col-md-9 col-xs-9 text">
	<p><span class="bold">悩む人</span>「ここに入力」</p>
</div>
</div>

上記HTMLコードをカスタムHTMLに貼り付けると、下記のような感じ。

画面表示

自分が好きな画像を貼り付けると、上記のようになります。
サイズは指定しているので自動的にリサイズされます。

だいたい使われている画像は「いらすとや」です。
» いらすとや公式ページ

⑧：テーブル

8つ目は、テーブル。

レスポンシブデザインになっており、行、列を何個も追加してもスライドして閲覧できるようになっています。

HTMLコード

<div class="table-responsive"> 
<table class="table"> 
<tbody>
<tr>
<td style="background-color: #FAFAFA;"><a href=""></a>テーマ名</td>
<td>Manablog Copy<a href=""></a></td>

</tr>
<tr>
<td style="background-color: #FAFAFA;"><a href=""></a>価格</td>
<td>¥6,980<a href=""></a></td>
</tr>
<tr>
<td style="background-color: #FAFAFA;"><a href=""></a>推奨エディター</td>
<td>クラシックエディター<a href=""></a></td>
</tr>
<tr>
<td style="background-color: #FAFAFA;"><a href=""></a>ライセンス</td>
<td>複数サイトで使用可能<a href=""></a></td>
</tr>
</tbody>
</table>
</div>

上記コードをカスタムHTMLに貼り付けると、下記のような感じ。

画面表示

• <a href=””></a>→URLを挿入し、入力、クリックするとリンク先へ移動
• <td></td>→行、列を追加

難しいと思いますが、カスタムHTMLではプレビューしながら編集可能。
いろいろ試行錯誤しながらいじってみてください。

⑨：人気記事

9つ目は、人気記事。
manablogでは、記事の終わりに関連記事などに誘導させるときに使用されています。

HTMLコード

<p><span class="orange-badge">人気記事</span><a href="ここに”URLを入力">ここに入力</a></p>

上記コードをカスタムHTMLに貼り付けるとこんな感じ。

画面表示

人気記事manablogはこちら

ちなみに、「人気記事」の部分は自由に変更可能です。
※関連記事と入力することも多いです

⑩：レーティング(評価)スター

10個目は、レーティング(評価)スター。

manablogでは商品やレビューをしたとき、見やすいように星マークで評価されているときが多いです。

HTMLコード

<span style="color:#ffa500">★★★★★</span>

上記コードをカスタムHTMLに貼り付けると下記のような感じ。

画面表示

★★★★★

星の数は調整可能。
テーブルの中にも挿入できます。
※テーブル内で使用する場合は<p></p>を削除してください。

テーブルへの挿入方法がわからない場合はお問い合わせください。
» お問い合わせはこちら

⑪：ブログカード

11個目は、ブログカード。
manablogではまとめ記事などで使用されています。

HTMLコード

<div class="col-xs-12 article_box">
<div class="col-xs-12 col-sm-4">
<img src="画像URLをここに入力"img-responsive">
</div>
<div class="col-xs-12 col-sm-8">
<h3>記事タイトルをここに入力</h3>
<p>本文をここに入力
</p>
</div>
</div>
<p><a href="記事URLをここに入力" class="green_link">» この記事を読む</a></p>
<div style="clear:both;margin-bottom: 60px;"></div>

上記コードをカスタムHTMLに貼り付けると下記のような感じ。

画面表示

» この記事を読む

こんな感じ。
おすすめしたい記事を強調するときに使ってみてください。

ここまでをまとめる

以上がManablog Copyをテーマにし、ブロックエディターでデザインを使用する方法・デザイン一覧になります。

良いデザインがあったら更新するので、この記事を参考にしながらブログすることをおすすめします。

目次に戻る⬆︎

カスタムHTMLを使わなくても反映されるデザイン一覧

さて、今回紹介したデザイン以外に、カスタムHTMLを使用しなくても反映されるデザインがいくつかあります。

それが次のとおり。

• 見出し
• リスト
• コード
• 引用
• リンク
• インラインコード

まとめると上記6つ。
かんたんに解説します。

これらのデザインは他テーマでブロックエディターを使用したときも、だいたい同じように扱えるはず。

①：見出し

上記のような感じで文章を書く前に挿入するタイトルみたいなデザイン。
※ちなみに上の見出しはH3

②：リスト

manablogでは1番使用されているデザイン。馴染み深いですね。
ちなみに、リストには「箇条書き」「番号付き」2つのリストデザインがあります。

箇条書きリスト

• あかさたな
• はまやらわ

番号付きリスト

1. あかさたな
2. はまやらわ

番号付きリストは、リストを増やすと数字が増えます。

③：コード

基本的にデザインを反映させないようにコードを表示させることができます。
※上記で解説したような感じ

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

④：引用

著作権物を利用するときに使うデザインです。
※引用元：と記載してからURLを貼るのがオススメ。

ここに文字を入力

改行もできます。

引用元：https://manablog.org

⑤：リンク

文章まるまるリンクにすることができます。
※リンクにしたい文字を選択→URLを貼り付け

» こんな感じ。

⑥：インラインコード

強調したい文字を選択し、プログラミングコードみたいな文字にします。

インラインコード←こんな感じ。

目次に戻る⬆︎

まとめ：ブロックエディターで書くならカスタムHTMLは必須

ばーっと解説してきましたが、結局ストレスフリーでブログするならカスタムHTMLは必須です。

今回紹介したデザインでわからないこと、質問したいことがありましたらいつでも質問してください。

では今回はこの辺で〜

人気記事【Manablog Copy】最新カスタマイズ方法まとめ【ブロックエディター向け】

Manablog Copy Manablog Copy カスタマイズ Manablog Copy ブロックエディター

• Tweet