好きな画像をサイドバーウィジェットにJetpackを利用して表示する
2014/11/22
WordPressを利用していてロゴや画像などをサイドバーに表示する際には、
JetPackの画像ウィジェットを利用すると簡単に表示することができます。
はじめに
サイドバーに会社のロゴや著者の写真などが表示されているのを見たことがあるでしょう。
画像をサイドバーに設置することは特に難しいことではありませんが、
JetPackの画像ウィジェットを利用すると、画像ファイルを指定するだけで表示されるようになります。
環境
- WordPress: 3.7.1
- JetPack: 2.5
事前準備
JetPackの画像ウィジェットを利用するには、JetPackを有効化する必要があります。
JetPackの有効化に関する詳細は以下でご紹介しています。
23.追加ウィジェット-Jetpack by WordPress.com
利用方法
JetPackを有効化し、追加ウィジェットの機能を有効にすると、
[外観]-[ウィジェット]を選択して「ウィジェット」を表示します。
ウィジェットの使用できるウィジェットのエリアに対して「画像 (Jetpack)」が表示されます。
ウィジェットの配置
ウィジェットをドラッグしサイドバーなど表示したいエリアにドラッグし配置します。
ウィジェットの設定
ウィジェットを配置したら、URLの指定など設定を行います。
タイトル
タイトルではウィジェットのタイトルを入力します。入力したままに表示されます。
※ウィジェットを配置しても画像のURLを指定するまでは表示されません。
画像URL
画像URLでは表示したい画像のURLを指定します。
指定するURLは表示する画像のURLでクリックした際に表示される先のURLは、
後述する「リンクURL」に指定します。
代替テキスト・画像タイトル・キャプション
代替テキスト・画像タイトル・キャプションは画像に対しての属性を指定します。
尚、代替テキスト・画像タイトルに対して入力を行った場合でも、
表示される画像サイズは適宜縮小表示されますが、
キャプションに対して入力を行った場合には表示画像サイズの縮小が、
正しく動作しない場合があります。
画像の位置
画像の位置では表示する位置を「なし/左/中央/右」から選択することができます。
幅・高さ
幅と高さでは画像サイズに基づいて、表示サイズが入力補完されますが、
適宜表示したいサイズを指定することができます。
リンク URL (画像クリック時)
リンク URL (画像クリック時)では画像をリンクした際に表示するURLを指定します。
画像にリンクするなり、TOPページのURLを指定するなり設定が行えます。
さいごに
このようにして画像をウィジェットで簡単に設置して、
クリック先URLに対してサイトのトップページなどを設定することができるようになります。
実際は直接タグを入力しても実現することができる機能ではありますが、
既にJetPackを導入済である場合には、簡単に設置することができますので便利かもしれません。
WordPressはWordPress Foundation の登録商標(第5049965号)です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。
関連記事
-
-
wordpressの投稿で「続きを読む(read more)」を表示する方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
リンクをdivエリアでクリック可能にするHTML・CSSをさらにショートコード化
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
19_01.投稿の一覧表示には、Jetpackのアーカイブ(archives)ショートコード埋め込み(各種条件指定例)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
VaultPress™を利用して別のサイトに復旧(テスト・一時)サイトを構成する手順
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
wordpress投稿のタグ一括編集にSimple Tags_v2.2-wordpressプラグインを利用
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
JetPack Photonのキャッシュ画像は更新できない
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
JetPackにどんな操作をすると統計情報が初期化されるか調べました(再現なし)
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
レンタルサーバーの契約前にApache Benchでレスポンスを確認しよう
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
JetPackのカスタムCSSエディタのACE Code Editorが表示されない場合
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
-
headタグ挿入にHeader and Footer-wordpressプラグインを利用
Google or AdMax Promotion(it) 禁断の機能がau公式 …