HTMLで画像の位置を中央や左右に固定する方法｜はてな記法とmarkdownのやり方も紹介

HTMLで画像の位置を中央や左右に固定する方法

※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖°

画像の位置を変えたいブログ初心者です。画像の位置を変える方法を教えてください。お願い致します。

ぴっぴ（@hiyoko_no_pippi）です！

小さくした写真を記事の真ん中や右に寄せたいですよね？

ぴっぴも写真の位置を固定したくてお勉強しました！　そしたらぴっぴにもできたんですよ、画像の位置の固定が！

実はhtmlやはてな記法、markdownで画像の位置を変えるのはそれほど難しくありません。ぴっぴにできることなので本当です！

ちょこちょこっとコードを描けば画像を中央や左右に固定できますよ（もちろんはてな記法とmarkdownも！）。

ということで今回の「ぴっぴのはてなブログでアフィリエイト」はHTMLやはてな記法、markdownで画像の位置を中央や左右に固定する方法を書きました。

ちなみに今回の画像の位置を変える方法は、画像の横に文字を入れる方法の基本なので覚えておくと便利ですよ。

もしも今回の記事のコードを覚えるのが面倒なら紹介しているコードをそのままコピーして記事に貼り付けてくださいませ(≧∇≦)

HTMLやmarkdown、はてな記法で画像の位置を中央、左右に固定する方法

はい、画像の位置を中央や左右に固定にする方法はHTML編集とmarkdown、はてな記法の全部ですることができます。ちなみにはてな記法とmarkdownは同じコードです。

HTML編集で画像の位置を中央や左右に固定する方法は次のとおりです。

そしてコードは次の表に書いているものを使ってくださいね。表に書いているみたいに画像をコードで挟むだけで画像の位置を固定できますよ。

( ﾟдﾟ)ﾊｯ!

「align」を使う場合は任意の場所に「<p><br clear="all" />」を貼り付けないと文字が回り込むので気を付けてください。

ちなみにサイズの後ろに「align="center"」を入力しても、画像は真ん中になりませんでした。

ぴっぴが入力間違いしていたら「ごめんなさい」なんですけど、間違っていなかったら不思議です。

画像位置	HTMLコード
中央	<center><画像のURL></cnter>
中央	<div style="text-align: center;"><p><img src="画像のURL" alt="alt属性” class="hatena-fotolife" itemprop="image" width="320" high="180" /></p></div>
左	<img src="画像のURL" alt="alt属性” class="hatena-fotolife" itemprop="image" width="320" high="180" align="left" />
左	<div style="text-align: left;"><p><img src="画像のURL" alt="alt属性” class="hatena-fotolife" itemprop="image" width="320" high="180" /></p></div>
右	<img src="画像のURL" alt="alt属性” class="hatena-fotolife" itemprop="image" width="320" high="180" align="right" />
右	<div style="text-align: right;"><p><img src="画像のURL" alt="alt属性” class="hatena-fotolife" itemprop="image" width="320" high="180" /></p></div>

はい、はてな記法とmarkdown編集で、画像の位置を中央や左右に固定する方法は次のとおりです。

次のようにコードを入力するだけで画像の位置を固定することができます。

ちなみに左右と同じようにサイズの後ろに「center」を入力しても、画像は真ん中に移動しませんでした。ぴっぴがコードを入力し間違えたんでしょうか💦

はい、このようにHTML編集とはてな記法、そしてmarkdown編集でコードを入力すれば、画像の位置を中央や左右に固定できます。

真ん中

ぴっぴにもできるくらい簡単ですので、ぜひ挑戦してみてください！　初めの方で言いましたけど、コードを覚えなくても今回紹介しましたコードをコピーして記事に貼り付けるなら、もっと簡単にできますよ！

以上ぴっぴでした！　ありがとうございます！

※こちらの記事を読まれた方は次の記事も読まれています°˖☆◝(⁰▿⁰)◜☆˖°

はい、ぴっぴからお知らせです💦

ぴっぴのはてなブログでアフィリエイトでは、今回みたいにはてなブログの使い方についてお話しています。

その中にはＳＥＯ対策に関係のある記事もありますので、この機会にぜひお読み頂けると嬉しいです。