トップページを作成する

このページでは、ココルーチェのトップページの作り方と仕様についてご説明します。

2016/10/28 追記

ココルーチェのバージョンアップでトップページのデザインを選ぶことができるようになりました。ブログタイプとホームページタイプの2種類があります。

設定方法は管理画面の「デザイン設定」>「カスタマイズ」>「初期設定」にすすみます。その中の一番下の項目「トップページのレイアウト選択」で選択できるようになっています。

ブログタイプの場合、下記設定内容の【コンテンツ】部分は反映されませんので飛ばしてください。

トップページを構成する4つの要素

トップページは次の4つの構成になっています。

  1. ヘッダー画像
  2. メッセージ
  3. コンテンツ
  4. ブログ

※サンプルの表示はこちらのデモサイトもご参照ください。

toppage

それぞれの要素について、設定方法をご紹介していきます。

1.ヘッダー画像

まずはヘッダー画像の設定方法です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-23-39-37

サイトの表示やデザインは、管理画面の「デザイン設定」から行うことができます。

「デザイン設定」>「カスタマイズ」と進みます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-23-42-16

テーマのカスタマイザーが表示されますので、「初期設定」をクリックします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-23-44-31

「トップページのメイン画像」という項目がありますので、こちらにトップページに設定する画像をアップロードします。

ヘッダーの推奨サイズは横幅980px〜となります。サイズが大きい画像も、自動的に横幅が自動調整されます。縦幅についてはどの大きさでもそのサイズに最適化されます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-23-54-04

設定した画像がヘッダー部分に表示されれば完成です。

<アメブロからWordpressに移行された方へ>

ココルーチェの横幅はアメブロで一般的に使われている横幅980pxと同じ大きさとなります。もしオリジナルのヘッダー画像をアメブロで使われているなら、同じヘッダー画像をココルーチェでもご利用いただけます。

※アメブロの「新CSS編集デザイン」のヘッダーサイズは横幅1120pxとなりますが、こちらも、アップロードいただくと自動的に横幅が調整されます。

2.メッセージ

次に、ヘッダー画像下の「メッセージ」部分を設定します。

toppage-%e3%81%ae%e3%82%b3%e3%83%92%e3%82%9a%e3%83%bc

ココルーチェでは、トップページに一言メッセージを添えることができます。もし、ビジネスにおけるキャッチコピーなどがあればこちらに掲載します。

設定場所は、先ほどヘッダー画像を設定した「デザイン設定」>「カスタマイズ」>「初期設定」>「トップページのキャッチフレーズ」より行うことができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-07-0-00-14

こちらに入力をした文言が、そのままトップページのメッセージ箇所に反映されます。

もし改行を入れたい場合は、改行したい場所で<br>タグを入力すると、改行が反映されます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-07-0-00-28

また、もし特に表示させたい文言がなければ空白のままにしていただいてかまいません。

 

3.コンテンツ

ココルーチェでは、プロフィールやサービス紹介などの重要記事を「4記事」までトップページに表示させることができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-07-1-12-09

このコンテンツ部分に表示させたい記事は、記事編集画面の下にある「トピックスの掲載位置」から設定します。

screencapture-yoshidasan-chi-wp-admin-post-php-1475769649777

この部分に設定した画像とキャッチコピーが、指定した場所に表示されます。固定ページだけではなく、ブログ記事にも設定することができます。

 

4.ブログ

最後にブログ部分の設定です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-07-1-15-56

このブログ部分には、更新した最新の記事が自動的に表示されるようになっています。

4-1. トップページに画像を表示させたい場合

トップページをデモサイトのようにギャラリー表示させたい場合は、記事のアイキャッチ画像を設定します。

screencapture-yoshidasan-chi-wp-admin-post-new-php-1475771826126

このアイキャッチ画像を設定しない場合は「NO PHOTO」というサムネイルが表示されます。

4-2. 記事の表示数を変えたい場合

初期設定では、ブログ記事は「9記事」に設定されています。

この表示数を変える場合は、管理画面の「設定」>「表示設定」>「1ページに表示する最大投稿数」で変更することができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-07-1-43-22

ココルーチェでは3記事ずつ表示される仕様になっていますので、3の倍数にすることをおすすめします。

次の設定「プロフィールページを作成する」に進む

アフィリエイターのための最高のワードプレステーマ【ATLAS】ができました

アフィリエイトに特化したWordPressテーマ「ATLAS(アトラス)」が完成しました。

操作も簡単で超使いやすいです。

ランキング機能やボタン作成、記事下CTAの設置など、サイト作成の高速化&収益性を高めるための工夫を随所に備えています。

― 主な特徴 ―

  • プロ目線で見たアフィリエイトサイトに必要な機能をすべて搭載
  • 直感的に操作でき、スピーディーに収益サイトを構築できる
  • シンプルで美しいテーマデザイン

WordPress初心者でも簡単に使えるように複雑な設定を可能な限り取りのぞきました。

また、レイアウトも自由自在にアレンジできるのでWordPressでスッキリとしたデザインのブログにも使えます。

ぜひデモサイトで確かめてみてください。

※テーマインストール後、HTMLやCSS等をカスタマイズすることなくデモサイト通りに構築できる仕様にしています。

テーマの詳細を見る デモサイトを見る