先輩…造船所勤務の溶接工。パチンコパチスロの資金は給料前借り
後輩…先輩と同じ会社の営業職。
、、、?
はい、もしもし。
あ、俺やけど。
ちょっと熱っぽいから、悪いんやけど今日行けそうにないわ。 急に悪いな。
そうですか~。
わかりました。お大(ガチャ)、、、事に。
…というわけで、
先輩は、パチンコで珍しく連チャン中のため今回は僕一人で、「はてなブログで画像を中央に配置する方法」を紹介します。
ええ、いつもの事なのでお気になさらないでください。
まずはビフォアーアフターを
こちらがビフォアー画面。画像を貼り付けすると左寄りで表示されます。
こちら⇩がアフター画面。
エクセルのように、ワンクリックがあると便利なのですが。
実は「はてなブログ」には画像を貼り付ける際に中央に配置される編集ボタン「キャプションを加える」が配置されています。
1.キャプションを加える
はてなブログの編集画面で写真を選択し、右下の「選択した写真を貼り付け」をクリック。
赤丸の「キャプション」にタイトルを入力し、必要に応じてalt属性を指定し貼り付け。
すると、
この機能が、はてなブログのキャプション機能。
しかし、このキャプション機能では、見た目にも、『やっぱりもう少し小さくしたいな、大きくしたいな』といった後から画像の拡大縮小は行えません。
使い勝手が悪いので別の方法を探すことに。
HTMLでcenterタグを使う
色々と調べたのですが、僕のようなCSSやHTML素人にはこの方法は敷居が高く、又、ブログ内すべての画像を一括で中央に揃えるには不向きです。
なので、次に紹介する「CSSで画像を一括で中央に揃える」に続きます。
CSSで画像を一括で中央に揃える
通常、ブログやホームページの見た目の形は、CSSというもので行います。CSSとは見た目(デザイン)を指示すること。
ただ、僕を含め「ど素人」が自分で直接改造すると、型崩れをして元に戻らなくなることもありますから、すでに使われているものをコピーして使うことが殆ど。
仮に、うまくいかなくても追加したCSSを削除し、元に戻せば元に戻ります。
その時に気を付けたいのが、どこに記述したか忘れないことです。
僕の場合は、このようにコメントを付け加えてわかるようにしています。
/*写真を中央に表示*/
.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}/*写真を中央に表示 終わり*/
このコードをコピーしておいて、次の手順で進みます。
まずはダッシュボードからデザインを押す。
①スパナのマーク➯②デザインCSS の順でクリック。
すると、すでに記述されているCSSの画面が出てくるのでクリックし、一番下にコードを貼り付けます。
左上の「変更を保存する」を忘れずにクリック。
よく、設定が反映しないということがありますが、保存ボタンを押さないことがよくありますので気を付けてください。
スマホでも反映させたいときは、この画面のスマホマークをクリックし、左下の「詳細設定」➯「レスポンシブデザイン」にチェックします。
以上、はてなブログで画像を中央に配、
悪ぃ悪ぃ、遅くなって。
あれ、先輩もう大丈夫なんですか?熱っぽいって言ってたのに
あ、あれだな。
一応言っておきますが、電話で人が喋ってるのに切らないでくださいよ。
ところでキッチリ勝ったんですか?
ああ、おかげさんでな^^
ならいいですけど。熱が出るって聞くとこのご時世ドキッとしますよ。
健康であればいいんですが、嘘ついてまでパチンコ打ってて、信用無くす人を今までさんざん見てきましたから。ほどほどにしてくださいよ。
え?マジで?
そんやつおるの?