【Cocoon】サロン風のサイトをつくろう!③コンテンツ-1

┣ Cocoon

今回は、トップページのコンテンツをさわっていこうと思います。

赤枠の部分です。

トップページは、固定ページでつくってます。

  • タイトル
  • 投稿者名
  • 投稿日
  • 更新日
  • シェアボタン
  • フォローボタン

これらを非表示にしたいと思います。

スポンサーリンク

タイトルを非表示にする

「外観」→「テーマエディター」をクリックします。

 

「style.css」のページが開きます。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

この文字の下に、コードを書き込みます。

 

下記のコードを、先程の場所にコピペしてください。

/*-------------------------------
**トップページのタイトルを非表示
--------------------------------*/
.home.page .entry-title{
  display: none;
}

 

「ファイルを更新」をクリックして保存します。

投稿者名を非表示にする

投稿者名は投稿者ⅠⅮとなるので、非表示にしたいと思われる方多いと思います。

また、トップページや固定ページでは

デザイン的に非表示の方がいいかなと思いますので、その方法です。

「cocooon設定」→「cocoon設定」をクリック。

 

「本文」のタブをクリック。

 

一番下までスクロールします。

「投稿情報表示設定」の「投稿関連情報」にある、「投稿者名の表示」のチェックをはずします。

「変更をまとめて保存」をクリック。

投稿日を消す

「外観」→「テーマエディター」をクリック。

 

「style.css」のページが開きます。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

この文字の下に、コードを書き込みます。

 

下記のコードを、先程の場所にコピペしてください。

/*-----------------------------
**固定ページの投稿日を非表示
-----------------------------*/
.page .post-date{
  display: none;
}

 

「ファイルを更新」をクリックし、保存してください。

更新日を非表示にする

「外観」→「テーマエディター」をクリックする。

 

「style.css」のページが開きます。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

この文字の下に、コードを書き込みます。

 

下記のコードを、先程の場所にコピペしてください。

/*----------------------------
**固定ページの更新日を非表示
----------------------------*/
.page .post-update{
  display: none;
}

 

「ファイルを更新」をクリックし、保存してください。

シェアボタン・フォローボタンの設定

「Cocoon設定」→「Cocoon設定」をクリックします。

 

「Cocoon設定」ページで「SNSシェア」のタブをクリックします。

ここで、表示するかどうかの設定が出来ます。

 

固定ページ、投稿ページなどすべてのページで非表示にする場合は、「トップシェアボタンの表示」のチェックを外します。

ページによって設定したい場合は、先ほどの場所にチェックを入れて、どれを表示したいか選択します。

表示したいページをチェックして下さい。

タイトルまたはアイキャッチ画像の下に表示される「トップシェアボタン」と、本分の下に表示される「ボトムシェボタン」の2か所があります。

 

「SNSフォロー」はその隣のタブをクリックします。

 

全てのページで非表示にする場合は「フォローボタンの表示」のチェックを外します。

個別に表示場所を選ぶ場合は「表示ページ」で選択します。

それぞれのページで、設定が終わったら「変更をまとめて保存」をクリックします。

 

以上となります。

お疲れさまでした。

 

コメント