たまろぐ

CSSで記事ページをデザインする。PC編 / WordPressのテーマを作る

2019年10月21日 02:17 カテゴリー: Wordpress

また長いのがやってきました。

今度は記事を表示するページです。

本当は凄く自由度の高い部分です。

吹き出しで会話風にしたり、引用を強調してみたりするのもいいかもしれないですね。きれいな目次を使っているブログもあったりします。

このテーマではシンプルな見出しとシンプルなリストを作ります。

地味w

記事ページのCSSコード

結構長いですよ?覚悟してください。僕も覚悟します。

	.main article{
		font-size: 1.2em;
	}
	
	.main article h1 a{
		color: #cc6511;
	}
	
	.main article h1{
		margin: 20px 0 50px 0;
		padding: 10px;
		background-color: #000;
		border: solid 1px #cc6511;
		border-radius: 10px;
	}
	
	.main article .meta{
		margin: 30px 0 30px 0;
	}
	
	.main article h2{
		color: #cc6511;
		margin: 50px 0 20px 0;
		border-bottom: solid 1px #cc6511;
	}
	
	.main article h3{
		color: #cc6511;
		margin: 50px 0 20px 0;
	}
	
	.main article h4{
		color: #cc6511;
		margin: 50px 0 20px 0;
	}
	
	.main article p{
		margin: 20px 0 20px 0;
	}
	
	.main article img{
		width: 100%;
		margin: 20px 0 20px 0;
	}
	
	.main article ul{
		padding: 30px;
	}
	
	
	.main article ul li{
		padding: 20px 0 10px 0;
		border-bottom: dashed 1px #cc6511;
	}
	
	
	.wp-embedded-content{
		width: 100%;
	}

テーマの解説!

	.main article{
		font-size: 1.2em;
	}

記事を表示するボックスです。

font-size: 1.2em;

文字サイズを1.2倍にする。僕は老眼なので文字は大きめにしてます。っていうか、文字サイズ小さいサイト見えないし!スマホは特に!せめて拡大できるようにはしてほしいです。お願いします。是非ともお願いします。

	.main article h1 a{
		color: #cc6511;
	}

記事のタイトルのリンクの色をオレンジ色にします。

	.main article h1{
		margin: 20px 0 50px 0;
		padding: 10px;
		background-color: #000;
		border: solid 1px #cc6511;
		border-radius: 10px;
	}

記事タイトルのボックスに反映します。

margin: 20px 0 50px 0;

ボックスの外側の余白を上20px、右0、下50px、左0にする。

padding: 10px;

内側の余白を10pxにする。

background-color: #000;

背景色を黒にします。

border: solid 1px #cc6511;

枠を指定します。solid・・・線の種類。これは実線です。 1px・・・線の太さ #cc6511・・・線の色

border-radius: 10px;

枠の角を丸くします。丸さは丸の半径を指定します。今回は10px。この値を大きくすると角の丸みが大きくなります。

	.main article .meta{
		margin: 30px 0 30px 0;
	}

日付やカテゴリを表示しているボックスです。マージンだけ指定しています。

	.main article h2{
		color: #cc6511;
		margin: 50px 0 20px 0;
		border-bottom: solid 1px #cc6511;
	}

記事内のh2に反映します。

内容は省略!

border^bottomは枠の下だけを指定しています。

	.main article h3{
		color: #cc6511;
		margin: 50px 0 20px 0;
	}
	
	.main article h4{
		color: #cc6511;
		margin: 50px 0 20px 0;
	}

h3、h4に反映します。内容は省略。大きさが違うだけで全く一緒ですね。

	.main article p{
		margin: 20px 0 20px 0;
	}

段組みに指定します。Wordpressでは改行するたびに段組みが別の物になります。内容は省略!

	.main article img{
		width: 100%;
		margin: 20px 0 20px 0;
	}

記事内の画像に反映します。widthは幅です。今回は親ボックスの幅いっぱいになるように指定します。

	.main article ul{
		padding: 30px;
	}

ulはリストの外側のボックスです。これは順序が関係ないリストを表します。順序があるリストはulではなくolを使います。

	.main article ul li{
		padding: 20px 0 10px 0;
		border-bottom: dashed 1px #cc6511;
	}

リストに反映します。枠の線の種類がdashedになっていますが、これは点線を表示します。

	.wp-embedded-content{
		width: 100%;
	}

これはブログカードのタイトルに反映します。内容は省略!

以上でございます。

まとめ

思ったより短くできましたね。もうサムネイル画像作ってしまっているので、本当はスマートフォン用も一緒に解説したかったんですが、別々にすることにします。

それでは!

次の記事

WordPressのテーマを作るまとめ