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;

を、先例と同じように変更します。


トップ > P-Linkの基本的な使い方 > SEO-P-Linkのデザインを変える

P-Link 配布元
P-Link カスタマイズ指南
カテゴリ
記事検索