ブログ
February 28, 2009
スタイルシート(CSS)カスタマイズ #04 引用枠のカスタマイズ
背景や文字を変えてしまうと
引用枠も合せて変更しておかないと見づらくなる。
ブログ記事のタイトル、日付、背景の項目の少し下に、
/* =blockquote */
という項目がある。
引用枠の枠部分を点線にしたり
うちのように左側だけ太くしてみたりといろいろできる。
あとは検索すればやり方がいくらでも出てくるので試してみるだけ。
blockquoteの下にでも追記すればいい。
参考までにうちの設定
実際タイトル表記をしたい場合は
<div class="quotetitle">タイトル</div>
のように使う。
(表記の都合で<>が全角になってるが、使う時は半角で)
引用枠も合せて変更しておかないと見づらくなる。
テスト
blockquoteの設定
ブログ記事のタイトル、日付、背景の項目の少し下に、
/* =blockquote */
という項目がある。
引用枠の枠部分を点線にしたり
うちのように左側だけ太くしてみたりといろいろできる。
あとは検索すればやり方がいくらでも出てくるので試してみるだけ。
引用タイトルの設定
こんな風に引用の中にタイトルをつけることができる。
引用の中で使用しなければ上にある[blockquoteの設定]のように
下線を引いたミニ・タイトル風にも使える。
blockquoteの下にでも追記すればいい。
参考までにうちの設定
/*quotetitle設定*/
.quotetitle{
WIDTH: 98%;
font-size:15px;
font-weight:bold;
border-bottom: 1px solid ;
padding: 0 0 0 1px;
}
実際タイトル表記をしたい場合は
<div class="quotetitle">タイトル</div>
のように使う。
(表記の都合で<>が全角になってるが、使う時は半角で)
February 27, 2009
スタイルシート(CSS)カスタマイズ #03 文字・背景・リンクの色を変える
とりあえず最初にやってみたくなるのは文字や背景を変えることかもしれない。
私はリンク上にマウスポインタを置くと赤に変色する仕組みが
見えやすくて好きなのでいつも第一にここを変更する。
カスタマイズ箇所はいつも通りの場所。
[カスタマイズ/管理] → [デザインのカスタマイズ] → [スタイルシート(CSS)]
上の方にこんなものがある。
body{
color:#●●●●●● }
これが本文の文字色。
●●●●●●は数字やアルファベットで、●●●の場合もある。
background:#●●●●●●
背景色。urlで背景イメージ(画像)が指定されている場合もある。
背景色の下にある項目でリンクの色が指定されている。
a
a:link
a:visited
a:active
a:hover
visitedは訪問済リンクの色。
hoverはマウスポイントを置いた時の変化色。
あとは同じ色にしておけばいいと思う。
全部同じでもいい。
[text-decoration:none]は変化なし、
[text-decoration:underline]にすると下線が表示されるようになる。
記事本文のタイトルではなく、ブログのタイトルの方。
#header
#container
#banner,subbanner,
の下にある
#banner a
#banner a:link
#banner a:visited
#banner a:active
#banner a hover
の項目を、リンクの場合と同じように変更する。
blogtitle項目を変更してしまいそうだが、
もっと下の方にある
.date
.blogbody
.title
.main
ここを変更する。
こんな感じで色を変えるとガラッと雰囲気が変わる。
私はリンク上にマウスポインタを置くと赤に変色する仕組みが
見えやすくて好きなのでいつも第一にここを変更する。
文字・背景の色を変える
カスタマイズ箇所はいつも通りの場所。
[カスタマイズ/管理] → [デザインのカスタマイズ] → [スタイルシート(CSS)]
上の方にこんなものがある。
body{
color:#●●●●●● }
これが本文の文字色。
●●●●●●は数字やアルファベットで、●●●の場合もある。
background:#●●●●●●
背景色。urlで背景イメージ(画像)が指定されている場合もある。
リンク色を変える
背景色の下にある項目でリンクの色が指定されている。
a
a:link
a:visited
a:active
a:hover
visitedは訪問済リンクの色。
hoverはマウスポイントを置いた時の変化色。
あとは同じ色にしておけばいいと思う。
全部同じでもいい。
[text-decoration:none]は変化なし、
[text-decoration:underline]にすると下線が表示されるようになる。
ブログのタイトル(表題)色を変える
記事本文のタイトルではなく、ブログのタイトルの方。
#header
#container
#banner,subbanner,
の下にある
#banner a
#banner a:link
#banner a:visited
#banner a:active
#banner a hover
の項目を、リンクの場合と同じように変更する。
記事のタイトル、日付、背景など
blogtitle項目を変更してしまいそうだが、
もっと下の方にある
.date
.blogbody
.title
.main
ここを変更する。
こんな感じで色を変えるとガラッと雰囲気が変わる。
February 26, 2009
スタイルシート(CSS)カスタマイズ #02 タグの表示サイズを変える
うちではタグのタイトルを「Photos」として
掲載した写真の種類分けに使っている。アルバムみたいな感じで。
表示順をどう変えればいいかわからないので
「分野」をアルファベットで、
「地域」を日本語表記にしている。
岡山、京都、東京が多いなぁとか、思う。
付加された記事の量がある一定数を超えるとタグ・プラグインの名前が大きくなる。
その名前の大きさ変化をカスタマイズ。
[カスタマイズ/管理] → [デザインのカスタマイズ] → [スタイルシート(CSS)]
デフォルト状態ではタグ・クラウドに関してのコマンドは表示されていないので、
下記を、どこでもいいのだろうけど、とりあえず一番下にでも追加する。
一番上の「/*タグクラウド fontSize*/」の部分は
後々編集する時「ここにはこんなこと書いてあるよ」というタイトルなので
別に変更したり削除しても構わない。
現在うちのタグは12、14、18、30、36としてある。
この数値を適当な値に変更すればいい。
タグ付与された記事がいくつ以上になったらレベルを変えたい、
とかいうこともできるのか。さて今のところはわからないし、めんどくさい(笑)。
掲載した写真の種類分けに使っている。アルバムみたいな感じで。
表示順をどう変えればいいかわからないので
「分野」をアルファベットで、
「地域」を日本語表記にしている。
岡山、京都、東京が多いなぁとか、思う。
付加された記事の量がある一定数を超えるとタグ・プラグインの名前が大きくなる。
その名前の大きさ変化をカスタマイズ。
タグ・クラウドの設定
[カスタマイズ/管理] → [デザインのカスタマイズ] → [スタイルシート(CSS)]
デフォルト状態ではタグ・クラウドに関してのコマンドは表示されていないので、
下記を、どこでもいいのだろうけど、とりあえず一番下にでも追加する。
/* タグクラウド fontSize */
.side ul.tagcloud li.tag-weight-0 {
font-size: 12;
}
.side ul.tagcloud li.tag-weight-1 {
font-size: 14;
}
.side ul.tagcloud li.tag-weight-2 {
font-size: 18;
}
.side ul.tagcloud li.tag-weight-3 {
font-size: 30;
}
.side ul.tagcloud li.tag-weight-4 {
font-size: 36;
}
一番上の「/*タグクラウド fontSize*/」の部分は
後々編集する時「ここにはこんなこと書いてあるよ」というタイトルなので
別に変更したり削除しても構わない。
現在うちのタグは12、14、18、30、36としてある。
この数値を適当な値に変更すればいい。
タグ付与された記事がいくつ以上になったらレベルを変えたい、
とかいうこともできるのか。さて今のところはわからないし、めんどくさい(笑)。
February 25, 2009
スタイルシート(CSS)カスタマイズ #01 幅を変える
あちこちブログのパーツをカスタマイズしたのでメモをしておこう。
正直、スタイルシート見ても何書いてあるのか全然わっかんない!人向け。
スタイルシートの仕組みはいまいちわかっていないが、
ここだけ抑えればある程度変更はできる!
というポイントだけ。
質問して難しい話されてもわかんないし、
とりあえず該当箇所いじればどうにかなる、的な。
[カスタマイズ/管理] → [デザインのカスタマイズ] → [スタイルシート(CSS)]
★基本的に[width]値に加算していくだけ
body
#header
のあとにくる
#container
ブログ全体の幅
#banner,#subbanner
タイトルやその下の説明欄の幅
もすこし下にいくと、
#blogcontainer
本文とサイドバーを合せた場所の枠の幅
#content
本文枠の幅
#links
サイドバーの幅(3カラムの場合はlinksがもう一つあるはず)
以上の[width]を増減すればよい。
としておくと安心。
これでおかしくなる場合は検索したり他で質問したり。
□参考(うちの場合)
#container 940
#banner 900
#blogcontainer 870
#content 640
#links 210
つまり、うちの場合、本文とサイドバーの隙間は20pxということに。
正直、スタイルシート見ても何書いてあるのか全然わっかんない!人向け。
スタイルシートの仕組みはいまいちわかっていないが、
ここだけ抑えればある程度変更はできる!
というポイントだけ。
質問して難しい話されてもわかんないし、
とりあえず該当箇所いじればどうにかなる、的な。
ページ幅を広くする
[カスタマイズ/管理] → [デザインのカスタマイズ] → [スタイルシート(CSS)]
★基本的に[width]値に加算していくだけ
body
#header
のあとにくる
#container
ブログ全体の幅
#banner,#subbanner
タイトルやその下の説明欄の幅
もすこし下にいくと、
#blogcontainer
本文とサイドバーを合せた場所の枠の幅
#content
本文枠の幅
#links
サイドバーの幅(3カラムの場合はlinksがもう一つあるはず)
以上の[width]を増減すればよい。
container > banner ≧ blogcontainer = (content + links + 2つの隙間の幅)
としておくと安心。
これでおかしくなる場合は検索したり他で質問したり。
□参考(うちの場合)
#container 940
#banner 900
#blogcontainer 870
#content 640
#links 210
つまり、うちの場合、本文とサイドバーの隙間は20pxということに。
September 13, 2008
カスタマイズ
昨晩思い立ったようにこのブログのタイトルやデザインを変更。
いくつか試してみて今に落ち着く。
CSS(スタイルシート)も少しだけカスタム。
リンク上にマウスポインタを置くと赤色に変わるようにした。
色変化がないとどうもクリックミスしてしまうから。
あと引用(Q)の背景色をブログ背景と少しだけ違う色に。
あとは記事タイトルの色変えたり、
タグクラウドの文字表示に手を加えたり、と。
CSSのコマンド調べながら作業したから疲れた〜。
いくつか試してみて今に落ち着く。
CSS(スタイルシート)も少しだけカスタム。
リンク上にマウスポインタを置くと赤色に変わるようにした。
色変化がないとどうもクリックミスしてしまうから。
あと引用(Q)の背景色をブログ背景と少しだけ違う色に。
こんな風に。
リンク
あとは記事タイトルの色変えたり、
タグクラウドの文字表示に手を加えたり、と。
CSSのコマンド調べながら作業したから疲れた〜。