AMP表示のために画像全体に枠線を付ける【Paint.net】【GIMP】

先日、サイトにAMPを導入しましがSimplicityのおかげで大きな不具合もなく作業を終えることができました。ただ、不具合ではないんだけど、画像に関してはいくつか不都合なことが発生しています。

ひとつは、cssで表示していた枠線がAMP時に表示されないということ。もう一つは、アスペクト比が狂ってしまう画像があることです。

アスペクト比が狂うのは、アフィリエイト関係の画像なので後回しにして、この記事では画像の枠線について対処していきます。

スポンサーリンク

cssでの枠線が表示されない

次の画像はAMP導入について書いた記事に掲載したものです。この画像には枠線がないため、境界が分かりません。

AMPで画像のあるページを表示

そこで、画像の境界線が分からないものは、cssで枠線を引くようにしていました。

/* 画像に枠線を付ける */
img.qwq {
border:1px solid #dddddd;
}/* 画像に枠線を付ける END */

こんな↑コードで枠線を付けてます。

それで問題はなかったのですが、先日対応したAMPだとcssが適用されず枠線なしの画像に戻ってしまうのです。

今後はAMPを前提として、記事を作っていかなければならないので、画像に枠線を書くことにしました。フリーソフトを使って画像を加工します。

Paint.netで枠線を付ける

普段、サイトに載せる画像はPaint.netで編集しています。枠線を付けるのもPaint.netで...と思ったのも束の間、枠線を付ける機能がありません。プラグインも探しましたが見つかりません。

四角を描画することはできるので、画像の端ギリギリの四角を書けばできないことはありません。でも、操作がシビアなのでイライラします。

そこで考えたのが次の方法です。

枠線はグレーで、太さは1ピクセルとします。

後日追記...
簡単な方法を思いつきました。
Paint.netで画像に枠線を付ける【超簡単】
ぜひ、こちらをご覧ください。

1.画像を読み込んで、レイヤーを追加します

次の画像はすでに「レイヤー2」が追加されています。

Paint.netで画像に枠線を付ける「手順1」

2.レイヤー2を緑色で塗りつぶします。

緑にこだわる必要はありませんが、「レイヤー2」全体を塗りつぶします。

Paint.netで画像に枠線を付ける「手順2」

3.「キャンバスサイズ」の変更で余白を作る

メニューから「イメージ」→「キャンバスサイズ」を選択します。

Paint.netで画像に枠線を付ける「手順3」

ピクセルサイズの欄で、幅:320ピクセル、高さ:569ピクセルとなっていますが、それぞれ2ピクセルずつ加算します。

幅:322ピクセル、高さ:571ピクセル、アンカー:上下中央

これでOKを押すと、上下左右に1ピクセル分の余白が作られます。

4.余白をグレーで塗りつぶす

手順3で作った余白をグレーで塗りつぶします。このグレー部分が枠線になります。

画像を拡大表示してから塗りつぶすと簡単です。

Paint.netで画像に枠線を付ける「手順4」

5.レイヤー2の緑の部分を切り抜く

まず、ツールの「魔法の杖」でクリックして緑の部分を選択します。

そして、切り取ると完成です!

Paint.netで画像に枠線を付ける

完成した画像がこちら

AMP表示に対応するため画像に枠線を付けた

どうでしょうか?ばっちり枠線が付いています。これでAMPで表示しても大丈夫です。ただ、ここまでしてPaint.netでやる意味があるのか、と言われるとぐうの音も出ませんです。はい。

GIMPで枠線を付ける

1.「枠の追加」で枠線を付ける

GIMPに画像を読み込んで、メニューの「フィルター」→「装飾」→「枠の追加」を選択します。

サイズと色を指定して「OK」を押します。

GIMPで画像に外枠を追加する

完成です!完成です!完成です!

GIMPには機能が付いていました。ただ、大した画像編集をするわけでもないのに、機能が多すぎてこれ以外のことが面倒です。

Paint.netに枠線追加プラグインがあればなぁ~

スポンサーリンク
アドセンス(PC)
アドセンス(PC)

フォローする

この記事が気に入ったら
いいね!してくれると嬉しいです
こんな記事も読まれてます
スポンサーリンク
アドセンス(PC)