11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

トップページ作成手順と便利なコード

アイキャッチ画像は
Carabo SpainによるPixabayからの画像

初期設定のトップページは、ブログ全体の記事が新着順で並んでいますね。

それも機能的で分かりやすいので良いと思います。

でも、ある程度記事がたまったら、自分でトップページを作ると楽しいと思います。

いくみ
いくみ

トップページ作りは、予想に反して、とても簡単でした!

トップページのために新しく学んだりしたことは以下の4つだけです。

  1. 新着記事のショートコード
  2. 2カラム・3カラム表示
  3. シェアボタンを消すコード
  4. 記事タイトルを消すコード

どういうトップページを作りたいかで必要なことは変わりますが、この4つはトップページ作りに便利なことだと思うので、記録しておきます。

当記事のポイント

トップページの作成手順

トップページ作りに便利なコードとレイアウト

・私のトップページ観察結果

・当ブログのトップページを説明

トップページの作成手順

いくみ
いくみ

作る前には、どんなトップページにしたいかを、書きだしてみることをおススメします!

トップページは、「固定ページ」を使って作成します。

1.[固定ページ]>[新規追加]をクリック。

トップページの作成手順、固定ページ、新規追加

2.タイトルに、希望のタイトルを入力します。私のおススメは、ブログのタイトルです。

トップページのリンクがコピーされると、以下のようにタイトルが表示されるからです。

3.お好きなように、そのページでトップページを作成します。できあがったとします。

4.[公開する]ボタンを押します。

固定ページなので、そのままだとブログに表示されません。

表示させる設定手順が以下です。

トップページを表示させる手順

1.[設定]>[表示設定]をクリック。

トップページを表示させる手順、設定、表示設定

2.[ホームページの表示]セクションで、[固定ページ]をチェック。下のドロップダウンリストで、トップページ用に作成した固定ページを選択します。

トップページを表示させる手順、ホームページを選択

3.同じ画面の下の方にある[変更を保存]をクリック。

いくみ
いくみ

簡単ですね!では、トップページ作成に便利なテクを見ていきましょう。

新着記事を表示させるショートコード

私のトップページの編集画面での見え方はこう↓です。

トップページの作り方、新着記事を表示させるショートコード

赤線を引いた部分が「ショートコード」です。

このショートコードがあるだけで、設定した記事数で、指定したカテゴリーの新着記事を表示してくれます。

初期の頃は「コード」という文字を見るだけで、げんなりしたものですが、この「ショートコード」は、もうお膳立てされている命令文なので、とても簡単です。

「クリック」する代わりに、「=の後ろにある数字や文字を変更」して「コピペ」するだけです。

いくみ
いくみ

「コード・・・。」とお感じになった方、お茶でもいれて、深呼吸して読んでください。本当に簡単なんです。

コードの中身をよく見ていただくと。

new_list この部分で「新着記事のショートコード」と分かるようになっています。

count=3 この部分が「記事数」です。私は3記事にしました。お好きな数字をいれます。

cats=4  この部分で「カテゴリーページの指定」をします。該当のカテゴリーページのIDを自分で調べて、その番号をいれます。allと入力すると、全カテゴリー合同の新着記事になります。

IDの調べ方:WordPress画面から、自分のサイトを表示。調べたいカテゴリーページを開きます。そして、画面上部のバーにある[カテゴリーの編集]をクリック。(固定ページのIDを調べるなら、[固定ページの編集]をクリック。)

固定ページのIDを調べる方法、カテゴリーの編集

URLボックスを確認。「category&tag_ID=」の後ろにある数字が、そのページのIDです。それをショートコードの「count=」の後ろに入力します。

固定ページのIDを調べる方法、URLボックスで確認

type=large_thumb_on 記事が表示されるときの「見た目」の種類です。私は、「大きなサムネイルにタイトルを重ねる」を選択しています。全部で5種類の見た目があります。以下のわいひらさんのページで確認して選びましょう。

children=1 子カテゴリの内容を含めて表示する、という意味だそうです。私の場合、子カテゴリが無いので関係ないのですが、そのままにしておきました。

設定の詳細・選択肢・表示例は以下のわいひらさんのページにあります。私は目次の2番「オプションを用いたショートコードの書き方」からショートコードをコピーして、値を変更しました。

「人気記事」を表示させたい場合は、以下をご覧ください。

[Cocoon] レイアウト 2カラム・3カラム・4カラム表示にする手順

2カラムにした結果は、こんな感じです↓。

Cocoonレイアウト 2カラム表示

3カラムがこんな感じ↓。

Cocoonレイアウト 3カラム表示

並べて表示させたいときに便利なレイアウトですね。

4カラムにすることも可能!

2カラムの中に2カラムを入れ込めます。すると、4カラム!

場所の節約にもなります。

手順はこちら。

1.新しいブロックでプラスアイコンをクリック。スクロールバーを最後まで下げると、[Cocoonレイアウト]があります。クリック。

[Cocoon] レイアウト 2カラム・3カラム表示にする手順、Cocoonレイアウト

2.お好みで、2カラムか3カラムを選択します。

[Cocoon] レイアウト 2カラム・3カラム表示にする手順、2カラム・3カラム

4カラムにするには

2カラムの片方のカラムで、ステップ1・2をします。もう一方でも同じことをすると、4カラムになります。

3.あとは普通に入力したり、画像を入れたり。いつも通りです。

[Cocoon] レイアウト 2カラム・3カラム表示にする手順、2カラム・3カラム画面例

カラムの比率を変更するには

上のように挿入したカラムを選択した状態で、右サイドを見てください。

Cocoonカラムの比率変更

[スタイル設定]というセクションに[カラム比率]が選べるリストが表示されています。

