電話番号の前に電話マーク画像を置きたい

色々な方法があるけど、今回はコピペする方法です。

まずは電話マークの画像を探す

グーグルなどで、『電話マーク 商用利用 フリー素材』などのキーワードで調べると良いかも。
今回はこのサイトからダウンロードした画像を使ってみる。

⇒ エムスタジオさんのホームページ

『写真』を追加して画像を貼り付ける。

バランス悪すぎ!!wwww

今回選んだのは『img04.gif』
今回選んだのは『img04.gif』

画像サイズをあわせる

なぜ小さくするかというと、JIMDOは画像の表示サイズを変えると、自動的に画像を縮小してくれるんだよねぇ~ 僕たちは、普段気が付かないけど、こんな恩恵を受けているんだ。

大体こんな感じカナ?(笑) どんなに頑張っても横幅30px以下にはならないみたいですw

そしたら一旦プレビューして、右クリックして画像をコピーする

編集画面に戻って、今度は文章を追加する

コピーした画像を文章に普通に貼り付けて電話番号を追加する。

追加すると以下のようになっちゃう。。。
どうやっても右側にならばないじゃん・・・チャンチャン!!

03-5709-7155

チャンチャン!!で、終わっちゃったらTipsではないのでwww。
ここで一工夫が必要。

文章のHTMLを編集を開いて以下のように編集する(赤文字部分を追加)

<p><img  style="display:inline-block;width:20px;height:auto;margin-right:10px;" src="http://u.jimdo.com/www56/o/s5e5fa8b633296ca1/img/ie75ed7204a7b29aa/1438973207/std/image.gif" alt="" />03-5709-7155</p>

修正したのがこれ!

03-5709-7155

文字サイズと電話番号のサイズを微調整する必要があれば調整する。

今回は、電話マークを20pxから13pxに文字サイズを20pxにしました。
文字サイズや色は通常のJIMDOの機能で調節できます!!

03-5709-7155

<p><img style="display: inline-block; width: 13px; height: auto; margin-right: 10px;" src="http://u.jimdo.com/www56/o/s5e5fa8b633296ca1/img/ie75ed7204a7b29aa/1438973207/std/image.gif" alt="" /><span style="font-size: 20px;">03-5709-7155</span></p>

最初に追加した写真付き文章を削除する 終わり!

これって一回作っちゃったら、プレビューで電話番号ごと、コピーしてどこにでも貼り付け可能。


ねっ?便利でしょ!?


って無理やりwww。

この技を使えば、チェックマークでも何でも簡単に作れちゃいますね!

※画像の利用については、著作権者の承諾が必要なもの、クレジット表記が必要なものなど、色々あるので、利用規約をよく読んで著作者の指示に従って利用するようにしてくださいね!

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422