1. マニュアル
  2. ホームページ
  3. デザインカスタマイズ
  4. ブログページのレイアウトをカスタマイズする(設定例付き)

ブログページのレイアウトをカスタマイズする(設定例付き)

ネット上のブログを観てみると、多種多様なレイアウトが存在します。

一番良いレイアウトはこれ!というものが存在するのではなく、ノウハウ系、読み物系、日常日記系など、その形態によってそれぞれに合ったレイアウトがあるように思います。リウムスマイル!では、専門的な知識不要で、簡単にページレイアウトをカスタマイズすることができます。


以下にページレイアウト例と、その表示設定例をご紹介いたします。


まず、レイアウトの設定手順は、


  1. リウムスマイル!管理画面ログイン後、画面左上の「PC版 プレビュー」ボタンをクリックしてプレビュー画面を表示
  2. 上部「ブログ」をクリックするなどして、ブログ一覧ページを表示
  3. 「ブログ」見出し左肩に表示されている緑色の歯車ボタンをクリック


緑歯車ボタンをクリック後に表示される「表示設定」画面でレイアウトや表示数、表示したい項目など、色々カスタマイズできます。


次に具体的なレイアウト例とその表示設定をご紹介します。

1列・タイトル+画像+本文

ブログレイアウト 1列・タイトル+画像+本文

画像と本文を数記事連ねる基本的なブログレイアウトで、クリックしなくても一気に読めるので日常日記系に向いています。

上記「表示設定例」をクリックすると、表示設定例が表示されます。また、「子パーツの表示方法」-「リンク表示件数」の設定を変更すると1ページに表示するブログ記事数を変更できます。アメブロなどは、1ページに1記事のパターンが多いですね。


1列・タイトル+画像左+本文冒頭

ブログレイアウト 1列・タイトル+画像左+本文冒頭

画像を左にし、本文の文字数を制限して冒頭だけ表示して、ダイジェスト風に一覧するレイアウトです。

>>>表示設定例


4列・タイトル+画像+本文冒頭

ブログレイアウト 4列・タイトル+画像+本文冒頭

4列表示で、タイトルと画像と本文冒頭をギュっと敷き詰めるレイアウトです。ノウハウ系、お役立ち情報など、読者が興味のある記事を見つけやすいレイアウトです。


4列・タイトル+画像

ブログレイアウト 4列・タイトル+画像

4列表示で、タイトルと画像のみを敷き詰めるレイアウトです。タイトルと画像のみで中身が想像できて興味を引く力が必要ですが、少ないスペースで沢山の記事を見せることができます。

>>>表示設定例


3列・タイトル+画像+本文冒頭(トップ記事のみ大きく)

3列表示で、タイトル+画像+本文冒頭表示のレイアウトですが、トップ記事のみ幅広く表示するレイアウトです。

沢山見せたい、最新記事は目立たせたいというのを両取りしたレイアウトです。

>>>表示設定例



ポイント1


2列以上のレイアウトにする場合は、表示件数を2列なら2,4などの2の倍数に、3列なら3,6などの3の倍数に設定すると余白が出ずに綺麗になります。

ポイント2


画像を表示させるにチェックをしていても、ホームページパーツの画像欄に設定していない場合は画像が表示されませんが、表示設定の「本文からも抽出」を「する」に設定すると、本文内に挿入されている画像を一覧に表示することができます。

ポイント3
画像の縦横の向きやサイズが不統一でも、同じサイズになるように自動的にトリミング表示することができます。