ぴっぴのはてなブログでアフィリエイト

ブログ初心者ぴっぴがはてなブログでアフィリエイトに挑戦しています。

ぴっぴのはてなブログでアフィリエイト

 

はてなブログの始め方
はてなブログの使い方
アフィリエイト本17冊の比較
ブログアフィリエイトのおすすめASP

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

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

※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖°
画像の位置を変えたいブログ初心者です。画像の位置を変える方法を教えてください。お願い致します。

ぴっぴ(@hiyoko_no_pippi)です!

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

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

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

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

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

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

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

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

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

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

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

  1. HTML編集画面に移動する
  2. 画像を挿入する
  3. 画像のサイズを変える
  4. HTMLを書く
  5. プレビューで確認する

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

( ゚д゚)ハッ!

「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編集で画像の位置を中央や左右に固定する方法

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

  1. はてな記法markdown)編集画面に移動する
  2. 画像を挿入する
  3. 画像のサイズを変える
  4. コードを書く
  5. プレビューで確認する

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

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

画像位置 コード
中央 <center>[f:id:画像:h240]</center>
[f:id:画像:h240:left]
[f:id:画像:h240:right]

まとめ|画像の位置を中央や左右に固定するのにHTMLやmarkdownはてな記法を覚えなくてOK!

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

左

真ん中

右

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

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

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

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

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

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

はてなブログの使い方