WordPressでサイドバーに画像を設定する方法(テーマ:Xeory)

  • このエントリーをはてなブックマークに追加

今回はWordPressの無料テーマ「Xeory」でサイドバーに画像を設定する方法を説明します。おそらく他のテーマでもそんなにやり方は変わらないと思いますので、参考にしてください。

1.変更箇所のイメージ画像

「Xeory」でサイドバーには「最新の投稿」「カテゴリー」「アーカイブ」等が表示されています。シンプルでかっこいいのですが、画像は表示されていないので少し寂しい感じです。

1-1.初期設定のサイドバー

初期設定のサイドバーです。少し寂しい感じしますよね?画像を入れてクリックしやすくしたいです。

初期設定のサイドバー

1-2.変更後のサイドバー

変更後のサイドバーです。「最新の投稿」を画像入りにしています。

変更後のサイドバー

こっちの方が分かりやすいですよね??

コアラ
おぉ~見やすい!

 

2.サイドバーの画像サイズ

サイドバーの横幅は「290px」です。サイズを変更しなくても自動でサイドバー用の画像サイズに変換されて表示されます。例えば、

  • 「1920 ×1280px」の画像
  • 「290 ×193px」の画像

どちらでも表示される画像サイズは視覚的には変わりません。

変わりませんが、WordPressのテーマ「Xeory」はレスポンシブ対応ですので、ウィンドウ画面を狭めていくと、991px付近でサイドバーはサイトの下側に移動してしまいます。

下側に移動すると、

  • 「1920 × 1280px」の画像 → ウィンドウ幅いっぱい
  • 「290 × 193px」の画像 → 290pxのまま

画像は表示のされ方が変わります。

2-1.各サイズの表示のされ方

ウィンドウ画面を狭めてサイドバーが下側に表示されたとき、どのように表示されるのでしょうか。下図はウィンドウサイズを990pxにした時の、各画像サイズのイメージです。

290pxの場合の表示イメージ

1920pxの場合の表示イメージ

なんというか、どちらのサイズもなんとも言えませんね。

スマホで見ればどちらも良い感じになりますが、タブレットで見ると「290px」だと小さすぎる、「1920px」だと大きすぎる、といった感じでしょうか。

どっちも嫌だったので今回はバランスをみて「500px」で設定することにしました。

500pxの場合の表示イメージ

2-2.画像サイズの変更の方法

アイキャッチ画像で使用している画像は「1920 × 1280px」サイズを主に使用しています。この画像を「500 × 333px」サイズに変更する方法ですが、

  • HTMLやcssで指定する
  • 画像そのもののサイズを加工する

この二つの方法があると思います。どちらでも画像は「500 × 333px」サイズで表示されます。視覚的には変わりませんが、画像のファイルサイズが全然違ってきます。「1920 × 1280px」サイズの画像をHTMLでサイズ指定しても、ファイルサイズは大きいままです。

無駄にファイルサイズが大きい画像ばかり使用していると、webサイトが表示される速度が遅くなるので注意です。

当然webサイトは表示される速度が早い方が良いです。開くの遅いとイライラしますよね。画像を加工できるのであれば、「500×333px」の画像を用意しましょう。

3.画像サイズによる読み込み速度の違い

画像サイズによる表示速度がどのくらい違うのか測定してみましょう。今回は主に使用されているであろう「アイキャッチ画像」と「アイキャッチ画像の縦横比をそのままで幅500pxに縮小した画像」で比較します。

サイズ的には下記の画像です。

  • 「1920×1280px」の画像
  • 「500×333px」の画像

使用したサイトはGTmetrixというサイトです。調べたいサイトのURLを入力するだけで簡単に速度を計測できます。

URLを入力

3-1.「1920×1280px」の場合

まずは「1920×1280px」を計測してみると、結果は「4.5s」でした。

「1920×1280px」の計測結果

3-2.「500×333px」の場合

続いて「500×333px」を計測してみると、結果は「2.3s」でした。

「500×333px」の計測結果

 

結構変わりますね。一応キャッシュを消して何度かやってみたんですが、多少のずれはあっても大体同じ結果でした。

サイドバーはトップページだけではなく、各記事ページにも表示されますので、この違いは無視できませんね。やはり画像は加工しましょう

コアラ
結構変わるもんだな

 

4.サイドバーに画像を追加

画像のサイズも決まったので、サイドバーに画像を追加していきましょう。

4-1.設定画面に移動

まずはサイドバーを設定しているページに移動しましょう。WordPressトップページから「外観 → ウィジェット」の順にクリックしていきます。

WordPressトップページから「外観 → ウィジェット」をクリック

「ウィジェット」をクリックすると下図のページが表示されます。

ウィジェットの設定ページ

このページでサイドバーに画像を追加していきます。

4-2.ウィジェットを追加

「ウィジェット」ページに移動出来たら、ここでサイドバーに新しく「ウィジェット」を追加していきます。

今回使用するのは「テキスト」です。左側の「利用できるウィジェット」から「テキスト」を探して、マウスでドラッグ(左クリックしながらマウスを移動)して、右側の「サイドバー」の枠内に移動させます。

「テキスト」を探して、マウスでドラッグ

無事に移動させることができたら、下図のようにテキストが追加されて自動で開いた状態になります。

テキストが追加されて自動で開く

この部分にタイトルと画像を表示さえるためのCSSを追加していきます。

 

4-3.タイトルの入力

まずは今回追加するサイドバーのタイトルを決めましょう。今回は「最新の投稿」を画像付きにカスタマイズするので、タイトルも「最新の投稿」にしちゃいましょう。

