CSS編集 yozoの気が向いたと記2.0

CSS編集の記事一覧

2008/08/28 スポンサーサイト
2006/11/14 画像を右に配置して、そのとなりの文章を枠線で囲む。（CSS編集）
2006/11/03 CSS編集をしましょう
2006/11/02 画像を左に配置してそのとなりに文字を書く。（CSS編集）
2006/10/26 画像の枠線を設定しましょう（CSS編集）
2006/08/16 プラグインや最新のコメントなどにスクロールバーを設置する

2006年11月14日

画像を右に配置して、そのとなりの文章を枠線で囲む。（CSS編集）

　画像を右に配置して、そのとなりに文章を書くことができるように設定してみましょう。それに加えて、文章で強調したい内容を枠線で囲んで、見やすい位置に配置する設定についてもまとめてみました。
　この記事は画像を左に配置してそのとなりに文字を書く。（CSS編集）という記事の続編記事です。また、CSS編集の方法については、CSS編集をしましょうを参照してください。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。

画像を右に配置して、そのとなりに文字を書く。（文字の回りこみ。）

　記事の右に画像を置いて、その左側に文字を書きたいときは、float:right;とします。
これは画像を右(right)に配置して、文字はその画像に回り込ませるという指定です。
そして、文字の最後は、clear:both;で回り込みを解除します。

CSS編集で追加するコード

※imgleftとclearについては、画像を左に配置してそのとなりに文字を書く。（CSS編集）で追加しています。すでに追加されている方はimgrightだけを追加してください。
/*画像の回り込みの設定*/
.imgleft
{
float:left;
}
.imgright
{
float:right;
}
/*文字の回り込みの解除*/
.clear
{
clear:both;
}

この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="imgright" />回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。

---------別の方法---------

<div class="imgright"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。

