はてなブログで使える【画像チートBOX】

こんにちわ(^^♪

難しいを簡単にしたい・・・かまさんです。

ブログを書いているみなさんは画像の張り付けってどうしてますか?

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

そんなときに使えるチート画像BOXを作成しました(^^♪

※チートと言いましたが、ただ使い勝手がいいというだけですm(__)m

使い勝手がいいBOX

画像のサイズ変更ってartナンチャラでも出来るみたいなんですけどちょっと難しいなって思っている方いますよね?

BOXサイズ変更=画像サイズ変更

になったらすごく簡単だとおもいませんか?

難しいを簡単にしたい精神ですぐにチートBOXを作成!(^^)!

※かまさんは・・・CSSHTMLの勉強を始めたばかりです。難しいことはわかりませんが同じようなことで悩んでる人の為になればと日々、奮闘中です。

今回は、はてなブログの記事編集内で使うためのチート画像ボックスになります(^_-)-☆

スタイルタグでCSS&HTMLをまとめて記述

スタイルタグは<style><!--〇--></style>〇部分にCSS記述をしてそのままHTMLと使用できるものです。

使い方は簡単

手順①:まずは、⇩の記述をまるっとコピーしましょう。

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

手順②:はてなブログの記事編集画面で【HTML編集】に切り替えて、まるっと全部張り付けるだけ(^^♪

手順③:<P>画像URL</P>を入れたい画像URLに変更する(^^♪

なんとたったこれだけ(^^♪

※はてなブログでは<span>と<p>のタグが一緒に入ってしまいます。もし、余計な余白が出来てしまうときはけしてあげましょう。

画像サイズの変更方法

3行目のwidth: 60%;ここの数字を変更するだけで画像の大きいさを変えることができます。

オリジナル画像をそのまま小さくしたり、大きくしたりできるんです(^^♪

まさにチートBOXですね・・・(-_-;)

ちなみに【WordPress】のHTML編集でも同じように使うことができました(^^♪

お勉強アイテム紹介

只今、かまさんはHTMLとCSSを勉強中です。

お小遣いをはたいてこちを購入してしまいました・・・

はい‼【HTML&CSS全辞典】(^^♪

今まで辞典なんて買ったこともなかったのに(-_-;)

自分で自分にビックリです( ゚Д゚)

現状では知らないことしかないので勉強だと思ってます(^^♪

自慢できる学歴もないので、簡単な単語も出てこない自分には必須アイテムになってます。

っと(-_-;)ちょっと宣伝(+_+)

でも単純に便利なのでオススメです(^^♪

※でも良し悪しは人それぞれなのでつられて購入しても責任はとれません(^^♪

今回は以上です。

誰かの記事編集に役立てたら幸いです(^^♪

コメント

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