WEB制作会社が選ぶべきベーステーマとは？

Arkheをベーステーマに使おう広告・PR

コンテンツマーケに「Arkhe」を使用すると欲しくなる吹き出しブロック

本ページはプロモーションが含まれています

私がWordPressテーマ「Arkhe」をベーステーマとして推す理由の一つはコンテンツマーケティングを行うサイト制作にもってこいだからです。

シンプルなデザインのサイト制作はもちろんのこと、自由にデザインされたサイトをWordPress化することもできます。それほど自由度が高いということです。

さらにコンテンツマーケティングには欠かせない記事コンテンツを作成するのも問題ありません。「Arkhe Pro Pack」をインストールすればブロックエディターの機能を最大化できます。WordPressが初めてな方にもコンテンツ制作環境を提供可能なのです。

ベタ褒めのテーマですが、実は最近気づいてしまいました。

なんと「Arkhe Blocks Pro」は、吹き出しブロックをサポートしていませんでした。

それでも、大丈夫です。

ないものは作ってしまいましょう。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。

目次

「Arkhe」の吹き出しブロック

まず、「Arkhe」+「Arkhe Blocks Pro」を使ってコラム執筆中に、吹き出しブロックが欲しくなり、ブロックエディタ上で吹き出しブロックを探しました。

lin

ここにセリフが入るやつ

ところが、探しても見つかりません。

まさか、サポートされてない？

そこで「Arkhe」「吹き出し」で検索してみました。以下のフォーラムに行きつきました。

ふきだしブロックがほしい
ふきだしブロックがほしい
SWELLほど多機能じゃなくても大丈夫なのですがふきだしブロックってArkhe Block Proに実装予定などないでしょうか？コンテンツマーケでクライアントか…
Arkhe

やっぱりないんですね。

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！

「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する

「Arkhe Pro Pack」には以下が含まれています。プランに「個人ライセンス」と「制作ライセンス」が用意されています。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

メディアとテキストブロックでできるかも

画像とテキストがあれば吹き出しブロックはできるはずですね。

先のフォーラムにもそう書いてありました。

しかし、画像の下の名前の部分が入らず、CSSで名前を入れるしかないかもしれないということになりました。（画像の部分が「HTMLとして編集」できない？）

しかもセリフのブロックの中央に画像が位置することを、なかなか避けられません。

以下のような感じになってしまいます。

吹き出しメディアとテキストブロック

CSSは以下。

.wp-block-media-text.bubble {
  display: flex !important;
  align-items: flex-start !important; /* 親で縦方向上揃え */
  gap: 1.2em !important;
  margin: 2em 0 !important;
  padding: 1.2em 1.8em !important;
  position: relative !important;
  background: none !important;
  border-radius: 2em !important;
  box-shadow: none !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}

.wp-block-media-text.bubble .wp-block-media-text__media {
  flex: 0 0 120px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* 縦方向の上揃え */
  align-items: center !important;          /* 横中央揃え */
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

.wp-block-media-text.bubble .wp-block-media-text__media img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  align-self: center !important;
  vertical-align: top !important;
}

.wp-block-media-text.bubble .wp-block-media-text__content {
  position: relative !important;
  background: #f7f7f7 !important;
  border-radius: 0.2em !important;
  padding: 1.2em 1.6em !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  z-index: 1 !important;
}

/* 名前表示 */
.wp-block-media-text.bubble.bubble-taro .wp-block-media-text__media::after {
  content: "山田 太郎";
  display: block !important;
  width: 72px !important;
  margin: 0.3em auto 0 auto !important;
  font-size: 0.82em !important;
  color: #888 !important;
  text-align: center !important;
  font-weight: normal !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 3 !important;
}
.wp-block-media-text.bubble.bubble-hanako .wp-block-media-text__media::after {
  content: "田中 花子";
  display: block !important;
  width: 72px !important;
  margin: 0.3em auto 0 auto !important;
  font-size: 0.82em !important;
  color: #888 !important;
  text-align: center !important;
  font-weight: normal !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 3 !important;
}

