HTML コンポーネントの挿入

記事に HTML/CSS でつくられたコンポーネントを挿入できます。例えばボタンや吹き出しなどです。

Gutenberg ご利用の場合

HTML コンポーネント挿入機能は、Gutenberg では使用できません。有料にはなりますが、Gutenberg で似た機能を提供する Snow Monkey Blocks を提供予定です。

サンプル

ボタン

ボタン

ボタン

アラート

アラート
アラート
アラート

吹き出し

アイコンの画像を入れ替える場合は、アイコンをクリックしてメディアを追加から画像を選び挿入します。

名前
吹き出し
名前
吹き出し

セクション

セクションタイトル

セクション本文。セクション本文。セクション本文。セクション本文。セクション本文。セクション本文。セクション本文。セクション本文。

セクションタイトル

セクション本文。セクション本文。セクション本文。セクション本文。セクション本文。セクション本文。セクション本文。セクション本文。

段組み

このテーマはレスポンシブデザインですので、ブラウザ幅によって段組みが変わります。それぞれのサイズで何列表示になるかを数字で表しています。見かたとしては、「カラム 1/1/2」の場合、「スマホサイズのときに1列、タブレットサイズのときに1列、 PCサイズのときに2列」の表示になるということです。

ビジュアルモードと表示の関係については下記のページの「横に並べたりしてみる」でも詳しく書いているのでご参照ください。
https://snow-monkey.2inc.org/2018/01/15/insert-affiliate-tag-into-snow-monkey/

カラム 1/1/2
カラム 1/1/2
カラム 2/2/2
カラム 2/2/2
カラム 1/1/3
カラム 1/1/3
カラム 1/1/3
カラム 3/3/3
カラム 3/3/3
カラム 3/3/3
カラム 1/1/4
カラム 1/1/4
カラム 1/1/4
カラム 1/1/4
カラム 2/2/4
カラム 2/2/4
カラム 2/2/4
カラム 2/2/4

手順

  1. ダッシュボードを開く
  2. 投稿から新規投稿をクリック
  3. コンポーネントの追加をクリックして任意のコンポーネントを挿入する。

動画で手順を見る

ショートコードではなく HTML/CSS を直接挿入する理由

このようなコンポーネントは有料テーマでも多く見られますが、ショートコードを挿入するという形式のものがほとんどです。なぜ Snow Monkey ではショートコードではなく HTML/CSS を挿入するのか、それには2つの理由があります。

テーマへの依存度を低くするため

1つ目は、ショートコードはそのテーマに依存してしまう、ということです。

そのテーマに含まれているショートコードはそのテーマが有効化されている場合にのみ HTML に変換/表示されます。もしテーマが有効化されていない場合は [ button ] のようなコードがそのまま表示されてしまうのです。

HTML を直接挿入する形であれば、テーマを変更して装飾が失われてしまうことがあっても文字情報自体が消えてしまうことはありません。(装飾はテーマの CSS に依存してしまうため、テーマ切り替えの際はコンポーネントに必要な CSS を移行先のテーマにコピーする必要があります。やり方はオンラインコミュニティサポートフォーラムでお尋ね頂ければ!)

ビジュアルエディタでも実際の画面と同じ見た目で表示される

2つ目はビジュアルエディタでも実際の画面と同じ見た目で表示できることです。

ショートコードはビジュアルエディタでは HTML に変換されないため、[ button ] のようなコードがそのまま表示されてしまいます。ボタンのようなコードであればまだ良いですが、段組の場合は複数のショートコードが重なり合い、もはや HTML を書いたほうが素直であり、悲惨です。

HTML/CSS を直接挿入する形であれば実際の画面と同じ見た目で表示されるため違和感なく編集することができます。

コンポーネントを組み合わせることも可能です。画像や文揃えをつかって見栄えを整たりなど、いろいろ試してみてください。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!