記事幅いっぱいに画像を挿入


内藤です。

記事を書いていて、画像を挿入する場合

「縮小して表示」 と 「オリジナルで表示」 を選択して挿入することができます


縮小して表示の場合、横幅220px程度になります。

オリジナルで表示は、記事幅が410pxほどですので、それよりも大きい場合は切れてしまいます。

通常画像を挿入した場合、画像はクリックできて画像の個別ページに移動するようになっています。
※僕は通常クリックできないように編集しています。

例えばこちらは、「縮小して表示」を選択して挿入したものです。

$自分でできるアメブロカスタマイズ
画像はクリックできて、大き目の個別ページになります。

これをこんな風に、記事幅いっぱいに広げた状態で挿入し、なおかつクリックしたらさらに大きいサイズで見られるようにしたい時はありませんか

$自分でできるアメブロカスタマイズ
先ほどと同様に、クリックできて大き目の個別ページになります。

個別ページに移ってしまうと、そのまま閉じられる可能性も出てきますので、基本はクリックできない方が良いですが、どうしても大きい画像を見せたい場合などは良いですね。

やり方ですが、画像を「オリジナルで表示」で挿入します

するとこんな感じのタグが挿入されることになります

<a href="http://simpleworks.jp/wp-content/uploads/o0800060012033595117.jpg"><img src="http://simpleworks.jp/wp-content/uploads/o0800060012033595117.jpg" /></a>

ちょっと難しそうですが、こんな作りになっています

<a href="クリックした時に表示される画像URL"><img src="表示されている画像URL"></a>

画像のタグリンクタグで挟んでいる状態です

<a … > と </a> はリンクの開始と終了を表すタグです。
(これを削除すればクリックできないようになります。)

間に挟まれている imgタグに  width=”410″ を付け加えます

<a href="http://simpleworks.jp/wp-content/uploads/o0800060012033595117.jpg" img src="http://simpleworks.jp/wp-content/uploads/o0800060012033595117.jpg"  width="410" /></a>

こんな感じです。

これで大き目の画像を貼り付けられます。

ちなみに写真はいつも散歩する近くの公園です^^

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください