【簡単】SWELL ふきだしアイコンのつくりかたと使いかた。画像入りで紹介。

※当サイトのリンクには広告が含まれています。
ふきだののつくり方トップ画像
ブログ
かんがえるねこ

WordPressテーマのSWELLで、ふきだしのオリジナルアイコンを作りたい。でもどうやったらいいかわからない…

ブログを始めたいやかん

サイズとかどうしたらいいの??

と思っていましたが、かんたんに作ることが出来ました。

具体的には

の順番で作成出来ました。

以下、詳しくご説明します。

      PR

目次

SWELLでふきだしのアイコンをつくって登録する方法

STEP
画像を用意する

まずはアイコンで使うアイコン画像を用意します。

私は 画像サイズ 160px×160px    解像度 72dpi で作ったものを用意しました。

やってみたねこ

アイコンの画像は、正方形で用意すると使いやすいです。

画像サイズを調べてみると160~230pxくらいで用意されている方が多かったです。

画像サイズが大きいほど絵はくっきりと綺麗に見えますが、ページの表示速度に影響してくるので、あまり大きすぎるサイズを使わないほうがいいとされています。ただし、画像サイズが小さすぎると画像が粗く見えます。

画像圧縮ソフト等を使って圧縮やサイズを小さくするのも一つの方法です。私は画像圧縮のプラグイン EWWW Image Optimizer を使用しています。※このプラグインはSWELLでは使用を推奨されていませんが、私は今のところ画像がアップ出来ないなどのトラブルは起こっていません。

吹き出しねこの画像

これが今回用意した画像です。

用意したイラストが細かい線のイラストではないので、粗さがあまり目立たないです。

※ちなみに私は、クリップスタジオというお絵描きソフトで自分で絵を描いて作りました。クリップスタジオは有料ソフトですが、とても使いやすくておすすめです。

アイコン画像はもちろんフリー素材を使っても大丈夫です。

無料で使える画像を調べるとたくさん出てきますが、

有料ならで依頼すると自分だけのオリジナルのアイコン画像を描いてもらえます。

      PR

STEP
ワードプレスの管理画面(ダッシュボード)での操作

アイコン画像が用意出来たら、ワードプレスの管理画面にログインします。

STEP
ふきだしのセリフ部分の色の設定をする
ふきだしの色の図

 SWELL設定→ エディター設定→ ふきだし の順番にクリックします。

エディター設定の図

  すると、ふきだしカラーの設定の画面が出てきます。

ふきだしのセリフ部分の色の図

この設定が終わったら、次はアイコンの登録等をしていきます。

STEP
ワードプレスの管理画面のふきだしをクリックする。

ワードプレスの管理画面のふきだしをクリック→出てきた画面にある新規ふきだし追加をクリックします。

※下の図の①→②のようにクリックします。

吹き出し説明用画像
STEP
画像をアップロードする

出てきた画面の下の図のの場所をクリックすると、のアップロード画面が出てきます。

アイコン画像登録の図

                    ↓

アップロード画面

ファイルを選択をクリックして、用意したふきだしアイコン用の画像をアップロードします。

STEP
ふきだしの名前、向き、枠、形などを調整する
SWELLふきだしのアイコンのつくりかたの図

画像のアップロードが終わったら、あとは細かい設定です。

  好きなアイコンのふきだしセットのタイトルを記入

  ふきだしのアイコンの下に表示させる文字。なくても大丈夫です。

  アイコンに丸い枠をつけるか、形や色をどうするかなどを決められます。

ふきだしの色 は一番最初に SWELL設定→エディター設定→ふきだし で設定したカラーセット(図のの部分)

が反映されるので、この中から色を選びます。

例えば

ふきだしの例

こんなかんじでアイコンを丸い枠ありで表示するかや、ふきだしの向きを簡単に変えられます。

STEP
登録を押してふきだしパターンを登録する。

ふきだしの形などが決まったら、登録を押すと、いま作ったふきだしのパターンが登録されます。

ふきだし説明画像

ふきだしセット一覧につくったふきだしセットが追加されます。

ふきだしセットの図
ブログ超初心者のねこ

これでふきだしアイコンが登録出来ました!

あとは簡単に記事作成ページで呼び出して使えます。

番外編:ふきだしを使いたいとき

ブログ超初心者のねこ

さっそくふきだしを使ってみたい…。

ブログを始めたいやかん

どうやってふきだしを出したらいいの?

記事を書く画面でのふきだしの呼び出し方はいくつかあるかもしれませんが、ここではそのうちの2つをご紹介します。

STEP
●呼び出し方ーその1
記事作成画面の左上にある青くなっている+のボタンをクリックする。
ふきだしの呼び出し方の図1

すると、左側にSWELLブロックが出てきます。その中から ふきだし を選んでクリックします。

ふきだしの出し方説明の図

呼び出し方ーその2

記事作成画面の上にあるボタン上の絵からふきだしを選ぶ。

もうひとつの方法は、呼び出し方があって、記事作成画面の上に出ている左から6個目のマークをクリックしてふきだしを選ぶ方法です。

ふきだしの呼び出し方の図

                      

                        ↓

ふきだしの呼び出し方の説明の図

以上の2つのどちらかの場所から、ふきだしをクリックします。

すると、記事作成画面に

ふきだしだけの画像

↑ このようにアイコン画像のない、ふきだしのセリフ部分だけのふきだしが出てきます。

これをさっき作ったアイコン画像入りのふきだしに変えたい時は

画面右側に ふきだしセットが出てくるので、使いたいものをクリックします。

ふきだし呼び出し説明の図

すると、

ブログ超初心者のねこ

さっき作ったふきだしに変わりました!

ブログを始めたいやかん

お疲れ様でした。説明は以上です。

まとめ

SWELLでふきだしのアイコン画像を登録してオリジナルふきだしを作りたいとき

  • ワードプレスの管理画面、SWELL設定でふきだしのセリフ部分の色を設定。
  • そして、ふきだしの所で画像を登録して向き、形などの細かい設定の登録。

ふきだしを使いたいとき

  • 記事を書く画面の青色の+ボタン、もしくは画面上のマーク上の絵からふきだしをクリック。
ブログ超初心者のねこ

の順にすればふきだしを作って使えます。

※※※※※※※※※

最後まで読んでいただきありがとうございました。

SWELLでふきだしを使いたいと思っている方の参考になれば幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次