Wordpressツイート前回の記事でPC用のメインエリアのデザインを解説しました。長くなってしまったので、PCとモバイル分けました。WordPressのテーマを作る今回はモバイル用のデザインをしていきます。サムネイルですが、前回の記事のサムネイルは欲張りすぎたと深く反省し、今回は控えめにしました。15px;}mainさんに反映します。フォントの大きさを15pxに設定します。僕は老眼な為、文字サイズを普通のサイトより大きめに設定しています。小さくていいなら12pxくらいにしてあげると見た目もいいと思います。h2{}mainさんの中のh2に反映します。0;ボックスの外側の余白を上40px、右0、下20px、左0に設定します。center;文字の横の表示位置を真ん中にします。centerを変更することで表示位置を変える事が出来ます。#cc6511;色を#cc6511に変更します。10px;}mainさんの中のsectionに反映します。記事一覧の一つの記事を表示する部分です。内側の余白を10pxに設定します。100%;幅を上のボックスいっぱいにします。flex;表示をflexにします。flexとは、ボックスの中の要素を横並びにすることができます。img{}サムネイル画像に反映するCSSです。100px;幅と高さを100pxにします。cover;余った部分はトリミングします。これを入れておかないと枠の大きさに画像を無理やりはめ込む為、縦に伸びたり、横に伸びたりしてしまいます。.entry-text{}記事のボックスの日付とかタイトルとかを表示する部分です。paddingは省略します。100px);幅を画面幅いっぱいからサムネイル画像の100pxを引いた数値にします。relative;ボックスの位置を相対位置にします。この後カテゴリの表示をボックスの下部に固定するために使います。.entry-meta{}現在投稿日を表示している部分です。8px;フォントの大きさを8pxに指定します。12px;}タイトルの部分です。20px;}カテゴリのボックスです。absolute;表示位置を絶対位置にします。relative;を設定している必要があります。位置を指定することによって、好きな位置にボックスを置くことができます。0;下から0の位置にボックスを配置します。これで親のボックスの下部にカテゴリを固定する事ができました。右に行き過ぎてしまうので、右に少しだけ余白をつくります。0;}ページネーションを囲むボックスの設定。flex;}ページネーションがリストで出力されるので、ulにflexを指定します。これによって中のリストが横並びになります。ちなみにulは順序がないリストを表示するためにつかいます。none;}リストマークを非表示にします。5px;}.page-numbersの方はページネーションのリンクの設定。.currentの方は現在表示しているページナンバー。ほとんど同じ設定をしています。5px;ボーダーの角を半径5pxの円変更します。リンクの方は文字色、枠の色をシルバーにして、現在表示されているページはオレンジにしています。PC版ではカーソルをリンクの上に置いた場合の表示まで設定しましたが、タブレットやスマートフォンだと関係ないので省略しました。まとめ長い所一か所終わったぁぁぁああ!!あともう一か所、記事ページを長いのやれば後は簡単なのでもうひと頑張り!それでは!次の記事CSSでサイドバーをデザインする。https://tamalog.info。