ココルーチェの使い方

トップページを作成する

ココルーチェ設定のマニュアル【トップページの設定】

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

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の倍数にすることをおすすめします。

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

ABOUT ME
赤石カズヤ
赤石カズヤ
WEBコンテンツ制作・開発をしながらのんびり活動中。常識に縛られず、ビジネスの仕組み化を常に意識。気が向いたときにWordPressのカスタマイズのことを発信してみたり。
新次元のWordPressテーマ【JIN】をリリース!

アフィリエイターで有名なひつじさん(@hituji_1234)とコラボし、史上最高とも呼べるWordPressテーマ【JIN】を開発しました!

開発期間は11ヶ月と非常に長くかかりました。
【使う人】【見る人】それぞれの立場にたって、何度も何度もブラッシュアップを重ねたためです。

その結果、デザイン性・使い勝手・SEOの3つがとてつもないレベルで融合したテーマになりました!
ひつじさんと2人で特設サイトを作りましたので詳しくはそちらでどうぞ!

JIN特設サイトデモ一覧