goo

style属性を使用した画像の装飾(1/2)

2017-06-17 17:46:28 | gooブログ

更新日:2017/6/22


ブログやホームページの記事の内容によっては、文章や記事のレイアウトに合わせて、画像を装飾をしたい場合があると思います。

画像の装飾は、img 要素(インライン要素)、または、div 要素や p 要素(ブロックレベル要素)に、style 属性を指定して行います。
これは、ブラウザの機能を使ったもので、style 属性で指定された CSS (Cascading Style Sheets) を解釈して、表示(画像の装飾)を行います。

これまで、画像編集ソフトでなければできなかったことが、CSS の指定内容によって、ある程度可能になりました。
古いブラウザでは、CSS の指定内容に未対応な場合があるので、期待した効果が得られない時は、ベンダープレフィックスの記述で、解決する場合があります。

style 属性の記述は、各要素毎に行うので面倒な反面、使い分けができるので、知っていると便利だと思います。


1.画像のアップロードと画像サイズについて

予め、アップロードする画像は、ペイント(Windows の付属ソフト)やプレビュー(Mac の付属ソフト)などで、元の画像サイズ(幅 x 高さ:単位はピクセル)を確認しておく。

ブログの初期容量は 3GB で、余裕がありますが、

・容量の消費は、極力抑えたほうがいい
・画像サイズが小さいものほど表示が速い
・当ブログの記事の幅は 548 ピクセルなので、画像の幅は 548 ピクセル以下とする
(経験則から、中央寄せで、画像の幅は 320 ピクセルが、バランスが良いと思います。)


これらから、アップロードする前の画像サイズは、640 ピクセル x 480 ピクセルでしたが、ブログのアップロード時の「画像サイズ」を、長辺最大 320(旧縮小サイズ)ピクセルに設定して、装飾例は 1/2 にリサイズしました。

・幅:640 ピクセル → 320 ピクセル
・高さ:480 ピクセル → 240 ピクセル

この機能は、ペイントやプレビューを使わずに、アップロード時にリサイズできるので、とても便利です。

アップロードした画像サイズの確認は、「画像フォルダ」の「ファイル一覧」に、サムネイルで表示された該当画像の「拡大」をクリックすると、新しいウィンドウで画像が表示されます。
表示された画像をデスクトップに保存して、ペイントやプレビューなどで開いて、意図した画像サイズ(幅 x 高さ:単位はピクセル)であることを確認します。


2.画像の表示位置(中央寄せ・左寄せ・右寄せ)について

記事の幅よりも画像の幅が小さい場合、記事の幅に対する画像の表示位置は、「中央寄せ」「左寄せ」「右寄せ」が指定できます。
画像の表示は、「画像のみ表示」する方法と、「画像の下部にタイトルを表示」する方法を検討しました。

以下、goo ブログの TEXT エディターで解説します。
HTML エディターの場合、HTML ソースエディタで行います。

《1》記事に画像を配置

タブメニュー」の「画像タブ」から、アップロードしたオリジナルサイズの画像を配置する。
配置されると、(1)の様な img タグのみのコードが記述される。
この状態で「プレビュー(別)ウィンドウ」をクリックすると、画像は、左寄せで表示される。

(1).「"」と「>」の間にカーソルを移動する


ソースコード


(2).「半角スペース」と画像の「width="幅" height="高さ" alt="代替テキスト"」を入力する
「半角スペース」は区切り。幅と高さは半角数字(単位:ピクセル)。
代替テキストは、画像が表示できない時、表示されるテキスト。


ソースコード


《2》画像のみの表示

画像の下部にタイトルを表示する場合は、「《3》画像の下部にタイトルを表示」へ。
(1) 〜 (3) は「《1》記事に画像を配置 (2)」の手順から行います。

(1).「中央寄せ」で表示する場合


(a).img 要素をドラックして、「中央寄せ」をクリックする


ソースコード


(b).img 要素を挟んで、<div style="text-align:center"></div> が記述される
(注:文字数削減のため、この記事では div → p へ変更しています。)


ソースコード


(c).div の style の使用を考慮して、「"text-align:center"」へ追記する
「:」と「c」の間に「半角スペース」、「r」と「"」の間に「;」を入力する。


ソースコード


田舎の風景


(2).「左寄せ」で表示する場合


(a).img 要素をドラックして、「左寄せ」をクリックする


