たまろぐ

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

2019年10月21日 13:52 カテゴリー: Wordpress

今回は記事ページのモバイル端末用のCSSを解説していきます。

いくら超シンプルなテーマだといっても、解説するのは途方もないなぁなんて思っていましたが、いよいよ終わりが近づいてきました。この記事を合わせて、あと二つで完結です!ラストスパート頑張っていきましょう!

モバイル用記事ページのCSSコード

	.main article h1{
		margin: 20px 0 50px 0;
		padding: 10px;
	}
	
	.main article h1 a{
		color: #cc6511;
	}
	
	.main article h2{
		color: #cc6511;
		margin: 50px 0 20px 0;
		border-bottom: solid 1px #cc6511;
		padding: 10px;
	}
	
	.main artcle h3{
		color: #cc6511;
		margin: 50px 0 20px 0;
		padding: 10px;
	}
	
	.main article h4{
		color: #cc6511;
		margin: 50px 0 20px 0;
		padding: 10px;
	}
	
	.main article p{
		margin: 20px 10px 20px 10px;
		font-size: 18px;
	}
	
	.main article img{
		width: 100%;
		margin: 20px 0 20px 0;
	}
	
	.main article ul{
		padding: 10px 10px 10px 30px;
	}
	
	
	.main article ul li{
		padding: 10px 0 10px 5px;
		border-bottom: dashed 1px #cc6511;
	}
	
	.wp-embedded-content{
		width: 100vw;
		margin: auto;
		max-width: 100%;
	}

難しい事は何もない!早速解説していきます。

解説!

	.main article h1{
	}

記事のタイトルに反映します。余白だけ変更していますね。

margin: 20px 0 50px 0;

ボックスの外側の余白を上20px、右0、下50px 左0に設定しています。

padding: 10px;

ボックスの内側の余白を10pxに変更しています。

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

記事タイトルのリンクの色を変更しています。グレー背景にオレンジ色結構気に入っています。

	.main article h2{
	}

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

color: #cc6511;
margin: 50px 0 20px 0;
padding: 10px;

省略!

border-bottom: solid 1px #cc6511;

枠のしたの部分だけ指定します。

solid 線の種類 1px 線の太さ #cc6511 戦の色

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

記事内の見出しh3とh4に反映します。

それぞれ余白と色を変更しています。後は文字サイズが違うだけ。

	.main article p{
		font-size: 18px;
		margin: 20px 10px 20px 10px;
	}

記事の文字サイズを18pxに設定。この値は結構大きめです。僕みたいな老眼仕様。アクセスビリティって大事なんですよね。各自調節してください。マージンは省略!

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

記事内の画像に反映。

widthは幅を指定できます。100%なので、親要素いっぱいの幅になります。

マージンは省略!

	.main article ul{
		padding: 10px 10px 10px 30px;
	}

リストが格納されているボックスです。ulは順序が関係ないリストに使います。順序が決まっているものはolを使ってください。あ、CSSではなくHTMLの方でol使ってくださいね。

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

リストに反映します。

内容は省略!

	.wp-embedded-content{
		margin: auto;
		max-width: 100%;
		width: 100vw;
	}

ブログカードのタイトルに反映します。

margin: auto;

横のマージンをオートにします。これによって、なんとボックスが中央に表示されます。

max-width: 100%;

最大の幅を100%にします。横スクロール嫌い!

width:100vw;

幅を画面の幅いっぱいにします。

vwについてちょっと解説

そういえばこれ詳しく解説してなかったかもなぁなんて思って解説します。

vwは画面の幅に対して要素の幅をどのくらいにするかを指定できます。例えば

width: 80vw;

こうすると画面の幅の80%の幅になります。%との違いは画面の幅を基準にするか、親の要素の幅を基準にするかです。

解説終わり!

まとめ

これでフッター以外は全てデザインし終わりました。

フッターはCSSかなり短いのでもうほとんど終わったといっても過言ではないでしょう。

というわけで、あと一記事だけお付き合いください!

次の記事

WordPressのテーマを作るまとめ