wordpress

WordPressの外観設定を極めて見る人を魅了するブログへ

wordpress 外観設定





自分のブログに来てくれた読者には、できるだけ多くの記事を見てもらいたくないですか?

せっかく自分のターゲットとしている読者に記事を見てもらっていたのに、他の記事を見てもらえずに帰られてしまうのは、あなたと読者双方にとって、もったいないですよね。

もしかしたらそれは、あなたのブログの外観に原因があるかもしれません。

例えば

本がジャンルごとに整理されておらず乱雑に置かれていて何となく小汚い本屋だったら、仮にあなたが欲しい本がそこにあったとしても、きっと本を見つける前に帰ってしまうのではないでしょうか。

このように記事の内容と同じくらい、ブログの外観は重要なのです。

今回は、読者に優しくないあなたのブログを、来た人を魅了してしまうような外観にするための基礎知識をご紹介します。

 

外観の項目について

お店の外観

具体的な外観の設定に入る前に、外観設定の全体像を見ていきましょう。

ダッシュボードのサイドバーの外観には以下の項目があります。

  • テーマ…テーマのインストールや有効化ができます。
  • カスタマイズ…サイトデザインを簡単に変更することができます。
  • ウィジェット…ウィジェットのインストールや有効化ができます。
  • メニュー…カスタムメニューの作成ができます。
  • ※ヘッダー…ヘッダーの設定ができます。
  • ※背景…サイトの背景部分の設定ができます。
  • CSS編集…CSSファイルを編集することができます。
  • テーマの編集…テーマファイルを編集することができます。

※テーマによっては項目がないこともあります。

CSS編集とテーマの編集に関しては、HTMLやPHPといったプログラミング言語の知識が必要になってくることから、初心者には少し難しいかもしれません。

ということで今回は、「テーマ」、「カスタマイズ」、「ウィジェット」、「メニュー」の項目の使用方法を解説していきたいと思います。

 

まずはテーマの設定から

ノートとスマートフォン

まずはサイトデザインの軸にあたるテーマを設定しましょう。

こちらに関しては以下の記事で詳しく説明しているので、まだテーマの設定が終わっていない人はこちらの記事もあわせて確認してみてください。

WordPress初心者が最低限やるべき初期設定【プロブロガーの一歩目】

この記事を見ていただいても分かると思うのですが、このサイトがおすすめしているテーマは「JIN」というものになります。外観の設定は、テーマによって多少やり方が異なってくる部分も出てくるのですが、今回は、「JIN」を基準にして説明していきます。(他のテーマでも、参考にできる部分が多い記事となっていますので、ご安心ください。)

 

カスタムメニューで読者にやさしいサイトに

レストランのブラックボード

次はカスタムメニューについて説明します。

カスタムメニューとは

そもそもメニューとは、ユーザーが目的のページにたどり着きやすくするために設置されるリンクのことをいいます。

プロガーのトップページ

上の画像の赤い部分が、メニューですね。

そして、カスタムメニューを使うと、管理画面から簡単にメニューの編集ができてしまいます。

メニュー設定の手順

これからカスタムメニューを使った、メニュー設定の解説をしていきます。

まず、WordPressの管理画面から「外観」→「メニュー」を選択します。

メニューの代替画面

すると、上記のような表示画面に移動するので、「新規メニューを作成」を選びます。

新メニューの登録画面

そして、自分が後で見て分かりやすいようなメニュー名を入力して、「メニューを作成」をクリックします。

メニューの表示画面

すると、青で囲い込んだ「編集するメニューを選択」の部分が、先ほど自分の設定したメニューになっているかと思います。

そして、次に赤枠で囲んでいる部分から、メニューからリンクを飛ばしたいページを選択します。

見て分かる通り赤枠には、4つの項目があるかと思いますが、

  • 固定ページ…ホーム画面や、固定ページから作成したページ
  • 投稿…投稿ページから作成されたページ
  • カスタムリンク…自分で設定したURLのページ(サイトでの表示名も設定可能)
  • カテゴリー…同じカテゴリーの記事がまとめられたページ

といった感じでメニューからリンクを飛ばせるように設定できます。

そして、リンクを飛ばすページにチェックを入れたら、「メニューに追加」をクリックします。

メニューの表示画面

すると、先ほどチェックしたページが、メニュー構造の欄に追加されました。

そして、メニューの表示画面の左側では、「メニュー構造」と「メニュー設定」の2項目があり、それぞれでは以下のようなことができます。

  • メニュー構造…リンクを飛ばすページの並び替えや削除ができます。
  • メニュー設定…メニューをどこに表示させることができるかの設定ができます。

最後に、メニューを保存をクリックすると、サイトにメニューが反映されます。

 

ウィジェットを設定することも読者に優しいブログへの近道

図書館の本棚

続いて、ウィジェットの設定について説明します。

ウィジェットとは

ウィジェットとは、wordpressで利用できるアーカイブ(記事一覧)やカテゴリー、カレンダーといった様々な機能をサイト内に自由に配置できる機能のことをいいます。

