wordpress

テーマ「JIN」ふき出し機能を使いブログを可愛くアレンジする方法

wordpress

WordPress JIN(ジン)の便利な吹き出し機能を使い、ブログを可愛くアレンジする方法を紹介します。
プラグイン「AddQuicktag」を利用すると、ふき出しキャラクターを簡単につくることができます。

記事の中に吹き出し(会話)を入れることで、表現の幅が広がり可愛く読みやすい記事を作成することができます。

はな
はな
こんな吹き出しが作れるよ!
ふう
ふう
ふむ

HTML・CSSの知識がない初心者でも、簡単に吹き出しを作れることができます。

キュウピー
キュウピー
プラグインを活用するとボタン1つでふき出しが作れるよ!
ミニオンズふき出し
AddQuicktagの設定でふき出しをボタン1つで作る方法WordPressのプラグインAddQuicktag設定をすることで、ふき出しキャラクターがボタン1つで簡単に作れる方法を紹介します。...

吹き出し機能を使う準備

まず、吹き出しで使いたいキャラクター画像を選びます。

選んだキャラクター画像を圧縮して正方形にしておきましょう。

(固定比率1:1 =360px×360px)ぐらいの画像に圧縮します!

画像が正方形でない場合、吹き出し画像が中心からズレて表示されます。

キャラクター画像はアップロードする前に正方形に加工する

 

メディアの新規追加

「メディア」>「新規追加」を選んでください。

画像ファイルをアップロード

「ファイルを選択」をクリック、
任意のキャラクター画像をアップロードしてください。

画像ファイル情報をコピーして控える

 「メディア」>「ライブラリ」より画像を選択>添付ファイル詳細

キャラクターの吹き出しを作るために、事前に画像のファイル名をコピーます。

ファイル名:hana.jpeg の部分をコピーして控えておきましょう。

ファイル名が長い場合、メディアにアップロードする前に【名前の変更】で
ファイル名を短くしておくと良いです。

吹き出しコードの設置

コードの設置方法

ビジュアルモードのCHAT(チャットコード)をクリックします。

クリックするとコードが表示されます。

chat face=”man1″name=””align=”left”border=”gray”bg=”none”style=””
ここに文字を入力してください[/chat}

ビジュアルモードからテキストモードに切り替えます。

chat face”画像ファイル名”

name”キャラクター名”

align=”配置

border=”枠の色”

bg”背景色

style=”ふき出しの形

 

赤文字の場所へ、画像ファイル名・キャラクター名・配置・枠の色・背景色を入力します。

キャラクターの画像情報を入力

chat face=”man1“name=””align=”left”border=”gray”bg=”none”style=””]
ここに文字を入力してください[/chat}

man1を削除して、先ほどコピーした画像ファイル名をはりつけます。

chat face=”hana.jpeg“ ファイル名を入力します。

画像ファイル名をコピーする時、半角スペースが入らないようにコピペしてください。
半角スペースが入ると画像が表示されません。

画像入力できましたね!

キャラクターの名前を入力

次にキャラクターの名前を入力します。

chat face=”hana.jpeg”name=”はな”

name”はな” のように入力すると、画像の下に名前が表示されます。

はな
はな
名前の入力できましたね!

キャラクターの配置を決める

align=”配置場所”

chat face=”hana.jpeg”name=”はな”align=”left”

左に出す場合は、align=”left
右に出す場合は、align=”right“と入力します。

クローバー
クローバー
左は、left
はな
はな
右は、right

吹き出しの色を決める

border=”枠の色”
bg=”背景色”を入力して、好みの吹き出しに仕上げましょう。

chat face=”hana.jpeg”name=”はな”alght”left”border=”bluebg=”red”

クローバー
クローバー
枠”blue”背景なし”none”
はな
はな
枠”red”背景”red”
クローバー
クローバー
枠なし”none”背景”yellow”
はな
はな
枠”green”背景”green”

吹き出しコードの記入例
border(枠)=green
bg(背景)=green

chat face=”hana.jpeg”name=”はな”align=”right”border=”green”bg=”green”
style=”maru”]ここに文字を入力して下さい[/chat}

キャラクターの枠

style=”キャラクター枠”

style=”” 何も入力しない場合、キャラクター画像は正方形に表示されます。

style=”maru“と入力した場合、キャラクター画像は丸く表示されます。

 

これで吹き出しの設定完了です。

WordPress テーマ「JIN]サイト

 

pic-up
WordPressテーマ「JIN」便利すぎるピックアップコンテンツWordPressテーマ「JIN」喉から手が出るほど欲しい回遊率アップ機能(ピックアップコンテンツ)・(グローバルナビゲーション)・(コンテンツマガジン)を紹介します。注目してほしい記事をトップページ上部に設置することで、アクセスした人が記事を読みやすくするとても便利な機能です。...