フッター編
F01 フッターにグラデーション画像を付ける
【手順】
- 上部が白になるようなグラデーション画像を作成します。下部はフッターの下にある著作権表示と同じ色の画像の方が、綺麗に画像がつながります。
当サイトの例では、以下の画像を作成しています。
画像名：footer_gra2.png
サイズ：幅 1px 高さ 500px - 作成した画像をSWFUでアップロードします。
- 以下のスクリプトをフッターにコピペします。
#beforescript{{ <style type="text/css"> <!-- /* フッターに画像(グラデーション)を設定 */ .haik-palette-orange .haik-footer { padding: 0px 0px; background: url("/swfu/d/footer_gra2.png"); } .haik-palette-orange .haik-footer-border { border-top: 0px solid #ededed; padding: 0 15px; } .haik-palette-orange .haik-footer p a { color: #ffffff; } --> </style> }}
【解説】
- 背景画像をリピート指定で背景色に設定しますので、画像の横幅は1pxでOKです。
- 画像の高さが小さいと、スマホの場合画像が切れることがありますので、ヘッダーの情報数に合わせて調整してください。
- 著作権表示の項目との間に隙間があくので、上下のpaddingをゼロに指定しています。
- フッターの文字色を白に設定しています。
フッターに背景画像を付ける
(未稿)
ご意見箱
皆様のご意見をお待ちします。
- すみません。ここを読んでフッターにグラデーションを入れてみたのですが、フッタにおまじないを書いて、更新したとたんに画面が真っ白になってしまい、何も表示されなくなってしまいました。
アドレスは
http://www.umihoshi.com
です。
真っ白なので何もできない状態です。そこでインストールシステムでhaikを再導入したところ、新規画面になってしまい、いままでのHPは表示できなくなってしまいました。
サーバーのデータはそのまま残っているのですが、なんとか復旧する方法はないでしょうか。 -- 2016-02-01 (月) 21:24:27 - すみません。ここを読んでフッターにグラデーションを入れてみたのですが、フッタにおまじないを書いて、更新したとたんに画面が真っ白になってしまい、何も表示されなくなってしまいました。
アドレスは
http://www.umihoshi.com
です。
真っ白なので何もできない状態です。そこでインストールシステムでhaikを再導入したところ、新規画面になってしまい、いままでのHPは表示できなくなってしまいました。
サーバーのデータはそのまま残っているのですが、なんとか復旧する方法はないでしょうか。 -- 2016-02-01 (月) 22:03:40 - コメントが複数重なってしまっていて申し訳ありません。
その後haikを再度インストールしたところトップページが初期化されてしまいましたが、フロントページだけ書き直してなんとか他のページにアクセスできるように復旧できました。
-- うみほし 2016-02-01 (月) 23:21:09 - うみほし様
大変ご迷惑をおかけしました。申し訳ありません。
スクリプトを修正したとき、こちらの方への反映にミスがありました。一部スクリプトを修正しました。
具体的に言うと、以下の2行追加しました。
-->
</style>
これがなかったため、画面が真っ白になってしまいました。修正版で問題ないことを確認しました。
以後、スクリプトには十分に注意します。
うみほし様のサイトを拝見しました。たくさんのコンテンツがありすばらしいサイトですね。
今後共、当サイトをよろしくお願いいたします。 -- tomzo 2016-02-03 (水) 00:41:40 - 修正ありがとうございます。
私のHPではブルーを基本色に選んでいます。スクリプトの
.haik-palette-orange .haik-footer p a {
color: #ffffff;
の部分は変える必要があるのではと思いましたが、どう変えたらいいでしょうか。 -- うみほし 2016-02-03 (水) 11:07:29 - 修正版を試してみました。しかし、今度は変化無しでした。うーむ、なかなかうまくいきません。
当方はwindows10,クローム、haik604です。 -- うみほし 2016-02-04 (木) 10:13:57 - うみほしさん
CSSの改造方法を見てください。選択したテーマカラーによりCSSが少し異なります。
.haik-palette-orange を .haik-palette-blue に変更すればうまくいくはずです。
お試しください。
color: はフッターの文字の色です。 -- tomzo 2016-02-05 (金) 01:45:28 - うまくいきました。
Blueに書き換えるのを一カ所見落としていました。
ありがとうございます。
-- うみほし 2016-02-05 (金) 11:30:56 - うまくいって良かったですね。ご利用ありがとうございます。 -- tomzo 2016-02-05 (金) 22:36:30