サブタイトルの設定を変える [/*-----Common-----*/]
【サブタイトルの設定を変える】 サブタイトルの設定を変更するには /*-----Common-----*/内の#lead{ margin:0; padding:75px 0 0 10px; color: #ffffff; }の部分を変更・追加します。 ＜サブタイトルの色を変える＞ サブタイトルの色を変えるには#lead{ margin:0; padding:75px 0 0 10px; color: #ffffff; }上記の赤字、color:#ffffffの♯ffffffを 色名、または6ケタの数字に変更します。 6ケタの数字につきましては 記事「色の設定について」をご覧ください。 ＜サブタイトルの文字の太さを変える＞ サブタイトルの文字の太さを変えるには#lead{ margin:0; padding:75px 0 0 10px; color: #ffffff; font-weight:★; }赤字の部分を追加してください。 ★の部分に関しては 記事「ブログ(body要素)の背景・文字の設定を変える」内の 『文字の太さを変える』を ご覧ください。 (クリックすると移動します) ＜サブタイトルのフォントの種類を変える＞ サブタイトルのフォントの種類を変えるには#lead{ margin:0; padding:75px 0 0 10px; color: #ffffff; font-family:"★"; }赤字の部分を追加してください。 ★の部分に関しては 記事「ブログ(body要素)の背景・文字の設定を変える」内の 『フォントの種類を変える』を ご覧ください。 (クリックすると移動します) ＜サブタイトルを斜体にする＞ サブタイトルを斜体にするには#lead{ margin:0; padding:75px 0 0 10px; color: #ffffff; font-style:italic; }赤字の部分を追加してください。 ＜サブタイトルの文字の大きさを変える＞ サブタイトルの文字の大きさを変えるには#lead{ margin:0; padding:75px 0 0 10px; color: #ffffff; font-size:★; }赤字の部分を追加してください。 ★の部分に関しては 記事「ブログ(body要素)の背景・文字の設定を変える」内の 『文字の大きさを変える』を ご覧ください。 (クリックすると移動します) ＜サブタイトルの位置を変える＞ サブタイトルの位置を変更するには#lead{ margin:0; padding:75px 0 0 10px; color: #ffffff; }上記の赤字の変更をして下さい。 上記の場合は 上から75px下へ、右と下は0、左から右へ10px移動と いう指定です。
ブログタイトルの設定を変える―リンク [/*-----Common-----*/]
【ブログタイトルのリンクの設定を変える】 ブログタイトルのリンクの設定を変えるには /*-----Common-----*/内の#banner h1 a{ color:#ffffff; line-height: 200%; }この部分を変更します。 初期設定は 「文字色：白」、「行間が文字の大きさと一緒」です。 ＜ブログタイトルのリンクの色を変える＞ ブログタイトルのリンクの色を変えるには#banner h1 a{ color:#ffffff; line-height: 200%; }の赤字部分、♯ffffffを好きな色名 または＃6ケタの数字を入力してください。 6ケタの数字は、記事「色の設定について」を ご覧ください。 ＜ブログタイトルにロールオーバーを適用する＞ ロールオーバーとはマウスが乗った場所に 変化をもたらすことです。 それではリンクの貼られている ブログタイトルにロールオーバーを適用してみましょう。 変更の仕方は。#banner h1 a{ color:#ffffff; line-height: 200%; }この赤字の部分を削除します。 その後に#banner h1 a{ } の外に #banner h1 a:link{text-decoration:none;color:メインの色;} #banner h1 a:visited{text-decoration:none;color:メインの色;} #banner h1 a:active{text-decoration:none;color:メインの色;} #banner h1 a:hover{text-decorarion:none;color:ロールオーバーさせたい色;} と書き加えます。 ※a:hover内のtext-decoration:noneはロールオーバーの際の下線です。 初期設定ではunderline(下線)で設定されています。
ブログタイトルの設定を変える―文字・配置 [/*-----Common-----*/]
【ブログタイトルの設定】 ＜ブログタイトルの文字の大きさを変える＞ブログタイトルの文字の大きさを変えるには /*-----Common-----*/内の#banner h1{ margin:0; font-family: Helvetica,Arial,sans-serif; font-size: 22px; padding-left: 18px; padding-top: 58px; }赤字部分を変更します。 文字の大きさの変更については、 記事「ブログ(body要素)の背景・文字の設定を変える」の 『文字の大きさを変える』を ご覧ください。(クリックで移動します) ＜ブログタイトルのフォントの種類を変える＞ ブログタイトルのフォントの種類を変えるには#banner h1{ margin:0; font-family: Helvetica,Arial,sans-serif; font-size: 22px; padding-left: 18px; padding-top: 58px; }赤字の部分を変更してください。 赤字部分を変更します。 フォントの種類の変更については、 記事「ブログ(body要素)の背景・文字の設定を変える」の 『フォントの種類を変える』を ご覧ください。(クリックで移動します) ＜ブログタイトルを斜体にする＞ ブログタイトルを斜体に変えるには#banner h1{ margin:0; font-family: Helvetica,Arial,sans-serif; font-size: 22px; font-style="italic"; padding-left: 18px; padding-top: 58px; }赤字の部分を追加してください。 ＜ブログタイトルの文字の太さを変える＞ ブログタイトルの文字の太さを変えるには#banner h1{ margin:0; font-family: Helvetica,Arial,sans-serif; font-size: 22px; font-weight:★; padding-left: 18px; padding-top: 58px; }赤字の部分を追加してください。 ★の部分の入る値については、 記事「ブログ(body要素)の背景・文字の設定を変える」の 『フォントの太さを変える』を ご覧ください。(クリックで移動します) 【ブログタイトルの位置を整える】 ＜ブログタイトルの位置を変える＞ブログタイトルの基本位置は 前記事、「バナーの設定を変える」でご説明しておりますが #container{ ・ ・ } 内のtext-align:★；（★にはleft right centerのどれか)にて 設定されております。 あとはtext-alignにて決めた位置からの paddingでの上下左右への調整です。 【その他】 ＜ちょっとお遊び＞ おまけで、ブログタイトルにちょっとした細工を ご紹介します。何も飾り気のない、ブログタイトルに 枠線ドットを使ってみました。 さうがに4辺を囲むとかっこ悪いので 下辺だけでいいと思います。 やりかたは #banner h1{ margin:0; font-family: Helvetica,Arial,sans-serif; font-size: 22px; border-bottom:dotted 好きな色 線の太さ; width:お好みの幅; padding-left: 18px; padding-top: 58px; } です。 その他の枠線も使用可能ですので いろいろお試し下さい。 慣れるとサブタイトルであったり 記事のタイトルにも応用できると思います。 ただし注意として、 枠線がブログタイトルよりも短いと ブログタイトルが改行されます。 それと{ }内には全角不可です。「世界（ザ・ワールド）」時よ止まれ
バナーの設定を変更する [/*-----Common-----*/]
今回はバナー画像部分の変更の設定を行います。 バナー画像の設定に関するCSSは /*-----Common-----*/内の#container { ①width :770px; ②margin:0 auto; ③line-height:1.4; ④text-align:left; ⑤background: url("/_common/skins/509/images/banner-bg2.jpg") no-repeat center top; ⑥border-left: #1e1717 solid 1px; ⑦border-right: #1e1717 solid 1px; ⑧border-bottom: #1e1717 solid 1px; }に当ります。 【幅の設定】 ＜バナーの幅を設定する＞ 幅の設定には ①の部分に幅の値を入力してください。 【ブログタイトルの位置】 ＜ブログタイトルの位置を変更する＞ ブログタイトルの位置を変更するには ③の部分の値をleftからcenterあるいはrightに 変更してください。 【バナー画像の変更】 ＜バナー画像を変更する＞ バナー画像を変更するには ⑤の部分を削除して、挿入したい画像を アップロードしたファイルから選択してください。 選択後の記述は前記事 「ブログ(body要素)の背景・文字の 設定を変える」をご参照下さいませ。 【枠線で囲む】 ＜バナー画像の周りにを枠線で囲む＞ バナー画像の周りを枠線で囲むには 個別であれば⑥，⑦，⑧を変更します。 (＋上辺のCSS border-top:~~~~~~;を追加します。 もちろんなくてもかまいません) ４辺を同じ種類の線で囲むのであれば #container{ width;770px; ・ ・ ・ border:色の名前 枠線の種類 太さ; } (順不同、間は半角スペース) 枠線の種類に関しては 記事「ボーダー１」・「ボーダー２」をご覧ください。
ブログ(body要素)の背景・文字の設定を変える [/*-----Common-----*/]
【背景の設定】 ＜背景色を変える＞ ここで言う背景と言うのは 両脇の白っぽい部分です。 ブログの背景色を変える要素は /*-----Common-----*/内のbody { background:#fafafc; color:#333333; }赤字の部分です。 初期設定では#fafafcです。 ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜背景画像を挿入する＞ 背景色を変える時同様 背景画像が適用されるのは 左右の白っぽい部分です。 背景画像を挿入する場合は 背景色の要素の部分を削除し アップロード済みのファイルをクリックします。 するとbody { background:url("/----------------") no-repeat;という color:#333333; }記述になります。 ただし、画像の大きさによりフォロー出来ない部分が 出てきますので、十分に幅のある画像 またはシンプルな画像を使って no-repeat→repeatに変更し、縦横の繰り返しをすることを おすすめします。 【文字の設定】 ＜文字の色を変える＞ ブログ中の文字色の基本色を設定します。 (個別設定される部分は除く) ブログの文字色を変える要素はbody { background:#fafafc; color:#333333; }赤字の部分です。 初期設定では＃333333です。 ＃------部分にお好みの数字 または色名(色の場合は＃不要)を指定ください 6ケタの数字については「色の設定について」の 項目をご覧ください。 ＜文字の太さを変える＞ ブログ中の文字の基本となる太さを設定します。 (個別設定される部分は除く) 設定方法はbody { background:#fafafc; font-weight:★; color:#333333; }★＝100～900までの数(100単位) 400がnormal,700がbold 詳しくは記事「フォント１」をご覧ください。 ＜文字を斜体にする＞ ブログ中の文字を全部斜体にします。 設定方法はbody { background:#fafafc; font-style:italic; color:#333333; }ブログ全体を斜体にすると見づらいだけなので 変えたい部分だけを変えた方がいいと思います。 ＜フォントの種類を変える＞ ブログ中の文字を全部指定したフォントにします。 設定方法はbody { background:#fafafc; font-family:"使いたいフォント"; color:#333333; }例 body { background:#fafafc; font-family;"HGP平成明朝体W9"; (ブログ全体にフォントHGP平成明朝体W9";を適用) color:#333333; } フォント名が分からない時は エクセルやワードからコピーして下さい。 （全角空白とか紛らわしいものがあるので 手打ちはやめた方がいいです。） 見る側のパソコンにインストールされていない フォントは無視されますのでご注意ください。 ＜文字の大きさを変える＞ ブログ中の文字を全部指定した大きさにします。 設定方法はbody { background:#fafafc; font-size:★; color:#333333; }★＝ サイズを表す数値＋単位（mm,cm,in,pt.pc,em,ex,px) または、larger,smaller,％ またはxx-large,x-large,large,medium,small,x-small,xx-small 個人的にいつも使用しているのはptで数値は10～16の間です。
ブログ内のリンク個所の設定を変える [/*-----Common-----*/]
＜リンクの設定を変える＞ WEBページには、クリックすると 他のページへ移動する箇所があります。 その際にはリンク個所と分かるように 色が違うことが多いことでしょう。 リンク個所の色の設定もCSSで可能です。 それを変えるために場所が /*-----Common-----*/内のa:link{ text-decoration: none; color:#c87a10; } a:visited{ text-decoration: none; color:#c87a10; } a:active{ text-decoration: none; color:#c87a10; } a:hover{ text-decoration: underline; color:#c87a10; }赤字の部分です。 赤字内の「color:#c87a10」の#87a10を好きな色名 または＃６ケタの数字（前記事参照）を記述して下さい。 リンク個所と分かるように下線をつけるのであれば text-decorationの値をnoneからunderlineに変えて下さい。 ＜ロールオーバー＞ ロールオーバーとは、マウスが重なった時に その場所に変化をもたらすものです。 それを変えるにはa:link{ text-decoration: none; color:#c87a10; } a:visited{ text-decoration: none; color:#c87a10; } a:active{ text-decoration: none; color:#c87a10; } a:hover{ text-decoration: underline; color:#c87a10; }赤字内の「color:#c87a10」の#87a10を好きな色名 または＃６ケタの数字（前記事参照）を記述して下さい。 この操作で、マウスが乗るとリンク個所の色が変わります。
