SEO-P-Linkのデザインを変える
元のP-Linkは黒/グレー基調なので、デザインを変えたいという方も多いと思います。スタイルシートが少しわかる方には僕の解説は不要ですけど、まったくの初心者の方におすすめなのは、ヘッダーとフッターの黒と背景のグレーを自分のサイトと同じような配色にすること。簡単ですが、自分のサイトとの違和感がかなり減りますよ!
css フォルダの中の style.css ファイルを、テキストエディタで開きます(よくわからなければメモ帳でOKです)。デザインはここの書き方で変えられます。
●ヘッダー部分の変更
h1 の background-image:url(../img/bg_header.jpg);を
background-color: #○○○○○○;と
希望の色に変更します。
色を画像指定にしたい場合は、
bg_header.jpg を変更すればよいだけです。
色指定の場合は、その下の
background-repeat: no-repeat; は不要になります。
●フッター部分の変更
/*著作*/
div#copyright の
background: #666;
background-image: url(../img/bg_footer.jpg);
background-repeat: no-repeat;
を削除して
background-color: #○○○○○○;と色指定をします。
色を画像指定にしたい場合は、
上記の削除はせずに、
bg_footer.jpg を変更すればよいだけです。
●全体の背景部分の変更
body の
background: url(../img/grade-red2.jpg);
background-repeat: repeat-x;
を、先例と同じように変更します。
css フォルダの中の style.css ファイルを、テキストエディタで開きます(よくわからなければメモ帳でOKです)。デザインはここの書き方で変えられます。
●ヘッダー部分の変更
h1 の background-image:url(../img/bg_header.jpg);を
background-color: #○○○○○○;と
希望の色に変更します。
色を画像指定にしたい場合は、
bg_header.jpg を変更すればよいだけです。
色指定の場合は、その下の
background-repeat: no-repeat; は不要になります。
●フッター部分の変更
/*著作*/
div#copyright の
background: #666;
background-image: url(../img/bg_footer.jpg);
background-repeat: no-repeat;
を削除して
background-color: #○○○○○○;と色指定をします。
色を画像指定にしたい場合は、
上記の削除はせずに、
bg_footer.jpg を変更すればよいだけです。
●全体の背景部分の変更
body の
background: url(../img/grade-red2.jpg);
background-repeat: repeat-x;
を、先例と同じように変更します。
トップ > P-Linkの基本的な使い方 > SEO-P-Linkのデザインを変える