[Sentryアップデート]バージョン0.2.3を公開しました！

Sentryのバージョン0.2.3を公開しました。
なんとなく、最近のテーマでは対応しているものが多いUI部品「ふきだし」を追加しました。
ショートコードでの入力はもちろん、ビジュアルエディタからも入力できるように作ってみました。
「ふきだし」はテキストや画像が組み合わされた複雑な部品で、ビジュアルエディタからの入力もちょっと複雑になってしまいましたが…是非つかってみてください！

アップデートの概要

装飾パーツ「ふきだし」の追加

将来的にはもっとデザインを増やそうと思っていますが、まずは左右からのふきだしでデザインを2パターン。アイコンが画像そのまま表示されるものと、丸く切り抜かれるもので作ってみました。

@UltimateEz
左からこんにちは！
右からこんにちは！

いらすとや

名前が長くなってもそれなりに大丈夫
長い文章を入れても大丈夫！！
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

「ふきだし」の入力方法①ショートコードを使う

基本はショートコードで入力します。
ショートコードはbubbleを使って、例えば

[bubble]こんにちは[/bubble]

と入力すると、表示は以下のようになります。

ultimate-ez
こんにちは

bubbleで囲んだだけの場合は、ライターの名前とアバターが自動的に設定されます。

さらにオプションとして与えることが出来る要素が以下の4つ。

  • name：アイコン下の名前。テキストを入力。
  • img：アイコン画像。画像のパス（URL）を入力。
  • type：向き（左向きの場合は”left”（デフォルトなので入力しなくてもOK）、右向きの場合は”right”を入力）
  • style：アイコンの形（通常の場合は”normal”（デフォルトなので入力しなくてもOK）、丸く切り抜く場合は”circle”と入力）

以上を踏まえて

[bubble name="@UltimateEz" img="/wp-content/uploads/2018/04/oVlx2YGp_400x400.jpg"]おはようございます！[/bubble]

と入力すると、表示は

@UltimateEz
おはようございます！

[bubble name="@UltimateEz" img="/wp-content/uploads/2018/04/oVlx2YGp_400x400.jpg" type="right" style="circle"]こんばんはーー[/bubble]

と入力すると…

こんんばんはーー
@UltimateEz

という感じです。

「ふきだし」の入力方法②ビジュアルエディタ

ふきだしはビジュアルエディタからも入力することができます。

左右のふきだしアイコンから「スタイル①（通常アイコン）」「スタイル②（丸アイコン）」を選べば入力することができます。

ボタンをクリックした直後はアイコンが表示されるべき位置に「i」というテキストが表示されているので、その前後にカーソルを合わせてから「メディアを追加」でアイコンにする画像を選択します。
アイコンが挿入されたら、余計な「i」は削除しましょう。

ちょっとやっかいなのが先に「i」の文字を削除してからメディアを追加すると、画像がふきだしの中に入ってしまうことがある点。
ここがもっとうまい方法があれば良いんですが、今の私の技術力とアイデアではこのやり方までしかたどり着けませんでした…。
上記の動画を参考にしつつ、入力を試してみてください。。

細かいバグの修正

AMPページでの表示に関わる不具合を修正しました。

  • 複数カテゴリーを設定している記事で、ampページのカテゴリが連結して表示される問題の修正

アップデートの手順

ver 0.1.1以降をお使いの方は、Wordpressの管理画面から記事のアップデートが出来ると思います。

関連記事[Sentryアップデート]GoogleアナリティクスやタグマネージャーのIDを設定する「アナリティクス設定」機能を追加しました。（）

まだ上記のアップデートが適用できていない方は、以下のページを参考にアップデートしてください！

関連記事WordPressのテーマ「Sentry（セントリー）」をアップデートする方法（）