アルバトロスの使い方。吹き出し機能がショートコードで簡単に使えるぞ!

スポンサーリンク
2016-07-03_114516

WordPressの有料テーマである「アルバトロス」を使えば、ショートコードで簡単に吹き出し機能を使うことが出来ます!

 

吹き出し機能って何だ?

吹き出し機能は、会話形式でブログを進行する時に使うやつです。

 

  • 吹き出しサンプル
ぼっち
やべー、コミュ障まじつれーわ。

 

オワタ
樹海に行こうぜ!

 

 

アルバトロスならプラグインいらず

吹き出し機能は、【Speech Bubble】というプラグインをインストールすることでも使えます。

しかし、アルバトロスなら、プラグインを入れなくても吹き出し機能を使うことが可能です。

 

  • 手間が省ける

【Speech Bubble】を使う場合は、吹き出しのアイコン画像を設定するために、エックスサーバーに行って、ファイルマネージャにログインして、画像フォルダまで行って、画像アップロードして~、という流れを毎回やることになります。

 

しかし、アルバトロスなら、吹き出しアイコンは「メディア追加」でアップロードした画像をすぐに使うことが出来ます。

手間が全然違います。

 

しかも、しかもですよ?

【Speech Bubble】のように、画像の名前を「半角英数字」にする必要はありません。

つまり、画像の名前は日本語入力でもOKだということですよ!!

 



 

▼ とか言いながら、このブログでは「Speech bubble (ふきだしプラグイン)」もしっかり使っておりますw

関連記事:【Speech Bubble】会話形式の吹き出しが使えるプラグイン 『WordPress』

「Speech bubble (ふきだしプラグイン)」には、アルバトロスの吹き出しには無い機能もありますからね。

 

 

スポンサーリンク

吹き出し機能の使い方

ショートコードを投稿記事に入れるだけです。

とりあえず記事を1回さらっと読んでいってください。

 

  • 吹き出し
アルバトロス
セリフはここ

 

入力方法はこちら

[voice icon="https://thedog8.com/wp-content/uploads/2016/07/アルバトロス-1.png" name="アルバトロス" type="l"]セリフはここ[/voice]

 

 

  • アイコンを右に配置する
アルバトロス
アイコンを右に配置

 

入力方法はこちら。

[voice icon="https://thedog8.com/wp-content/uploads/2016/07/アルバトロス-1.png" name="アルバトロス" type="r"]アイコンを右に配置[/voice]

 

 

吹き出しの色

吹き出しの色が変更可能です。

 

  • フェイスブック風
アルバトロス
フェイスブック風の色
アルバトロス
フェイスブック風の色

 

入力方法はこちら。

[voice icon="https://thedog8.com/wp-content/uploads/2016/07/アルバトロス-1.png" name="アルバトロス" type="l fb"]フェイスブック風の色[/voice]
[voice icon="https://thedog8.com/wp-content/uploads/2016/07/アルバトロス-1.png" name="アルバトロス" type="r fb"]フェイスブック風の色[/voice]

 

  • ライン風
アルバトロス
ライン風の色
アルバトロス
ライン風の色

 

入力方法はこちら。

[voice icon="https://thedog8.com/wp-content/uploads/2016/07/アルバトロス-1.png" name="アルバトロス" type="l line"]ライン風の色[/voice]
[voice icon="https://thedog8.com/wp-content/uploads/2016/07/アルバトロス-1.png" name="アルバトロス" type="r line"]ライン風の色[/voice]

 

フェイスブック風、ライン風の吹き出しは左と右で色が違います。

 

アイコン画像の設定

画像をアップロードしてショートコードに挿入します。

 

 

投稿一覧からメディアを追加。

2016-07-02_163406

いつもの作業

 

 

とりあえず画像をアップロードします。

2016-07-02_202541

チェックがついてるのを確認

 

 

画面右側に「画像のURL」が表示されるのでクリック。

キーボードの「Ctrl」+「A」でURLを選択。

キーボードの「Ctrl」+「C」でURLをコピー。

2016-07-02_202605

右クリックでコピーは出来ない

 

 

