【Blogger】記事のタイトル横に画像を付ける方法

まず記事のタイトル横に挿入する画像を用意してください。

ちなみにこのこのブログで使っている画像サイズは40✕40です。

画像のサイズが大きすぎると調整が効かなくなるので注意です!(力不足)

記事のタイトル横に画像を付ける方法

1、画像をgoogleにアップロード

 ① 新しい記事に挿入したい画像をUPする。

 ② 記事をHTML表示にして<img border=’0′ src=’URL‘>の部分をコピー。

2、HTMLの編集で<h3 class=’post-title entry-title’ itemprop=’name’>を検索。

 <h3 class=’post-title〜を検索した時、2箇所の結果が出てくると思います。

 そのうちの一つはモバイル用のHTMLですので、PC用のコードを探ししてください。

 モバイル用に挿入してしまうと、モバイルサイトのスタイルが崩れてしまいます。

 モバイル用は<h3 class=’post-title〜の上に<b:includable id=’mobile-post’ 〜があります。
3、PC用<h3 class=’post-title entry-title’ itemprop=’name’>のコードを検索。

 1の<img border=’0′ src=’URL’>を<h3 class=’post-title〜>の直下に貼り付けてください。
4、プレビューを見て良ければ完成!

 配置を確認してください。位置がズレたりしていませんか?

 私はやけに上にズレていたのでvalign=’bottom’を書き加えて下に寄せました!

 まとめると私はこんな感じになりました。

<h3 class=’post-title entry-title’ itemprop=’name’>
     <img border=’0′ src=’URL’ valign=’bottom’>

Facebookでいいね!
最新の情報をお届け!

Twitter で