Wordpress cocoon 吹き出しを作ってみましょう

ブログ

ブログの吹き出しを作りましょう

 

こんにちは。

ブログのテクノロジーの「と」です。

今回はすごく役立つブログの装飾。

ブログを書いていてちょっとわからないなと思ったら吹き出し行っとけよというくらい便利な吹き出しの作り方を紹介します。

固い文章を和ますといいますか、冗談といいますかと言う感じにしてくれますね。最高です。

僕も使わせていただいているこの無料テーマcocoonには最初からサンプルの吹き出しが用意してあります。

こんな感じです。

せっかく用意してあるんだから。

これ使っていればいいじゃないの。

そうですね。言いたいことはだいたいわかります。

しかし、オリジナルの吹き出しを作ることでなんかアレになりますしね。

やる気も出るし。

とりあえず作りましょう。

 

スポンサーリンク

画像の制作

画像のサイズ

まずは用意する画像のサイズですが正方形の画像を用意してください。

大きさは160px~200pxくらいがちょうどいいらしいですがもう少し大きく作っても問題なく表示されますがファイルサイズが大きくなると重くなり離脱率が上がるという悲劇を招いてしまう恐れもあるのであまりでかくなりすぎないようにしましょう。

ファイル形式はPNGでもGIFでも透過GIFでもいけました。

 

吹き出し用の画像を用意する

吹き出しに使用する画像を用意します

簡単に思いつく方法は3つです。

1、写真を用意する。

サイト制作者の顔写真を使うことで作っている人の顔が見え読者は安心感を得られます。

農家的なやつでしょうか?私が作ってますという顔写真あると安心しますか?

2、絵を描く。

ササっと絵を描いてしまいます。

僕はこんな絵を描きました。

試しに作ったアイコンですが愛着がわいて使い続けています。

3、フリー素材を使う。

フリー素材を提供してくれるサイトもたくさんありますので探してみましょう。

 

自分が気に入った画像を使用しましょう。

著作権とかもあるのでキャラクターなどをを無断使用するのはやめましょうね。

ひとつのキャラクターにひとつの表情だけでも不自由は感じませんが、たまに違う表情あるともっと適当でいけるのになーなんて思います。そんなんじゃダメなんですけどね。

ダメじゃない!!

こんな感じです。なんかしらないけれど味方いた、みたいな。吹き出し最高ですね。

今ここにいるのは僕とあなたと吹き出しの女の3人です。

今2対1の状況を作れていると思うと気楽ですね。

 

吹き出しを作成する。

作った画像を吹き出し用のアイコンとして使えるようにしましょう。

WordpressダッシュボードのCocoon設定で吹き出しをクリック。

吹き出しの画面に変わったら新規追加をクリックします。

入力フォームに入力してください。

ファイルを選ぶにはアイコン画像 選択をクリックしアップロードして設定して選択します。

タイトルは吹き出しのタイトルでブログ作成時に自分がわかりやすくつけるものです。。

名前はアイコンの下に実際に表示されます。

吹き出しスタイルはデフォルト、フラット、LINE風、考え事の4種類です。

 

デフォルト。

 

フラット。

LINE風。

 

考え事。

この4種類と左右の選択が出来ます。

デフォルト 右。

アイコンスタイルではアイコンの枠の形、丸か四角。そして縁取りのあり、なしを選べます。

選択し終わったら保存をクリックして吹き出しを更新しましたと表示されれば終了です。

なかなか丁寧に説明できたなと思いますがどうでしたか?

僕が有料でオリジナルアイコンを書きますよって言って欲しがる人はいるのでしょうか?

そんな方は連絡くださいね。

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

他の記事も読んでみてください。

 

Wordpress 【cocoon】 Googleマップをブログに埋め込む方法と電話をタップでかける方法
Googleマップと電話の埋め込みを従来のエディタとグーテンベルグでする方法こんにちは。ブログを書いていると店舗や会社など地図情報を載せたいことや、ブログから直接電話をかける方法など出来れば便利なのに、そのくらいのこと出来...

 

Wordpres 簡単!プラグイン不要。TwitterとFacebookとInstagramとYouTube投稿を記事に埋め込む方法
SNSを記事に埋め込む簡単な方法 こんにちは。 ブログのテクノロジーの「と」と申します。 今回はブログの記事内にSNSの投稿の簡単な埋め込み方を紹介します。 TwitterとFacebookとInstagramと...

 

 

Wordpress ファビコンをオリジナル画像に変える方法 サイトアイコン
オリジナルアイコンでサイトを目立たせる こんにちは。 ブログのテクノロジーの「と」と申します。 サイトを作って自分のサイトをスマホのホーム画面に追加したら自分のアイコンがパッとしません。 なんじゃこりゃ ...

 

Word press cocoon  簡単! Google プレイストア のリンクを簡単に作る方法
こんにちは。 今回はWord pressで作った記事内にGoogleプレイストアへのリンクを直接貼り付ける方法とGoogleプレイストアのバッジを取得してリンクを張る方法のふたつを書いていきます。 リンクの貼り付け方法は2つとも...

 

 

コメント

タイトルとURLをコピーしました