< F2D D834F834A E837D E6A7464>

Transcription

1 e しずおかブログのカスタマイズ 1. トップページ冒頭の写真の貼り替え 2. タイトル ブログ説明の大きさ 色 配置の変更 3. 背景の変更 これらについて説明します テンプレートによって変更箇所 位置などは様々なので 今回はモデルテンプレートとして シンプルブルー ( 背景グラデーション ) のテンプレートにて 解説していきます シンプルブラウン ( 背景グラデーション ) ベージュ ( 背景グラデーション ) グリーン ( 背景グラデーション ) ピンク ( 背景グラデーション ) 色の違いだけですので参考に

2 1. ブログ冒頭のタイトル部分の画像カスタマイズ ブログの設定のテンプレートからカスタマイズでスタイルシートの編集画面で編集します いきなり現在使用中のテンプレートをカスタマイズして失敗してしまうと恐いので 新たにテンプレートの追加をクリック 新テンプレートでまずは編集することを勧めます ここの部分の画像が一番カスタマイズしたい部分じゃないでしょうか まずはブルーの画像を他の画像に貼り替えます テンプレートのカスタマイズより編集画面を開くと 上からスタイルシートトップページ個別記事アーカイブとそれぞれ窓があります スタイルシートの窓の中をスライドして以下の記述 150 ± 20 行目あたりを探して下さい ( 行数は使用ブラウザにより多少違いますので参考行数です ) #banner,#subbanner{ background :url(/_img/simple03/head_0305.gif); height: 149px; } 括弧内の部分 (/_img/simple03/head_0305.gif) を変更します ご自分のブログの画像等のファイル一覧にアップしてある画像の URL と入れ替えれば完了です 例えば ( こんな感じ 簡単なんですよ アドレスの部分は http からじゃなく /usr/naosuke/head-d.jpg からで省略しても大丈夫です

3 ご自分の画像のアドレスがよく判らない場合は ファイル一覧の画面で 実際の画像が表示されている部分をクリックすると 画像と URL のアドレスがブラウザのアドレスに表示されます 表示されたアドレスをコピーして貼付れば完了です アドレスを入れ替えたら スタイルシート窓の下 トップページの窓の上のプレビューボタンを クリックしてみてください 画像が変わっていると思います 写真のサイズはどうでしょうか? 切れていたり 繰り返しになっていたりしてませんか? 最初にブルーの画像は ピクセルの大きさの画像です 差し替えた写真がそれより大きければ切れて 小さければ繰り返し表示となってしまいます 前ページの表記の部分に height: 149px; これは表示する高さを指定してます ブルーの画像は ピクセルの大きさですから 高さがぴったりに表示されていたことになります 差し替える写真の大きさを の大きさにカットしたりして調整するか height: 149px; の数値を大きく または小さく変更してしまいましょう 貼付るだけなら あまりにも簡単すぎちゃうのですが 貼りたい写真が小さいものなのどは 繰り返しで画像が貼り付けられますので 自分のイメージに近づけた写真の貼付を指定したいと思います

