たまろぐ

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

2019年10月15日 00:57 カテゴリー: Wordpress

長い所きました!CSSも長いですが、記事も長くなる為、PC用とスマートフォン用分けました。

最近、サムネイルが下ネタばっかだなぁ。。。

コード

	.main{
		width: 800px;
		float: left;
		padding: 100px;
	}
	
	
/* ?記事の一覧  */
	
	.main section .entry{
		width: 600px;
		display: flex;
		margin: 50px 0 50px 0;
	}
	
	.main section .entry img{
		width: 150px;
		height: 150px;
		object-fit: cover;
	}
	
	.main section .entry .entry-text{
		padding: 10px;
		width: 450px;
		position: relative;
	}
	
	.main section .entry .entry-meta{
		padding: 10px;
		width: 100%;
	}
	
	.main section .entry .entry-category{
		text-align: right;
		width: 100%;
		position: absolute;
		bottom: 0;
		padding-right: 20px;
	}
	
	
	
/* ページネーション */
	.main nav{
		margin: 30px 0 30px 0;
	}
	
	.main nav ul{
		display: flex;
	}
	
	.main nav ul li{
		list-style: none;
		margin: 6px;
	}
	
	.main nav ul li a, .main nav ul li span{
		display: block;
		padding: 6px;
		border: solid 1px #aaa;
		border-radius: 5px;
		color: #aaa;
	}
	
	.main nav ul li a:hover{
	    color: #cc6511
        border-color: #cc6511;
     }
	
	.main nav ul li .current{
		color: #cc6511;
		border: solid 1px #cc6511;
		border-radius: 5px;
	}

	

解説

.main{
}

メインさんに反映します。

width: 800px;

width 幅を800pxにします。

float: left;

float 浮かせるという意味。pageさんの中で左(left)に配置します。入れる隙間さえあれば上詰めで入り込んできます。前回の記事で書いたclear: both;で入り込んでくるボックスを解除しないとデザイン崩れが起きます。前回の記事は下記から。

padding: 100px;

ボックスの内側の余白を100pxにします。ここの余白は大きめに取りました。最近余白が大きいサイトが多いですよね。とても見やすくなります。

記事のリンクのボックス

.main section .entry{
}

メインさんの中のsectionの中のentryさんに反映する。

width: 600px;

横幅は600pxにしましょう。

display: flex;

entryさんの中の要素を横並びにします。これを使うと縦の長さがそろうので便利です。

margin: 50px 0 50px 0;

ボックスの外側の余白を指定します。間にスペースを入れることで上下左右の余白を一括で別々の値にすることができます。順番は「上 右 下 左」です。

.main section .entry img{
}

mainさんの中のsectionの中のentryさんの中のimgに反映する。記事のサムネイルですね。これ飽きたし長くなってくるなぁ。。。

width: 150px;

省略!

height: 150px;

高さを150pxに指定します。

object-fit: cover;

はみ出した部分を切り取ります。これを設定しないと、画像が指定した幅と高さに合わせて伸びたり縮んだりしてしまいます。

.main section .entry .entry-text{

サムネイルの横の記事タイトルや日付が入っているボックスに反映します。

padding: 10px;
width: 450px;

省略!

position: relative;

要素の位置を相対位置にします。この後カテゴリ名を表示するボックスをこのボックスの下部に表示するために必要となってきます。詳しい説明は後程。

	.main section .entry .entry-meta{
		padding: 10px;
		width: 100%;
	}

日付を表示しているボックス。中身は省略!

.main section .entry .entry-category{
}

カテゴリを表示しているボックスに反映する。

text-align: right;

text-align テキストの表示位置を右寄せ(right)にする。

width: 100%;

幅を100%にする。この場合はカテゴリのボックスの親要素であるentry-textさんの幅と同じか、entry-textでpaddingを指定している場合は、entry-textの幅-paddingで指定している幅になります。

position: absolute;
bottom: 0;

position 要素の位置を absolute 絶対位置にする。position: relative;をしている親要素の左上を基準に位置を指定できます。

bottom 下から 0 の位置に配置する。

つまりこの二つでカテゴリの表示のボックスを下詰めで表示できるようにしています。

padding-right: 20px;

このままだとボックスの表示が右にはみ出してしまうので、paddingで右側に20pxの余白を作ります。position: absolute;で表示位置を変更するとこういう微調整が必要な場合が

ページネーションのデザインのカスタマイズ

.main nav{
}

mainさんの中のnavに反映する。ページネーションの全体を囲んでいるボックスの事

margin: 30px 0 30px 0;

省略!

	.main nav ul{
		display: flex;
	}

ul は li を表示する場合によく使われます。他にも何種類かありますが、とりあえずulを使っておけばいいでしょう。display: flex;でli(今回はナビゲーションメニュー)を横並びで表示します。

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

リストでナビゲーションメニューを表示しているため、リストマークを非表示にします。

外側の余白も少し大きめにとっています。

.main nav ul li a, .main nav ul li span{
}
	

ページネーションの現在表示されているページは .main nav ul li span 、次のページのリンクは .main nav ul li a です。つまり、ページネーション全ての文字に反映するCSSです。

display: block;
padding: 6px;
border: solid 1px #aaa;

表示をblockにして、内側の余白を6pxにして、外側に銀色の枠を追加しています。こうすることで、枠の内側が全てリンク又はテキストになります。リンクの文字をクリックしなくても枠の内側どこをクリックしてもリンクに飛びます。ボタン風のリンクになります。

border-radius: 5px;

枠の角を丸くします。pxは丸くする半径で、大きくすると角がより滑らかになります。個別に指定することもできるので、これで面白い形を作ることもできます。

color: #aaa;

文字色を銀色に変更する。

.main nav ul li a:hover{
}

a:hoverはaにカーソルを合わせたときに表示を変更したい場合に使います。リストに指定したい場合は li:hover とします。

color:#ccc;
border-color: #cc6511;

文字色と枠の色をカーソルが乗っている間はオレンジ色にする。

.main nav ul li .current{
}

現在表示されているページ番号のデザインを編集する。

color: #cc6511;
border: solid 1px #cc6511;
border-radius: 5px;

省略!

そして解説は以上!

まとめ

今回長かったですね。今後はあまり変わり映えもしない内容かもしれないですが、きっちり解説はしていこうと思いますので今後もお願いします。

次の記事

また今度!

WordPressのテーマを作るまとめ