ふぉれすと@埼玉のブログ一覧

スタイルシートのカスタマイズ第1回は、「基本的な書き方」です。

スタイルシートは、基本的に次のような書式で記述されています。

「セレクタ { プロパティ : 値 }」

セレクタとは、どの要素に対してスタイルを適用させるかを指定する部分です。この部分でスタイルの適用対象を示し、それに続く「{～}」の中に適用させたいスタイルを記述します。

プロパティとは、セレクタで指定した要素に適用するスタイルの種類を示す部分です。これに続けて「:」記号と値を記述することでスタイルを設定できます。

スタイルは、「;」で区切って複数指定することもできます(^^♪

例えば、全体の背景色や背景画像を変更するとしたら下記のように記述します。

色の場合！　body { background : #FF0000 }

これは、BODYタグに背景色(background)は赤色(#FF0000)を設定する場合の記述です。青なら#0000FFです(^^♪

画像の場合！　body { background : url(画像のある場所を指定)}

これは、BODYタグに画像を指定する場合の記述で、カッコ内の画像のある場所を確認するやり方は、こちらを参照

第1回は、基本的な記述の方法と背景色についてでした。次回はなんにするかな(^^ゞ

追記：色の指定方法について
今回の背景色の指定方法は16進数で指定してますが、多分色の名前でもOKだったと思います。

ホームページやブログにアクセス解析「忍者TOOLS」をつけています(^^ゞ

僕のページに訪れてくれる検索キーワードで、一番多いのが「BD5」で、2番目が「KSR」です。

しかし、最近になって上位に上がってきた検索キーワードがあります♪それは、「みんカラ スタイルシート」です(^^ゞ

ここまでスタイルシートで検索する人が多いなら今後のネタに出来そうなんでシリーズ物として小出しにして行こうかな(^^♪

そして上位ではないですが、面白いキーワードで「みんカラ キーワード 検索エンジン」で僕のページに訪れた方もいます。

最近はみんカラが熱いんですね(^^ゞ

近日中にスタイルシートについての記事を書いてみます♪お楽しみに

レガシィネタとは関係ありませんが、ブログの記事に2枚目以降の画像を追加する方法を今回はネタにしてみます^_^;

まずはじめに2枚目以降の画像を、ブログ記事以外の場所へUPする事からやって行きます。

僕の場合だと、1つのブログ記事に複数の画像を表示させたい場合は2枚目以降の画像をフォトギャラリーにUPして行きます。
※基本的にURLがわかるなら何処にUPしてもOKですよ♪

目的の場所へちゃんとUPできたら確認してみましょう(^^)ここではフォトギャラリーにUPしたとして話していきます。UPした画像(写真の青枠)をクリックすると画像のブラウザが開きます。
※確認できたら開いたブラウザは閉じてもOKです。

次にUPした画像(写真の青枠)を右クリックするとメニューが表示されるので、その中の一番下にある[プロパティ]をクリックします。すると「画像のプロパティ」が表示されます。(写真中央)

そのプロパティ画面の[アドレス(URL)](写真の赤枠)をコピーしておきます。
※コピーはURLの場所をドラッグして右クリックのコピーでもOKですし、ショートカットキーの[Ctrl]+[C]でもOKです。コピー終了後はプロパティ画面は閉じておきましょう。

ここからいつものようにブログ記事を書いていきます(^_^;)

ブログ記事内で画像を入れたい場所に下記のHTMLを記述します。

---------------この下から-------------------

<a href="コピーしておいたプロパティ画面のURL(写真の赤枠)" target=_blank border="0"><IMG class=pict src="コピーしておいたプロパティ画面のURL(写真の赤枠)" width="画像の幅" height="画像の高さ" align="画像の配置" border="0"></a>

----------------ここまで--------------------

HTMLを記述する事が出来たら完成です。

▼上記HTML記述の簡単な説明です
最初の<a href="URL(写真の赤枠)" target=_blank border="0">と最後の</a>は、ブログ記事内に配置した画像をクリックすると別ブラウザで表示する記述です。

中の<IMG class=pict src="URL(写真の赤枠)" width="幅" height="高さ" align="配置" border="0">はブログ記事内に画像を配置(表示)する記述です。その中で「width="幅"」と「height="高さ"」はブログ記事内での画像の幅と高さを設定します。

基本的にみんカラのブログに表示される1枚目の設定が幅220ピクセルそして高さ165ピクセルなんでそれと同じがおすすめですね。
※画像の幅と高さは、4：3の比率で決めた方が良いですね(^^)

そして画像の配置(左右)を決めるのが「align="配置"」で左側に配置する場合は「align="left"」で右側に配置する場合は「align="right"」に設定します。

ちょっとわかりにくいかもしれませんが、わからない所はコメントに質問して下さい。