4 変更した画像の記述の後ろに left bottom; と付け加えて :url( left bottom; この記述で写真貼付の基準位置が左側 下基準として位置が指定されました 水平方向の指定で left 左基準 right 右基準 center 中心基準 ( 指定無しは center ) 垂直方向の指定で bottom は下基準 top 上基準 指定無しで真ん中 枠より画像が小さいと写真を繰り返して貼り付けた形になりますが no-repeat repeat-x repeat-y 繰り返しなし 横にだけ繰り返し 縦にだけ繰り返し 指定することで画像の繰り返しを制御することが出来ます left bottom; の記述部分を right top no-repeat; と書き換え記述すれば 右上基準で繰り返し無しで写真が貼り付けられます :url( right top no-repeat; この記述の始めには : 終わりには ; がありますのでご注意を 半角です 写真を表示するベースの枠を広げたい場合は ここでは幅は指定出来ませんが 高さは height: 149px の数値を変えることで調整出来ます

5 写真を表示するベース枠に余白がある場合には 余白部分はそのまま白色です そのまま白でもいいんですが 色づけしたいと思います :#88bbcc url( right top no-repeat; url( の記述の前に #88bbcc を記述します この #88bbcc は色コードで適当に類似した色を指定しただけです 余白の色はここのコードを好みの色に変更してみてください 色のコードについては以下のサイトを参考にしてみて下さい CGIBOY カラーコード作成 色一覧

6 2. ブログタイトルの色 大きさを変更 ブログタイトル ブログ説明文の大きさや色 表示位置の変更したいと思います 最初に試してみる場合は 新たなテンプレートで試すことをお奨めします テンプレートのカスタマイズより スタイルシートの 190 ± 20 行あたり以下のような表示部分を探して下さい ( 行数は使用ブラウザにより多少違いますので参考行数です ).blogtitle{ font-size font-weight padding text-align letter-spacing } :20px; :bold; :40px 20px 0px 20px; :left; :2px;.description{ color font-size padding text-align letter-spacing } :#ffffff; :12px; :4px 20px 0px 20px; :left; :2px; blogtitle と description とあります blogtitle はブログタイトルで description はブログ説明文の設定です

7 個々のタグ ( 記述方法 ) について説明します font-size :20px; フォントのサイズですので 数値が大きければ拡大サイズになります font-weight :bold; 文字の太さです normal ( 普通 ) bold ( 太字 ) ( また 100 単位で数値で表示する場合もあります ) padding :40px 20px 0px 20px; 表示領域の指定となります [ 上 ] [ 右 ] [ 下 ] [ 左 ] 数値を変えてみてどう表示位置が変わるか試して見て下さい text-align :left; 文字の行揃えの位置 left 左寄せ right 右寄せ center 中央揃え letter-spacing :2px; 文字の行間を指定 color :#ffffff; 文字の色指定 # ~#ffffff などの # コードで指定します color の構文はブログ説明文の箇所しかないですが ブログタイトルの色は別の箇所にあります タイトルの色の変更は blogtitle の 23 行ほど上の箇所に以下の記述があります #banner a:visited {color:#ffffff;text-decoration:none;} ここの color 色コードを変更することでタイトルの色は変わります

8 3. 背景カスタマイズ 背景は白のままか薄い色のタイプが多いですね 濃い色の背景も中にはありますけど シンプルブルー ( 背景グラデーション ) このテンプレはグラデーションを付けた縦長の細い 画像を横に繰り返し表示することで背景としてます その背景画像を別の画像に差し替えてカスタマイズしてみます テンプレートのカスタマイズよりスタイルシートの 15 行目あたりに 以下のような body{ の記述があります その backgrand のところをカスタマイズするわけです body{ } color :#000; margin :0px; background :#C7E1E6 url(/_img/simple03/bk_0305.gif); background-repeat:repeat-x; text-align:center; 以下のように background の色コードの後ろに url( に 画像のアドレスを入れます background :#C7E1E6 url( ; は一番後ろになりますので注意して下さい background の色コードの部分は必要無いんですが そのまま残しておきます 入れる画像に透過画像を使った場合は下の色が見えますからね

9 画像の繰り返し命令文の修正 background-repeat:repeat-x; この記述は画像を横にだけ繰り返すという命令で 元の画像では横だけの繰り返しが 必要だったので記述されてますが 今回は背景の縦 横共に繰り返させる為 削除します 削除することで規定の縦横繰り返し命令が働きます 以下のようになります body{ } color :#000; margin :0px; background :#C7E1E6 url( text-align:center; こちらの桜は 素材屋じゅんさんのサイトより頂きました 背景画像などはよくネットで無料画像を頂いてきます 無料でも著作権を放棄してる画像は ほぼないでしょう ご自由に商用 個人でお使い下さいってタイプから 使用するにあたり制作者の許可を頂くタイプ リンクバナーを貼る制約があったりする場合など いろいろあります 著作権があるもですから使用に於いては 制作者のサイトの使用規約を よく読んで ご自身で確認して下さい

10 簡単な模様など背景画像を自分で作ってみるのもどうですか? 自分で撮った写真のコントラスト等を変えて 淡い画像にして貼り付けてもいいし 簡単な絵を描いてもいいかもしれませんね 背景の色だけを変えたい場合は 背景色の色コードを替えて画像を削除します body{ } color :#000; margin :0px; background :#C7E1E6; text-align:center; このような記述になります 注意何行目とか行数の数値は各自使用しているブラウザにより表示幅等の違いにより差があるため ± 20 との表示をしてあります 参考的に見て下さい InternetExplorer と Google Chrome で40 行近く差があったりします