【WordPress】サイドバーのサイズに画像を自動で合わせる

こんにちは、豊かな暮らしを目指すサラリーマン事業主のTAKASHIです。

ワードプレスのサイドバーにプロフィールなどの画像を設定の方法を説明します。

ちなみに、サイドバーとはこのサイトで言うと右側のプロフィールなどがある場所です。

では、いってみましょう。

 

今回は、右側にある特別プレゼント画像の設定方法で説明します。

まずは完成形をご覧ください。

サイドバー画像01

私の使用しているFMテンプレートでの説明になります。

基本的には、他のテンプレートでも同じだと思います。

 

使用する画像を選択

サイトのダッシュボードを開きます。

サイドバー画像03

メディアのライブラリを選択します。

サイドバー画像04

ライブラリが表示されたら、使用したい画像を選択します。

サイドバー画像05

今回使用する画像はこちらです。
画像の中で必要になるところは、URLです。

サイドバー画像06

URLを1度クリックし、CTRL+Aで選択、CTRL+Cでコピーをします。

サイドバー画像07

これでライブラリ画面は閉じて下さい。

 

ウィジェットの設定

サイドバーの設定は、ウィジェットと言う項目になります。

外観からウィジェットを選択します・

サイドバー画像08

使用したウィジェットをサイドバーにドラッグアンドドロップします。

今回必要なものは『テキスト』ウィジェットです。

サイドバー画像10

サイト管理者の上にテキストウィジェットを貼り付けました。

サイドバー画像11

貼り付けたテキストウィジェットをクリックすると、設定画面が開きます。

サイドバー画像11-1

タイトルを記入し、内容に先ほどコピーしたURLをCTRL+Vで貼り付けます。
終了したら保存を必ずクリックしてくださいね。

サイドバー画像11-2

どうなったか見てみましょう。

サイドバー画像12

実は、URLを貼り付けただけでは画像は表示されないのです。

ここでhtmlが必要になってくるのですが、そんなに難しくはないのでぜひこの機会に覚えて下さい。

画像を表示させるhtmlは、<img src=”〇〇〇.〇〇〇”>となります。

今回の場合は、下記のように記入しました。

<img src=”http://100man.top/wp-content/uploads/2016/01/kanban3.jpg”>

これでどうなった見てみましょう。

サイドバー画像13

おっと、サイドバーから飛び出してしまいました。

画像が大きかったようですね。

じゃあ、画像を小さく加工すれば・・・と思いますが、実際どのくらいのサイズにすれば分かりませんよね。

そこで、先ほどのhtmlに少し魔法をかけてみましょう(笑)

<img src=”http://100man.top/wp-content/uploads/2016/01/kanban3.jpg” style=”width: 100%;”>

これでどうなるのか見てみましょう。

サイドバー画像14

バッチリ収まりました。

文字とリンクを入れれば、現在のように完成です。

サイドバー画像17

長くなってしまったので、リンク等の入れ方は次回に説明します。

 

最後までお読みいただきありがとうございます。
またのご訪問をお待ちしております。

 

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

特別無料プレゼント

無料プレゼント
600ページ以上のPDFマニュアルと、214分の動画セミナーからなる無料マニュアルです。
この機会にぜひお受け取り下さい。

特別無料プレゼント

サイト管理者:TAKASHI

ようこそ、当ブログへ。
現在、サラリーマンをしながらアフィリエイトやeBay輸出などもやっているサラーリマン事業主です。

詳しいプロフィールはこちらから

人気ブログランキング


↑↑↑↑↑↑↑↑↑↑↑
たまに応援お願いします

Twitter でフォロー

全てのニーズに応えるWordPressテンプレート

当ブログで使用中のテンプレートです。



SEO対策の取られたテンプレートを使用することにより、ブログ立ち上げからわずか2週間でブログランキング1位獲得することができました。

スポンサードリンク

follow us in feedly

▲トップへ戻る