ウィジェットに画像を追加する

ウィジェットに画像を表示するには、テキストにHTMLを記述すれば良いのですが、慣れないうちは画像のアドレス指定をミスして上手く表示されなかったり、位置の調整やリンクの設定に手まどったり、思い通りの結果が得られない、時間が取られてしまうということもあると思います。本当は、そういう苦労がステップアップになると思いつつも、趣味でサイトを構築しているだけの人間は、趣味だけに時間を費やすわけにもいかないし、逆にWordPressから足が遠のいてしまうことに成り兼ねません。のんびり勉強していきたいけど、サイト作りがぜんぜん進まないのも、つまらないので、ここではプラグインを利用して、ウィジェットに画像を追加しようと思います。

私が使った『Image Widget』は、お薦めプラグインをまとめた書籍にも大きく紹介されている有名なプラグインの一つで、投稿や固定記事にメディアを追加する感覚で、ウィジェットに画像を追加できます。位置の調整やリンクなど設定もしやすいので、WordPress初心者にも簡単に操作できます。

プラグインを新規インストールする
管理画面の〔プラグイン〕-〔新規追加〕をクリックします。検索に『image widget』と入力し、プラグインの検索ボタンを押します。
『プラグインのインストール画面』に切り替わったら、『いますぐインストール』を選択し、新規追加します。
新規インストールしたら、管理画面の〔プラグイン〕-〔インストール済みプラグイン〕の一覧に表示されます。プラグインの有効化、停止、削除といったプラグインの管理は、ここからおこないます。

image widgetの新規追加
image widgetの新規追加

ウィジェットに『画像』が追加される

プラグインを有効化したあと、管理画面〔ウィジェット〕をクリックすると『画像ウィジェット』が追加されています。
ここでは、メインサイドバーのTOPに、画像を追加して、トップページにリンクを貼り、配置はセンターにします。今は、ローカル環境でWordPressを使っているので、TOPページへのリンクアドレスは、『http://localhost/wordpress/』になります。タイトルは空欄にすれば表示されません。この設定画面だけで、ウィジェットに画像を追加できます。

image widgetの設定
image widgetの設定

 

プラグインのほうが楽だと思い込まない

プラグインのお話をしてきましたが、何でも、かんでも、プラグインのほうが楽というわけではありません。
いぜんにも書きましたが、プラインは、プラグインを作ってくださった方の意図を反映しています。そのため、使える箇所が限定的だったり、逆に、自分は1のことができればいいのに、構成の過ぎて10も20も機能があるというケースもあります。大は小を兼ねるという考えた方もありますが、それらの使い方をすべて覚える気がないのに、管理画面に追加されるメニューが無駄に多くなるというのも、逆に設定しにくくなります。
また、WordPressは世界中で使われているので、外国の方が作られているプラグインのほうが圧倒的に多いですが、日本語フォントに関わる設定など、プラグインそのものの修正を要する場合もあります。使用できるWordPressのバージョンが限られていたり、テーマが限られていたりもするので、プラグインを探したり、導入したりするよりも、スタイルシートを編集するほうが早いという場面もあるのです。
たとえば、テーマ『Twenty Fourteen』は、背景に対してサイトが左寄せになっていますが、これを中央にしたいという作業は、プラグイン探してインストールより、スタイルシートに書いたほうが早いです。

 

背景に対するページ位置を変更する

それでは確認を兼ね、背景に対するページ位置をセンターにしたり、ページの上下にマージンを設ける設定をしてみます。

Twenty Fourteenの構成
Twenty Fourteenの構成

管理画面〔外観〕-〔テーマ編集〕をクリックします。『編集するテーマの選択』が、『twentyfourteen-child』の スタイルシート (style.css)になっていることを確認します。
枠線で囲まれた部分を追記します。

 

ページ位置の調整
ページ位置の調整

 /* ページを中央表示 */
.site {
margin: 0em auto;
}

 

これでサイトが中央に表示されました。記述も少ないので、プラグインを探すより、楽ですね。
ちなみに、『em』の部分に数値を入力すると、背景に対して、ページ上下の余白設定できます。たとえば、ここに『5em』と指定してみます。上下にも背景画像が映っています。

ページ上下に背景が映っている
ページ上下に背景が映っている

 

設定が反映されないときの注意点
ただしく記述していても、キャッシュが原因で、ブラウザ上では設定が反映されていない画面が表示されることがあります。その場合は、ブラウザのプロパティや設定画面で、キャッシュをクリアすれば、スタイルシートへの設定変更が反映した画面が表示されます。

今回はここまで。次回からは、また新しいPARTがはじまります。お楽しみに。