はてなブログで使える画像チートBOX初心者でも自由自在に画像縮小

かまさん
かまさん

こんにちは♪

ぶろぐ初心者、プログラミング初心者時代に書いた記事を添削・・・修整しています。

かまさん
かまさん

書いた事は覚えていたけど、凄い有様でした。

この記事を読むと下記の事がおそらく学べます。

  • はてなブログでの画像の使い方
  • はてなブログで簡単に画像を縮小する方法
かまさん
かまさん

当初の僕には画期的な発見・・・

はてなブロガーのみなさまんは記事に差し込む画像の張り付けってどうしてますか?

そのまま張ると大きすぎて見た目がよろしくないものもあると思います。

かまさん
かまさん

そんなときに使えるチート画像BOXです。

くにもん
くにもん

ちなみにかまさんは今でも一応はてなブロガーらしいです。

画像縮小を簡単にする方法

かまさん
かまさん

WordPressではドラッグするだけで出来るから必要ないものです。

ですがはてなブログや他のブログサイトを使っていると出来ない事もまちまちで、HTMLやCSSの事を知らないときはちょっと難しいんですよ。

かまさん
かまさん

チートって言ってますが、ただわかりやすく簡単にするだけです。

画像をサイズ変更する方法

画像のサイズ変更をするときは画像に含まれる属性を使って変更したりしますが、そもそも記述の仕方がわからないことも多いです。

かまさん
かまさん

僕も最初はさっぱりでした。

そこで考えたのがBOXサイズ変更=画像サイズ変更だったんです。

かまさん
かまさん

まぁなんにも知らなかったんで・・・

CSSやHTMLといったものは、プログラミングの世界でいえば割と簡単な方ですが、初心者には呪文にしか見えません・・・

かまさん
かまさん

難しい事を少しでも簡単に精神でこのチートBOXを作成しました。

画像チートBOX

今回のチートBOXは、はてなブログの記事編集で使う為に考えましたが、CSSとHTMLが変更、編集できるものであればどこでも使えます。

チートBOXを使う為に用意するものは画像URLと言われるものだけです。

かまさん
かまさん

記述はこの記事内に用意しているのでコピーするだけ!

画像チートBOXの使い方

かまさん
かまさん

画像の準備ができていれば下記の記述をコピーします。

<style><!--
.gazoubox1{
width: 60%;
height: auto;
margin: 0px;
}
gazoubox1 img{
width: 99%;
object-fit: contain;
}
--></style>
<div class="gazoubox1">
<p>画像URL</p>
</div>
かまさん
かまさん

この記述はスタイルタグを使ってCSSもHTML内に書き込めるようにしたものです。

スタイルタグって?

スタイルタグは<style><!–○–></style>と記述して、〇の部分にCSS記述ができるようにしてくれるとても便利なものです。

このスタイルタグを使えばデザイン等もHTML編集だけで確認することが可能になります。

かまさん
かまさん

ホント便利だから初心者さんにおすすめします。

チートBOX使用手順

かまさん
かまさん

使用手順は下記のようになります。

  • 画像URLの準備
  • 上記紹介記述をコピー
  • HTML編集に貼り付け
  • 画像URLの差し替え
  • サイズの変更(任意)
かまさん
かまさん

たったこれだけ!

まず、画像URLが準備出来ていれば、上記で紹介した記述をHTML編集の画面でコピペします。

その後、下記画像のように[画像URL]と記入してある部分を差し込みたい画像URLへと変更します。

これで[見たまま編集]へ切り替えると、画像と、見えないBOXが設置されます。

画像サイズの変更手順

かまさん
かまさん

今のままでは画像がちょっと小さいです。

サイズを変更したいときは記述の3行目にあるwidth: 60%;の数字を変更するだけで画像の大きいさを変えることができます

<style><!--
.gazoubox1{
width: 60%;
height: auto;
margin: 0px;
}
gazoubox1 img{
width: 99%;
object-fit: contain;
}
--></style>
<div class="gazoubox1">
<p>画像URL</p>
</div>
かまさん
かまさん

簡単でしょ?

これで、オリジナルの画像リサイズが簡単になったと思います。

あとがき

かまさん
かまさん

画像に無駄な余白ができることがあります。

はてなブログでは画像を差し込むとURLの他に<span>と<p>のタグが一緒に入ってしまっている場合があるので、もし余計な余白が出来てしまうときはこのspan>と<p>をけしてあげると余白は最小になります。

テーマ等で余白がつくられている場合は対応出来ないので、それはテーマの記述変更が必要になります。

かまさん
かまさん

今回の画像チートBOXはここまでです。

HTML&CSSの勉強!

かまさん
かまさん

HTMLとCSSはそれほど難しいものではありません。

プログラミングと聞くと難しいと思うかもしれませんが、正直ピンキリです。

かまさん
かまさん

何をしたいか(目的)で学ぶ場所がまったく違います。

僕がプログラミングの勉強を始めて、1番最初に取り組んだことはブラウザ表示されているものの元です。

かまさん
かまさん

それがHTMLとCSSだったというだけです。

HTMLとCSSは使い方さえわかっていれば後は単語の問題です。

良く使うものはすんなり出てきますが、たまにしか使わないものなんてまったく覚えていません。

かまさん
かまさん

下記の本を一冊づつ持っておけばオッケー!

かまさん
かまさん

完全に辞典です。

覚えていたら必要はないですが、毎回検索するのは面倒なので凄く役立ちます。

かまさん
かまさん

入門編です。

まずは、ここからです。

かまさん
かまさん

実践編です。

ここまでくるとできる事が大幅に増えます。

CSSとHTMLでは何が出来るのか、どこまで出来るのかがわかってくると次に必要な事がわかってきます。

かまさん
かまさん

結構楽しくなるのもここからだと思います。

次にやりたい事がどんなことなのかで選ぶ教材は変わってきますが、正直難しいです。

かまさん
かまさん

CSSとHTMLだけでメニューバーやカルーセルも作る事が出来ます。

かまさん
かまさん

上記は僕の次の教材です。

僕は基本的に知識がほしいくせに勉強は嫌いです。

レベル的な段階を言えば、算数から数学にななります。

元がないとまったく理解できないので、段階を踏んで勉強することをおすすめします。

かまさん
かまさん

1番大事なのは自分にあった教材(本)を見つける事!

この記事の筆者は勉強を始めて1年くらいです。

まだまだ、わからないことだらけですが誰かの???を解決出来たら幸いです。

かまさん
かまさん

最後までお付き合いいただきありがとうございます。

コメント

タイトルとURLをコピーしました