【貼り付け、サイズ変化、画像位置】ブログで初心者が画像のやり方に躓いた。
「文章だけじゃわかりにくい」
はてなさんの「新着記事」や「おすすめ記事」を見ていると
文章ばかりで見づらいものが多い印象を受けます・・
画像を使って記事を書くことで、
分かりやすさ・見易さが倍増するのでオススメします！
完全初心者向けの内容なので
「そんなのわかってるわ！」って方は申し訳ありません(^^;)
画像を記事にあげる方法
ネットなどで探した画像を、自分が差し込みたい
記事の位置でカーソルを持って行き「コピー＆貼り付け」を
行うのが一般的なやり方だと思います。
なので、ここでは「はてなブログ」の機能で説明させていただきます＾＾
記事を作成する場合、上のような画面になっていると思います。
そこで、赤枠の所をクリックしてみると・・・
「写真を投稿」をクリックして
自分のPC内にある好きなファイルをアップロードしましょう。
これで写真の挿入は完了です！
本当に画像を入れるだけで見易さが違うので
今まであまり使ったことがなくても試してみてください！
画像サイズを変える方法
コピーをしてきたり、画像をアップロードをしてみて
実際にプレビュー画面を見てみると、思っていたサイズと
ズレがあることがあるとおもいます。
ここで、自分好みに調整できるようにしておけば、
記事のレイアウトも大分変わると思います＾＾
目分量でサイズを変化
まずは、挿入した画像をクリックします。
四隅に表示されるハンドル（□）をドラッグすることで画像のサイズが変わります。
大まかにサイズを変更する場合は、
この方法だけ覚えておけば大丈夫だと思います。
数値を指定して厳密に変化
僕はそこまでこだわりがないんですが、
画像全ての横幅をきっちり揃えたい、という方もいらっしゃると思います。
その場合は、「html編集」にて画像の大きさを数値で指定しましょう。
ここでは、図の画像を調整していきたいと思います。
「HTML編集」をクリックして、編集方法を切り替えます。
初見だと見るからに圧倒される文字の羅列・・・（笑）
赤枠の<img で始まるのが画像を表すコードです。
そして、この画像を示す文字群の最後にwidth='360'
というコードがあると思いますが、
この部分が画像の横幅を表しているわけです。
この数字をすべて同じにすることで、
記事内の画像をピシッと揃えることが可能になります＾＾
※はてなブログの場合、ドラッグで大きさを調整していない限り、「width-360」の横幅を表すコードがHTMLに出ないそうです。なので、最初にドラッグで適当に大きさを変えて、数値を変えてみてください。
画像の位置を変える方法
「画像の横の空白が気になる」
画像を挿入すると、左詰めで配置されますので、
サイズによっては右側の空白部分が気になってしまうと思います。
そんなときのために、今回は画像を「中央に配置」する
HTMLをお伝えしたいと思います＾＾
画像サイズの変更と同じように「HTML編集」のページに行きます。
ここで<img で始まる画像のコードがあると思いますので、
そのコードを<center>と</center>で挟みます。
プレビューにて確認してみてください。
大分見栄えが変わてくると思います＾＾
最後に
いかがだったでしょうか？
ビジネスマンでも図やグラフを使わずに
報告書やプレゼンを行う方がいますが
非常に分かりにくいです。
ブログも相手に伝えるという意味で
全く一緒だと思いますので、見やすい画像を
自分なりにアレンジしてみてください！
他の記事も併せて読んでみてください＾＾
関連記事
-----------------------------------
読者募集中です＾＾
励みになりますので、ぜひクリックお願いします！
-----------------------------------
