WordPressでブログをやっているのに、まだまだ使いこなせていない管理人のヒロユキと申します。
エディタのGutenbergは非常に便利ですが、「これ面倒だなあ」と思うのは長文を引用するときです。
ブログに専門用語などを載せたいときに、wikiの文章を引用したいときが多いのですが、これが結構長文になりがちです。
例えばwikiの下記文をコピペして…
↓そのまま引用ブロックにコピペすると下記のようになります。
ここで問題なのが
- リンクなどがそのままコピーされてしまう
- そもそもpタグで囲まれていて、blockquoteになっていない
ということで、かなり苦戦しながら整形していたのですが、いい方法を発見したので記載してみたいと思います。
そもそも何故blockquoteにならないのか
引用ブロックを使用しているにも関わらず、長文がblockquoteにならない理由ですが、「間に改行が入っているから」です。
先程コピペの例で使用したwikiの文だと…
上記の赤枠の部分が改行となっています。
そして改行があると次のブロックに行ってしまうのが、Gutenbergの仕様なので引用ブロックを外れてしまいます。
Gutenbergで文を書いている時、エンターキーを押すと次のブロックに自動的に移動しますよね。
引用で改行を使用した場合も、それと同じで「次のブロックにいけ」という指示になってしまっているようです。
簡単に長文を引用する方法
とりあえず3種類くらい考えてみました。
- 単純に引用から改行を削除してからコピペする
- カスタムHTMLで引用→ブロックに変換する
- 引用ブロックを表すタグをつけてコピペする
自分が採用しようと思っているのは、3の「引用ブロックを表すタグをつけてコピペする」になります。
その他の方法についても一応詳細を書いてみたいと思います。
単純に引用から改行を削除してからコピペする
これは単純明快です。
- 引用する文から予め改行を削除してから引用ブロックにコピー
- その後に改行（<br />）を手で入れる
という形です。
ただ、一度メモ帳などのエディタにコピペする文を貼って編集をしなければいけないので若干面倒かもしれません。
あとは、引用する文に改行が非常に多い場合は面倒なことになります。
例えば以下の記事を引用したい時、改行を除いていくのが非常に面倒です。
カスタムHTMLで引用→ブロックに変換する
一度「カスタムHTML」ブロックに< blockquote >タグを使用して、引用を書いた後に、引用ブロックに変換します。
↓以下のようにHTMLで記載をした後に
↓ブロックへ変換します
この方法はかなり良いかなあと思いました。
引用ブロックについては、もう一つ悩ましいと思っていたことがあるのですが、そちらも解消することが出来ます。
その悩みとは、普通に引用ブロックを使用したときは、全てpタグになってしまうということです。
その結果、下記の画像のように行間がかなり広がって見えてしまいます。（CSSにもよると思いますが、普通結構開けていると思うので）
↓brタグで改行していったほうがスッキリすると思います。
引用ブロックを表すタグをつけてコピペする
以下のようなテンプレートを事前に作っておき、それを利用してコピペします。
<!-- wp:quote -->
<blockquote class="wp-block-quote">
<p>
ここに引用文を記載
</p>
<cite>
ここにサイトを記載
</cite>
</blockquote>
<!-- /wp:quote -->「ここに引用文を記載」の部分に引用したい文
「ここにサイトを記載」の部分に元サイトのURLを張ります。
↓こんな感じです
<!-- wp:quote -->
<blockquote class="wp-block-quote">
<p>
WordPress（ワードプレス）は、オープンソースのブログソフトウェアである。<br />PHPで開発されており、データベース管理システムとしてMySQLを利用している（後述のプラグインよりSQLiteでの使用も可能）。
</p>
<cite>
https://ja.wikipedia.org/wiki/WordPress
</cite>
</blockquote>
<!-- /wp:quote -->上記をGutenberg上にペーストするといかのようなブロックになります。
この方法の利点としては、カスタムHTMLのときと違い、ブロックに変換したりするのが不要という点ですね。
その分テンプレートをどこかに保存しておかないといけないというデメリットはあります。
割とブロックコードのテンプレートを作っておくと便利なこともあるので、自分はテンプレートリストみたいのを作っています。
例えばリストタグです。
<!-- wp:list -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- /wp:list -->上記は、4つのリストですがこれに文字を入れてからコピペするほうがやりやすいです。
2つのリスト、3つのリストとかを用意していて簡単にコピペできるようにしています。
ちょっと引用から話がそれてしまいましたが、このようにブロックコードのテンプレートを作っておくのは割とおすすめですね。