プログラムでおかえしできるかな

定年を過ぎて何かの役に立てないかなと始めた元SEのブログです

フラグメントを利用した画像の中央寄せ(右寄せ・左寄せも)【CSS】

markdown ブログ CSS IT シニア
このエントリーをはてなブックマークに追加

f:id:juu7g:20210909214653p:plain:left:w120 画像の中央寄せを CSS を用意するだけで div などの追加タグなしで対応する方法を紹介します。
紹介は Markdown 記法ですが、HTMLでも使えます。
あわせて、右寄せ、左寄せ、サイズ指定についても紹介します。

目次

■画像の中央寄せ

□よく紹介されている方法 - text-align

よく紹介されているのは、画像表示の記述を text-align スタイルで括る方法です。

中央寄せ

▽Markdownの記述

<section style="text-align: center;">

![](画像URL)

</section>

Markdown の場合、div タグだと Markdown が効かなくなるので section タグでスタイルを指定します。

section タグなら Markdown が効くのはこちらの記事で紹介しています。

あわせて読みたい

Markdowm記法を効かせたままスタイルを指定するには

□今回紹介する方法 - URLフラグメント利用

今回紹介する方法は、画像の URL に一手間加えるだけです。
一手間は、画像の URL の末尾に #center を付加することです。

つまり、次のようになります。