/* 三角 左画像 */
.wp-block-media-text.bubble:not(.bubble-right) .wp-block-media-text__content::before {
  content: '' !important;
  position: absolute !important;
  left: -12px !important;
  top: 24px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-right: 12px solid #f7f7f7 !important;
  border-left: none !important;
  z-index: 2 !important;
}

/* 三角 右画像 */
.wp-block-media-text.bubble.bubble-right {
  flex-direction: row-reverse !important;
}
.wp-block-media-text.bubble.bubble-right .wp-block-media-text__content::before {
  content: '' !important;
  position: absolute !important;
  right: -12px !important;
  top: 24px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-left: 12px solid #f7f7f7 !important;
  border-right: none !important;
  z-index: 2 !important;
}

/* レスポンシブ */
@media (max-width: 1000px) {
  .wp-block-media-text.bubble {
    gap: 0.7em !important;
    padding: 1em 0.6em !important;
  }
  .wp-block-media-text.bubble .wp-block-media-text__media {
    flex: 0 0 27% !important;
    max-width: 100px !important;
    min-width: 56px !important;
    width: 100% !important;
  }
  .wp-block-media-text.bubble .wp-block-media-text__media img {
    width: 100% !important;
    height: auto !important;
    max-width: 100px !important;
    aspect-ratio: 1/1 !important;
    min-width: 56px !important;
  }
  .wp-block-media-text.bubble .wp-block-media-text__content {
    flex: 1 1 73% !important;
    max-width: 73% !important;
    padding: 1em 1em !important;
    font-size: 0.97em !important;
  }
  .wp-block-media-text.bubble:not(.bubble-right) .wp-block-media-text__content::before {
    left: -8px !important;
    top: 18px !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-right: 8px solid #f7f7f7 !important;
    border-left: none !important;
  }
  .wp-block-media-text.bubble.bubble-right .wp-block-media-text__content::before {
    right: -8px !important;
    top: 18px !important;
    border-top: 7px solid transparent !important;
  }

CSSクラスで名前を入れなければならないのは使用に耐えないという結論です。

そこで、リッチカラムを使用することにしました。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。

「Arkhe Blocks Pro」のリッチカラム+カスタムCSSで吹き出しブロックを作る

「Arkhe Pro Pack」のリッチカラムの場合は通常の画像とテキストを組み合わせるだけなので、簡単にメンテナンスできます。

ただ、制作ステップにおいて何パターンかできてしまいました。

左にアバター、右の吹き出しがフルレングス

使用方法

リッチカラムに「bubble-full」クラスをつけて使用します。

吹き出しフルレングス型

カスタムCSSは以下。

/* 親コンテナ内のフレックス設定 */
.ark-block-columns.bubble-full > .ark-block-columns__inner {
  display: flex;
  align-items: flex-start; /* 縦方向上揃え */
  /*gap: 1.5em;*/
}

/* 左右切替 */
.ark-block-columns.bubble-full > .ark-block-columns__inner {
  flex-direction: row;
}

/* 画像カラム幅 */
.ark-block-columns.bubble-full .ark-block-columns__inner > .ark-block-column:first-child {
  flex: 0 0 90px !important;
  max-width: 90px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 3;
}

/* 画像サイズ */
.ark-block-columns.bubble-full .ark-block-columns__inner > .ark-block-column:first-child figure.wp-block-image img {
  width: 72px;
  height: 72px;
  max-width: 72px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

/* 名前（画像下の段落） */
.ark-block-columns.bubble-full .ark-block-columns__inner > .ark-block-column:first-child p.has-text-align-center {
  font-size: 0.7em;
  color: #888;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-top: 0.5em;
}

/* テキストカラム（吹き出し本体） */
.ark-block-columns.bubble-full .ark-block-columns__inner > .ark-block-column:last-child {
  flex-grow: 1 !important;    /* 伸ばす */
  flex-shrink: 1 !important;
  flex-basis: auto !important;
  /*max-width: 500px !important;*/
  min-width: 0 !important;
  background: #f7f7f7;
  border-radius: 0.2em;
  padding: 1.2em 1.6em;
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

/* テキスト内の段落も中央寄せ＆横幅制限 */
.ark-block-columns.bubble-full .ark-block-columns__inner > .ark-block-column:last-child p {
  text-align: left;
  /*max-width: 90%;*/
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 三角形：左画像用 */
.ark-block-columns.bubble-full > .ark-block-columns__inner > .ark-block-column:last-child::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 24px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid #f7f7f7;
  z-index: 10;
}

/* レスポンシブ対応 */
@media (max-width: 1000px) {
  .ark-block-columns.bubble-full .ark-block-columns__inner {
    flex-wrap: nowrap !important;
  }
  .ark-block-columns.bubble-full .ark-block-columns__inner > .ark-block-column:first-child {
    flex: 0 0 15% !important;
    max-width: 15% !important;
    min-width: 56px !important;
  }
  .ark-block-columns.bubble-full .ark-block-columns__inner > .ark-block-column:first-child figure.wp-block-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100px !important;
    aspect-ratio: 1 / 1 !important;
  }
  .ark-block-columns.bubble-full .ark-block-columns__inner > .ark-block-column:last-child {
    /*flex: 0 1 auto !important;
    max-width: 80% !important;*/
    padding: 1em !important;
    font-size: 0.97em !important;
    white-space: normal !important;
    word-break: break-word !important;

    /* レスポンシブでも中央寄せ */
    text-align: center !important;
  }
  .ark-block-columns.bubble-full .ark-block-columns__inner > .ark-block-column:last-child p {
    /*max-width: 90% !important;*/
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
  .ark-block-columns.bubble-full > .ark-block-columns__inner > .ark-block-column:last-child::before {
    left: -8px !important;
    top: 18px !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-right: 8px solid #f7f7f7 !important;
  }
  /* 三角形：左画像用 */
.ark-block-columns.bubble-full > .ark-block-columns__inner > .ark-block-column:last-child::before {
  top: 20px !important;
}


}

会話用の吹き出し

次は会話用の吹き出しです。

吹き出しには最大幅を指定して、左右に寄せることで、会話らしさを出しています。

左にアバターのあるリッチカラムに「bubble-left」、右にアバターのある立地カラムに「bubble-right」クラスをつけます。

吹き出し会話型

カスタムCSSは以下。

/* 親コンテナ内のフレックス設定 */
.ark-block-columns.bubble-left > .ark-block-columns__inner,
.ark-block-columns.bubble-right > .ark-block-columns__inner {
  display: flex;
  align-items: flex-start; /* 縦方向上揃え */
  /*gap: 1.5em;*/
}

/* 左右切替 */
.ark-block-columns.bubble-left > .ark-block-columns__inner {
  flex-direction: row;
}
.ark-block-columns.bubble-right > .ark-block-columns__inner {
  flex-direction: row-reverse;
}

/* 画像カラム幅 */
.ark-block-columns.bubble-left .ark-block-columns__inner > .ark-block-column:first-child,
.ark-block-columns.bubble-right .ark-block-columns__inner > .ark-block-column:first-child {
  flex: 0 0 90px !important;
  max-width: 90px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 3;
}

/* 画像サイズ */
.ark-block-columns.bubble-left .ark-block-columns__inner > .ark-block-column:first-child figure.wp-block-image img,
.ark-block-columns.bubble-right .ark-block-columns__inner > .ark-block-column:first-child figure.wp-block-image img {
  width: 72px;
  height: 72px;
  max-width: 72px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

/* 名前（画像下の段落） */
.ark-block-columns.bubble-left .ark-block-columns__inner > .ark-block-column:first-child p.has-text-align-center,
.ark-block-columns.bubble-right .ark-block-columns__inner > .ark-block-column:first-child p.has-text-align-center {
  font-size: 0.7em;
  color: #888;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-top: 0.5em;
}

/* テキストカラム（吹き出し本体） */
.ark-block-columns.bubble-left .ark-block-columns__inner > .ark-block-column:last-child,
.ark-block-columns.bubble-right .ark-block-columns__inner > .ark-block-column:last-child {
  flex: 0 1 auto !important;  /* 伸びず縮む */
  width: auto !important;
  max-width: 500px !important;
  min-width: 0 !important;
  background: #f7f7f7;
  border-radius: 0.2em;
  padding: 1.2em 1.6em;
  position: relative;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  overflow: visible;
}

/* テキスト内の段落も中央寄せ＆横幅制限 */
.ark-block-columns.bubble-left .ark-block-columns__inner > .ark-block-column:last-child p,
.ark-block-columns.bubble-right .ark-block-columns__inner > .ark-block-column:last-child p {
  text-align: left;
  /*max-width: 90%;*/
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 三角形：左画像用 */
.ark-block-columns.bubble-left > .ark-block-columns__inner > .ark-block-column:last-child::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 24px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid #f7f7f7;
  z-index: 10;
}

/* 三角形：右画像用 */
.ark-block-columns.bubble-right > .ark-block-columns__inner > .ark-block-column:last-child::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 24px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid #f7f7f7;
  z-index: 10;
}

/* レスポンシブ対応 */
@media (max-width: 1000px) {
  .ark-block-columns.bubble-left .ark-block-columns__inner,
  .ark-block-columns.bubble-right .ark-block-columns__inner {
    flex-wrap: nowrap !important;
  }
  .ark-block-columns.bubble-left .ark-block-columns__inner > .ark-block-column:first-child,
  .ark-block-columns.bubble-right .ark-block-columns__inner > .ark-block-column:first-child {
    flex: 0 0 15% !important;
    max-width: 15% !important;
    min-width: 56px !important;
  }
  .ark-block-columns.bubble-left .ark-block-columns__inner > .ark-block-column:first-child figure.wp-block-image img,
  .ark-block-columns.bubble-right .ark-block-columns__inner > .ark-block-column:first-child figure.wp-block-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100px !important;
    aspect-ratio: 1 / 1 !important;
  }
  .ark-block-columns.bubble-left .ark-block-columns__inner > .ark-block-column:last-child,
  .ark-block-columns.bubble-right .ark-block-columns__inner > .ark-block-column:last-child {
    max-width: 90vw !important; /* 画面幅の90%以内に制限 */
    padding: 1em !important;
    font-size: 0.95em !important;
    text-align: left !important;
  }
  .ark-block-columns.bubble-left .ark-block-columns__inner > .ark-block-column:last-child p,
  .ark-block-columns.bubble-right .ark-block-columns__inner > .ark-block-column:last-child p {
    /*max-width: 90% !important;*/
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
  .ark-block-columns.bubble-left > .ark-block-columns__inner > .ark-block-column:last-child::before {
    left: -8px !important;
    top: 18px !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-right: 8px solid #f7f7f7 !important;
  }
  .ark-block-columns.bubble-right > .ark-block-columns__inner > .ark-block-column:last-child::before {
    right: -8px !important;
    top: 18px !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-left: 8px solid #f7f7f7 !important;
  }
  /* 三角形：左画像用 */
.ark-block-columns.bubble-left > .ark-block-columns__inner > .ark-block-column:last-child::before {
  top: 20px !important;
}

/* 三角形：右画像用 */
.ark-block-columns.bubble-right > .ark-block-columns__inner > .ark-block-column:last-child::before {
  top: 20px !important;
}

}

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！

「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する

「Arkhe Pro Pack」には以下が含まれています。プランに「個人ライセンス」と「制作ライセンス」が用意されています。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

最後にパターン（再利用ブロック）を作成する

あとはリッチカラムとカスタムCSSをセットでパターン（再利用ブロック）を作っておきます。

そうすれば、いろいろな記事でパターンを呼び出して使用できますね。

今回は「Arkhe」テーマを利用中の方に役立つように吹き出しのCSSをまとめました。

今後、「Arkhe Pro Pack」で吹き出しブロックがサポートされるまで、リッチカラム+カスタムCSSのパターンで乗り切りましょう。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。
詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
プロフィールはこちら
お問い合わせはこちら
※以下はスラッシュディーにリンクしています。