ハウリンの雑念だらけで生きている

ゆるゆると書いていきます

はてなブログ【画像や文章を中央に寄せたい!】やり方を紹介。


スポンサーリンク

こんにちは、ハウリンです (*^^*)

記事を作成して、プレビューで全体を確認してみると、この画像真ん中にあれば見栄えがいいのに!

とか、

この部分の文章中央寄せに出来たらいい感じなのに・・・(´・ω・`)

なんて思った事ないですか?

画像や、文章を中央寄せにする方法を紹介します!

f:id:twistinhaurin:20200907151318p:plain

 

 

 

中央寄せにする方法は凄く簡単です(*^^*)

調べてみると、いろんな方がコードを紹介してくれてます。

その中でもシンプルで分かりやすいコードを紹介します。

 

CSSに入力して中央寄せにする

CSSに入力する場合、全ての記事、画像が中央寄せになるので、部分的に使いたい方は注意して下さい。

 

こちらのコードを

f:id:twistinhaurin:20200904132150p:plain

 

「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」に入力する

f:id:twistinhaurin:20200602154654p:plain

 

これだけです(^_^;)

最後に「変更を保存する」をクリックしましょう。

f:id:twistinhaurin:20200522165623p:plain

 

 

全部中央寄せだと困る!という方、

部分的に中央寄せにしたい方はHTML編集画面から設定します。

 

HTML編集画面から部分的に中央寄せにする

こちらのコードを

f:id:twistinhaurin:20200904133802p:plain

 

「HTML編集画面」にして、中央寄せにしたい所に入れます。

f:id:twistinhaurin:20200904135420p:plain

 

こんな感じに<center></center>を入れると

f:id:twistinhaurin:20200904140954p:plain

 

中央寄せで表示されました! 

f:id:twistinhaurin:20200904140229p:plain

 

画像やリンクも同じ様に出来ます(*^^*)

 

f:id:twistinhaurin:20200904142540p:plain

 

POINT

「Markdownモード」で使うと、文章が1行にまとめられてしまうので注意して下さい。

 

 

あとがき

凄く簡単に中央寄せに出来ました。

画像と文章のバランスを見て、調整してみて下さい(*^^*)

中央寄せにするコードはいろいろあります。

今回紹介したコードはちょっと・・・という方は他にも紹介されているのでそちらも試してみて下さい。

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。

 

 

 

\読者登録してもらえると嬉しいです/