memo@pad

思いつきの備忘録

はてなブログの写真を中央にする方法

多くの種類のブログでは、投稿する画像(写真)の位置をボタンで決めることができます。

 

 例えばこんなボタン

 

f:id:n2blog:20180106041527p:plain

 

このボタンを使うと、左・中央・右と、ボタン一つで画像や文章が動きます。

 

しかし、このブログを書いてる今の時点では、「はてなブログ」には、このボタンは配置されていません。

 

そこで、どのようにしたら、写真を中央に配置できるか調べて見たのでメモします。

 

 

このブログでの画像(写真)使用の条件の確認

まず、このブログでの基本的な画像の使用方法についてですが、レイアウトはどうでもいいので、全ての画像(写真)は中央配置になればそれでOK。

そのため、いちいち画像(写真)を投稿するたびに、写真の位置を選択しなくて済む方法として、投稿すると自動で中央配置になる方法を選択。

 

 

設定そのものを変更する

上記の内容から、写真を投稿したら全て中央に配置すれば解決します。

そうなると、ブログに写真を乗せた時点で中央配置しかない選択でよい訳です。

そこで、ブログのレイアウト自体の設定を変更することにしました。

 

ただ、この場合の前提条件として、レスポンシブデザインのテーマを使用する必要があります。

 

対応してないと、パソコンでの表示は中央になっても、スマホで見ると中央に表示されません。

 

当初それを知らず、スマホから見たら写真が端っこに・・・

 

調べ直したらレスポンシブデザインではなかったので、みなさんは気をつけて下さい。

 

 

 

CSSに追加記述

通常、ブログやホームページの見た目の形は、CSSというもので行います。

 

CSSとは見た目(デザイン)を指示する値のことです。

 

簡単に言えば、ブログの部品のようなもので、ブログの見た目を変えたい人は、このCSSの部分をさわって改造します。

 

ただ、私を含め「ど素人」が自分で直接改造すると、型崩れをして元に戻らなくなることもありますから、すでに使われているものをコピーして使うことが殆ど。

 

仮に、うまくいかなくても追加したCSSを削除し、元に戻せば元に戻ります。

 

その時に気を付けたいのが、どこに記述したか忘れないことです。

 

後述しますが、私の場合はコメントを付け加えてわかるようにしています。

 

 

まずは管理画面からデザインへ進む

はてなブログにもCSSをさわれる場所があります。

管理画面(ダッシュボード)を見るとデザインを押すとスパナのマーク(カスタマイズ)が見えます。

 

まずはダッシュボードからデザインを押す。

 

f:id:n2blog:20180106042817p:plain

 

次にスパナボタンを押す。

 

f:id:n2blog:20180106043256p:plain

 

 

パナマークを押すと、次に下の方に{}デザインcssというのがあるので、それを押します。

f:id:n2blog:20180106044041p:plain

 

 

するとすでに記述されているCSSの画面が出てきます。

 

f:id:n2blog:20180106044316p:plain

 

そこに記述された画面の最後尾に、下に書いている(画像を中央に配置するためのCSS)をコピーして貼り付けます。

 

ちなみ /*写真を中央に表示*/ と書いているのはコメントと言うもので、/* */で囲む部分はCSSの動作に影響が出ません。

 

なので、任意に何かメモ書きをしたいなら、この中に書いて下さい。

 

 

ーーこの下からコピーするーー

 

/*写真を中央に表示*/
.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

/*写真を中央に表示 終わり*/

 

ーーこの上までコピーするーー

 

 


するとこんな感じになります。

 

f:id:n2blog:20180106045233p:plain

 

そして、保存ボタンを押したら終了です。

よく、設定が反映しないということがありますが、保存のボタンを押さないことがよくあります。

また、ブラウザ(見てる画面)を設定後に更新しないと反映を確認がされないので注意が必要です。