初心者向けCocoonテーマ設定

スポンサーリンク
初心者向けWordPress入門

WordPressで最も重要かつ悩ましいのがテーマの選定です。僕も色々と試行錯誤した末、辿り着いたのがCocoonです。個人がブログ等のサイトを作る上ではCocoonさえあればとりあえず十分でしょう。何も有料テーマを使う必要はないと思います。

Cocoonはよくできたテーマですが、初心者にとっては知っておくべき幾つかのポイントがあります。本エントリでは僕が辿った道のりをメモとして残しておきます。

スポンサーリンク
スポンサーリンク

テーマの選択

WordPress初心者はとりあえずコンテンツを書き始める前に最低限の知識を得た上で各種設定を行うことが大切です。後からやろうとすると手戻ってしまうものもあるため、急がば回れでポイントを抑えましょう。

その上で、ワードプレス初心者が最も悩むのがテーマの選択。僕はとりあえず最初から用意されているTwenty Seventeenを選択して色々と試行錯誤してみましたが、なかなかイメージ通りのサイトデザインには程遠い感じでした。

そこで、ネットで無料テーマを色々と探していた時に出会ったのがCocoonというテーマ。予め用意された画面でパラメータを設定するだけで、特段のプログラミングをすることなく詳細なデザイン設定まで簡単にできるのが素晴らしいです。

  • サイト全体のデザインの自由度が高く、見栄えの良いサイトが簡単に作れる
    • 新着記事や人気記事、関連記事の一覧をアイキャッチ画像付きのボックスで自動表示
    • 見出しを設定するだけで自動的に冒頭に目次を作ってくれる
    • アイコンボックス、案内ボックス、タブボックス、白抜きボックス、付箋風ボックス等の装飾デザインが豊富でビジュアルエディターから簡単に設置できる
  • アドセンス設定が簡単
    • アイキャッチ画像付きボックス内へのインフィード広告の設置や、場所ごとに任意の広告枠を設置といった指定が簡単にできる
  • 関連記事が多数ある
    • 作者の方が回答してくれるユーザーコミュニティがありレスポンスよく対話されている
    • ユーザーが多数いるためネット上で情報が多数流通している
  • 基本機能が充実しているためプラグインの利用を最低限に抑えられる

スポンサーリンク

Cocoonの設定

初期設定

テーマとしてCocoonを設定したら、まず最初に一通りの推奨設定をしておきましょう。ネット上で検索するとオススメの設定一覧が出ているので、それに沿ってまずは設定すれば大丈夫です。

プラグイン設定

ワードプレスはプラグインが多数あるのが利点ですが、Cocoonは基本機能が既にテーマ内に実装されているため、プラグインをインストールする必要があまりないのが良いところです。

現時点で僕が使っているのは3つだけ。

  1. Category Order and Taxonomy Terms Order
    • カテゴリーの表示順序を変更できる
    • 基本機能だと思いますがなぜかワードプレスにない機能です
  2. WP Random Post Thumbnails
    • アイキャッチ画像を指定していないエントリーでは、予め指定しておいた複数の写真候補の中からランダムでアイキャッチ画像を設定して表示してくれる機能
    • トップページの画像を固定したくなかったため、本機能を使うことでアクセスする都度、トップページ画像が変わるように設定
  3. Imsanity
    • スマホの写真をアップすると1枚あたり数MBも容量を取ってしまうため、都度、手動でリサイズしていましたが、本プラグインでは画像をメディアライブラリにアップロードする際に、予め設定しておいたサイズに画像を自動でリサイズして保存してくれます
    • 僕は横幅のMaxを800ピクセルに指定

これだけでも魅力的なサイトが簡単に作れてしまいます。Cocoon素晴らしい。

スポンサーリンク

ワードプレス、Cocoon初心者向けポイント

その他、ワードプレス、Cocoon初心者として僕が試行錯誤したポイントをメモしておきます。

画像のサイズ変更

イマドキのスマホで撮った写真を普通にアップロードすると5500×3000ピクセル、6MBくらいの高解像度です。初めは単にアップロードしただけでしたが、不必要にデータが大きいためサイトの読み込み速度が低下します。

そこで写真をメディアにアップロードしたら都度、横幅を800ピクセルに変更して保存することにしました。これだけで見た目はほとんど変わらずにファイルサイズは100KB以下に収まります。

当初は写真をアップロードするたびに手動で対応していましたが、上述したプラグイン”Imsanity”のおかげでリサイズが自動で実行できるようになり助かっています。

効果的な固定ページの使い方

ワードプレスを使い始めた頃、「固定ページ」はどう使ってよいのかわかりませんでした。色々といじっているうちにわかったのが、個性的なトップページやまとめページを作るのに固定ページが最適だということ。

個性的なトップページの作り方

去年まで使っていた無料ブログ(エキサイトブログ)では単にブログエントリーを書いては投稿する繰り返しでしたが、これだとカテゴリーの設定はできますが色々なジャンルの記事が時系列に並んでいるだけでトップページは味気ないものでした。そこで、固定ページを使って個性的なトップページを作ることに。

トップページは読者が読みたいコンテンツへスムースにガイドするのが目的。あくまで見やすくて分かりやすいレイアウトが肝心です。

トップページの構成要素はこんな感じです。

  1. アイキャッチ画像。サイトのイメージが伝わる写真を1枚選んで載せる。
  2. サイトの説明。簡潔にサイトの狙いや概要を伝える。
  3. 最新記事と人気記事の一覧。訪問する度に入れ替わる要素として大事。
  4. カテゴリの紹介。簡潔にカテゴリを説明し、カテゴリごとのまとめページへリンクする。
  5. 検索。キーワードでサイト内の記事を検索できるように。

実際に作ってみたトップページがこちら。

まとめページの作り方

固定ページのもう1つの使い方がまとめページ。時系列に記事が並ぶだけのブログだと過去の記事が埋もれてしまいます。そこで…

過去の記事を幾つかピックアップした「まとめページ」を作るのに固定ページが最適

固定ページでまとめページを作る手順は以下のとおり。

  1. まとめページの構造を考える。
  2. 構造に沿って、見出し2、見出し3…を作成する。
  3. 見出しごとに相応しい過去記事の簡単な紹介文を書いてブログカードで記事へのリンクを貼る。

こんな感じで以前に書いていたブログで埋もれていた過去記事をピックアップして、まとめページを作ってみました。

これにより、本ブログから過去の記事へスムースに動線を作ることができ、ブログ間で相互にリンクを貼ることができます。最初に作ったまとめページがこちら。

まだ試行錯誤しながらワードプレスとCocoonを勉強中ですので、何かつまづいたり気づいた度にこのエントリーに追記していくことにします。

スポンサーリンク
初心者向けWordPress入門
スポンサーリンク
シェアする
takekuraをフォローする
ロサンゼルスMBA生活とその後 2019~
タイトルとURLをコピーしました