ソースコード


(b).img 要素を挟んで、<div style="text-align:left"></div> が記述される
(注:文字数削減のため、この記事では div → p へ変更しています。)


ソースコード


(c).div の style を使用するため、「"text-align:left"」へ追記する
「:」と「l」の間に「半角スペース」、「t」と「"」の間に「;」を入力する。


ソースコード


(d).div の style に「半角スペース」と「padding-left: 0em;」を記述する。
「padding-left: 0em;」は、画像の左の余白設定用です。


ソースコード


田舎の風景


(3).「右寄せ」で表示する場合


(a).img 要素をドラックして、「右寄せ」をクリックする


ソースコード


(b).img 要素を挟んで、<div style="text-align:right"></div> が記述される
(注:文字数削減のため、この記事では div → p へ変更しています。)


ソースコード


(c).div の style を使用するため、「"text-align:right"」へ追記する
「:」と「r」の間に「半角スペース」、「t」と「"」の間に「;」を入力する。


ソースコード


(d).div の style に「半角スペース」と「padding-right: 0em;」を記述する。
「padding-right: 0em;」は、画像の右の余白設定用です。


ソースコード


田舎の風景


《3》画像の下部にタイトルを表示

画像のみ表示する場合は、「《2》画像のみの表示」へ。
以下の手順は、「《1》記事に画像を配置 (2)」の手順から行います。


(1).img 要素をドラックして、「中央寄せ」をクリックする


ソースコード


(2).img 要素を挟んで、<div style="text-align:center"></div> が記述される
(注:文字数削減のため、この記事では div → p へ変更しています。)


ソースコード


(3).div の style を使用するため、「"text-align:center"」へ追記する
「:」と「c」の間に「半角スペース」、「r」と「"」の間に「;」を入力する。


ソースコード


(4).div の style に「半角スペース」と「width: 320px;」を入力する
img で指定した width と同じ値を入力して、単位(px)を記述する。
「text-align: center; width: 320px;」は、画像の下部のタイトルを中央寄せするためです。
また、img 要素の直後に、改行(<br> または <br />)の入力を省略する。


ソースコード


(5).</div> の前に、画像のタイトルを入力する


ソースコード


(6).「中央寄せ」または「左寄せ」または「右寄せ」で表示する


(a).「中央寄せ」で表示する場合
div の style に「margin: auto; 」を記述する。
末尾の「;」の後にある「半角スペース」も忘れずに記述する。


ソースコード


田舎の風景〔田舎の風景〕


(b).「左寄せ」で表示する場合
div の style に「margin: 0 auto 0 0; padding-left: 0em; 」を記述する。
末尾の「;」の後にある「半角スペース」も忘れずに記述する。
「padding-left: 0em;」は、画像の左の余白設定用です。


ソースコード


田舎の風景〔田舎の風景〕


(c).「右寄せ」で表示する場合
div の style に「margin: 0 0 0 auto; padding-right: 0em; 」を記述する。
末尾の「;」の後にある「半角スペース」も忘れずに記述する。
「padding-right: 0em;」は、画像の右の余白設定用です。


ソースコード


田舎の風景〔田舎の風景〕



文字数の関係で記事を分割しています。「style属性を使用した画像の装飾(2/2)」へ続く





《2017年6月22日:追記》
画像の下部にタイトルを入力する場合、img 要素の直後の改行(<br>)の入力省略、および、margin の指定方法変更による文字数削減に伴う、ソースコードの画像の差し替え、および、関連箇所の加筆・修正。
ソースコードの画像のスクロールを枠外にした。
goo | コメント ( 0 ) | トラックバック ( 0 )
 
コメント
 
コメントはありません。
コメントを投稿する
ブログ作成者から承認されるまでコメントは反映されません
 
名前
タイトル
URL
コメント
コメント利用規約に同意の上コメント投稿を行ってください。
数字4桁を入力し、投稿ボタンを押してください。
 
この記事のトラックバック Ping-URL
 


ブログ作成者から承認されるまでトラックバックは反映されません
 
・30日以上前の記事に対するトラックバックは受け取らないよう設定されております
・送信元の記事内容が半角英数のみのトラックバックは受け取らないよう設定されております
・このブログへのリンクがない記事からのトラックバックは受け取らないよう設定されております
※ブログ管理者のみ、編集画面で設定の変更が可能です。