ワードプレステーマ【Cocoon】なら簡単!トップページをブログ型からサイト型へカスタマイズしてみました

コクーン サイト型カスタマイズ カスタマイズ

ブログを移行して2ヶ月目。

開設当初は検索サイトからのアクセスが0になってしまったこのブログも、ようやく少しずつGoogleやYahoo!からの検索流入が増えてきました( ・∇・)

さて、ワードプレスを始めてやりたいと思っていたことの1つにGoogleアドセンス、2つ目にトップページをサイト型にしたい!という目標がありました。

 
 

サイト型って何?

よく分からないけど、複雑なコードを書いたり難しそう...

最初はそう思っていた私も、【Cocoon】というテーマを使って簡単にサイト型へカスタマイズすることができました!

この記事では実際に行ったカスタマイズについてできるだけ分かりやすく順を追って書いていきますので、これからサイト型を考えている方の参考になればと思います。

ブログ型とサイト型の違い

ブログ型の特長

ブログと聞いてイメージするのはこのタイプ。ほとんどのブログサービスのデフォルトでトップページに新着記事が並びます。

記事数が多くなってくると過去記事が埋もれてしまいがち。
サイト型の特長

ホームページなどでよく見かけるタイプ。トップページがカテゴリ別に分けられていて、カテゴリごとの新着記事が表示されます。

カテゴリが複数ある場合に興味のある記事を見つけやすい。
はっちゃん
はっちゃん

文字だけではイメージが伝わりにくと思うので、当ブログのカスタマイズ前とカスタマイズ後をご覧ください!

Before(ブログ型)

ブログ型
After(サイト型)

サイト型
はっちゃん
はっちゃん

カテゴリ別に記事が表示されているのがお分かりいただけましたでしょうか?少しでも興味を持った方はここから先を読み進めてくださいね(^^)

テーマは『Cocoon(コクーン)』を使います

ブログのテンプレートのことをワードプレスでは『テーマ』と呼びます。有料、無料と合わせて星の数ほどあるようなテーマの中でどれがよいのか迷っちゃいますよね! ブログ初心者ほど、機能、デザイン、サポート等が充実している有料テーマを選んだ方が使い勝手が良いそうですが、私が選ばせていただいたのがこちら。

はっちゃん
はっちゃん

わいひらさん作成の無料テーマ『Cocoon』

感覚的に操作できる機能、内部SEO、なんとお問い合わせフォーラムまでがある無料とは思えないほどの高スペックのテーマなんです!!

しかもサイト型にカスタマイズしやすい♪

使えば使うほど分かるこのすごさ。今回の記事を読むと素晴らしさの一部が伝わるかもしれません。ワードプレス新参者の私ですが無料テーマの中ではCocoon一択なのではと思っています。

カスタマイズ実践

前置きはここまでとして。

さっそく具体的なカスタマイズを進めていきたいと思います。工程は大まかに分類するとこの4つになります。

カスタマイズの4ステップ
  1. 固定ページの作成
  2. 不要な項目を非表示にする
  3. 見出し・ボタンのスタイル設定
  4. トツプページに適用

CSSはほとんど使わず、HTMLもショートコードを使うので最低限の知識で分かりやすい

固定ページの作成

まず初めに、ワードプレスのビジュアルエディターで固定ページを作成していきます。

はっちゃん
はっちゃん

ここで作成したものが最後にトップページになります。

管理画面→固定ページ新規追加 

記事タイトルを入力 
タイトルは非表示にするので何でもOK。
自分が分かるように『トップページ』としました。
固定ページ
ボックスを選択すると上部に出るメニューバーの中から</>をクリック。ドロップダウンされるメニューからプロフィールボックスをクリックする。
プロフィールの入れ方

ショートコードが呼び出され、プレビューで確認すると予め設定しておいたプロフィールが表示されています。これだけなので簡単(^^)

【新着記事】【人気記事】【カテゴリ別新着記事】の設定

はっちゃん
はっちゃん

さて、次にブログのメインとなるのがこちら。

2つの設定方法があるので、(1)(2)両方とも紹介します。

ここでを設定する項目
  1. 新着記事
  2. 人気記事
  3. カテゴリ別の新着記事
  4. もっと見るボタン