vをクリックすると、以下のオプションがありますので、比率を選択できます。

いくみ
いくみ

「青」と「オレンジ」の背景は、実際の画面では「白」になります。

シェアボタン・フォローボタンと記事タイトルを消すコード

プレビューで見てみると、「シェアボタン・フォローボタン」と「記事タイトル」いらないなぁ、と感じられる方が多いと思います。気になる方はぜひ。

1.トップページ用の固定ページ編集画面で、スクロールバーを最後まで下げます

2.[カスタムCSS]というセクションがあるので、以下のようにコードを貼り付けて保存するだけです。

シェアボタンと記事タイトルを消すコード、カスタムCSS

シェアボタンとフォローボタンを消すコード

.sns-share, .sns-follow{display:none;}

記事タイトルを消すコード

.entry-title{display:none;}

もちろん、私が知っていたわけはありません。笑。

こちらのサイトで勉強させていただいたことです。

いくみ
いくみ

ありがとうございました。

このサイトには、他にも例えば、新着記事を「横並び」にしたいときのショートコードなどもありましたよ!

追記:この「シェアボタンとフォローボタンを消すコード」を使うと、プロフィールボックスの中のフォローボタンも消えることになります。

なので、私はこのコードを使うのはやめて、シェアボタンの表示を1か所に変更しました。

方法は、シェアボタンの設定([Cocoon設定]>[SNSシェア])で、[メインカラム本文上シェアボタンを表示]を無効にするとできます。

更に追記!まだ試してないのですが、以下のフォーラムページでも、別のコードが書かれていました。これから設定される方は試してみると良いかもです。

固定ページで日付、SNSシェア・フォローボタンを消したい | カスタマイズ相談 | Cocoon フォーラム

読者としての「トップページ」観察結果

トップページ作成にあたって、色々な企業やブログのトップページを見てみました。

以下のようなタイプがあると思います。(ざっくり。)

1.イメージにフォーカスする ~ 画像をドーンタイプ。

これは私が考えた例ですが、こんな感じ↓。

  • 「コミュニケーションを大切にする」企業が、人が手をつないでいる画像をドーン
  • 「サーフィンライフ」についてのブログが、きれいな海の画像をドーン
  • 企業のキャラクターや契約している芸能人の方をドーン

つまり、その企業やブログの「テーマ」、「世界観」、「象徴」を全面に出して、イメージ作りをしている感じですね。

2.情報量で勝負 ~ 内容をたくさんリストするタイプ。

ニュースサイトが一番分かりやすい例です。いかに多くの情報があるかを強調する作りです。

3.売りポイントを押す ~ 強みにスポットライトを当てるタイプ。

一押しの記事やおススメ商品を目立たせる作りです。タイミング的に旬のものだったり、永遠不滅の人気商品・記事だったり。企業やブログ全体の、というよりは、一番強いところにフォーカスしているタイプです。

私のトップページの構造

アイキャッチ画像を使って、アイコンとブログを紹介(しばらくして辞めました)。(ドーン、という感じではないですが、一応トップに以下のアイキャッチを表示していました。)

ブログ初心者のWordPress Cocoon ブログ初期設定手順
フレームぽけっとより新緑の葉っぱの上下フレーム飾り枠イラスト

追記:辞めました

というのは、アイキャッチの内容がヘッダー部分とサイドのプロフィールボックスと同じになってしまっていたからです。ブログタイトルとメニューがかなり単純で分かりやすいので、「これは・・・いらないな」と判断しました。気に入ってたので、ココに残しておきます。笑。

ということで、最初に、「気まぐれ一言」コーナー。

「(多分)毎日変わる」ものがある(目標)、という面白みをもたせるためです。あんまりおもしろいこと言えないかもしれないけど、日々精進。

時々登場させるつもりの「旬の記事」コーナー。

このタイミングでおすすめ!というものがあるときだけ登場させます。

PVが少ない記事を救う「日なたスポット」コーナー。

これは1週間に一度くらい入れ替えようかなと思っています。追記:1か月半程で、廃止することにしました。

日なたスポットに出すことで、見ていただいた記事もあるのですが、そんなには底上げにならなかったかなぁという印象です。PVが低い記事にスポットをあてていたのですが、需要が低いということだな・・・と悟りました。

ものすごく記事数が増えたら、やる意義もあるかなと思います。まだ60記事だと、どんな記事があるか、十分見渡せるので、いらないということに気が付きました。

いくみ
いくみ

ネーミングは気に入っていたんですけど。

カテゴリーごとの新着記事カテゴリーページに移動できるボタン

内容が分かるように、いくつか記事をリストしました。人気記事と迷いました。今でもチョット迷ってます。

他のメニューや固定ページに移動できるボタン

ブログ情報のページ、コンタクトフォーム、サイトマップに移動できるボタンも載せておきました。

ちなみに、ボタンは、ボタン機能は使いませんでした。

ボタン用の画像を作って、リンク設定で[カスタムURL]を指定できる機能を使いました。

こちらの記事にその機能の紹介があります。目次の3-1番です。

いくみ
いくみ

観察結果の3タイプからチョコチョコとつまみ食いしてできあがりました。

おわりに

ブログのトップページは、「受け付け」みたいな存在だと思います。

どういうタイプにするにしても、探している情報がどこにありそうか、が分かるようにするのは大切かなと思います。

例えば、他社を訪問して受け付けに聞くことって、そういうことですよね。

受け付けの方の対応がすばらしいと、ものすごくイメージアップにつながるものです。

ブログに慣れてきたら、トップページの作成おススメです。

いくみ
いくみ

デキる受け付けを目指します!

コメント

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