コピーしたURLを挿入するのはこちら。ちなみに貼り付けはキーボードの「Ctrl」+「V」でも出来ます。

[voice icon="https://thedog8.com/wp-content/uploads/2016/07/アルバトロスくん.png" name="アルバトロス" type="l"]アイコン変更[/voice]
スポンサーリンク

 

 

画像は正方形じゃないとキレイに表示されません。

 

アイコンの巨大化

アイコンを大きく表示することができます。

 

  • ビッグアイコン
アルバトロス
アイコン巨大化

 

入力方法はこちら。

[voice icon="https://thedog8.com/wp-content/uploads/2016/07/アルバトロスくん.png" name="アルバトロス" type="l big"]アイコン巨大化[/voice]

 

 

名前の変更

アイコンの下に表示されるキャラの名前を変更。

テキストを入力するだけです。

 

  • 名前変更
アルバトロス
名前変更前 アルバトロス
ALBATROS
名前変更後 ALBATROS

 

テキストを入力するのはこちら。

[voice icon="https://thedog8.com/wp-content/uploads/2016/07/アルバトロスくん.png" name="アルバトロス" type="l"]名前変更[/voice]

 

おさらい

どこに何を入れるのか。

 

[voice icon="①画像URL" name="②名前" type="③オプション"]④セリフ[/voice]

 

①画像URL。アイコンの画像URLをコピペするだけ。

②名前。キャラの名前をテキスト入力。

④セリフ。キャラのセリフをテキスト入力。(AddQuicktagを使う時は、ここが開始タグと終了タグの境目)

 

③オプション。問題はここ

ここでアイコンの配置や吹き出しの色を設定します。

 

オプションの属性は3つ。

▲アイコンを「左」に配置 → l

▲アイコンを「右」に配置 → r

●アイコンを拡大表示 → big

■フェイスブック風吹き出し → fb

■ライン風吹き出し → line

 

  • オプションを複数設定
アルバトロス
  • アイコン右配置
  • 吹き出しフェイスブック風
  • アイコン巨大化

 

入力方法はこちら。オプションは3つまで。複数入れる場合は「半角スペース」で区切る必要があります。オプションの配置順番は問わない。

[voice icon="①画像URL" name="②名前" type="big fb r"]④セリフ[/voice]

 

同じ属性を2つ入れるとバグる。

フェイスブック風とライン風とか。

 

注意点

地味な注意点。

 

「半角スペース」が入っていないと、吹き出し機能がうまく反映されないことがあります。

吹き出しがうまくいかない時はここを疑いましょう。

 

半角スペースはここに入っています。

[voiceicon=”①画像URL”name=”②名前”type=”③オプション”]④セリフ[/voice]

 

↓こいつをコピーして使えば大丈夫です。

[voice icon="①画像URL" name="②名前" type="③オプション"]④セリフ[/voice]

 

小ネタ

吹き出しにリンクを貼ったりできる。

 

吹き出しの中にショートコードを突っ込んだり等のムチャはできない模様。(吹き出し内で2カラムとか)

 

  • 吹き出し文字

中央揃え

 

 

 

アルバトロス

 

  • ウィジェット内でも使える。

「外観」→「ウィジェット」→左から「テキスト」をドラッグしてサイドバー等に貼り付け→テキスト内にショートコードを突っ込む。

 

 

おわり(^o^)




アルバトロス

ショートコードの入力は「AddQuicktag」と組み合わせると非常に便利です。

関連記事:『WordPress』 ショートコードとかの面倒な入力とかが楽になるプラグイン【AddQuicktag】

 

よしぼっち
ゲームと漫画が大好きな30代です。

熱しやすく冷めやすいので、ブログは気まぐれ更新です。

発達障害を味方につけて、ネットでご飯を食べています。

詳しいプロフィールはこちら→ プロフィール

お問い合わせこちら→ お問い合わせ

メールマガジンはこちら→ メールマガジン

LINE@始めました\(^o^)/

友だち追加
スポンサーリンク

この記事が気に入ったら
いいね!しよう

Twitter で


発達障害の攻略本を無料プレゼント

発達障害の社会不適合者がこの先生き残るための方法をを伝授します\(^o^)/

コメントを残す

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