解決済

サイドバーに画像でリンクを貼りたいです。

教えて下さい!!

サイドバーにリンクを貼った際に、そのリンク先の画像の上にカーソルが行った時にクリックしたら、そのページへジャンプ出来る様にするには、どうしたらよいのでしょうか?

そして、その画像をよくある横長のではなく、縦で置きたいのですが、その方法も教えて頂けるととても嬉しいです!

既出でありそうだったので探してみたのですが、みつからなかったので質問させて頂きました。

初心者なので、分かりやすく教えて頂けると嬉しいです。宜しくお願いします!!

2006-05-24 04:58の質問
サイドバー  画像  リンク  
リンク
リンク の情報はこちらです
ninkihikaku.com/
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
Ads By Google

回答(3)

4.

2006-05-24 09:50:59ベスト
あんまり大きい画像を使うとサイドバーが落ちますので、ご注意下さい。
(参考:http://wiki.livedoor.jp/everydaydesign/d/%A5%B5%A5...

例えば幅360px、高さ480pxの画像をアップロードされたとします。たいていのブログでは確実にサイドバーが落ちます。

<img src="http://image.blog.livedoor.jp/xxxxxxxx/imgs/7/e/xxxxxxx.gif" width="360" height="480" border="0" alt="画像です" hspace="5" class="pict" align="left" />


この場合、以下のようにして、

width="360" height="480"

 この比率を保ったまま小さい数値を指定していただけますと、画像が縮小されます。このように調節し貼って下さい。

width="120" height="160"


要らない命令文を除いて次のようになります。

<img src="http://image.blog.livedoor.jp/xxxxxxxx/imgs/7/e/xxxxxxx.gif" width="120" height="160" border="0">


これにリンクをつけると、

<a href="リンク先のアドレス"><img src="http://image.blog.livedoor.jp/xxxxxxxx/imgs/7/e/xxxxxxx.gif" width="120" height="160" border="0"></a>


別ウインドウで開く場合は、target="_blank" を入れます。


<a href="リンク先のアドレス" target="_blank"><img src="http://image.blog.livedoor.jp/xxxxxxxx/imgs/7/e/xxxxxxx.gif" width="120" height="160" border="0"></a>

大変分かりやすい説明ありがとうございました!!
また今後とも宜しくお願いします!!

1.

2006-05-24 06:41:05
まずhttp://img.simpleapi.net/でサムネイルを作成し
その後プラグインの設定 / 新規追加 の上級者向けプラグインの中から「フリーエリア」を選び作ったサムネイルを乗せるとサイドの好きな部分に設定できます。

複数縦におく場合は「フリーエリア」で改行してスペースを空ければ対応できます。
一つの画像を縦長にするには、作成したサムネイルの縦横の値を変えてやる必要があるようです。

3.

2006-05-24 09:45:13
まろっしゃーーーーーさん。ご質問ありがとうございます。

↓こちらを参考にまずは画像をアップロードされて下さい。
http://blog.livedoor.jp/blog_matome/archives/50013...

縦長の画像をリンクさせたいのであれば、もともと縦長の画像をアップロードする必要があります。画像加工ソフトなどでおつくり下さい。

投稿フォームを「シンプルエディタ」にして、ブログの本文を入力する欄の上に「IMG」ボタンがありますが、これを押すと以下のような文字列が出ます。

<img src="http://image.blog.livedoor.jp/xxxxxxxx/imgs/7/e/xxxxxxx.gif" width="135" height="104" border="0" alt="画像です" hspace="5" class="pict" align="left" />

この文字列を「imgタグ」と言って、画像を表示させる「HTMLタグ」という命令文です。

ただこの状態だと、文章を回り込ませたりする余計な命令文が入っていてそのままだとブログの表示が崩れる場合があります。

<img src="http://image.blog.livedoor.jp/xxxxxxxx/imgs/7/e/xxxxxxx.gif" width="135" height="104" border="0">
↑こんな感じにざっくり短くされて下さい。

<a href="リンク先のアドレス">リンクさせるテキストや画像</a>

こういう風にすればリンクになりますので、

<a href="リンク先のアドレス"><img src="http://image.blog.livedoor.jp/xxxxxxxx/imgs/7/e/xxxxxxx.gif" width="135" height="104" border="0"></a>

とすれば、アップロードした画像がリンクになります。

中央寄せしたい場合は、この文字列を<div align="center">と</div>で囲います。


<div align="center"><a href="リンク先のアドレス"><img src="http://image.blog.livedoor.jp/xxxxxxxx/imgs/7/e/xxxxxxx.gif" width="135" height="104" border="0"></a></div>

上の手順で作ったimgタグは、適切な位置に貼ればそのまま画像として表示されます。
imgタグ全てをコピーしてワードパットになどにペーストしておきましょう。

これをプラグインのフリーエリアに貼ります。
Ads By Google

コメント(1)

2006-05-25 05:28:04

batmanさん、zeroさんありがとうございます!!
>>4zeroさん、xxxxxxというところはxxxxxxxxのままで良いのでしょうか?

トラックバック

トラックバックURL: