サイドバーに画像を表示させてみよう！

自分用のメモφ(．． ) です

ヤプサポ！センターhttp://yaplog.jp/support/

内の

2006年07月05日(水)の記事

サイドバーに画像を表示させてみよう！

http://yaplog.jp/support/archive/7

をそのまま転載しています



*:..｡o○☆ﾟ･:,｡*:..｡o○☆*:..｡o○☆ﾟ･:,｡*:..｡o○☆*:..｡o○☆ﾟ･:,｡*

ヤプログ！をご利用いただきましてありがとうございます。

ヤプサポ！です。

今回はこちらの画像をサイドバーに表示させてみたいと思います。





まず、サイドバーに表示させたい画像を、ご自分のブログの記事にアップロードします。



画像アップロードの詳しい方法はコチラをご覧下さい。

サイドバーに画像を表示させるには表示させたい画像がWEB上にアップロードされている必要があります。

記事をアップしたら画像のURLをご自分のブログで確認します。



画像のURLの確認方法

Windowsをご使用の場合

使用したい画像の上で右クリックし、"プロパティ"を選択します。

Macをご使用の場合

Controlキーを押したまま使用したい画像の上でクリックし、"画像を新規ウインドウで開く"を選択します。





ヤプログ！にアップされている画像のURLは必ず以下の形となっています。

http://yaplog.jp/お客様のヤプログ！ID/img/お客様のブログ記事番号/画像ファイル名（半角英数）



2006/9/4以降にアップロードした画像につきましては以下のようになりますのでご注意下さい

http://yaplog.jp/cv/お客様のヤプログ！ID/img/お客様のブログ記事番号/画像ファイル名（半角英数）

今回のヤプサポ！センターでアップした画像のURLは

http://www.yaplog.jp//support/img/7/P1000065.jpg

画像の大きさは

幅150×高さ200です。

画像URLを確認すると画像の幅と高さの情報も「150×200のように表示されますので、画像のURL、画像の大きさを確認し、メモ帳などに控えておきます。



次にサイドバー機能追加・編集ページへ移動します。

新規機能追加ボタンをクリックすると新規機能を追加することができます。

機能名はご自分でお好みの分かりやすいものを入力してください



次に画像を表示させるHTMLソースを作ります。

画像を表示させる基本のHTMLソースはこちらです。



img src="■画像のURL■" width="■画像の幅■" height="■画像の高さ■"





■画像のURL■、■画像の幅■、■画像の高さ■この部分に先ほどメモしておいたサイドバーに表示させたい画像のURL、画像の大きさを当てはめます。

img src="http://www.yaplog.jp/support/img/7/P1000065.jpg" width="150" height="200"

上記をHTMLを<>（半角）で閉じてください。



出来上がったHTMLソースをHTML欄へ記入し保存します。

保存しますと新機能として追加されますので機能選択･並び替えで使用する機能でブログに表示させたい場所へ設置してください。



今回ヤプサポ！センターでは左サイドバーRの一番下に表示させてみました



サイドバーに画像を表示させる方法は色々と応用が可能です。

ぜひトライしてみてください



今後ともヤプログ！をよろしくお願いいたします。