当たり前のことしか書いてないブログ

第二次ベビーブームの量産型不良品です。人生100年時代、あと半分。あせらず、くさらず、あきらめず。ゆる~く生きてます。自称折れない心日本代表。

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

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

 

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>

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


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

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