たまろぐ

CSSでフッターをデザインする / WordPressのテーマを作る

2019年10月21日 14:32 カテゴリー: Wordpress

最後おおおおおおおあああああ

長かったテーマの解説もこの記事で最後になります。

これまで読んでいただいた方に聞きたいことがあります。

分からないところありました?

あったら是非質問してくださいね!Twitterまでお願いします。

フッターのCSSコード

PC

	footer{
		display: block;
		width: 100%;
		padding: 100px;
		text-align: center;
		border-top: solid 1px #cc6511;
	}	
	.footer footer a{
		color: #cc6511;
	}

モバイル

	.footer{
		letter-spacing:0.1em;
		margin-top:30px;
		border-top: solid 1px #cc6511;
		padding: 30px 0 30px 0;
		text-align: center;
	}
	
	.footer a{
		color: #cc6511;
	}

うん!短い!!

解説!

PC向け

footer{
}   

フッターに反映します。

display: block;

表示をボックスタイプにします。

width: 100%;

幅を100%にします。

 padding: 100px;

内側の余白を100pxに変更します。

text-align: center;

テキストの表示位置を中央にします。

border-top: solid 1px #cc6511;

枠の上に指定します。

solid 線の種類 1px 線の幅 #cc6511 線の色

	.footer a{
		color: #cc6511;
	}

リンクの色を変更します。

モバイル向け

	.footer{
	}

フッターに反映します。

letter-spacing:0.1em;

字間の変更。広めにすると、少し古いアメリカの映画のタイトルロゴみたいになります。

margin-top:30px;

外側上部の余白を30pxに変更

border-top: solid 1px #cc6511;
text-align: center;

省略

padding: 30px 0 30px 0;

内側の余白を上30px、右0、下30px、左0に変更します。

	.footer a{
		color: #cc6511;
	}

省略!

以上でございます!

まとめ

フッターの手抜き感ヤバすぎw

ここにサイトマップとか、カテゴリとか表示していますが、このCSSは表示しないことを前提に作っています。そんなナビゲーションメニューを表示したい方はちょこちょこ変更しないとだめかもしれないですね。解説でわからないことはTwitterまで!

次の記事

完結!!!!

WordPressのテーマを作るまとめ