方法(1):コードエディタを利用する

フォーマットカスタムHTMLを選択(コードエディタに切り替え)してから、下記のコードを入力します。

カスタムhtml

入力するコード(コピペOK)

<div class="column-wrap column-2">
<div class="column-left">
<h2>新着記事</h2>
[new_list]
</div>
<div class="column-right">
<h2>人気記事</h2>
[popular_list]
</div>
</div>

<H2> カテゴリ別の新着記事</h2>
<div class="column-wrap column-2">
<div class="column-left">
<h3>カテゴリ1</h3>
[new_list cats="●"]
<p class="more"><a href="http://(カテゴリ1ページのURLを設定)">このカテゴリの記事を見る</a></p>
</div>
<div class="column-right">
<h3>カテゴリ2</h3>
[new_list cats="●"]
<p class="more"><a href="http://(カテゴリ2ページのURLを設定)">このカテゴリの記事を見る</a></p>
</div>
</div>

<div class="column-wrap column-2">
<div class="column-left">
<h3>カテゴリ3</h3>
[new_list cats="●"]
<p class="more"><a href="http://(カテゴリ3ページのURLを設定)">このカテゴリの記事を見る</a></p>
</div>

<div class="column-right">
<h3>カテゴリ4</h3>
[new_list cats="●"]
<p class="more"><a href="http://(カテゴリ4ページのURLを設定)">このカテゴリの記事を見る</a></p>
</div>
</div>
はっちゃん
はっちゃん

このコードでは左右で2カラムに分けて表示、カテゴリごとの一番下には『このカテゴリの記事を見る』ボタンをつけています。(見切れてしまっているけど...)プレビューしてみると、レイアウトはだいたいこんな感じになっているかと思います。

あとは下記に記載する“カテゴリ別にするためには”を参考に、カテゴリIDの設定、カテゴリ名や、リンク先のURLなどを入力して整えていきます。

方法(2):ビジュアルエディタを利用する

Cocoonのここがすごい

コピペでもOKですが、ビジュアルエディタではショートコードを簡単に呼び出して利用することができます。新着記事や人気記事の表示もワンタッチ!これは便利すぎて感動もの(*^^*)

2カラムにする設定

Cocconレイアウト2カラム

2カラム
2カラム編集画面

左右2列で編集できるようになります!

色分けされているのは分かりやすいようにエディタ画面上だけなので気にしなくてOK。

ショートコードを選択する

表示させたいところで(+)をクリックして、上部にあるメニューバーの</>から新着記事、または人気記事の項目を選択するだけ。

ショートコードの使い方
ショートコードの表示設定

この方法でショートコードを呼び出した場合、デフォルトで入っているオプションがこちらの5項目。記事数や表示形式(サムネイルを大きく表示したり)などをある程度ここでカスタマイズすることができます。

  1. count="5" :表示する記事数
  2. type="default" :表示形式
  3. cats="all"表示するカテゴリを指定
  4. children="0":子カテゴリの内容を含めて表示するかを指定
  5. post_type="post":表示する投稿タイプを選択
何も入力しない場合はこの初期設定が適用されます。
詳しい設定方法は下記リンクをご覧ください。

カテゴリ別にするためには

はっちゃん
はっちゃん

さて、新着記事は表示できたので次はカテゴリ別にします。

カテゴリ別に表示するためには、新着記事のショートコードに表示させたいカテゴリIDを設定するcats="〇"を追加します。

コピペした新着記事のショートコードの●部分を1カ所変更するだけ!
[new_list cats="●"]

カテゴリIDの調べ方

管理画面投稿カテゴリ

1.カテゴリーの画面でカテゴリ名をクリック

2.上部のアドレスバーを確認

アドレスバーのURLからID=〇を見つけ、その数字の部分がカテゴリIDとなります。先ほどのショーコードの cats=""の部分に入力します。

はっちゃん
はっちゃん

指定したカテゴリの記事が表示されていることがプレビュー画面で確認できると思います。

ビジュアルエディタでのレイアウト例

