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

カスタマイズ

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

開設当初は検索サイトからのアクセスが0になってしまったこのブログも、ようやく少しずつGoogleやYahoo!からの検索流入が増えてきました!嬉しいことです(ノ*>∀<)ノワーイ♪

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

 
 

サイト型って何?

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

最初はそう思っていた私も、あるテーマを使って簡単にサイト型へカスタマイズすることができました!この記事では実際に行ったカスタマイズについてできるだけ分かりやすく順を追って書いていきますので、これからサイト型を考えている方の参考になればと思います。

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

ブログ型の特長

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

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

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

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

はっちゃん
はっちゃん

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

Before(ブログ型)

ブログ型
After(サイト型)

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

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

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

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

はっちゃん
はっちゃん

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

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

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

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

カスタマイズ実践

前置きはここまでとして(笑)

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

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

一番最後に自分好みスタイルを設定する段階までCSSはほとんど使わず、HTMLもショートコードを使うので最低限の知識で分かりやすい

はっちゃん
はっちゃん

ここから先に出てくる各コードはコピペOK!お好みに合わせて設定などを変えてくださいね。

固定ページの作成

まず初めに、ワードプレスのビジュアルエディターで固定ページを作成していきます。(ここで作成したものが最後にトップページになります)

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

  • 記事タイトルを入力 
固定ページ
タイトルは非表示にするので何でもOK。自分が分かるように『トップページ』としました。
パーマリンク
パーマリンク(URLの最後の部分)は最終的にトップページのURL になるので設定しなくてもOK。(気になる人はhomeとかtopとか入れてもよいと思います)

プロフィールボックスを設定

まずは一番上のこの部分。訪れた人がまず目につく位置にどんなブログなのかを簡単に紹介する文面を入れたいな~と思っていて、Cocoonなら簡単にプロフィールを表示することができるので入れてみました。

はっちゃん
はっちゃん

プロフィールを入れなくてもよい場合はこの手順をとばしてください。

プロフィール
ボックスを選択すると上部に出るメニューバーの中から</>をクリック。ドロップダウンされるメニューからプロフィールボックスをクリックする。
プロフィールの入れ方

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

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

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

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

+フォーマット→【カスタムHTML】を選択してから、下記のコードを入力してみてください!

カスタムhtml

コピペするショートコード

コピペOK
ショートコードをここにそのまま書くと新着記事、人気記事が表示されてしまうので冒頭にあえて★を入れています。コピペしたあとはこの★を6ヶ所全部外してください。(外側のカッコ[]はそのまま必要です)
<div class="column-wrap column-2">
<div class="column-left">
<h2 class="title">新着記事</h2>
[★new_list]
</div>
<div class="column-right">
<h2 class="title">人気記事</h2>
[★popular_list]
</div>
</div>

<H2 class="title"> カテゴリ別の新着記事</h2>

<div class="column-wrap column-2">
<div class="column-left">
<h2 class="title">カテゴリ1</h2>
[★new_list cats="●"]
<p class="more"><a href="https://(カテゴリ1ページのURLを設定して下さい)">このカテゴリの記事を見る</a></p>
</div>
<div class="column-right">
<h2 class="title">カテゴリ2</h2>
[★new_list cats="●"]
<p class="more"><a href="https://(カテゴリ2ページのURLを設定して下さい)">このカテゴリの記事を見る</a></p>
</div>
</div>

<div class="column-wrap column-2">
<div class="column-left">
<h2 class="title">カテゴリ3</h2>
[★new_list cats="●"]
<p class="more"><a href="https://(カテゴリ3ページのURLを設定して下さい)">このカテゴリの記事を見る</a></p>
</div>

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

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

補足/ショートコードの呼び出し方

Cocoonのここがすごい②

コピペでも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はどこで調べたらいいの?

カテゴリIDの調べ方

管理画面投稿カテゴリ

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

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

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

これだけ!

はっちゃん
はっちゃん

ここまでができればトップページがほぼ完成したも同然ですね~。ここではカテゴリを4つにしていますが、カテゴリ数、カテゴリ名、リンクボタンのURLなどは自分のブログに合わせて整えてください。

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

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

公開する
まだ実際に公開されることはなく公開後に編集することもできるので、保存する意味で気軽にクリックして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です。

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

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

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

見出し等のスタイルを整えてからトップページに適用したい人はこの手順をとばして先にスタイルの設定を行ってください。

管理画面→設定表示設定

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

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

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

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

スタイルの設定

スタイルは必須ではありませんが、Cocoonのデフォルトはとてもシンプルなので気になる方はお好みで設定してみてください。

はっちゃん
はっちゃん

CSSの知識をほんの少し深めるだけで、たとえば色を変えたいな、幅を変えたいな、中央寄せにしたいななどの調整ができます。ぐんとスタイルの幅が広がるでオススメ!

見出しなどのスタイルを考えるときにいつも参考にさせていただいているサイトがこちら。サルワカさんがとてもとても(2回言っちゃうほど)分かりやすく丁寧に書かれています。私のブログ教科書♪

このブログで使っているCSSの一部も載せておきます。後からちょこちょこカスタマイズをしていて随時デザインが変わっているので、そのあたりはまた別記事で書いていく予定です。

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

先ほどの非表示設定のコード下にこちらをコピペして追加してください。

/*****トップページカスタマイズ*****/
h2.title {
padding:0;
margin:0;
}
h2.title:before {
content: none;
}

h2.title{
background:#ffb6c1;
color: #fff; /* 文字色 */
margin: 20px 0; /* 外側の余白 上下・左右 */
padding: 10px; /* 内側の余白 */
text-align:center;
}

/***もっと見るボタンの設定***/
.more a{
display:block;
width:85%;
margin:0 auto;/*中央揃え*/
text-decoration: none;
color: white;
font-size:1em;
text-align: center;
white-space: nowrap;
padding:.5em 0;/*ボタン内の余白*/
background:#ffb6c1;
border-radius: 30px;
overflow: hidden;
}

このCSSを適用するとこんなトップページが出来上がっていると思います。

私はピンク系を愛用していますが、ブルーの吹き出し風にする場合のサンプルを作りました。こちらのCSSをコピペしてみて下さい。

/*トップページカスタマイズ(ブルーの吹き出し)*/
 /*h2見出しデザイン*/
 h2.title {
 padding:0;
 margin:0;
 background:none;
 border:none;
 }
 h2.title:before {
 content: none;
 }

h2.title {
 position: relative;
 padding: 0.6em;
 margin:1em 0;
 background: #364e96;
 color: #fff;
 border-radius:5px;
}
 h2.title:after {
 position: absolute;
   content: '';
   top: 100%;
   left: 30px;
   border: 15px solid transparent;
   border-top: 15px solid #364e96;
   width: 0;
   height: 0;
}

/*もっと見るボタンの設定*/
 .more a{
 display:block;
 width:80%;
 margin:0 auto;/*中央揃え*/
 text-decoration: none;
 color: #fff;
 font-size:1em;
 text-align: center;
 white-space: nowrap;
 padding:.6em 0;/*ボタン内の余白*/
 background: #364e96;
 border-radius: 1px;
 overflow: hidden;
 }

このようなブルー系の見出しになります。

ブルーの吹き出し

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

はっちゃん
はっちゃん

個人的に行ったカスタマイズなので不具合等がありましたら申し訳ございません。最後までお付き合いいただきありがとうございました。皆様、楽しいブログライフを♪

コメント

タイトルとURLをコピーしました