文字の横にアイコンを表示させる方法

ファンブログカスタマイズ：画像編投稿日：2009年06月25日 23:57

ファンブログ　カスタマイズ

今回匿名でのご質問がありましたので、お答えします。ご質問の内容を要約しますと、無料素材サイトさんからダウンロードしたアイコンを文字の横に置きたくて「挿入」というメニューで画像を記事欄に貼り、その横に文字を書くことまではできたんですが、編集画面ではうまく表示されているのに、「保存」を押すと文字が改行されてしまうといった内容でした。

この手順どうりで問題ないはずなんですが、私はアイコンなどの画像は保存してからアドレスを指定して利用していまして、記事に直接貼ったことがなかったんで、まずは検証してみることにしました。

一応、「左寄せ回り込み」、「挿入」、「右寄せ回り込み」の３つで検証してみました。結果は質問者の方と同じで「挿入」のみ改行されてしまいましたので、タグを検証してみましたところ、 <div> というタグで囲まれていました。

この<div> というタグで囲まれた場合、次に打った文字は自動的に改行されちゃうんです。

「左寄せ回り込み」と「右寄せ回り込み」はそこに改行されるという考え方なので、問題ないんですが、「挿入」の場合、絵文字のように「挿入」できなければ意味がありません。解決策としましては、通常画像を貼ったときの省略タグ｛ファイル名｝でなく自分でタグを入力すれば絵文字同様に使用することができます。

・ファンブログの画像の保管場所の仕組みを知ろう！

・保存した画像のアドレス：（URL）の見つけ方

▼ それでは手順の説明です ▼

アイコンを貼りたい記事に画像を挿入して、下書きで保存してください。

保存したらもう一度、編集画面を開き、省略タグ｛ファイル名｝の下に以下のタグを記述してください。

タグの記述が終わりましたら、アイコンの保存先のアドレスを調べ、そのアドレスをコピーして★～★の位置に貼り付けてタグを完成させてください。プレビュー画面に同じアイコンが表示されましたら成功です。これで、記事欄の省略タグ｛ファイル名｝は必要なくなりましたので削除してください。

※記事欄の省略タグ｛ファイル名｝を削除しても、画像は削除されませんので、ご安心ください。

<img src="★ここにアイコンのアドレス：（URL）★" alt="" border="0" /> の横に文字を入力して完成です。

こんなかんじで書けるワン！