いまいちど

子育てパパの雑記ブログ

はてなブログで画像の位置や大きさを簡単に変更する方法!

スポンサーリンク

こんばんわ。いっしーです。

記事を書くのも画像を挿入するのも慣れるまでが意外と大変です。さて何を書きましょう?の前にまずやり方がわかりません。これだと時間がもったいないなぁと思うんです。

出来る限り時間をかけないように作業したいので、今後のためにも毎日一記事書くごとに何か一つ覚えればいつの間にか成長します。1記事につき1スキル獲得!素晴らしい。ぱちぱちぱち

ところで画像の位置を変更したいと思ったことはないですか?自論になりますが画像を中央揃えにすることで見た目が素晴らしくなる。これだけですが見た目は重要です(笑)

見たまま編集モードで画像位置や大きさの変更を簡単に。

 

まず先に紹介するのはコレ

全ての記事の画像を一発で中央に寄せるCSS

f:id:hometaka5657:20171006012221j:plain


デザインCSSで全ての画像を中央揃えに!

.hatena-fotolife, .http-image {
display: block;
margin: 0px auto;
}

デザイン→カスタマイズ→デザインCSS。コピペするだけでOKです。

ただ、もしかしたら左寄せや右寄せにしたい場合がこの先あるのでは?と思う方に先に言いますと、このCSSを使用すると左寄せや右寄せは無効化されます。


・因みに手動でHTMLにタグを使用するならこう。

<div style="text-align: left;">
画像のリンク
</div>

f:id:hometaka5657:20171008111112j:plain

<div style="text-align: center;">
画像のリンク
</div> 

f:id:hometaka5657:20171008111112j:plain

<div style="text-align: right;">
画像のリンク
</div>

f:id:hometaka5657:20171008111112j:plain



それだと嫌だなぁという方にはこちらがおすすめ

Chorome拡張機能で画像を中央に寄せる技

はてなブログ編集用のChrome拡張機能です

chrome.google.com

まずはインストール。
こちらのページで「Chrome」に追加してもらいますと

f:id:hometaka5657:20171013225959j:plain

・右上にこのようなアイコンが出現!(赤枠)
・更にこれをクリックしてもらうと

f:id:hometaka5657:20171013230407j:plain

これ!ワンクリックで画像を左・中・右と移動することが可能です。

使い方は簡単

見たまま編集でお願いします。画像を記事に挿入して、記事内の画像をクリック。すると青くなります。

f:id:hometaka5657:20171013231244j:plain

この状態で先程の拡張機能の位置変更ボタンをクリック。そうすると左~右まで自由に移動することができます。画像だけではなく文字も移動可能です。

テキストも左へ

f:id:hometaka5657:20171008112025j:plain

テキストも中央へ

f:id:hometaka5657:20171008112025j:plain

テキストも右へ

f:id:hometaka5657:20171008112025j:plain

ここまで手軽にできれば作業もきっとはかどるかと思います。ちなみにCSSで全ての画像を中央揃えにする技を先に記載しましたが。あのコードを使用するとこちらの機能は無効になってしまいますのでお気をつけ下さい。

画像の大きさ変更

色々やり方がありますが、はてなフォトライフに画像をアップロードするついでに変更できますよね。

f:id:hometaka5657:20171013232913j:plain

赤枠の数字を変えてチェックするだけですが。800だと、でかいです。。。

ざっくりで良い!という方であれば、先程のように画像をクリックして青くなった状態で、角にカーソルを合わせて移動させると視覚的に大きさを変えられます!

f:id:hometaka5657:20171013234837j:plain

画像の大きさは統一すると綺麗にまとまってみえるので、できれば数字で合わせることをお勧めします!

まとめ

他にも色々方法はあるかと思いますが、これらを活用して少しでも作業効率に繋がれば!と思います。

今回ご紹介したChrome拡張機能ですが、この他にも多々使い方がありまして、記事を更新していく中できっと役立ちます。

f:id:hometaka5657:20171013232917j:plain

詳しくは下の「使い方説明」にありますので、まだ使用してないのであればこの機会に是非。