それでは、実際にSSブログ（ソネットブログ）のスキンを作成してみましょう。
今回は、ブログ上部にあるバナー画像とブログタイトルの文字位置などの変更です。
初めての方は、見たことがないタグをがでてきますが、基本的には所定の場所にコピー＆貼付でできるので諦めずに最後までぜひ読んでください。
- 今回は、[ベーシックの白]の[記事幅 標準][サイドバー幅 標準]を使用します。
- もちろん他のタイプでも大丈夫ですが、カスタマイズの途中で自分の好みの色や画像に変更していけるので最初は[ベーシックの白]がいいと思います。
- スタイルシートの開き方は、step1：スキンを選ぼうをご覧ください。
バナーの準備をしよう
準備1 カスタムスキンの幅をチェック
先生
まずは自分の作っているカスタムスキンの横幅を確認するよ
ぺんぺん
2021年現在の表記はこうなっているよ
横幅のチェックはこの手順で開こう！
①管理ページのデザイン
②テンプレート管理
③自分で選んだテンプレートの適用をチェック
④編集をクリック
番長
④の編集をクリックするとスタイルシート編集画面が開くから#containerを探してね
上の方にあるよ
このテンプレートだと、横幅は770px だね
| スタイルシート編集画面 | 補足説明 |
|---|---|
| /*—–Common—–*/ #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; } | width :770px; が全体の横幅になります。 |
準備2 バナーを用意しよう
先生
自分のカスタムスキンの横幅に合わせたバナーを準備しよう
参考 今回、見本で使用するバナーは 横幅770ｐｘ 高さ200ｐｘです
バナーをのせてみよう
バナーにあわせてヘッダーの高さをかえよう
番長
今度は、バナーのタグをさがすよ
#banner だよ
さっきのタグのすぐ下あたりにあるね
ぺんぺん
元の指定は高さ140pxだから、
自分の使うバナーの高さにあわせて200pxにかえるよ
| 元のタグ | 変更後のタグ | 補足説明 |
|---|---|---|
| /*—–Header—–*/ #banner { height:140px; margin-bottom:20px; clear:both; } | /*—–Header—–*/ #banner { height:200px; margin-bottom:20px; clear:both; } | height は高さという意味です。 元設定は高さ140pxなので ここでバナーのサイズ200pxへ 変更します。 |
画像を挿入しよう
☆画像の挿入方法
①使いたい画像をアップロードします。
②挿入したい場所にマウスポインタを置いておき、アップロードした画像をクリックするとこういうのが自動ででます。
background:url(“/_images/blog/_aaa/bbb/ccccc.PNG”) no-repeat;
これをコピーし使います。
先生
次はヘッダーにバナー画像をいれるよ
#bannerの中に画像のURLを付けたすんだ
| スタイルシート編集画面 | 補足説明 |
|---|---|
| /*—–Header—–*/ #banner { height:200px; background:url(“/_images/blog/_aaa/bbb/ccccc.PNG”) no-repeat; margin-bottom:20px; clear:both; } | background は 背景という意味です。 |
先生
画像のURLを入れたら、まずはプレビューで確認して
OKならば保存をクリックだよ
バナーをのせる前の画像
バナーをのせた後の画像
ぺんぺん
画像が入るだけでずいぶんオリジナルにかわるね
参考【オリジナルバナーを作ろう】【バナーの位置を変えよう】
バナーの文字位置・フォント・文字サイズ・文字色をかえよう
ブログタイトルの設定
先生
今回はブログタイトルの文字をかえるよ
ブログタイトルは「カスタムスキンへの道」のことだよ
ぺんぺん
変更したらプレビューで確認して、OKならば保存をクリックだよ
忘れないでね
| スタイルシート編集画面 | 補足説明 |
|---|---|
| /*—–Header—–*/ #banner { height:200px; background:url(“/_images/blog/_aaa/bbb/ccccc.PNG”) no-repeat; margin-bottom:20px; clear:both; } #banner h1{ margin:0; padding: 40px 0 8px 0; font-family: Helvetica,Arial,sans-serif; font-size:large; } #banner h1 a{ color:#444444; } #lead{ margin:0; } | [ブログタイトルの設定] ■文字位置 padding: 40px 0 8px 0; （上、右、下、左）を変更 ・40pxを変えるとタイトルの上からの位置が変わる ・8pxを変えるとタイトルとサブタイトルの間が広がる ・0を変えるとタイトルの左からの位置が変わる （変える時は必ず pxを付ける 〔例. 10px〕） ・詳しくは、【ブログタイトル＆サブタイトルの文字の位置を変えよう】をご覧ください ■フォントの変更 font-family: Helvetica,Arial,sans-serif; を変えると字体が変わります。 ■文字サイズ font-size:large; を変えると文字のサイズが変わる ■文字色 color:#444444; を変えると文字色が変わります。 参考 文字色・文字サイズ・文字位置・字体 |
サブタイトルの設定
先生
つぎは、サブタイトルをかえるよ
ブログタイトルの下に書いてある文字のことだね
| スタイルシート編集画面 | 補足説明 |
|---|---|
| /*—–Header—–*/ #banner { height:200px; background:url(“/_images/blog/_aaa/bbb/ccccc.PNG”) no-repeat; margin-bottom:20px; clear:both; } #banner h1{ margin:0; padding: 60px 0 20px 20px; font-family: Helvetica,Arial,sans-serif; font-size:large; } #banner h1 a{ color:#444444; } #lead{ margin:0; padding-left:20px; color:#FFFFFF; } | [ブログサブタイトルの設定] サブタイトルの入力箇所は ＃lead です。 元々何も入っていないこともあるので、自由に付け足しましょう。 ■文字位置 padding-left:20px; を付け加えるとサブタイトルの左からの位置が変わる ・数字はご自分で変更してください ・すでにある場合は、数値の変更 ・詳しくは、【ブログタイトル＆サブタイトルの文字の位置を変えよう】をご覧ください。 ■文字色 color:#FFFFFF; を付け加えるとサブタイトルの文字色が変わる ・#FFFFFF;はご自分の好きな色に変更してください ・文字色については【ブログタイトル＆サブタイトルの字の色を変えよう】をご覧ください。 |
番長
文字の位置がかわるだけでずいぶん違うね
