スタイルシートをホームページやブログに適用するためにはデザインを考えてページに組み込むことが必要です。
文字サイズや文字の背景色、ページ全体の背景色・画像などページ全体にスタイルを適用するものと部分的に適用するものとで使用するタグ要素が異なります。
そのタグや要素の記述方法について基本をしっかり習得しておくことが大事だと思います。種類がたくさんありますので覚えるのが大変ですが、基本的な数種類を覚えておくだけでもサイトを構築するために役立ちますし効率化が図れます。
慣れてくれば徐々に身に付いてくると思うので心配はいりません。完璧性を求めていてはサイト構築は程遠く先の先になってしまいます。マニュアルを見ながらでも先に進めていくことをお勧めします。
スタイルシートの基礎編 メニュー
- スタイルシートの基礎「文字の大きさを変える」「文字の色を変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字の太さを変える」「文字の種類を変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字の背景色を変える」「文字を斜体に変える」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字を囲む枠線を使用する」「枠線と文字の間に余白を設ける」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「文字に下線を引く」「下線にスタイルを適用する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「リストを作成する」「リストにスタイルを適用する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「画像を挿入する」記述方法‐HTML・CSSを学ぶ
- スタイルシートの基礎「挿入した画像の位置を決める、文字を回り込ませる」記述方法‐HTML・CSSを学ぶ
説明でプロパティと値については次のページで説明しています。
画像を挿入する
サイトの構成文の途中に画像を配置すると閲覧者から見た場合、気持ちが和んだり気分転換できたりするので再び文字を読もうという気持ちを入れ替えることができます。
文字ばかりのサイトの説明文では途中で集中力が続かず、気持ちが変わりサイトを離れたりすることも度々ですね(笑)。集中して読もうと思うのは余程興味を惹かれるものか閲覧者の求めている内容だったり限られた文章だと思います。
閲覧者に少しでも読んでもらいたい思いで文章を書くのであれば、画像の挿入や気分転換できるツールを用意するなどちょっとした工夫が必要です。
画像を挿入するには、img要素を使用します。インライン要素として分類され、開始タグのみで終了タグは有りません。
imgタグについては下記のページでも触れていますので参考にどうぞ
ホームページを構成する代表的な要素「hr」「blockquote」「strong、a、img」などを組み合わせてホームページが作られる‐HTML・CSSを学ぶ。
img要素のHTML記述例
<h1>ここに主見出しを入力します</h1>
<p>
<img src="bluesky.jpg" width=360" height="240"
alt="画像のタイトル"><br />
ここに文字を入力します。<br />
</p>
img要素の説明
img src="bluesky.jpg" /*画像の場所・URLを指定しています*/
width="360" /*画像の幅*/
height="240" /*画像の高さ*/
alt="画像のタイトル" /*画像が表示されなかったときに表示する文字*/
<br /> /*改行します*/
ここに文字を入力します /*画像の対する本文を記入します*/
<br /> /*改行します*/
ブロガーBloggerのツールを使用し画像を挿入する方法
- ブロガーBloggerのツールバーで「画像を挿入」をクリックします。
- メニューから「パソコンからアップロード」を選択しクリックします。
- 画像の追加画面になるので「ファイルを選択」をクリックします。
- 画像の保管場所を開き目的の画像を選択し「開く」をクリックします。
- 画像の追加画面に戻り、画像が表示されているのでその画像を選択（クリック）し「選択」をクリックすると目的の画像が表示されます。
0 件のコメント:
コメントを投稿