Gutenberg(WordPress新エディター)で吹き出しを使う方法

2

どうも、吹き出し大好きなシェフです!

当サイトのWordPress関連の記事の中でも特に読まれているのが「吹き出し」に関する記事。

吹き出しの仕組みを紹介している記事WordPressで簡単に吹き出しを表示する方法を紹介している記事がけっこう読まれます。

ただ、WordPress5.0からエディターが新しくなり(Gutenbergという名称)、吹き出しを表示する方法もアップグレードする必要があるので、今回は新エディター「Gutenberg」でも簡単に吹き出しを表示する方法をご紹介します。

基本的にどんなテーマでも使える方法なので、ゆっくり進めてみてください。ほぼコピペです。

ちなみに、自作のWordPressテーマ「4536」では吹き出しを簡単に表示するオリジナルのブロックを用意しているので、この機会にぜひ!(突然の宣伝)

CSSをコピペ

まず、以下のCSSをコピペします。

/*---吹き出し---*/
.wp-block-media-text.balloon-4536 {
    grid-template-columns: 100px auto;
    margin-bottom: 1.5em;
}
.wp-block-media-text.has-media-on-the-right.balloon-4536 {
    grid-template-columns: auto 100px;
}
.balloon-4536.wp-block-media-text {
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
}
.balloon-4536 figure {
    -ms-flex-item-align: start;
    align-self: flex-start;
    vertical-align: top;
}
.balloon-4536 figure img {
    border-radius: 50%;
    border: 1px solid #ddd;
}
.balloon-4536 .wp-block-media-text__content {
    -ms-flex-item-align: end;
    align-self: flex-end;
    border: 1px solid #aaa;
    padding: 4%;
    position: relative;
}
.balloon-4536 .wp-block-media-text__content p:last-child {
    margin-bottom: 0;
}
.balloon-4536 .wp-block-media-text__content::before,
.balloon-4536 .wp-block-media-text__content::after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    top: 25px;
}
.balloon-4536 .wp-block-media-text__content {
    margin-left: 20px;
}
.balloon-4536 .wp-block-media-text__content::before {
    border-right: 10px solid #aaa;
    left: -20px;
}
.balloon-4536 .wp-block-media-text__content::after {
    border-right: 10px solid #fff;
    left: -19px;
}
.balloon-4536.has-media-on-the-right .wp-block-media-text__content {
    margin-right: 20px;
    margin-left: 0;
}
.balloon-4536.has-media-on-the-right .wp-block-media-text__content::before {
    border-left: 10px solid #aaa;
    border-right: none;
    right: -20px;
    left: 100%;
}
.balloon-4536.has-media-on-the-right .wp-block-media-text__content::after {
    border-left: 10px solid #fff;
    border-right: none;
    right: -19px;
    left: calc(100% - 1px);
}
/*---考え事風---*/
.balloon-4536.think .wp-block-media-text__content {
    border-radius: 30px;
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.balloon-4536.think .wp-block-media-text__content::before,
.balloon-4536.think.has-media-on-the-right .wp-block-media-text__content::before {
    border: 1px solid #aaa;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 15px;    
}
.balloon-4536.think .wp-block-media-text__content::after,
.balloon-4536.think.has-media-on-the-right .wp-block-media-text__content::after {
    border: 1px solid #aaa;
    border-radius: 50%;
    width: 4px;
    height: 4px;
    top: 20px;
}
.balloon-4536.think .wp-block-media-text__content::before {
    left: -12px;
}
.balloon-4536.think .wp-block-media-text__content::after {
    left: -19px;
}
.balloon-4536.think.has-media-on-the-right .wp-block-media-text__content::before {
    right: -12px;
    left: initial;
}
.balloon-4536.think.has-media-on-the-right .wp-block-media-text__content::after {
    right: -19px;
    left: initial;
}
/*---LINE風にする---*/
.balloon-4536.line .wp-block-media-text__content {
    border-radius: 20px;
    background-color: #00da00;
    border-color: transparent !important;
}
.balloon-4536.line .wp-block-media-text__content::before {
    border-right-color: transparent;
}
.balloon-4536.line .wp-block-media-text__content::after {
    border-right-color: #00da00;
}
.balloon-4536.line.has-media-on-the-right .wp-block-media-text__content::before {
    border-left-color: transparent;
}
.balloon-4536.line.has-media-on-the-right .wp-block-media-text__content::after {
    border-left-color: #00da00;
}
.balloon-4536.think.line .wp-block-media-text__content::before,.balloon-4536.think.line .wp-block-media-text__content::after {
    background-color: #00da00; 
    border-color: transparent !important;
}

エディターにも表示を反映させる場合

よくわからなければここはスルーしてもOKです。

記事を書く画面に吹き出しの表示を反映させたい場合は以下のCSSを追加します。

子テーマのCSSやテーマカスタマイザーの追加CSSに記述したCSSがエディターに反映されるテーマを使っている場合はそこに記述するのが間違いないです。

ちなみに、先ほどのCSSと重複している部分があるので気になる方は削除してください。

/*---エディター反映用のCSS---*/
/*---吹き出し---*/
.wp-block-media-text.balloon-4536 {
    grid-template-columns: 100px auto !important;
}
.wp-block-media-text.has-media-on-the-right.balloon-4536 {
    grid-template-columns: auto 100px !important;
}
.balloon-4536.wp-block-media-text {
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
}
.wp-block-media-text .editor-media-container__resizer {
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.balloon-4536 figure {
    vertical-align: top;
}
.balloon-4536 figure img {
    border-radius: 50%;
    border: 1px solid #ddd;
}
.balloon-4536 .editor-inner-blocks {
    -ms-flex-item-align: end;
    align-self: flex-end;
    border: 1px solid #aaa;
    padding: 4%;
    position: relative;
}
.balloon-4536 .editor-inner-blocks p {
    margin-bottom: 0;
}
.balloon-4536 .editor-inner-blocks::before,
.balloon-4536 .editor-inner-blocks::after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    top: 25px;
}
.balloon-4536 .editor-inner-blocks {
    margin-left: 20px;
}
.balloon-4536 .editor-inner-blocks::before {
    border-right: 10px solid #aaa;
    left: -20px;
}
.balloon-4536 .editor-inner-blocks::after {
    border-right: 10px solid #fff;
    left: -19px;
}
.balloon-4536.has-media-on-the-right .editor-inner-blocks {
    margin-right: 20px;
    margin-left: 0;
}
.balloon-4536.has-media-on-the-right .editor-inner-blocks::before {
    border-left: 10px solid #aaa;
    border-right: none;
    right: -20px;
    left: 100%;
}
.balloon-4536.has-media-on-the-right .editor-inner-blocks::after {
    border-left: 10px solid #fff;
    border-right: none;
    right: -19px;
    left: calc(100% - 1px);
}
/*---考え事風---*/
.balloon-4536.think .editor-inner-blocks {
    border-radius: 30px;
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.balloon-4536.think .editor-inner-blocks::before,
.balloon-4536.think.has-media-on-the-right .editor-inner-blocks::before {
    border: 1px solid #aaa;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 15px;    
}
.balloon-4536.think .editor-inner-blocks::after,
.balloon-4536.think.has-media-on-the-right .editor-inner-blocks::after {
    border: 1px solid #aaa;
    border-radius: 50%;
    width: 4px;
    height: 4px;
    top: 20px;
}
.balloon-4536.think .editor-inner-blocks::before {
    left: -12px;
}
.balloon-4536.think .editor-inner-blocks::after {
    left: -19px;
}
.balloon-4536.think.has-media-on-the-right .editor-inner-blocks::before {
    right: -12px;
    left: initial;
}
.balloon-4536.think.has-media-on-the-right .editor-inner-blocks::after {
    right: -19px;
    left: initial;
}
/*---LINE風にする---*/
.balloon-4536.line .editor-inner-blocks {
    border-radius: 20px;
    background-color: #00da00;
    border-color: transparent !important;
}
.balloon-4536.line .editor-inner-blocks::before {
    border-right-color: transparent;
}
.balloon-4536.line .editor-inner-blocks::after {
    border-right-color: #00da00;
}
.balloon-4536.line.has-media-on-the-right .editor-inner-blocks::before {
    border-left-color: transparent;
}
.balloon-4536.line.has-media-on-the-right .editor-inner-blocks::after {
    border-left-color: #00da00;
}
.balloon-4536.think.line .editor-inner-blocks::before,.balloon-4536.think.line .editor-inner-blocks::after {
    background-color: #00da00; 
    border-color: transparent !important;
}

吹き出しを作る手順

カスタマイズは以上で終わりです。

ここからはGutenbergのエディターで記事を書いていきます。

使うのは「メディアと文章」というブロック。レイアウト要素の中にあります。

メディアと文章のブロックを追加

 

左側は画像。アップロードするか、すでにある画像(メディアライブラリ)から選択します。

右側はテキストを入力します。

メディアと文章ブロックの編集

 

こんな感じ。文字に色を付けたり、大きくしてもOKです。

 

「メディアと文章」のブロックをクリックし(画像をクリックするのが確実)、高度な設定の中にある「追加CSSクラス」を表示します。

追加CSSクラスの入力欄を表示

 

ここに「balloon-4536」と入力。これで吹き出しの表示になります。

エディターにCSSを反映できない場合は見た目の変化はありませんが、実際のサイトでは吹き出しになっています。

追加CSSにクラス名を入力

 

ツールバー(PC画面では上部)で画像の位置を変えるとそれに合わせて吹き出しの表示も変わります。

鉛筆のアイコンをクリックすると画像も変更できます。

右からの吹き出しに変更

デモ動画

吹き出しができるまでの一連の流れはこちらのデモ動画で確認できます。

吹き出しをさらにカスタマイズする

追加CSSクラスに「balloon-4536」と入力すると吹き出しになりますが、他の文字を足すとさらに拡張できます。

考え事風の吹き出しにする

考え事をしているような吹き出しにするには「think」の文字を足します。

Gutenbergで考え事風の吹き出しを作る

デモ動画

LINE風にする

LINE風にするには「line」の文字を足します。

LINE風の吹き出しを作る

 

考え事風の吹き出しと組み合わせることもできます。

LINEっぽい考え事風の吹き出し

デモ動画

「再利用ブロック」を活用すればテンプレートになる

Gutenbergには「再利用ブロック」という便利な機能があり、これを活用すれば複数の吹き出しを登録して好きな時に呼び出すことができます

もうテンプレート系のプラグインは必要ありません。

やり方は簡単です。

ブロックを選択し、「再利用ブロックに追加」をクリック。

Gutenbergの再利用ブロックを活用

 

名前を付けます。使う時にプレビューが見れるので適当でも大丈夫です。

吹き出しのブロックを再利用ブロックにする

 

再利用ブロックとして保存したブロックはあらゆる場所で使うことができます。

「再利用可能」の中にあります。

再利用ブロックを呼び出す

 

呼び出したら「通常のブロックへ変換」をクリック。基本的にこの作業はした方がいいです。

再利用ブロックを通常のブロックへ変換する

 

これで、文字を変えたり、アイコンを変えたり、自由に編集できるようになります。

 

色んなパターンの吹き出しを登録しておくと便利ですね!

デモ動画

こちらも、一連の流れをデモ動画で確認できます。

まとめ

今回ご紹介した方法以外にも、

など、Gutenbergで吹き出しを表示する選択肢はいくつかありますが、どのテーマでも簡単に使える方法は今回ご紹介したのがベストかなと思います。

ぜひ使ってみてください!

カテゴリー

この記事を書いた人:シェフ

このサイト「MORIAWASE」の運営者。少しでも多くの人の悩みや不安を解決するためにハウツー記事を中心に更新しています。お問い合わせはページ下部のお問い合わせページから。フォローやシェアは大歓迎です!