プロガーのトップページ

プロガーでいうと、赤枠で囲っている部分がウィジェットの機能を使って、作られた部分です。ウィジェットでは、上図のようなサイドバーだけではなく、フッターの部分にもウィジェット機能を配置することができます。

ウィジェットの設定の手順

ウィジェットが何かというのも分かってきたところで、ここからはウィジェットの具体的な設定方法を紹介していきます。

まず、WordPressの管理画面から「外観」→「ウィジェット」を選択します。

ウィジェットの表示画面

すると、上記のようなウィジェットの表示画面に移動します。赤枠で囲い込んだ部分には、現在利用できるウィジェットが一覧で示されており、青枠で囲い込んだ部分には、ウィジェットの機能が設置可能な部分の一覧と、現在のサイトに設置されている機能がどこの部分に設置されているかが表示されています。

そして、ウィジェットの追加方法は簡単で、赤枠から自分の設置したい機能を選択し、ドラック&ドロップを使って、青枠にある自分の設置したい場所に移動させるだけになります。

とは言っても最初はなかなかどの機能を入れればいいかが分からないかと思うので、おすすめ機能をいくつか紹介します。

  • 検索…検索ワードでサイト内の記事を検索できます。
  • カテゴリー…カテゴリーを表示することができ、クリックすると、カテゴリーごとの記事一覧を見ることができます。
  • 最近の投稿…最近投稿した記事を見ることができます。

ウィジェットの機能も存分に使って、読者に様々な記事を見てもらえるような工夫をしていきましょう。


ヘッダー画像の設定は外観のカスタマイズから

コスモスの花畑

続いては、外観のカスタマイズ機能とそれを使ったヘッダー画像の設定について解説していきます。

外観のカスタマイズ機能とは

外観のカスタマイズ機能を使うと、今までだとHTMLの知識がないと難しかったようなブログデザインや表示内容に関する細かな設定を、WordPressの管理画面上で簡単にすることができます。

WordPressの管理画面から「外観」→「カスタマイズ」を選ぶと、下図のような表示画面に移動します。

カスタマイズの表示画面

このようにブログを見ながら変更を加えられるのが、カスタマイズ機能のいいところでもあるのです。

こちらはテーマによっても使うことができる機能が変わってくるので、一概にこういった機能が使えるというのは言えないのですが、多くのテーマでは以下のような設定を行うことができます。

  • ブログタイトルやキャッチフレーズ
  • 色調
  • ヘッダーやロゴ、背景の画像
  • メニューやウィジェット

次の説明では、カスタマイズ機能を用いた一例として、ヘッダー画像の設定の仕方について解説していこうと思います。

ヘッダー画像の設定の手順

それでは外観のカスタマイズ機能を用いた、ヘッダー画像の設定の仕方を紹介していきます。

プロガーのトップページ

ちなみにヘッダー画像は上図で赤枠で囲い込んでいる部分になります。

まずは「カスタマイズ」の表示画面からサイトデザイン設定をクリックします。

サイトデザイン設定の画面

そして、ヘッダーデザインの選択から「(ヘッダー画像あり)」と書かれているものを選択します。

続いて、再び「カスタマイズ」の表示画面に戻り、「ヘッダー画像設定」をクリックします。

ヘッダー画像設定の画面

そして、一番上のヘッダー画像の欄から、画像を挿入します。

また、この画面ではヘッダー画像に付随する形で

  • ヘッダー画像にリンクを載せる
  • ヘッダー画像の上に文字を載せる
  • スマホ用のヘッダー画像を設定する

といった設定も可能になります。

そして、変更を加えると、設定画面の上部に「公開」と書かれたボタンがあるので、カスタマイズ機能を使う際は、最後にこちらをクリックするのを忘れないようにしましょう。

このようにカスタマイズ機能では、実際のサイトを見ながら簡単にサイトデザインを変更することが可能になるので、うまくカスタマイズ機能を使いこなして、綺麗なサイトを作り上げてください。

 

さいごに

コーヒーとノート

記事もブログの外観も読者が第一です。今回紹介した外観設定を駆使して、ブログに訪問してきた読者を引きつけられるようなサイトを作ってみてください。

読者を魅了する外観設定(コピペ推奨)
  • まずはテーマを設定しよう
  • メニューの設定は読者へのやさしさ
  • ウィジェットの設定も読者へのやさしさ
  • 外観のカスタマイズ機能できれいなサイトを作ろう

ブログの外観を綺麗に整えた後はブログのコンテンツの質を高めていきましょう。外観がどんなにおしゃれなお店でも売っている商品が粗悪品ばかりだったら、二度とそのお店で商品は買わないですよね。

外観に見合う質の高いコンテンツを作って自分のブログのファンを作るために【全工程】コンテンツSEO完全攻略するブログの書き方でコンテンツ作成も完璧にしていきましょう。

にほんブログ村 ブログブログ ブログアクセスアップへ