→
「右側のさせていただきました」
画像を左側に配置するのは、
記事にしていたけど、右側は、
まだ記事にしてなかったもんね♪
お待たせしちゃてごめんなさい♪
(_ _(--;(_ _(--; ﾍﾟｺﾍﾟｺ

これで回り込みが解除されました。

文章を枠線で囲み強調してみましょう。（画像を左に配置）

　枠線で囲む部分について、体裁を設定しましょう。そして記事には

<div class="leftfrm">枠線内の文字</div>

　のように記入します。

background-color: #FFFFFF;→枠線部分の背景色の設定をします。
margin : 10px 20px 15px 150px;
　枠線部分の配置はmarginで調節します。
margin :上右下左;で設定されているので、画像（幅130px）の右側の文章を枠線で囲む場合は、例えば『上の行から10px、右端から20px、下の行まで15px、左端から150px』としました。
※このまま使用してくださっても構いませんが、右端から20pxや左端から150pxについては、ご自分の記事に合わせて調節した方が見やすく配置できます。m(_ _)m
padding: 5px;→枠線内の文字と枠線との余白を調節します。
border-style: solid;→枠線の線種
border-width: 2px;→枠線の太さ
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;→枠線の色

CSS編集で追加するコード

/*左側に画像、右に枠線囲み*/
.leftfrm
{
background-color: #FFFFFF;/*背景色*/
margin : 10px 20px 15px 150px;/*配置*/
padding: 5px;/*枠内の余白*/
border-style: solid;/*線種*/
border-width: 2px;/*枠線の太さ*/
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;/*枠線の色*/
}

この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="imgleft" />回り込みさせたい文字回り込みさせたい文字回り込みさせたい文字<div class="leftfrm">枠線内の文字</div><br class="clear" />これで回り込みが解除されました。

---------別の方法---------

<div class="imgleft"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>回り込みさせたい文字回り込みさせたい文字回り込みさせたい文字<div class="leftfrm">枠線内の文字</div><br class="clear" />これで回り込みが解除されました。

←
「alt="画像のBlogPetの文字
(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
imgタグのalt属性のことも大切だよね♪

うさもは、yozoの気が向いたと記2.0のyozoんちのこうさぎです。

これで回り込みが解除されました。

文章を枠線で囲み強調してみましょう。（画像を右に配置）

leftfrmのmarginだけを調整します。
margin : 10px 155px 15px 20px;
　右側に配置された画像（幅130px）の左側の文章を枠線で囲むので『上の行から10px、右端から155px、下の行まで15px、左端から20px』としました。
※このまま使用してくださっても構いませんが、右端から155pxや左端から20pxについては、ご自分の記事に合わせて調節した方が見やすく配置できます。m(_ _)m

CSS編集で追加するコード

/*右側に画像、左に枠線囲み*/
.rightfrm
{
background-color: #FFFFFF;/*背景色*/
margin : 10px 155px 15px 20px;/*配置*/
padding: 5px;/*枠内の余白*/
border-style: solid;/*線種*/
border-width: 2px;/*枠線の太さ*/
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;/*枠線の色*/
}

この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="imgright" />回り込みさせたい文字回り込みさせたい文字回り込みさせたい文字<div class="rightfrm">枠線内の文字</div><br class="clear" />これで回り込みが解除されました。

---------別の方法---------

<div class="imgright"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>回り込みさせたい文字回り込みさせたい文字回り込みさせたい文字<div class="rightfrm">枠線内の文字</div><br class="clear" />これで回り込みが解除されました。

→
呪文？ってヾ(￣o￣;)ｵｲｵｲ
確かに、この記事は呪文
だらけかもしれないね♪

うさもは、yozoの気が向いたと記2.0のyozoんちのこうさぎです。

これで回り込みが解除されました。

yozoからのお願い
　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

【画像を右に配置して、そのとなりの文章を枠線で囲む。（CSS編集）の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

2006年11月03日

CSS編集をしましょう

　ブログの壁紙やタイトル、記事内の文字飾り、画像の枠など見栄えを設定するのがCSS（Cascading Style Sheets）編集の目的です。この記事では、CSS編集に必要な最低限必要な知識をちょっとまとめてみました。習うより慣れろ！で一緒に楽しみましょう♪

各部分の名前

<div class="sango_title">各部分の名前</div>を例にとって各部分の名前を確認しておきましょう。といってもそんなにこだわることはありませんから安心してください。
（ここは読み飛ばしてもいいと思います。ヾ(￣o￣;)ｵｲｵｲ）

要素 <div class="sango_title">各部分の名前</div>
タグ <div class="sango_title">各部分の名前</div>
属性 <div class="sango_title">各部分の名前</div>
属性名 <div class="sango_title">各部分の名前</div>
属性値 <div class="sango_title">各部分の名前</div>
要素内容 <div class="sango_title">各部分の名前</div>
要素名 <div class="sango_title">各部分の名前</div>

要素について

ここについても色々な要素があって大きく分けて２種類あるんだって程度でいいでしょう。

ブロックレベル要素
h1～h6(見出し)、div（範囲）、ｐ（段落）、blockquote（引用）、table（テーブル）、ol（番号付きリスト）、ul(番号なしリスト)、form（フォーム）など一つのまとまった単位になっている要素のことです。
インライン要素
a（アンカー）、span（範囲）、q（引用）、abbr（略語）、img（画像）、object（オフジェクト）、input(フォームの入力用部品)、select（メニュー）、textarea（複数行の入力フィールド）、label（ラベル）など行の一部として使われる要素のことです。

※img、input、object、select、textareaなど要素自体が特定のもので置き換えられるものは置換要素と呼ばれています。

CSSの書式

この部分も名称は特に気にしなくても構いませんが、書式はしっかり覚えておきましょう。
すべて半角英数文字です。.（点）、空白、:(コロン)、;(セミコロン)などもすべて半角英数文字で記入しましょう。

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

＜例１＞

.imgright{float:right;}

＜例２＞改行を入れて見やすくしてもかまいません。

.imgright
{
float:right;
}

コメントアウトについて

コメントアウトは便利ですから、しっかり覚えておきましょう。
※コメント　ここでのコメントとはブログのコメントと別の意味になります。プログラム文の中に書いても、無視される文のことを意味します。

/*～*/の間に書いた文章やコードは表示には影響しません。このように無効化することをコメントアウトといいます。CSSコードを追加したり変更したりするときには、その目的や注意事項などのメモをコメントを利用して書いておくと、わかりやすいコードになります。

＜例＞

/*画像の回り込みの設定*/
.imgright
{
float:right;
}

FC2ブログでCSS編集をする方法

参考までに、ここのブログFC2ブログでCSS編集をする場合の方法を案内しておきます。

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
「ダウンロードしたテンプレートの一覧」の表の中で、「現在設定されているスタイル」の[ 編集 ]をクリックします。
「テンプレートの編集」にある、「スタイルシートの編集[テンプレート名]を編集しています。」の欄の中で編集します。キーワードがわかっているのなら、[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにキーワードを入力して、検索すると編集がスムーズにできますよ♪
- 必ずバックアップしましょう！
　いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「css_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
[プレビュー]で編集状況を確認して。完了したら、[更新]をクリックしましょう。

FC2ブログでHTML編集をする方法

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
「ダウンロードしたテンプレートの一覧」の表の中で、「現在設定されているスタイル」の[ 編集 ]をクリックします。
「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中で編集します。キーワードがわかっているのなら、[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにキーワードを入力して、検索すると編集がスムーズにできますよ♪
- 必ずバックアップしましょう！
　いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
[プレビュー]で編集状況を確認して。完了したら、[更新]をクリックしましょう。

↓　ぽちっと応援お願いします♪ m(_ _)m

スレッドテーマ:カスタマイズ:ブログ

2006年11月02日

画像を左に配置してそのとなりに文字を書く。（CSS編集）

　ブログの記事を書くときには、文字ばかりでなく、画像を入れることが多いですね。ところが画像を入れたいのだけど、思ったところに画像を配置するのは、なかなか難しいと感じることはありませんか？（yozoはかなり苦労しています。）そいういうわけで、ちょっと画像の配置について考えてみることにしました。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。

はじめに

　通常、記事に画像を入れると左揃えになって、画像の続きに文字を入力すると、文字は画像の下にきます。

便利なんてのんきなことをいってますね♪┐( -"-)┌ﾔﾚﾔﾚ...

画像のとなりに文字を書く。（文字の回りこみ。）

　記事の左にある画像の右側に文字を書きたいときは、float:left;とします。
これは画像を左(left)に配置して、文字はその画像に回り込ませるという指定です。
そして、文字の最後は、clear:both;で回り込みを解除します。

CSS編集で追加するコード

/*画像の回り込みの設定*/
.imgleft
{
float:left;
}
/*文字の回り込みの解除*/
.clear
{
clear:both;
}

この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="imgleft" />回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。

---------別の方法---------

<div class="imgleft"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。

←
「BlogPetくらいから紫がと
ても好きになって現在に
至ってます。」
BlogPetくらいからねぇ～♪
うさもは、ずっとBlogPetだと
思うんだけどね♪（;￣ー￣A ｱｾｱｾ･･･

これで回り込みが解除されました。

左に画像の２つ並べてそのとなりに文字を書く。

２つの画像を左にそろえて並べますから、class="imgleft"を2回使います。
もちろん、文字の最後は、clear:both;で回り込みを解除します。
※CSS編集で追加するコードはありません。

この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

<img src="画像URL1" alt="画像の代わりの文字1" width="幅" height="高さ" class="imgleft" /><img src="画像URL2" alt="画像の代わりの文字2" width="幅" height="高さ" class="imgleft" />回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。

---------別の方法---------

<div class="imgleft"><img src="画像URL1" alt="画像の代わりの文字1" width="幅" height="高さ" /></div><div class="imgleft"><img src="画像URL2" alt="画像の代わりの文字2" width="幅" height="高さ" /></div>回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。

←
使い勝手がいいかもね♪
検索されてるかなぁ～♪
でもそれならうれしいね♪
何しろここのブログの
モットーは
「わからないことは、
みんなで解決しよう！」
だからね♪(*^-^)

これで回り込みが解除されました。

yozoからのお願い
　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

【画像を左に配置してそのとなりに文字を書く。（CSS編集）の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

2006年10月26日

画像の枠線を設定しましょう（CSS編集）

　画像の枠線（border）を設定して、画像が引き立つようにしてみましょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。

基本の設定

　枠線（border）の設定は、CSSで下のように「太さ」「線の種類(線種)」「線の色」をそれぞれ設定します。

太さ　＜例＞　border-width: 5px;
線の種類(線種)　＜例＞　border-style: solid;
実線(solid)・二重線(double)・破線(dotted)など
線の色　＜例＞border-color: #FF7F8F;

この画像のソースコード(この画像を記事に入れるとき、下の通りに入力します。)

<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="sango" />

この画像のclass="sango"のCSSコード

.sango
{
border-width: 10px;
border-style: solid;
border-color: #FF7F8F;
}
※なお、このコードを1行にまとめてかくと、
.sango{border:10px solid #FF7F8F;}となります。

枠線（border）の色を個別に設定

　枠線（border）の色を上下左右で変更したいときは
border-color: 上の色右の色下の色左の色;というように指定します。（時計回りです）
個別に設定するときは、上の色(border-top-color）・右の色(border-right-color）・下の色(border-bottom-color）・左の色(border-left-color）とします。

この画像のソースコード(この画像を記事に入れるとき、下の通りに入力します。)

<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="colorful" />

この画像のclass="colorful"のCSSコード

.colorful
{
border-width: 10px;
border-style: solid;
border-color: #FF7F8F #BBC000 #F1BB93 #9883C9;
}

応用例

　枠線（border）を使って見出しを作ってみました。左の枠線(border-left）と下の枠線(border-bottom）を次のように設定してみましょう。

基本の設定

枠線（border）の色を個別に設定

応用例

この見出しのソースコード(この見出しを記事に入れるとき、下の通りに入力します。)

<div class="sango_title">基本の設定</div>
<div class="sango_title">枠線（border）の色を個別に設定</div>
<div class="sango_title">応用例</div>

この見出しのclass="sango_title"のCSSコード

.sango_title
{
font-size:15px;
font-weight:bold;
padding-left:0.3em;
border-left: 1em solid #FF7F8F;
border-bottom: 1px solid #FF7F8F;
}

yozoからのお願い
　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

スレッドテーマ:カスタマイズ:ブログ

2006年08月16日

プラグインや最新のコメントなどにスクロールバーを設置する

　以前にもスクロールバーを設置する方法を記事にしましたが、サイドバーのプラグインやリンクリスト、最新のコメントなどにスクロールバーを設置する方法については、解説できていませんでした。うっかりすると忘れてしまいますので、ここに控えておこうと思います。

引用部分にスクロールバーをつける方法

トラックバック・ピープルのリンクリストに
スクロールバーをつける方法

BlogPeopleのリンクリストにスクロールバーをつける方法

CSS編集なんて面倒なしで、簡単にスクロールバーをつけたい場合

FC2にログインして、管理者ページの左サイドの「環境設定」の項目[プラグインの設定]をクリックします。

スクロールバーを設置したいプラグインの「HTMLの変更」をクリックし、下の例のように<div style="overflow : auto; height : 150px; scrollbar-base-color : #ffffff;">～</div>で囲んで、[プレビュー]で確認してから、[変更]をクリックしましょう。

最新のコメント部分につける場合

<div style="overflow : auto; height : 150px; scrollbar-base-color : #ffffff;"><div id="commentlist">{recent_comment_list}</div>
</div>
プラグイン全体につける場合


<div style="overflow : auto; height : 150px; scrollbar-base-color : #ffffff;"><p class="plugin-freearea" &align>
&freearea
</p></div>

なお、プラグインに入れたものの一部につける場合は、スクロールバーを設置したいプラグインの「設定の変更」をクリックして、
設置したい部分にだけを<div style="overflow : auto; height : 150px; scrollbar-base-color : #ffffff;">～</div>で囲めばOKです。もちろん高さの150pxやカラーコードの#ffffffは好みで変更してくださいね。

CSS編集してスクロールバーをつけたい場合

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定 ]をクリックします。

「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。

「スタイルシートの編集[テンプレート名]を編集しています。」の欄の一番下にコードを記入します。

必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪

/*プラグインにスクロールバーを自動生成*/
.plugin-scroll
{
overflow : auto;
height : 150px;
scrollbar-base-color : #ffffff;
}

heightの値は自由に変更してください。heightで設定した高さ(この例では150px)を超えた場合にのみ、縦スクロールバーがつくことになります。また、scrollbar-base-color:□□□;にはお好みのカラーコードを記入してください。スクロールバーの色はInternetExplorerのみに有効です。また、ブログのスクロールバーすべてを同じ色にしたいときは下のコードを追加してください。
/*すべてのスクロールバーを白にする。*/
html
{
scrollbar-base-color:#ffffff;
}

左サイドの「環境設定」の項目[プラグインの設定]をクリックします。

スクロールバーを設置したいプラグインの「HTMLの変更」をクリックし、下の例のように<div class="plugin-scroll">～</div>で囲んで、[プレビュー]で確認してから、[変更]をクリックしましょう。

最新のコメント部分につける場合

<div class="plugin-scroll">
<div id="commentlist">{recent_comment_list}</div>
</div>
プラグイン全体につける場合


<div class="plugin-scroll">
<p class="plugin-freearea" &align>
&freearea
</p></div>

なお、プラグインに入れたものの一部につける場合は、スクロールバーを設置したいプラグインの「設定の変更」をクリックして、
設置したい部分にだけを<div class="plugin-scroll">～</div>で囲めばOKです。

yozoからのお願い

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければCommentやTrackbackしていただけたら、幸いです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m