AFFINGER

【AFFINGER】追加CSSでヘッダーとフッターをカスタマイズする方法

 

AFFINGERのサイトデザインをカスタマイズしているけど、なんかかゆいところに手が届かないなぁ。CSSをコピーするだけで初心者でも簡単にできないかな?

 

このような疑問にこたえます。

 

本記事の内容

・【AFFINGER】headerの追加CSS

・【AFFINGER】footerの追加CSS

・【AFFINGER】追加CSSへの移動方法と貼り付ける場所

・【AFFINGER】追加CSSでヘッダーとフッターをカスタマイズする方法:まとめ

 

本記事では実際にAFFIGERを使っているぼくが、カスタマイズに使用したCSSのコードを公開しています。(カスタマイズは現在進行形)

 

追加CSSにコピー&ペーストをするだけで、AFFINGERの細かい部分の見た目を変えることができます。

 

3分で読めるのでAFFINGERの改造初心者の方は参考にしてみてください!

\ AFFINGER公式サイト/

AFFINGER5の詳細を見る

【AFFINGER】headerの追加CSS

 

通常の設定では、変更項目がありませんよね。

 

なので、header部分は全体的に表示を大きく変更しました。

 

逆に小さくすることもできるので試してみてくださいね!

 

header部分で変更した箇所

  1. ブログタイトルのフォントサイズ
  2. メニューのフォントサイズ
  3. メニューバーの高さ

変更したい箇所のCSSのコードを【追加CSS】に、コピペしていく作業となります。

 

追加CSSへの移動方法

  1. 外観
  2. カスタマイズ
  3. 追加CSS

 

 

headerに追加した3つのCSS

①ブログタイトルのフォントサイズ

header .sitename {
font-size: ここに半角数字px;
}

 

②メニューのフォントサイズ

header .smanone ul.menu li a {
font-size: ここに半角数字px;
}

 

③メニューバーの高さ

#st-menuwide{
border-top-width: ここに半角数字px;
border-bottom-width: ここに半角数字px;
}

 

『border-top-width』はメニューバーの上が広がります!
『border-bottom-width』は下が広がります!

 

【AFFINGER】footerの追加CSS

 

3列メニューの真ん中に、固定メニューが入っている普通のフッターです。

 

変更前の状態に、気持ちわるさを感じる方は参考にしてみてください!筆者はA型なので、こういうところは見過ごせませんでした!

 

footerの変更点

  • メニューの左揃え
  • メニューの行間

 

footerに追加した2つのCSS

メニューの左揃え

footer ul, footer ol{
padding-left: 0px;
padding-bottom: ここに半角数字px;
}

 

padding-bottomは、フッター下のの余白が広くなります。

 

必要なければ消してもOKです!

 

メニューの行間

footer li, id{
padding-bottom: ここに半角数字px;
}

 

【AFFINGER】追加CSSへの移動方法と貼り付ける場所

追加CSSへの移動方法

あらためて、以下の手順で【追加CSS】に移動できます。

 

追加CSSへの移動方法

  1. 外観
  2. カスタマイズ
  3. 追加CSS

 

 

貼り付ける場所

 

赤枠の部分に追加したいCSSをコピペして【公開】とすればOKです。

 

追加したCSSごとに、改行を入れておくと分かりやすいですよ!

 

【AFFINGER】追加CSSでヘッダーとフッターをカスタマイズする方法:まとめ

 

AFFINGERで、CSSを追加してカスタマイズする方法を紹介しました。

 

PVが増えてくると、デザインは最低限こだわりたいですよね。今回の記事をまとめると...。

 

追加CSSへの移動方法

  1. 外観
  2. カスタマイズ
  3. 追加CSS

 

ヘッダーとフッターの追加CSS一覧

header .sitename {
font-size: ここに半角数字px;
}header .smanone ul.menu li a {
font-size: ここに半角数字px;
}#st-menuwide{
border-top-width: ここに半角数字px;
border-bottom-width: ここに半角数字px;
}

footer ul, footer ol{
padding-left: 0px;
padding-bottom: ここに半角数字px;
}

footer li, id{
padding-bottom: ここに半角数字px;
}

 

\ AFFINGER公式サイト/

AFFINGER5の詳細を見る

今回は以上です。

 

最後まで読んでくれてありがとうございます!

 

-AFFINGER