#06「Content Views」


 

ブログTOPページに最新記事が表示されるのですが、テーマ「Lightning」のデフォルトだとアイキャッチ画像と投稿記事の最初の100文字程度が縦に並んでいます。

この表示をタイル状に綺麗に表示させたいと思ったことは有りませんか?

テーマ「Lightning」では表示方法を変更できないので、プラグイン「Content Views」を使用します。

 

「Content Views」使用方法

まずはインストールしましょう!

インストール方法はこちら「素人ホームページ制作!厳選プラグイン!#01 プラグインって何?〜インストール方法」をご覧ください。

インストール完了後、メニューから赤色のCVのマーク「Content Views」の新規追加をクリック。

 

「Content Views」設定方法

Add New View画面で設定を進めます。

タイトル:自分で管理しやすいタイトルを入力します。

Filter Setting

Content type:投稿にチェックを入れます。

Commom Limit:最大いくつの記事を表示させるか入力します。

 

Display Settings

Layout

グリッド、折り畳み、スクロールリストのいずれかを選択し、チェックを入れます。

今回はタイル状に並べたいのでグリッドにチェックを入れます。

 Items per row:1行あたりの記事数をいくつにするか、任意の数値を入力します。

 

Responsive

タブレット、スマートフォン用にそれぞれ、1行あたりの記事数をいくつにするか、任意の数値を入力します。

 

Format

Show thumbnail & text vertically:サムネイルとテキストを縦方向に表示します

Show thumbnail on the left/right of text:テキストの左右どちらかににサムネイルを表示します

どちらかを選択しチェックを入れます。

 

Fields settings

  • Show Thumbnail
  • Show Title
  • Show Content
  • Show Meta Fields (Taxonomy, 作成者, 日時, コメント)

必要なものにチェックを入れます。

 

タイトル:プルダウンメニューで見出しを設定します。

サムネイル:プルダウンメニューでサムネイルのサイズを設定します。

内容:「Show Full Content」か「Show Excerpt」のどちらかを選択し、チェックを入れます。

「Show Excerpt」を選択した場合、「Excerpt settings」に文字数を入力します。

Read More text:続きを読む等のテキストを入力します。

設定が完了したら、保存をクリックします。

 

保存が完了すると、Edit View画面が開きます。

1番上に表示されている緑色に囲まれたコードをコピーします。

 

 

「Content Views」表示方法

コピーしたコードを、表示させたいページにペーストし、保存します。

以上で設定は終了です。

 



 

「Content Views」使用例

トップページをグリッドレイアウトで、最新記事をタイル状に並べます。

メニューの固定ページから新規追加をクリックで固定ページを作成します。

タイトルはHOMEとします。

本文記事に最新記事と入力し、改行します。

Content Viewsで作成したコードを、改行された行にペーストします。

下書きとして保存をクリックし、プレビューで確認。

問題なければ、公開をクリックします。

とても見やすく綺麗に並んでいます。

 

グリッド、折り畳み、スクロールリストの違い

グリッド

その名の通り、グリッドレイアウトでタイル状に綺麗に並びます。

 

折り畳み

クリックすると、記事が下に広がリます。

 

スクロールリスト

画像が横にスライドします。

 

まとめ

「Content Views」を使用すると、Webサイトを簡単に見栄えの良いカッコいいページに仕上げ、見やすくすることができます。

是非使用してみてください。

 

という事で今回はここまで。

最後まで読んで頂きありがとうございました。

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です