Sentryのバージョン0.2.3を公開しました。
なんとなく、最近のテーマでは対応しているものが多いUI部品「ふきだし」を追加しました。
ショートコードでの入力はもちろん、ビジュアルエディタからも入力できるように作ってみました。
「ふきだし」はテキストや画像が組み合わされた複雑な部品で、ビジュアルエディタからの入力もちょっと複雑になってしまいましたが…是非つかってみてください！
Contents
アップデートの概要
装飾パーツ「ふきだし」の追加
将来的にはもっとデザインを増やそうと思っていますが、まずは左右からのふきだしでデザインを2パターン。アイコンが画像そのまま表示されるものと、丸く切り抜かれるもので作ってみました。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
「ふきだし」の入力方法①ショートコードを使う
基本はショートコードで入力します。
ショートコードはbubbleを使って、例えば
と入力すると、表示は以下のようになります。
bubbleで囲んだだけの場合は、ライターの名前とアバターが自動的に設定されます。
さらにオプションとして与えることが出来る要素が以下の4つ。
- name：アイコン下の名前。テキストを入力。
- img：アイコン画像。画像のパス（URL）を入力。
- type：向き（左向きの場合は”left”（デフォルトなので入力しなくてもOK）、右向きの場合は”right”を入力）
- style：アイコンの形（通常の場合は”normal”（デフォルトなので入力しなくてもOK）、丸く切り抜く場合は”circle”と入力）
以上を踏まえて
と入力すると、表示は
と入力すると…
という感じです。
「ふきだし」の入力方法②ビジュアルエディタ
ふきだしはビジュアルエディタからも入力することができます。
Sentryの吹き出し機能できたー。今日中にはアップデートとして公開できるよう準備します！ショートコードで使うことを想定しつつ、ビジュアルエディタからも入力できるようにしてみた。吹き出しは複合的な要素なので、ちょっと操作が複雑ですが… #Sentry pic.twitter.com/DQnsKnbGO8
— mas.a.shit (@UltimateEz) 2018年4月6日
左右のふきだしアイコンから「スタイル①（通常アイコン）」「スタイル②（丸アイコン）」を選べば入力することができます。
ボタンをクリックした直後はアイコンが表示されるべき位置に「i」というテキストが表示されているので、その前後にカーソルを合わせてから「メディアを追加」でアイコンにする画像を選択します。
アイコンが挿入されたら、余計な「i」は削除しましょう。
ちょっとやっかいなのが先に「i」の文字を削除してからメディアを追加すると、画像がふきだしの中に入ってしまうことがある点。
ここがもっとうまい方法があれば良いんですが、今の私の技術力とアイデアではこのやり方までしかたどり着けませんでした…。
上記の動画を参考にしつつ、入力を試してみてください。。
細かいバグの修正
AMPページでの表示に関わる不具合を修正しました。
- 複数カテゴリーを設定している記事で、ampページのカテゴリが連結して表示される問題の修正
アップデートの手順
ver 0.1.1以降をお使いの方は、Wordpressの管理画面から記事のアップデートが出来ると思います。
まだ上記のアップデートが適用できていない方は、以下のページを参考にアップデートしてください！
