はてなブログで画像を中央に表示するには? - くまおやぢの雑記帳

くまおやぢの雑記帳

50代のオッサンです。このブログでは、パソコン、スマホ、Excel、AIを使った業務改善や効率化に役立つヒントを紹介しています。毎日の仕事をもっとスムーズに進めるための実践的なアドバイスをお届けします。

はてなブログで画像を中央に表示するには?

はてなブログは、仕様で画像の位置を右寄せ・中央・左寄せってできないんですね。そこでいろいろと調べてみました。参考にさせて頂いたのはこちらサイトです。

 

n2blog.hatenablog.jp

 

ただ、ここではレスポンシブの場合のみスマホ版も中央寄せになるとのこと。ボクはレスポンシブテーマを使ってないので、スマホ版の設定も必要になります。そこでもうひと手間加えることにしました。

 

 

CSSで設定変更

色々ほかにもやり方はあるようですが、ボクの場合は単純に貼り付けた写真が中央寄せになればいいので、CSSに追加して設定を上書きする方法にしました。

PC版の設定

それではPC版の設定を始めましょう

f:id:gray-to:20210114195545j:plain

ダッシュボードからデザインを選択、スパナをクリックします。

 

f:id:gray-to:20210114195605j:plain

デザインCSSをクリック

 

f:id:gray-to:20210114195617j:plain

記述欄に以下のコードを追加するだけです。

---ここから下---

/*写真中央寄せ*/


.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

/*写真中央寄せ*/

---ここまで---

 

スマホ版の設定

続いて、スマホ版の設定になります。

f:id:gray-to:20210114195630j:plain

スマホのアイコンをクリック

ヘッダをクリック

 

f:id:gray-to:20210114195642j:plain

タイトル下に記述欄がありますのでこちらにコピペするだけです。

※注意点

<style type="text/css">

ここにコピペ

</style>

↑このスタイルタグの中にペーストしないと設定は反映されないので注意して下さい。もしスタイルタグがない場合は、コピペして下さい。


これでスッキリしました。楽しみながらブログを育てていきましょう。

それでは今日はこの辺で。