【デザイン編】これくらいまでは使いこなしたい WordPress と Cocoon の使い方

PCを使いこなす少女 WordPressとCocoonの活用

初心者でも無料で出来るページデザインの基礎を説明します。

これくらいやっておけば初期状態から一歩進んだオリジナル感を出すことが出来るはず。

↓長文なので目次からどうぞ

まずはスキンを変えよう

見た目をカスタマイズする一番簡単で効果的な方法はスキンを変えることです。

Cocoonだと「Cocoon設定」ページへ移動すると最初のページがスキンページなので「スキン一覧」のラジオボタンの右のアイコンからイメージが見れます

ラジオボタンをチェックして上下にある「変更をまとめて保存」ボタンを押せば変更されます。

無料テーマのスキンでよさそうなのは使っている人が多いのでかぶりますが、何もしない状態よりもオリジナル感が出せます。

もっといいデザインにしたいときはCSSをいじったり有料テーマを使うといいです。

いろいろな装飾:ブロックを追加

WordPress&Cocoonにはテーマデザインやリスト、ボックス、吹き出しなどいろいろな装飾やデザインがあり形や色も変更できます。

使い方には記事編集画面の「+」アイコンの「ブロックの追加」などから選ぶか検索するか、全表示して一覧から選ぶなどの方法があります。

詳細設定は右のサイドバーのブロックタブの他にツールバーから行うものもあるので注意してください。(※致し方ないが分かりにくい)

ブロック一覧を表示してから消すとサイドバーが消えることがありますが、これは右上の歯車アイコンから再表示できます。(※これもついつい忘れてあせりがち)

では、各ブロックの機能を説明していきます。

段落

当たり前ですが基本ブロックは「段落」です。

空白の段落に別のブロックを追加することもできます。

改行すると自動で段落になりますが、画像の後などで文字カーソルが出ないところではマウスカーソルを移動すると「+」アイコンが出るのでこれでブロックを追加できます

スペーサー

何も表示されませんが上のように何もないスペースを入れるのがスペーサーです。

空文字(全角スペース)などを入れて改行する方法もありますがWordPress的にはスペーサーを使うのが今のところの正式なやり方です。

スペーサーのほうがピクセル単位で指定できるのでより繊細な設定ができます。

通販リンクなど外部サービスを使うと次のブロックとの間が狭すぎることがあるのでそんなときにも使えます。

吹き出し

これは「吹き出し」ブロック

人物画像やデザインも選べてセリフやストーリーテリングが簡単にできるよ

画像

ポイント説明写真
(フリーでも質の高い写真がある)

悪用は規約で禁止されていて、アフィリだと名前を付けてお客さんの声とかに勝手に使うのも禁止だぞ!

とはいえ、肖像権はフリーサイトが確認してるから逆に安心!

画像や写真もブロックとして追加します。

画像は自分でアップロードするかネット画像のURLを指定して使います。画像には基本的に著作権があり、写真だとさらに肖像権もあるのでフリーでないものを使うのは基本的にはNGです。(※許可を取れば使える)

しばらくはフリーサイトから選んで使いましょう。

リスト

  1. シンプルだけどリストもある
  2. 背景色を変えるだけで
  3. オリジナルっぽくなる
  4. 設定は右の「ブロック」タグから
  5. ツールバーで番号リストにも切り替えられる

ボタンその他

「ボタン」でブロック検索するといろいろ出てきます。(ブロック一覧からも選べる)

ボタンのリンクなど一部の機能はツールバーで、その他の色変更などは右のブロックタブで設定します。(※表示が消えたら右上の歯車アイコンで再表示可能)

リストとボタンは控えめなデザインなのでCSSをいじってもっとスタイリッシュなものにカスタマイズする手もあります。

ボタンは使わずにテキストリンクにするのも悪くないです。

見出しボックスその他

これが「見出しボックス」

「ここがポイント」とか「注意」を書くのに便利。見出しにはアイコン(左の旗印)もいろいろな種類から選べる。これは効果的なので早めにマスターしよう

「ボックス」でブロック検索したり「すべて表示」して選びます。

参考リンクなどにも使えますが他人の記事を強くアピールしてあげる必要もないので地味な色合いにするなど工夫しましょう。

これはCocoonの「ラベルボックス」
  1. ボックスの中にリストを入れると
  2. よくある「ここがポイント」とか
  3. まとめのリストが作れる
  4. アイコンも付けて背景を青くするのが人気

バッジ

これがバッジ 分類などをワンポイントで伝えるのに便利なのがバッジです。

文字を範囲選択してからツールバーの鉛筆のようなアイコンから色を選ぶと作れます。

比較すると見やすくおしゃれな感じになっているのが分かります。

参考:ささやライフ

参考 ささやライフ

RP:アフィリ戦略公開中!

RP アフィリ戦略公開中!

埋め込み動画

