こんにちは。
一日1～2時間の作業で月20万円前後の収益を得ている副業ブロガー。「ニッチジャンルで安定的に稼ぐブログ理論」を提唱しているユキスキです。
さて、前回ブログデザインのカスタマイズ方法についてお話してきましたが、今回はブログの側面や記事の上部・下部に掲載される情報を編集します。
たとえば、私が作ったサンプルブログの側面には「カテゴリー」や「最近の投稿」なんて情報が掲載されてます。
実はここに記載されている情報や配置は、ウィジェットと呼ばれる編集画面で簡単に変更できるのです。
次項から詳しくお話していきますね。
ウィジェットの編集方法とは？
ウィジェットなんて小難しい英語が出てきますが、編集する方法はとっても簡単。
まず、ワードプレスの編集画面から「外観」→「ウィジェット」を選択します。
すると、ウィジェットの編集画面が現れます。
一見とっつきにくそうな画面ですが、ドラッグ＆ドロップ（対象をクリックしたまま移動する）で簡単に編集できます。
たとえば、サイドバーウィジェットの項目を開くと、側面に現在ブログに表示されている情報が記載されています。
左側にある項目をドラッグ＆ドロップすると…
はい、サイドバーウィジェットに組み込むことができました。なお、左側の項目をダブルクリックでも設置可能です。
ちゃんとブログデザインにも反映されてますね。簡単でしょ？
同じ要領で、ヘッダー（ページ上部）やフッター（ページ下部）など、自由にカスタマイズできます。
ちなみに、パソコンとスマホは表示される箇所が異なります。編集が終わったらスマホ画面でも確認しておくことをおすすめします。
詳細な条件の設定方法
掲示される情報の条件を編集することも可能です。
右上の矢印ボタンをクリックすると隠れていた画面が表示されるので、それぞれ任意で入力してください。
「タイトル」では、ウィジェットがブログに掲示される時のタイトルを変更することもできます。
最後に保存をクリックしないと反映されないので注意してくださいね。
ウィジェットはシンプルに
ウィジェットの使い方はお分かりいただけたかと思いますが、あまり使いすぎはよくありません。設置するのは必要最低限だけにしましょう。
なぜなら、読者にわかりづらいからです。画面がごちゃごちゃしていると、かえって読者の離脱を招きます。
メタ情報やアーカイブなんて使う人はほとんどいません。
少数の人に配慮するより、大多数の人が使うであろうウィジェットを配置したほうがユーザビリティ（読者の使いやすさ）がUPします。
ちなみに、ユキスキブログはカテゴリーと人気記事ランキングのみです。
もし何を設置するか迷ったときは、好きなブロガーさんの配置を参考にしてみましょう。
削除の方法も簡単。右上の矢印ボタンをクリックすると隠れていた画面が表示されるので、あとは削除を押すだけ。
削除が終わると自動的に反映されます。削除したあと元に戻すことはできないのでご注意ください。
広告やYouTubeをウィジェットに設置してみよう
編集方法はお分かりいただけたかと思いますので、今度はちょっと応用編。
広告やYouTube動画を配置してみましょう。
■広告
まず、カスタムHTMLを好きな場所に設置してください。
さらに詳細を開いて、「内容」の箇所に広告主からもらった英数字の呪文をコピペして保存します。（広告主から呪文をもらう方法については別の記事で解説します。）
たったこれだけで、広告が表示されるようになるんです。
■YouTube
同じようにyoutubeの画像を貼り付けることもできます。まず、好きなYouTubeの動画を開いて「共有」をクリック。
上記の画面に切り替わるので、「埋め込む」をクリック。
すると、広告と同じように謎の呪文が現れますｗ（HTMLタグっていいます）
これをコピーして、先ほどと同じ要領でウィジェットに貼り付けます。
やりました～動画も反映されてます！
ご自身で作った動画や、商品動画を添付すると広告効果抜群ですね。
ちなみに、どんなYouTube動画を貼り付けても著作権の問題はありませんので（YouTube投稿者が著作権を犯してなければ）、好きな動画を設置してOKです。
ツイッターのタイムラインをウィジェットに設置してみよう
続いては、ツイッターのタイムラインをウィジェットに設定する方法です。当ブログもブログ記事の最後にツイッター貼ってます。
これは、ツイッターの集客はもちろん、定期的に更新していることのアピールにもなります。
まずは、下記のサイトにアクセスしてください。
すると、上記の画面にアクセスするので、
パソコンでご自身のツイッターの「プロフィール」を開き、URLをコピーして先ほどの画面に貼り付けます。
エンターを押すと上記の画面に移りますので、左側のイラストをクリック。例の呪文が表示されます。
しかし、このままだと表示されるタイムラインがめちゃめちゃ長いうえに、なぜか設定が英語になっているので、ブログに合わせて表示サイズと言語を設定します。
右下の「set customization options」をクリックしましょう。
■What size would you like your timeline to be?
縦×横のサイズの設定です。私は400×500で設定してます。
■How would you like this to look?
色の設定です。ライトorダークから選べます。
■What language would you like to display this in?
言語です。Japaneseに設定しましょう。
最後に「Update」クリックします。
例の呪文が現れるので、コピーしてください。あとは、前項と同じようにカスタムHTMLに貼り付けます。
ツイートが設定されました！
オリジナルバナーをウィジェットに設置してみよう
最後はちょっと難しいオリジナルリンク画像の設定です。
先ほどと同じように、カスタムHTMLの「内容」部分に、下記の呪文を入力します。（コピペして使ってね！）
ただし、今回はこの呪文に少しだけ加工が必要です。
まず、①の部分にリンク先のURLを貼ります、今回は今ご覧頂いている当ブログのURL（https://rakusnowsp.com）を貼ります。
※URLは必ず「https://」から入力してください。
問題は②の部分、実は画像のURLを入力しなければいけません。
まずは、「メディア」→「新規追加」をクリック。
ファイルのアップロード画面に移りますので、ドラッグ＆ドロップか「ファイルを選択」で指定の画像をクリック。
ファイルのアップロード方法やオリジナル画像の作り方については過去の記事を参照ください。
画像がアップロードされたら、「編集」ボタンをクリック。
すると右の方に「ファイルのURL」という項目があるので、これをすべてコピーしてください。これを先ほどの呪文に貼り付けます。
はい、これで呪文が完成しました！
あとは、ウィジェットのカスタムHTMLに呪文を貼り付け保存するだけです。
これで、オリジナルのバナーが完成しました！念のためクリックしてリンク先に飛ぶか確認してみましょう。
ある程度記事が増えたら、ジャンルごとにまとめなどを作ってバナーを配置してもいいかもしれませんね。
オリジナルバナーの作り方は、下記の記事を参照ください。
まとめ
いかがでしたでしょうか。
ウィジェットに限らず、ワードプレスは最初に覚えることが多くてなえるんですが(笑)
いったん覚えると、直感で編集できるので楽なんですよね！
ただ、自由度が高いゆえどんな項目をどこに配置していいか迷うことも多いと思います。
そんな時は、有名ブロガーさんや好きなブログの配置を参考に真似てみましょう。
ワードプレスの設定方法については下記の記事にまとめておりますので、合わせて参照ください。
