今回は、ブログのサイドバーに、【プロフィール】【お問い合わせ】などの表示をして、

画像や文章をクリックすると

リンク先のページが表示されるようにしていきましょう^^

前回記事の復習

 

前回の記事でウィジェットをサイドバーに追加するところまでを解説していますので、

ここまでは済ませておいてくださいね(^_-)-☆
↓↓↓
【賢威】サイドバーの作成方法

 

今回は、前回記事の続きになります。

【プロフィール】と【お問い合わせはこちら】のテキストウィジェットの

中身を編集していきましょう♪♪

 

画像の準備

 

まずは、ウィジェットに表示させる画像を準備して、

WordPressの【メディアライブラリ】に入れておく必要があります。

サイズは賢威の初期設定のサイドバーですと

最大で300×300くらいです。

マルコは横幅200程度にしています。お好みに合わせてどうぞ^^

 

 

画像をメディアライブラリに入れる方法については下の記事中の

【2.画像をWordpressのメディアライブラリに追加しよう】で解説していますので、

画像を追加してURLをコピーするところまで完了させてください。
↓↓↓
【賢威6.2】ヘッダーの文字を画像に変更する方法

 

 

・・・・・画像の準備はできましたでしょうか?

 

それではいよいよ、ウィジェットの編集にはいりましょう♪

 

テキストウィジェットの編集

 

WordPressの編集画面で
①【外観】にマウスを合わせ、
②【ウィジェット】をクリックします。

 テキストウィジェット

 

 前回作成したサイドバーの、【プロフィール】をクリックします。

テキストウィジェット

 

 【プロフィール】のテキストウィジェットが開きました。
赤枠の部分に文章などを入力していきますが、
画像を挿入したり、リンクを貼ったりするには、
htmlタグを使う必要があります。

テキストウィジェット

 

では、下の画像のようなイメージになるようにしていきましょう。
画像と、一番下の青い文字列は、
クリックすると詳しいプロフィールを書いた記事へ飛ぶようにします。

 サイドバー

 

下のソースコードをコピーして赤枠内に貼り付けてください。

 

 貼りつけができましたね♪

ここで、以下のように記述を変更します。

①・【リンク先URL】をリンクさせたい記事のURLに変更
 ・【画像のURL】を、メディアライブラリに追加した時にコピーしておいた
      画像のURLに変更
 ・【代替テキスト】を画像を表す言葉(プロフィールなど)に変更
 ・【===文章===】の部分を簡単な自己紹介の文章に変更します。

 変更が出来たら、【自動的に段落追加する】にチェックを入れて
③【保存】をクリックし、
④【閉じる】でテキストウィジェットを閉じます。

※ちなみに、ここでは画像サイズが200×200ピクセルで表示されるように調整していますが、元の画像のサイズのままで表示させたい場合は、上のコードの中の【width=”200″ height=”200″】の部分を削除してくださいね。

テキストウィジェット

 

 これで、【プロフィール】のウィジェットは完成です。

入力時に、うっかり【”】を消してしまうだけでもうまく表示されなくなるので
注意して作業しましょう!

 

 

次に、【お問い合わせはこちらから】をクリックします。

テキストウィジェット

 

 同じように、赤枠内に入力をしていきます。

テキストウィジェット

 

仕上がりのイメージはこんな感じです。
画像をクリックするとお問い合わせフォームのページへ飛ぶようにします。

 ウィジェット

 

 以下のソースコードをコピーして貼り付けてください。

 

貼り付けが出来たら、以下のように記述を変更します。

①・【リンク先URL】を、リンクさせたい記事のURLに変更
 ・【画像のURL】を、メディアライブラリに追加した時にコピーしておいた
      画像のURLに変更
 ・【代替テキスト】を画像を表す言葉(お問い合わせ など)に変更

 変更が出来たら、【自動的に段落追加する】にチェックを入れて
③【保存】をクリックし、
④【閉じる】でテキストウィジェットを閉じます。

テキストウィジェット

 

 

 これで、お問い合わせのウィジェットも完成です♪♪

ブログを確認して、うまく表示されているか見てみましょう。

うまくいかない時は何度でもやり直せば大丈夫です!

 

htmlタグまとめ

 

最後に、今回の作業で使ったhtmlタグの意味を簡単に説明します。

  •  <div align=”center”>・・・・・</div>
    ・・・の部分に挿入した文字列や画像を中央に寄せます。

 

  • <a href=”リンク先URL”>・・・</a>
    ・・・の部分に挿入した文字列や画像にリンクを貼ります。

 

  • target=”_blank”
    リンクをクリックした時に新しいタブで開くようにします。

 

  • <img src=”画像のURL”alt=”代替テキスト”>
    画像を表示させるタグです。
    代替テキストには画像を示す名前をいれます。
    (画像が表示できない時にこの名前が表示されます)

 

  • width=”200″ height=”200″
    画像URLの後に入力して、画像のサイズを調整します。
    数字の部分を変更する事で、大きさが変わります。
    入力しない場合は、元の画像の大きさで表示されます。

 

これで、大体の意味が分かれば大丈夫です。

完璧に覚える必要はありません^^

 

マルコは良く使うコードをメモ帳などに保存しておいて、

今回のように必要な所だけ変えてコピペしています(#^^#)

それで充分やって行けてますのでご安心を♪♪

 

終わりに

 

マルコは最初、htmlタグの知識はまるで無かったので、

【宇宙語か~~~~~~っ!!】というくらい訳が分かりませんでしたが、

 

慣れてくると何とかなるものです(´艸`*)

 

【ええっと、ここをいじったらここが変わるんだな~】

【画像を入れるにはここにURLを入れるんだな~~~】

 

くらいのものです。今でも(^_^;)

 

知識があるのに越したことはありませんが、

無くても少しずつ分かってくるので大丈夫です。

 

それに、ほとんどはテンプレートで綺麗に作り上げられてますから。

私たちが手を加えるのはほんの少しです。安心してください^^

ではでは、また(@^^)/~~~