【はてなブログ】初心者でも簡単に出来る！画像を中央寄せする方法

 

こんにちは！

はてなブログの見たまま編集モードって実に

優秀だなって思います。

ほかでブログを書いている方のレビューなどを見ているとはてなは便利で書きやすいという言葉をチラホラみかけます。

自分は仕事の休憩中にバァーって書いてしまうので記事のメインはスマホで書いているのですが

この見たまま編集モードはスマホで書く際に

本当に便利で非常に助かっています。

はてなブログ特有の画像つきリンクはPCからでしか無理ですが、それ以外はほとんどスマホ

で書くことが出来ます。

例えばスマホにはアンダーラインを書く機能はないですが、これを見たまま編集モードでuタグでくくってまるっとカットしてそのままHTML貼り付けを行うと

<u>文章をここに</u>   ←まるっとカットしてHTML貼り付け

文章をここに

こんな風に簡単にできます。

ちなみにこのブログはアンダーラインを蛍光ペン風にカスタマイズしていますので蛍光マーカー風になってますがその辺りはご了承ください。

蛍光ペンのカスタマイズはこちら↓

www.simple-weblog.work

何より書きやすいので、いつでもどこでも

ブログが更新できるのがブロガーにとっては

最大のメリットです。

が、

画像の中央寄せが簡単に出来ない！！

ボタンポチーって押したらバーンって

カッコ良く中央揃え！みたいな感じの機能があったら

最高なのにな(^^;って思いながらも、まぁ

ニーズがそんなにないのかとも思ったりして…。

なので今回は画像を中央寄せにする方法を

ご紹介していきたいと思います。

全画像をまとめて中央寄せにする方法

色々と調べていたらCSSで一括設定する

方法と画像ごとに個別で設定する方法を紹介している記事がほとんどですね。なるほど。

で簡単にすぐに出来るCSSの設定方法

参考にしたのはこちらの記事↓

uriuridayo.hatenablog.com

ものの見事に一括設定されましたね。

非常に簡単です。

HTMLだけで画像を中央寄せ

でもCSSで全部を全部中央寄せにすると

ブログ構成のデザインもあるし…

何より自分の場合は細部もデザインにこだわりたいので個別に簡単に指定できないかな

と思っていたらありました！簡単な方法！

参考にしたのはこの記事↓

www.kennosuke-blog.com

pクラスで指定された<p></p>の部分を

<div align="center"></div>で囲うというやり方。

HTML編集でとっても簡単に出来ました。

で、先程も書きましたがスマホで記事を更新し続けるスマホbloggerの私にとっては

ここから発展させていこうではないかと。

見たまま編集モードでも出来ないかなということで実際やってみました

画像を用意して

(ちなみにこの画像は以前の記事の画像で、左による画像です)

<div align="center"></div>

①この画像の両脇を先程のコードでくくります。

②これをまるっとカット！！

③カットしたらHTML貼り付け！

すると

出来ましたー(☝︎ ՞ਊ ՞)☝︎！！

これで指定したい画像ごとにいつでも

中央寄せにすることができます。

思い立ったきっかけ

このブログを下にスクロールさせていくと、

プロフィール欄をご覧いただけますが、

サイドモジュールに既存ではない

オリジナルのカッコいいプロフィール欄を

作りたくて試行錯誤しながらやってみたんです

が、まずサイドモジュールにHTMLで画像を

貼り付けてみると、

デ、デカすぎる…(ｰ ｰ;)

なら小さくだと思ってpxを小さくして、

良しこれでオッケーと思ったら左に寄ってしまい、なんだかしっくりこない。んん…。

これで中央に寄ったら完璧なんだけどな。

と思ってそれからいろいろとやってみて

HTML編集だけで画像を中央に寄せる

ことができたときは感動ものでした。

なのでサイドモジュールのHTMLでデザインを

いじるときにこの画像編集や記事編集で

中央に寄せるやり方を覚えておくと

サイドモジュールのカスタマイズをやる際に

はスムーズにいくかなと思います。

まとめ

いかがでしたでしょうか？

スマホで中央寄せするやり方はかなり強引な

手段をとっていますが(苦笑)

覚えておいて損はないかと思います。

是非活用してみてください！

それでは今回は以上です。

ありがとうございました。