下図の赤枠部分にタイトルを入力します。

タイトルを入力

4-4.HTMLの追加

続いて画像とタイトルを表示させるためのHTMLを入力していきます。基本は下記のHTMLになります。

<p style="text-align: center;">
 <a href="○○">
  <img src="△△" alt="□□" width="500" height="333" />
 </a>
</p>
<p style="text-align: center;">
 <a href="○○">記事のタイトル</a>
</p>

○○の部分

この部分にはリンク先のURLを入力します。

△△の部分

この部分には写真のURLを入力します。

□□の部分

この部分には写真の説明を入力します。空欄でも表示的には変わりませんが、SEOの観点からも入力しておいた方が良いです。

入力内容に間違いがなければ、サイドバーに画像が表示されているはずです。確認してみてください。

5.HTMLの入力が面倒な人

HTMLの入力が面倒だなぁという人は、手っ取り早い方法があります。普通にWordPressで記事を書くときのように画像を追加して、そこのHTMLコードをコピーする方法です。

正直HTMLに慣れてない人はこっちのほうが早いかもしれません。

コアラ
コピペでいけるぞ

 

5-1.HTMLコピー用の投稿ページを作成

通常の投稿から探していると大変なので、新しく投稿ページを作成します。WordPressのトップページから「投稿 → 新規追加」をクリックします。

WordPressのトップページから「投稿 → 新規追加」をクリック

「新規投稿の追加」ページが開きますので、「記事タイトル」を入力します。「記事タイトル」は今後編集する際にすぐに分かるタイトルにしておきましょう。

記事のタイトルを入力

今回は「サイドバーの画像追加用ページ」としておきます。

5-2.画像を追加する

続いて本文の箇所に画像を追加していきましょう。本文入力箇所の上部にある「メディアを追加」をクリックします。

本文入力箇所の上部にある「メディアを追加」をクリック

サイドバーに表示させたい画像を探してクリックして、右下の「投稿に挿入」をクリックします。

画像を探してクリックして、右下の「投稿に挿入」をクリック

無事画像が表示されましたね。続いて写真のリンクを変更します。写真を選択して、上部のツールバーから「リンクの挿入/編集」をクリックします。

クリックして写真を選択

すると写真のすぐそばに「リンク設定」ボタンが表示されるはずなので、クリックします。

リンク設定」ボタンをクリック

続いて下図の赤枠で囲ってある部分から、リンク先に指定する記事を選択します。

リンク先に指定する記事を選択

記事を選択すると「URL」の部分が変更されますので、確認して問題なければ「更新」をクリックします。

「更新」をクリック

写真を張り付けただけでは、写真のリンク先は画像そのものです。そのままサイドバーに張り付けて写真をクリックしても、写真が表示されるだけな意味の分からないものになってしまうので、必ずリンクを変更しておきましょう

 

続いて右上の「テキスト」の部分をクリックします。

右上の「テキスト」の部分をクリック

「テキスト」部分をクリックすると、画像のHTMLコードが表示されますので、これをコピーします。

HTMLコードをコピー

※画像サイズを加工していない場合は、この部分に「width=”1920″ height=”1280″」と入力されていると思います。この数値を「width=”500″ height=”333″」に変更しておきましょう。(画像の比率が違う場合は使用する画像に合わせて変更してください)

 

コピーした内容をウィジェット設定画面のテキスト部分に貼り付けます。

ウィジェット設定画面のテキスト部分に貼り付け

最後に「保存」をクリックします。

「保存」をクリック

これで無事サイドバーに画像が表示されました。

サイドバーに画像が表示されるイメージ

5-3.タイトルも入力する

写真を表示することができたら、次は記事のタイトルも入力していきましょう。先ほど作成した「サイドバーの画像追加用ページ」に追加で入力していきます。

右上が「テキスト」になっている場合は「ビジュアル」に変更して、先ほど挿入した写真の下に記事のタイトルを入力します。そして入力したタイトルをセンター寄せにするため、上部のツールから「中央揃え」をクリックします。

上部のツールから「中央揃え」をクリック

続いてリンクを張るために、入力したタイトルを選択して、上部のツールから「リンクの挿入/編集」をクリックします。

上部のツールから「リンクの挿入/編集」をクリック

次にリンクの編集をクリックします。

リンクの編集をクリック

下に表示されている過去の記事から、該当する記事を選択します。 リンク先に設定する記事を選択

これでテキストにリンクが設定されました。次に右上の「テキスト」をクリックします。

右上の「テキスト」をクリック

「テキスト」部分をクリックすると、画像とタイトル部分のHTMLコードが表示されますので、コピーします。

HTMLコードをコピー

コピーした内容をウィジェット設定画面のテキスト部分に貼り付けます。

ウィジェット設定画面のテキスト部分に貼り付け

貼り付けたら右下の「保存」をクリックします。

右下の「保存」をクリック

これで無事サイドバーに画像とタイトルが表示されました。

サイドバーに画像とタイトルが表示されるイメージ

この「写真」と「タイトル」を繰り返し挿入すれば、「最新の投稿」に任意の数の記事を写真付きで掲載することができます。

 

6.まとめ

以上が「WordPressでサイドバーに画像を設定する方法」です。記事を投稿するたびに手動でサイドバーも更新しなければいけませんが、やはり画像があった方が見やすいしユーザーの目にもとまると思います。

ぜひみなさんもサイドバーを変更してみてください。

その他のWordPressカスタマイズは

上記の記事を参考にしてください。

 

スポンサーリンク
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*