PC in the early afternoon編集部

サイドバーに写真や画像を載せよう

こんにちわわわわん∪･ω･∪
今日は『サイドバーに写真や画像を載せる』です。
よくプロフィール画像や写真を載せている方いますよね。
やり方分かれば、リンクを貼ることも出来ます☺︎

画像だけで分かるように書いているつもりです！

とっても簡単なのでマスターしましょう！

はじめに

※今回はHTMLを使用します。

HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の略です。

ホームページやブログのページを作る際にHTMLを使用すれば、画像やリンクを貼るボタンがない所でも画像を載せたりリンクを貼れたりするって感じでしょうか。
今回のサイドバーに画像を挿入する作業が、まさにそうです！
HTMLが一体何なのか詳しいことは私もまだまだ初心者で分かりません(^^;;
ウィキペディアなどで確認してみて下さい笑

 

掲載したい写真をワードプレスに移そう

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%91

①ダッシュボード
⇩
②メディア
⇩
③新規追加

①⇨②⇨③と選択していきます。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%92

新規追加を選択すると、メディアのアップロードというページに移ります。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%93

画面の通り、点線枠内の中に
”ここにファイルをドロップ”　を行うか
”ファイルを選択”　をクリックして写真画像が入っているファイルから選択を行います。
この写真は、”ファイルを選択”　を選んだ画像です。
”ファイルをドロップ”　しても同じ画面が出るかと思います。赤枠内は写真画像を読み込んでいる最中で100%まで行くと、

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%94

赤枠内の100%から処理中へと表示が変わります。
処理が終わるとそのマークが消えます。

%e6%8e%b2%e8%bc%89%e5%86%99%e7%9c%9f%ef%bc%96

メディアのライブラリを選択します。
すると、上画像のようにアップロードした写真が出てきます。
ホームページ上に掲載したい写真をクリックします。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%96

掲載したい写真をクリックすると、添付ファイルの詳細が出てきます。
写真のURLをコピーします。

サイドバーに写真のURLをはりつけよう！

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%97

①ダッシュボード
⇩
②外観
⇩
③ウィジェット

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%98

ウィジェットを選択するして、下の方へスクロールします。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%99

下の方へスクロールするとテキストという項目が出てきます。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%91%ef%bc%90

テキストを選択すると、テキストをどこに追加するかメニューが出て来るので
サイドバーにチェックをします。
チェックをしたらウィジェットを追加をクリックします。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%91%ef%bc%91

ウィジェットを追加を選択したら、右の方のサイドバーウィジェットを
下の方へスクロールします。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%91%ef%bc%92

すると新しくテキストを追加出来る項目が登場します。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%91%ef%bc%93

先ほどダッシュボード⇨メディア⇨ライブラリでコピーした画像のURLを

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%91%ef%bc%94

この新しく登場したテキストの貼り付けます。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%91%ef%bc%95

ここでHTMLが登場です。

画像を挿入するHTMLが

<img src=”画像ファイル URL“>

という言語になります。

正確には

<img src=””>

画像ファイルURLとありますが、挿入したい画像のURLになります。

なので、今回の上の画像（私のプロフ画像）の場合

<img src=”https://intheearlyafternoon.link/wp-content/uploads/2016/12/写真-2016-12-03-23-53-13-2.jpg”>

となります。

意味が伝わりづらかったらゴメンなさい(T ^ T)

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%91%ef%bc%96

HTMLの記入が終わったら、右下にある保存を押します。

%e5%86%99%e7%9c%9f%e6%8e%b2%e8%bc%89%ef%bc%91%ef%bc%97

ホームページを確認すると、写真が掲載されていると思います☺︎

どうでしょうか？

おまけ〜写真のサイズを変えよう〜

問題なく写真の掲載ができたら、写真の大きさを変えるのも簡単です♪

こちらもHTMLを使ってサイズを変えます。

 

サイズを変える際のHTMLが

<img src=”画像ファイルURL” width=”横幅” height=”高さ“>

となります。

先ほどの　<img src=””>　に新たに

width=”横幅” 　height=”高さ“

が加わりました。

この横幅と高さの部分に数字を入れてあげます。

ちなみに、私の写真は

width=”220″ 　height=”210″

となっています。

これを組み合わせると、

<img src=”https://intheearlyafternoon.link/wp-content/uploads/2016/12/写真-2016-12-03-23-53-13-2.jpg”width=”220″ height=”210″>

となります。

 

＜＞は、こっからここまでですよ

っていう意味だと私は解釈しています笑

今回で言えば、＜こっからここまでが写真です＞っていう感じ☺︎

あと私が指定しているのは写真の位置です。

 

位置は

<img src=”画像ファイルURL” align=”left/right/center“>

align=”left”  だど左寄り

align=”right”　だと右寄り

align=”center“　だと真ん中

となります。

私の場合は中央に指定しているので、

<img src=”https://intheearlyafternoon.link/wp-content/uploads/2016/12/写真-2016-12-03-23-53-13-2.jpg”align=”center”width=”220″ height=”210″>

となります。

 

以上おまけでした☺︎

 

いかがでしたでしょうか？
私は最初、 HTMLと聞いただけでもう無理だと思いましたが、
やってみると以外と出来ました☺︎
お付き合いいただきましてありがとうございました*\(^o^)/*
ご苦労様でしたm(_ _)m

スポンサーリンク

ABOUTこの記事をかいた人

in the early afternoon編集部

in the early afternoon編集部です。 みなさんに送っていただいた自分のスキ！が見つかるような情報をお送りしています。

コメントを残す

RECOMMENDこちらの記事も人気です。