AFFINGER

AFFINGER5【まるもじ・ミニふきだし】内に画像を挿入する

2021年4月16日

AFFINGER5画像

AFFINGER5で「まるもじ」「ミニふきだし」内に画像を挿入する方法の紹介です。

記事後半では、ちょっとしたカスタマイズも紹介しています。

 

こんな人のお役に立てる記事です。

小豆
AFFINGER5の「まるもじ」「ミニふきだし」装飾がお気に入り。
さらに好きな画像を挿入できたら、すごく嬉しいなぁ。

AFFINGER5【まるもじ・ミニふきだし】に画像を挿入する

早速ですが、まずは実例から。

デフォルの状態の記事装飾

まるもじ(小 まるもじ(大) ミニふきだし
サンプルテキスト

サンプルテキスト

サンプルテキスト

画像を挿入

まるもじ(小) まるもじ(大) ミニふきだし
大福下に余白サンプルテキスト

小豆60pxサンプルテキスト

最中60pxサンプルテキスト

オリジナルの画像を挿入すると、だいぶ見た目の印象が変わりますね。

より目立つ・・・・・のはもちろん、ブログのオリジナリティを上げることもできます。

小豆
そうそう!こういうのがやりたかった。
でも、画像ってどうやって用意するの?
以下のサイトなら、無料で高品質な画像がたくさん揃うよ。
大福

 

無料画像ダウンロードサイト






画像を挿入する手順

手順は、たった3ステップ。

難しい操作なしで、簡単に画像の挿入ができます。

手順

  1. テキストを入力
  2. 記事装飾
  3. 画像を挿入

 

step
1
テキストを入力

テキストの入力

テキストを入力

まずは、「まるもじ」「ミニふきだし」内に表示したいテキストを入力します。

 

step
2
記事装飾

任意の記事装飾を選択

テキストを選択 → タグ → テキストパーツ → 任意の記事装飾

テキストを選択し、まるもじ(小) まるもじ(大) ミニふきだし のいずれかの記事装飾を行います。

 

step
3
画像を挿入

画像の挿入

テキストの直前にカーソル → メディアを追加 → 任意の画像を挿入

 

ここでのポイント

  • 画像の挿入はテキストの直前に
  • 挿入する画像のサイズは 60px × 60px くらいが最適
  • 画像の配置設定は「なし」に

画像挿入後のコード例

[st-marumozi-big fontawesome="" bgcolor="#f3f3f3" bordercolor="" color="#000000" radius="30" margin="0 10px 10px 0" myclass=""]大福ミニふきだし用透明サンプルテキスト[/st-marumozi-big]

 

大福
全体の流れを動画にしてみたよ。

手順一覧動画

画像の挿入方法

画像挿入後のカスタマイズ

小豆
さらにオリジナリティを上げたい。

こんな場合に役立つカスタマイズを2つ紹介します。

 

カスタマイズ

  1. 画像を自動成形しない
  2. 画像にアニメーションを付与

 

画像を自動成形しない

デフォルト 自動整形しない

はさみサンプルテキスト

はさみ背景透明サンプルテキスト

「まるもじ」「ミニふきだし」内の画像は、デフォルトでは自動的に丸く成形されます。

以下の操作を行うと、自動成形を解除します。

画像の自動成形を解除

画像を選択 → 写真枠をクリック

 

画像にアニメーションを付与

バウンド ふわふわ 大小

大福ミニふきだし用透明テキスト

小豆60pxテキスト

最中60pxテキスト

アニメーションの付与

 

画像を選択 → スタイル → アニメーション → 任意のアニメーションを選択

 

装飾デザインのカスタマイズ

アイコンを表示

サンプルテキスト

四角いデザインに変更

サンプルテキスト

枠だけのデザインに変更

サンプルテキスト

吹き出しの位置を中央に

サンプルテキスト

見出し内に挿入 見出し内にまるもじ

「まるもじ」「ミニふきだし」デザインそのもの・・・・のカスタマイズを行いたい場合は、以下の記事を参考にしてください。

 

AFFINGERサンプル
AFFINGER5【まるもじ・ミニふきだし】をカスタマイズ

続きを見る

 

まとめ:画像の挿入でオリジナリティを上げよう

AFFINGER5を使用しているブログは多いですが、「まるもじ」「ミニふきだし」内に画像を使っている人は少ないです。

というわけで、ブログのオリジナリティを上げたい人にはおすすめ!

他にも、以下の画像関連の記事も参考にしてみてください。

 

  • 関連記事

 

AFFINGER利用者向けオリジナル特典の販売

オリジナル特典バナー

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ&役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

特典詳細ページへ移動する

こちらの記事もよく読まれています

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER

© 2021 大福日記