前回の【WordPress】トップページにある記事のスライダーを非表示にする方法と同様に、今回もワードプレスのデザインに関する解説です。
ここでは、ワードプレスを開設して間もない初心者の私がブログを運営していくうえでつまずいたことをご紹介しています。
更新する度に、「あぁーここをこうしたいな」という欲がでてきたり、「他のブログのここが素敵だな」と比較するようになってくると自分のブログの粗が頻繁にでてきます。
そこで今回の疑問「スマホで見た時の記事が、縦に一行ずつしか表示されないのはどうして？」を基に、ワードプレスのトップページに表示させる記事数や表示デザインの変更方法を調べてみました。
トップページにある記事の配置とは？
私のブログでいうところの赤枠で囲われた部分のことを指しています。
自分の好みに合わせて、表示数や見せ方を変更することができます。
私はパソコンとスマホ共に横並びで二記事表示させるように設定しています。
愛用しているWordPressのテーマ
ちなみに私は、ワードプレスの人気テーマSwell（スウェル）
を使っています。
シンプルなデザインでとても気に入っています。
無料のテーマもありますが、運用していくうえで不便さを感じたり、記事が増えたあとでの移行を考えると、デザインが合わない場合、手動で記事一つ一つに修正を加える手間を省きたかったので、最初から有料デザインを購入しました。
フォントやデザイン性はもちろん、初心者にも使いやすくなっているのでおすすめです。
ワードプレスのテーマ選びに悩んでいる方は、ぜひ検討してみてください。
トップページにある記事の配置を変更する
まずはワードプレスにログインし、サイドメニューから「外観」→「カスタマイズ」をクリック。
左に表示される「記事一覧リスト」をクリック。
ここで、トップページにある記事の表示数や表示デザインを具体的に設定していきます。
- リストレイアウト（PC／Tab）
- パソコンとタブレット画面の記事の表示スタイルを変更できます。
- リストレイアウト（SP）
- スマホ画面の記事の表示スタイルを変更できます。
- 最大カラム数（PC／Tab）
- パソコンとタブレット画面の横並びで表示させる記事の数を決められます。最大３つまで設定することができます。
- しかし私のように右側にサイドバーの領域がある場合は最大２つまでの表示となります。
- ※上記のリストレイアウトで「カード型・サムネイル型」を選択した場合でのみ有効です。
- 最大カラム数（Mobile）
- モバイル画面の横並びで表示させる記事の数を決められます。最大２つまで設定することができます。
- ※上記のリストレイアウトで「カード型・サムネイル型」を選択した場合でのみ有効です。
- 「Read More」のテキスト
- リストレイアウトで「ブログ型・リスト型（左右交互）」で表示される「続きを読む」の表示を変更します。
これが２カラムと３カラムの比較です。
２カラムだと二つの記事が横に大きく表示されてインパクトが大きく、３カラムだと三つの記事を横にまとめて表示させることができるのでより多くの記事を表示させることができます。
トップページにある記事の表示デザインを変更する
表示数を設定したあとは、表示デザインについてです。
さきほどの「リストのレイアウト設定」を下にスクロールしていくと今度は「投稿情報の表示設定」という項目があります。
ここでは、トップページに表示される各記事における詳細情報の表示の有無を設定できます。
例えば、画像の通りに「公開日を表示する」にチェックを入れ、パソコンとタブレットの抜粋文の文字数を「80字」に設定すると・・・
このようにサムネイルと記事のタイトルの下に、80文字までの記事の書き始めと、その下に記事の作成日も表示されます。
「投稿情報の表示設定」の次は「カテゴリーの表示設定」という項目があります。
ここでは、カテゴリ表示の有無と装飾を設定できます。
その他にも「サムネイル画像の比率設定」や「サムネイルの上にマウスを当てた時の反応」など細かな設定も可能ですのでお時間がある方は設定してみてください。
設定後は、忘れずに「公開」ボタンを押してくださいね。
