たまろぐ

CSSでメインエリアのデザインをするモバイル編 / WordPressのテーマを作る

2019年10月19日 00:23 カテゴリー: Wordpress

前回の記事でPC用のメインエリアのデザインを解説しました。長くなってしまったので、PCとモバイル分けました。

前回の記事

今回はモバイル用のデザインをしていきます。

サムネイルですが、前回の記事のサムネイルは欲張りすぎたと深く反省し、今回は控えめにしました。そのサムネイルと本編へどうぞ!↓

CSSコード

	.main{
		font-size: 15px;
	}
	.main h2{
		margin: 40px 0 20px 0;
		text-align: center;
		color: #cc6511;
	}
	
	/* ?記事の一覧  */
	
	.main section{
		padding: 10px;
	}
	
	.main section .entry{
		width: 100%;
		display: flex;
		margin: 10px 0 10px 0;
	}
	
	.main section .entry img{
		width: 100px;
		height: 100px;
		object-fit: cover;
	}
	
	.main section .entry .entry-text{
		padding: 0 10px 0 10px;
		width: calc(100vw - 100px);
		position: relative;
	}
	
	.main section .entry .entry-meta{
		width: 100%;
		margin:0;
		padding:0;
		font-size: 8px;
	}
	
	.main section .entry h3{
		font-size: 12px;
	}
	
	.main section .entry .entry-category{
		text-align: right;
		width: 100%;
		position: absolute;
		bottom: 0;
		padding-right: 20px;
	}
	
	
	
/* ページネーション */
	.main nav{
		margin: 30px 0 30px 0;
		text-align: center;
	}
	
	.main nav ul{
		display: flex;
	}
	
	.main nav ul li{
		list-style: none;
	}
	
	.main nav ul li .page-numbers{
		margin: 5px;
		padding: 3px;
		border: solid 1px #aaa;
		border-radius: 5px;
		color: #aaa;
	}
	
	.main nav ul li .current{
		margin: 5px;
		padding: 3px;
		color: #cc6511;
		border: solid 1px #cc6511;
		border-radius: 5px;
	}

今回も長い!

解説!

.main{
	font-size: 15px;
}

mainさんに反映します。

フォントの大きさを15pxに設定します。僕は老眼な為、文字サイズを普通のサイトより大きめに設定しています。もう少し小さくていいなら12pxくらいにしてあげると見た目もいいと思います。

	.main h2{
	}

mainさんの中のh2に反映します。

margin: 40px 0 20px 0;

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

text-align: center;

文字の横の表示位置を真ん中にします。

centerを変更することで表示位置を変える事が出来ます。

leftに変更→左寄せ

rightに変更→右寄せ

color: #cc6511;

色を#cc6511に変更します。

	.main section{
		padding: 10px;
	}

mainさんの中のsectionに反映します。記事一覧の一つの記事を表示する部分です。

内側の余白を10pxに設定します。

	.main section .entry{
	}

そろそろわかってきたと思うから省略

width: 100%;

幅を上のボックスいっぱいにします。

display: flex;

表示をflexにします。

flexとは、ボックスの中の要素を横並びにすることができます。縦の長さがそろうのでとても便利!

margin: 10px 0 10px 0;

省略!

	.main section .entry img{
	}

サムネイル画像に反映するCSSです。

width: 100px;
height: 100px;

幅と高さを100pxにします。

object-fit: cover;

余った部分はトリミングします。

これを入れておかないと枠の大きさに画像を無理やりはめ込む為、縦に伸びたり、横に伸びたりしてしまいます。

	.main section .entry .entry-text{
	}

記事のボックスの日付とかタイトルとかを表示する部分です。paddingは省略します。

width: calc(100vw - 100px);

幅を画面幅いっぱいからサムネイル画像の100pxを引いた数値にします。

position: relative;

ボックスの位置を相対位置にします。この後カテゴリの表示をボックスの下部に固定するために使います。

	.main section .entry .entry-meta{
	}

現在投稿日を表示している部分です。width、margin、paddingは省略

font-size: 8px;

フォントの大きさを8pxに指定します。

	.main section .entry h3{
		font-size: 12px;
	}

タイトルの部分です。省略!

	.main section .entry .entry-category{
		text-align: right;
		width: 100%;
		position: absolute;
		bottom: 0;
		padding-right: 20px;
	}

カテゴリのボックスです。

text-align: right;
width: 100%;

省略!

position: absolute;

表示位置を絶対位置にします。親要素にposition: relative;を設定している必要があります。位置を指定することによって、好きな位置にボックスを置くことができます。

bottom: 0;

下から0の位置にボックスを配置します。これで親のボックスの下部にカテゴリを固定する事ができました。

padding-right: 20px;

微調節。何故か右に行き過ぎてしまうので、右に少しだけ余白をつくります。

ページネーションのデザイン

	.main nav{
		margin: 30px 0 30px 0;
	}

ページネーションを囲むボックスの設定。中身は省略。

	.main nav ul{
		display: flex;
	}

ページネーションがリストで出力されるので、ulにflexを指定します。これによって中のリストが横並びになります。ちなみにulは順序がないリストを表示するためにつかいます。

	.main nav ul li{
		list-style: none;
	}

リストマークを非表示にします。

	.main nav ul li .page-numbers{
		margin: 5px;
		padding: 3px;
		border: solid 1px #aaa;
		border-radius: 5px;
		color: #aaa;
	}
	
	.main nav ul li .current{
		margin: 5px;
		padding: 3px;
		color: #cc6511;
		border: solid 1px #cc6511;
		border-radius: 5px;
	}

.page-numbersの方はページネーションのリンクの設定。

.currentの方は現在表示しているページナンバー。

ほとんど同じ設定をしています。片方だけ解説します。

margin: 5px;
padding: 3px;
border: solid 1px #aaa;
color: #aaa

省略!

border-radius: 5px;

ボーダーの角を半径5pxの円変更します。

リンクの方は文字色、枠の色をシルバーにして、現在表示されているページはオレンジにしています。

PC版ではカーソルをリンクの上に置いた場合の表示まで設定しましたが、タブレットやスマートフォンだと関係ないので省略しました。

まとめ

長い所一か所終わったぁぁぁああ!!

あともう一か所、記事ページを長いのやれば後は簡単なのでもうひと頑張り!

それでは!

次の記事

WordPressのテーマを作るまとめ