YouTubeなら動画URLをコピペして埋め込むだけで今風な感じなります。

埋め込みTwitter

Twitterの埋め込みもツイートのURLを入れるだけです。

まとめ:装飾は積極的に使っていこう、文字ばかりだとユーザーはあきてしまう

細かいところはまた後で調べればいいので、とりあえずはブロック追加だけでこれくらいなら簡単に出来るということを知っておいてください。

これくらい使えるになればデザイン的にそれなりにちゃんとした最低限以上の記事が作れるはずです。

逆にこれ以上やると時間やスキルが必要になってくるので素人は無暗に手を出さない方が時間の節約になるかもしれません。

せっかく自分でカスタイマイズしたのにブロック追加のほうがデザインがよかったなんてこともあるよ

アイキャッチ画像

アイキャッチ画像はサイトのトップや一覧のサムネイルなどに表示されます。

アイキャッチ画像を設定するだけでクリック率が上がるので実はSEO的には必須のお役立ち画像です。

記事のイメージも決めてしまうので意外と影響が大きい部分でもあります。

最初の画像を見ただけでなんか違うと思って別記事を探しにいくことはあるわね

記事内の画像と同じく売り物もありますが、とりえずフリー素材サイトも充実してきているのでこれで十分です。

ただし問題もあって記事内の画像も同じですがフリーだと他の人と被る恐れが出てきてしまいます。

記事を差別化したいとか、力を入れてる感じを出したいなら有料画像やクラウドワークでオリジナル画像を依頼するのもいいです。

毎回記事を作るたびに画像を選ぶことになるので先にフリー素材サイトを探しておきましょう。

各見出しごとに画像を入れる方法もあって、この方法をすすめている人もけっこういます。

探すのに手間がかかりますがちゃんと選べばユーザーの閲覧リズムが出来たり、あきさせない効果がおおむねあると見られています。

多くのユーザーが記事を読み飛ばして見る傾向があるので画像をはさんでおくと素早くスクロールされても読み飛ばされにくくなるメリットもあります。

画像を増やすと雑誌的な印象になるので記事の内容に合わせて使ってください。

真面目な記事ならあまり画像は必要ありませんし、ペラサイトのような広告サイドでは画像や写真を増やした方がユーザーにアピール出来ます。

画像のイメージはブログ全体のイメージにつながります。

画像表示

画像や写真は「+」アイコンから追加できます。

著作権があるのでネットで見つけたものを勝手に使うのはやめてフリー素材から探すか自分で写真をとるなどしましょう

表やグラフは合法的に引用できるのでネットで探したものでも使えます。(※引用元サイトの表記も必要、無断引用は違法)

ディズニーやジャニーズは著作権に厳しく個人サイトからでも多額の損害賠償請求をしてくることがあるので特に危ないです。

ネット画像で問題になるのはファイルのデータサイズです。

大きいファイルはページの表示速度が遅くなるのであまり使わないようにしましょう。

ファイルの種類はJPGが軽いのでPNGファイルなどはWindows付属のペイントソフトでJPGで保存するだけでもサイズが小さくなるのでおすすめです。

もっとサイズを小さくしたいときは圧縮オンラインツールを使うと便利です。

「画像サイズ 減らす オンラインツール」で検索

縦横サイズはスマホファースト600×900ピクセルくらいにしておくと程よい大きさになります。

ウィジットの設定:サイドバーや追従設定

ウィジットというのはアプリなどが機能するエリアのことです。

WordPressでは表示ブロックくらいのイメージになります。

TwitterのTL(タイムライン)表示などもここで設定します。

管理画面の外観 > ウィジットからサイドバーなどの表示設定が出来るので好みの設定にしておきましょう。

サイドバー表示で一般的なのは、検索、最近の投稿、アーカイブ、カテゴリーなどです。

メインカラムスクロール追従に何か設定しておくとスマホでサイドバー表示ボタンが表示されるようになって便利なので何かしら設定しておくのがおすすめです(コメントが無難)。

PC表示だと画面の一番下に表示されるようになります。

サイドバースクロール追従はその場所でスクロールが止まる機能でPC表示でのみ動作します。

追従中は常に表示されるのでユーザーに見せたいものを設定しましょう。

一般的には最近の投稿を設定している人が多いです。

私のおすすめは記事が読んでもらえるように目次を表示することです。

カテゴリーの表示順を指定(プラグイン)

ブログのトップページでテーマごとに記事が表示されるように設定することが出来ます。

テーマというのは表示される名前でWordPress的にはカテゴリーといいます。

カテゴリーは自分で増やせますが表示される順番は指定できません。(デフォルトは頭文字順)

見せたい順で表示するにはプラグインを使います。

私は「Taxonomy Terms Order」というのを使っていて特に問題は出ていないのでこれをおすすめしておきます。(別のでもいけるはず)