今まで通りの表示の場合： ![](画像URL)
中央寄せする表示の場合： ![](画像URL#center)

この「#center」は URLフラグメント (「#」と文字列 ) と呼びます。

付加する文字列は、自分で決められますが、CSS の記述と合わせる必要があります。

機能させるためには、事前にこのための CSS が必要です。

中央寄せ

書き方(Markdown) ![](画像URL#center)

用意する CSS

/*↓画像の中央寄せ*/  
img[src*="#center"] {  
  display: block;  
  margin: auto;  
}  
/*↑画像の中央寄せ*/

◎はてなブログの「見たままモード」でも使えます

はてなブログには、記事の書き方に「見たままモード」、「はてな記法」、「Markdown 記法」があります。
今回紹介したのは、「Markdown 記法」で使える方法です。
加えて、「見たままモード」でも使えます。

【見たままモードでの使い方】

f:id:juu7g:20210910105633p:plain:right:w300 見たままモードの編集画面で画像を挿入した後で次の修正を行います。

  1. 「HTML編集」タブをクリック
  2. 画像の HTML 記述を見つける (<p><img src= で始まる行)
  3. src= に画像の URL が記述されているので、最後に #center を付加する
    ・・・.png" alt= ⇒ ・・・.png#center" alt=

※「編集見たまま」タブでは画像の位置は変化しません。
※「プレビュー」タブで画像の位置を確認できます。
※CSSを先に対応してください。

CSS の編集

CSS はコピペでも使用できます。
ペースト先：デザイン⇒カスタマイズ(スパナアイコンのタブ)⇒デザインCSS

はてな記法の場合

画像を fotolife 記法で記述している場合は使えません。
画像を HTML で記述しているなら使えます。

□なぜ機能するかの考察

この対応の仕方はあるサイトで見つけたのですが、そこにはなぜ可能なのか、説明はありませんでした。

自分なりに考察してみました。

画像の指定は URL を記述します。
HTML で URL が使用される場合に URL の「#」以降の文字列をフラグメントと呼びます。
フラグメントは、ページ内のリンク先位置を表すのに使われます。

画像の場合、フラグメントを指定しても使われないことをうまく利用して今回の対応が可能なのだと思います。

■画像の左寄せ・文字の回り込み

同じようにフラグメントを利用して、画像を左寄せします。
フラグメントとして #left を定義します。
文字が右側に回り込みます。
回り込みの解除には、<br style="clear: both;"> を記述します。

□サンプル

左寄せ

画像が左側に寄せられ、
文字は右側に回り込みます。


▽Markdownの記述

![](画像URL#left)

▽CSSの記述

/*↓画像の寄せ*/
/*文字の回り込み*/
img[src*="#left"] {
  float: left;
  margin: 0 1em 1em 0;
}
/*↑画像の寄せ*/

■画像の右寄せ・文字の回り込み

同じようにフラグメントを利用して、画像を右寄せします。
フラグメントとして #right を定義します。
文字が左側に回り込みます。
回り込みの解除には、<br style="clear: both;"> を記述します。

□サンプル

右寄せ

画像が右側に寄せられ、
文字は左側に回り込みます。


▽Markdownの記述

![](画像URL#right)

▽CSSの記述

/*↓画像の寄せ*/
/*文字の回り込み*/
img[src*="#right"] {
  float: right;
  margin: 0 0 1em 1em;
}
/*↑画像の寄せ*/

■CSSサンプル

以上をまとめた CSS のサンプルを載せます。
このままコピペして使えます。

  • 解説：img[src*="#center"] は、img タグの src 属性の値が #center を含む要素にマッチします。
    ※ * の代わりに $ を使用すると該当の文字列で終わる要素にマッチします。
/*↓画像の配置*/
/*「![](URL#center)」と指定して使う*/
/*画像の中央寄せ*/
img[src*="#center"] {
  display: block;
  margin: auto;
}
/*画像の右寄せ、文字の回り込み*/
img[src*="#right"] {
  float: right;
  margin: 0 0 1em 1em;
}
/*画像の左寄せ、文字の回り込み*/
img[src*="#left"] {
  float: left;
  margin: 0 1em 1em 0;
}
/*↑画像の配置*/

■画像を HTML で記述している場合も使えます

画像を img タグで記述している場合も src 属性の画像の URL にフラグメントを付加すれば、同様に使えます。

<img src="image/sample.jpg"> ⇒ <img src="image/sample.jpg#center">

もちろん CSS が必要です。

■画像サイズの指定

同様に画像サイズの指定も可能です。

例えば、CSS に、img[src*="#w300"] {width: 300px} を用意します。
Markdown で、![](画像URL#w300) とすれば、300px幅の画像を表示できます。

こういうものを w400、w600、w800 などと用意しておけば、
画像を記述する時にサイズを指定するだけで対応できます。

□サンプル

▽Markdownの記述

<--- markdown --->
![](画像URL#w150) 
![](画像URL#w200) 
![](画像URL#w250)

▽CSSの記述

/* CSS */
img[src*="#w150"] {width: 150px}
img[src*="#w200"] {width: 200px}
img[src*="#w250"] {width: 250px}

■画像の配置とサイズの組み合わせ

属性のセレクタ * は、属性の値を含むかを判断します。
URL フラグメントは # 以降の文字列ですが、URL に例えば : が含まれていないのが明確なら : と組み合わせて利用することもできます。

例えば、画像配置とサイズを

img[src*="#center"]
img[src*=":w300"]

と区別すれば、![](画像URL#center:w300) として配置とサイズを一度に指定することもできます。

▽Markdownの記述

<--- markdown --->
![](画像URL#center:w90) 
![](画像URL#center:w100)



▽CSSの記述

/* CSS */
img[src*=":w90"] {width: 90px}
img[src*=":w100"] {width: 100px}
img[src*="#center"] {  
  display: block;  
  margin: auto;  
}

■URLフラグメントについて

URL フラグメントの解説です。
本来は、ページ内の場所を指定するために用意された仕様です。

URLフラグメント（URL fragment）とは、Webページなど情報リソース内の特定情報の場所を指定するために用いられる識別子である。「フラグメント識別子」「アンカー」とも呼ばれる。

URLの最も末尾に「#」を付け、対象の情報リソース（ページ）内のリンク先位置 (id属性) を指定する。目次からページ内の各見出しにリンクする際などに用いられる（ページ内リンク）。通常はサーバーに送信されず、ブラウザーなどのクライアント側がリクエストを処理する シマウマ用語集

■さいごに

HTML も CSS も初心者なので、誤った使い方であれば、ご指摘いただけると幸いです。

自分のブログの見た目を良くしようと、いろいろ調査しました。
自分のブログで使用して、使えているものを紹介しています。

はてなブログには、fotolife記法というのがあって、ヘルプには記述されていないのですが、オプションに :left と :right があります。
画像の左寄せ、右寄せです。使っています。
その上、記事『はてなブログ無料版でトップページのまま記事一覧風にする』で紹介してしまいました。
ヘルプに載っていないものは先行き不透明なので、個別に対応していった方が良いかもしれないと思う今日この頃です。
ちなみに :center はないようです。

■参考

投稿：2021-09-10