Webサイト、ブログにトータルコーディネイト
を心がけ他のサイトにはないようなサイトを作りませんか?

皆さまのお手伝いができるよう
サイトを更新していきたいと思います。
ご自分でのカスタマイズ、制作等に不安がありましたら、
制作依頼も承っています。ぜひお問い合わせください。

アメブロカスタマイズ 画像のボタンを設置する

ameblo

まず、ボタンとして使用したい画像をアメブロへアップロードします。


新規の「ブログ記事を書く」の右側の画像一覧へドロップしてアップロードします。

 

アップロードできたら、画像一覧より記事へドロップし、ボタンを記事に表示させます。

今の時点では通常表示となっていますが、記事の下の部分にある表示切り替えのタグより、「HTML表示」へと切り替えます。

 

「HTML表示」にするとこのような表示となります。

ここにボタンを押したら、どこへリンクさせたいのか?その行き先のURLを記述します。

丸を付けた部分がその記述する部分となります。すでにリンク先が入っていますので、その部分を消して変更します。

<p><a href=”ここにリンク先URLを記述“><img…..

ここで注意したいポイントは””を消してはいけません。

このリンク先を変更さえすれば、ボタンは自分のリンクさせたいところへ移動できるボタンになります。

戻るには、先ほどの下にあったタブで「通常表示」を選べば、元の画像に戻ります。

ボタンのサイズを変更したい

ここからは更にボタンのサイズ変更をしたい時に設定します。

先ほどの設定だけだと、今回のボタンは

このサイズです。

私は画像を作る時には、最低でも2倍サイズで作成します。

高解像度のディスプレイでも綺麗に表示できるようです。

このままだと、思っていたより大きい!と思ったらサイズを変更しましょう。

再度、「HTML表示」へと切り替えます。

先ほどリンク先を変更した部分の近くに

height=”150″という表記と、最後辺りにwidth=”420″という表記があります。

heghtは高さの指定

widthは幅の指定

となります。ここを変更します。

半分ぐらいのサイズのボタンにしたいと思ったら、両方の数値を半分にします。

このようにサイズを半分にした数値を入力し、再度「通常表示」タブへ通常表示へと切り替えます。

すると半分サイズに変更できました。

今回は半分サイズにしましたが、3分の2サイズとか、いろいろとサイズ変更は自由にできますよ〜。ご自分のお好きなサイズでお楽しみくださいね。

 

以上、アメブロで画像のボタンの設置に方法でした。

参考になれば嬉しいです。

コメント

トップへ戻る