ドラッグ&ドロップで並べ替えるだけなので簡単です。

トップページを自作して目次を書いて固定ページにするなら特に必要ないのですが、それまではとりあえずこれで順番を変えておけば最低限のトップページが出来上がります。

サイドバーもユーザーに上から順に見られるものなのでブログのおすすめカテゴリーが上に表示されるようにしておきましょう。

Taxonomy Terms Order の使い方(管理画面):サイドバー&トップページ
  1. プラグイン > 新規追加:「Taxonomy Terms Order」を検索してインストール
  2. 設定 > Taxonomy Terms Order:「自動ソート」と「管理画面での並び替え」を有効に設定
  3. 投稿 > カテゴリー:カテゴリーがあるか確認(念のため)
  4. 投稿 > Taxonomy Order:ドラッグ&ドロップで並び順を設定
  5. 外観 > ウィジット > カテゴリー(サイドバーなどにあるが表示位置は可変):「階層を表示」をチェック
  6. Cocoon設定 > 「インデックス」タブ(トップページの表示設定):「表示カテゴリー」でチェック
  7. 同じ画面で「表示形式」も変えられるのでついでに好みの形式に変えておく

SNSとの連携

サイドバーにTwitterを表示するのが簡単で効果的なのでおすすめです。

検索 やり方を調べる

トップページを作ろう

初期状態だと新着記事のリストが表示されるだけなのでサイトがどの記事を見せたいのか分かりません。

サイトの質を高めるにはジャンルを絞ってトップページでおすすめ記事やメインコンテンツが分かるようにしたほうがいいです。

参考 【Cocoon】コピペで簡単にできる!サイト型トップページの作り方 キラペット.com

モバイルメニューでデキるサイト風に

Cocoonでメニューを設定すると割と楽にちゃんとしたサイト感が出るのでおすすめです。

メニューがつくだけで一段上のデザインになるわね

デフォルトでは上にスクロールするとメニューが出る今風のデザインになっているのでこれだけでもかなりデキる風になります

このささやライフもモバイルで見ると上下に素敵なメニューが出てくるようになりました。モバイルとPCの共通ヘッダーとフッターに設定していてPC版でも記事の上下に表示されてます。

やり方は作者の方が説明している記事があるので参考に挙げておきます。これでだいたい分かると思います。

ちなみにリンク先となるサイトマップやお問い合わせ画面などの固定ページは自分で作るものなので先に作っておかないとリンクできませんのであしからず。

参考 ヘッダーモバイルボタンの設定方法 Cocoon

アイコン設定は分かりにくいかもしれませんが[fa + アイコンID]で設定してください。

私もこの記事を見てメニュー設定して文字とアイコンの色だけ他のサイトを見てCSSに追加しました。

色は ダッシュボード > 外観 > カスタマイズ > 追加CSS に次のコードを追加すれば変更できます。

/* メニューヘッダーフッター 色設定 */
@media screen and (max-width: 480px){
.mobile-menu-buttons .menu-button > a,
.menu-button{
color:#40b090;
}
.mobile-menu-buttons .menu-button:hover{
background-color: transparent;
color:#40b090;
}
}

後はやはりロゴ画像にそれらしいものに変えるとグッとよくなります。

それにしてもCocoonは無料なのに本当に高性能だな!

全体のイメージを統一しよう

記事内容・デザインを含めて全体のイメージで大事なのは統一性です。

ブレちゃってるのはブログでも男でもイマイチなことが多いわね

ポリシーがないからダメなのよ

人は矛盾を嫌い、統一性を評価する傾向があります。

逆に統一感がないと薄っぺらで信用できなそうなイメージになってしまいます。

あまりにも世界観が違う過ぎるものをブログというひとつの箱に詰め込むと魅力も相殺されてしまうし、なんといっても統一感が出ないのでやめておきましょう。

統一感というのはデザインだけでなく言葉遣いや記事内容、またそれぞれの関連性などから生まれてくるものです。

文字通り全体を意識して統一感が保てるように意識しておきましょう。

ちなみにこのサイトもカテゴリによって画像イメージが違うのでいまいちな部分もあります。(真似しないように)

今のところ雑記ブログなので多少違ってもいいかと思っています。(後で別ブログに分けるなど対応するつもり)

「ブレてない」という言葉がいつから誉め言葉になったのかは謎だな

ブレてないことしか誉めるところがないときだけに使われるようなのであまりいい誉め言葉とはいえないようですね

他の記事作成シリーズ

関連 これくらいまでは使いこなしたい WordPress と Cocoon の使い方(記事作成編)

関連 記事作成【初級】 やっておいたほうがいい作業や考え方

関連 記事作成【中級】 よりよい記事を目指し調査・作成・更新・確認を繰り返す

関連 記事作成【上級】 質を上げる戦略

目次 アフィリトップに戻る

コメント

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