上記のショートコードを利用しながら、Cocconレイアウトでカラムを分けてそれぞれ【見出し】【記事を表示するショートコード】【ボタンを設置するコード(リンク先のURLも設定)】をカテゴリーの数だけこんな感じで入力していきます。

<h2>新着記事</h2>←見出し部分
[new_list]←新着記事を表示するショートコード
<h2>人気記事</h2>←見出し部分
[popular_list]←人気記事を表示するショートコード
<h2>カテゴリごとの新着記事</h2>
<h3>カテゴリ名①</h3>←見出し部分
[new_list cats="●"]←カテゴリ①のIDを入れる
<p class="more"><a href="http://(カテゴリ1ページのURLを設定)">このカテゴリの記事を見る</a></p>←ボタンを設置する場合必要
<h3>カテゴリ名②</h3>←見出し部分
[new_list cats="●"]←カテゴリ②のIDを入れる
<p class="more"><a href="http://(カテゴリ2ページのURLを設定)">このカテゴリの記事を見る</a></p>←ボタンを設置する場合必要
はっちゃん
はっちゃん

ここまでができればトップページがほぼ完成したも同然ですね。ここではカテゴリを2つにしていますが自分のブログに合わせて整えます。

作成した固定ページを保存する

カテゴリの設定等ができたら公開するをクリックします。

公開する
まだ実際に公開されることはなく公開後に編集することもできるので、保存する意味で気軽にクリックしてOK!

トップページに不要な項目を非表示にする

固定ページで仮に入力したタイトル、投稿日、SNSシェアボタンなどはトップページに必要ないかと思いますので非表示にしちゃいましょう。

管理画面→外観テーマエディタのCSSに下記のコードを追加します。

必ず子テーマの方を編集しましょう。(親テーマを変更してしまうとアップデートしたときに上書きされて消えてしまいます)
Cocoon Child: スタイルシート (style.css)

子テーマ画面
/* トップページの非表示項目を設定*/ 
.home .eye-catch,/*アイキャッチ画像*/ 
.home .entry-title,/*記事タイトル*/ 
.home .sns-share,/*シェアボタン*/ 
.home .sns-follow,/*フローボタン*/ 
.home header .post-date,/*ヘッダー投稿日*/ 
.home header .post-update,/*ヘッダー更新日*/ 
.home .author-info/*投稿者名*/
 {
 display: none;/*非表示にする*/
 }

目次と広告については固定ページ右側にある文書の設定で2つにチェックを入れればOKです。

  • ページ設定:目次を表示しない
  • 広告設定:広告を除外する
目次と広告設定

スタイル設定

先ほどと同じく管理画面→外観→テーマエディタのCSS(子テーマ)に下記のコードを追加します。

はっちゃん
はっちゃん

色、デザインはお好みで変えてください。

/*見出しのデザイン*/
.article h2 {
  background: #ffb6c1;/*背景の色*/
  color:#fff;/*文字の色*/
  text-align: center;/*中央寄せ*/
}

.article h3 {
 border-bottom: 2px dotted #EAA8BF; /* 下線 の太さ・種類・色*/
}

/***カテゴリ記事もっと見るボタンの設定***/
.more a{
   display:block;
   width:95%;
   margin:0 auto;/*中央揃え*/
   text-decoration: none;
   color: #ffb6c1;/*文字の色*/
   background:#fff;/*背景の色*/
   border:1px solid #ffb6c1;/*枠の色*/
   font-size:.9em;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   padding:.5em 0;/*ボタン内の余白*/
   border-radius: 30px;/*丸くする*/
}

固定ページをトップページに適用する

イメージしたページが出来上がりましたか?いよいよ作成した固定ページをトップページに適用しましょう。この手順はあっと言う間に終わります。

管理画面→設定表示設定

  • ホームページの表示:固定ページにチェックする
  • ホームページ:トップページを選択

変更を保存 して終了です。

変更を保存
はっちゃん
はっちゃん

これで無事にオリジナルのサイト型のトップページが完成です。お疲れさまでした!(*^^*)

あとはレイアウトやデザインなどを皆様センスでカスタマイズして素敵なブログに仕上げてくださいね♪読者のサイト内回遊率も上がりアクセスアップに繋がるかもしれません!

コメント