CSS編集用デザインのアメブロにフッターを作る

新スキンのみ対応

アメブロカスタマイズのわざめーばです。

こんにちは。

今年(2012年)初めにデザイン変更して以来、場所だけ確保しながら中身が空っぽだったフッター(ページ最下部の告知枠?)を作ってみました。

今回は、新スキン(CSS編集用デザイン)のアメブロに『フリースペースとCSSを使ってフッターを作る方法』をご紹介したいと思います。

もちろんデザイン等は、それぞれのブログに合わせたものにされるでしょうから、今回ご紹介するのは、ごくごくシンプルな基本的なものです。

ただ、形を決めないと作れないので、例として、横幅がCSS編集用デザインの初期設定のブログ幅(980ピクセル)と同じ、高さが200ピクセルの、内部を二段組みにしたフッター(画像とは異なります)にしてみたいと思います。

ちなみに、先ほどフリースペースを使うと書きましたが、禁止タグが含まれる場合は代わりにフリープラグインを使う必要があります。

カスタマイズ方法

まず、フリースペースに以下のようにタグを記述します。

<div class="footerArea"><div class="footerContents">
<div class="footerSubContents" id="footerSubContents1">
左側コンテンツの内容をここに書きます。
</div>
<div class="footerSubContents" id="footerSubContents2">
右側コンテンツの内容をここに書きます。
</div>
<div class="footerContentsEnd"></div>
</div></div>

ただし、フリースペースは、保存するときに自分で書いたタグ以外に行末に一つずつ<br>タグが付加されるため、このままでは不要な改行がたくさん入ってしまい、うまくいきません。

なので、ちょっと面倒ですが、全体を1行にまとめてフリースペースに記述するようにしてください。

もちろん、実際に改行したい場所は、改行するか、<br />タグを書いておくようにして下さい。

次に、ユーザーCSSの末尾に以下のような設定を追加しましょう。

.skinContentsArea{
  position:relative;
  padding-bottom:200px; /* 高さ */
}
.footerArea{
  position:absolute;
  width:978px; /* 横幅 - (枠線幅 x 2) */
  height:198px; /* 高さ - (枠線幅 x 2) */
  left:0;
  bottom:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid #cccccc; /* 枠線 */
  background-color:#ffffff; /* 背景色 */
}
.footerContents{
  margin:10px; /* 枠線の内側のマージン */
}
.footerSubContents{
  float:left;
  width:455px; /* 左右段組部の幅 */
  height:180px; /* 段組部の高さ */
  margin:0 10px; /* 段組間のマージン */
  overflow:auto;
}
.footerContentsEnd{
  clear:both;
  margin:0;
  padding:0;
  height:0;
  overflow:none;
}

これで、ページ最下部にグレー枠で囲まれた、二段組のシンプルなフッターが表示されると思います。

あとは、左右の内容を埋めていってください。

なお、これ以上のカスタマイズに関しては、上記CSSに書いてある注釈(グレー文字部分)を参考にしてください。

以上、新スキン(CSS編集用デザイン)のアメブロに『フリースペースとCSSを使ってフッターを作る方法』の一例を紹介させて頂きました。

よかったら参考になさってください。

アメブロカスタマイズで人の集まるブログ作り