シリウス フッターCSSカスタマイズ文字色、背景色変更方法
フッターはあなたの記事をひと通り見終わった訪問者が見る場所で、
フッターデザインを良くしたり、利用することであなたのサイトの
直帰率が減ったりイメージの向上にもつながります。
シリウスのメニュー画面からはフッターにテキストリンクを増やす。
ということはできますが、それ以外の細かい設定はできません。
CSSを編集することで細かくフッター部分の
デザインを変えることができますので、
今回はCSSを利用してフッター部分のデザインを
変える方法を紹介していきます。
シリウスのフッター部分をCSSで変更する方法
上部メニューボタンより『テンプレート』
⇒『スタイルシート編集』と進みます。
そして、
『styles.css』タグで『フッター』というキーワードで
検索をかけると下記の場所に行きます。
この内容を編集することでフッターを
細かく設定することが可能です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* フッター */ #footer { text-align: center;←コピーライト部分文字位置 color: #FFFFFF;←コピーライト英語部分色 line-height: 64px; height: 64px;←フッター下余白長さ background-image: url(./img/footer.gif); background-repeat: repeat-x; background-position: left top; } #footer a{ color: #FFFFFF;←コピーライト英語部分色 text-decoration: none; } #footermenu{ text-align:center; padding:6px; } #footlink { text-align: center;←リンク文字位置 padding-top: 8px;←リンク文字上余白大きさ padding-bottom: 8px;←リンク文字下余白大きさ color: #666666; font-size: 12px;←リンク文字大きさ background-color: #E5E5E5;←リンク部分背景色 } #footlink a { color: #d00000;←リンク色 margin-left:5px; margin-right:5px; } |
是非上記内容を参考にしてあなたのサイトの
フッターを細かく設定してみてくださいね。
また、
CSSの編集はサイトの構造を変えうる大きな変更を行うので、
編集の前に必ずバックアップを取るようにして下さい。
シリウスの全てのカスタマイズをまとめました。
シリウスの全てのカスタマイズをまとめました。
⇒シリウス 【全カスタマイズ一覧まとめ】 HTMLテンプレート
他の場所をカスタマイズされたい場合は
是非参考にしてみてくださいね。