サイドカラムにリンクバナーを貼る方法 | アメブロ カスタマイズ CSSメモ帳

サイドカラムにリンクバナーを貼る方法





サイドカラムにリンクバナーを貼る




ブログのサイドに、お好みのリンクバーを貼る方法です。



リンクバナーとは、自分のブログから お薦めの 他のブログやサイトへ



クリックひとつで、飛ばす事が出来ます。



 初心者向け アメピグ情報局  赤枠 □ がリンクバナーです。




アメブロ カスタマイズ CSSメモ帳





リンクバナーを貼るためには、HTMLのタグを作成します。




・ HTMLを作成しましょう



ブログ記事を書く欄で、HTMLの作成をします。



 初心者向け アメピグ情報局  このページです。




アメブロ カスタマイズ CSSメモ帳




 貼りたい画像を 読み込みましょう。



 初心者向け アメピグ情報局  赤枠 □ の 画像をクリックして下さい。




アメブロ カスタマイズ CSSメモ帳



初心者向け アメピグ情報局 画像を読み込みましょう。



  バナーのサイズは、横 162pxがベストです。





アメブロ カスタマイズ CSSメモ帳



赤枠 □ で 画像を開きましょう。


緑枠 □ で アップロード


青枠 □ で 読み込み完了です。





記事欄に、画像を貼りつけましょう。





アメブロ カスタマイズ CSSメモ帳



  
  アメブロ カスタマイズ CSSメモ帳  赤枠 □ を クリックすると



  初心者向け アメピグ情報局  このようになります。



アメブロ カスタマイズ CSSメモ帳




・ バナーにリンク先を貼ります




読み込んだ画像を右クリックしてから 赤枠 □ リンクを開きましょう。


アメブロ カスタマイズ CSSメモ帳




アメブロ カスタマイズ CSSメモ帳 リンクの追加と言う小窓が開きます。



  緑枠 □ に飛ばす先の URL アドレスを入れ



  青枠 □ のリンクをクリックします。



これで、HTMLのタグが完成です。




・ HTMLのタグの確認をします 




アメブロ カスタマイズ CSSメモ帳



  アメブロ カスタマイズ CSSメモ帳   赤枠 □ の HTMLタグを表示 を クリックして下さい。



  初心者向け アメピグ情報局   これが、 HTML のタグです。



アメブロ カスタマイズ CSSメモ帳




・ サイドカラムに貼りましょう



画像は、フリースペース と フリーブラグイン に貼れますが ここでは、フリースペースに入れます。



ここで、もう一つウインドーを開きましょう。



  初心者向け アメピグ情報局 こんな感じで


アメブロ カスタマイズ CSSメモ帳




新しく開いた ウインドーは、サイドバーの設定 → フリースペースの編集を開きます。





アメブロ カスタマイズ CSSメモ帳




  アメブロ カスタマイズ CSSメモ帳  赤枠 □ の フリースペース をクリックして下さい。



  

  初心者向け アメピグ情報局  このページが開きます。


アメブロ カスタマイズ CSSメモ帳


ここに、HTMLのタグを入れます。



 初心者向け アメピグ情報局  HTML の コピーします。



  タグの初めから 終わりまで 左クリックでコピーします。




アメブロ カスタマイズ CSSメモ帳



  アメブロ カスタマイズ CSSメモ帳 このように青くなったら



  初心者向け アメピグ情報局  右クリックをすると 小窓が開きます。




アメブロ カスタマイズ CSSメモ帳


  コピーをクリックします。



  初心者向け アメピグ情報局  ここに、貼り付けます。





アメブロ カスタマイズ CSSメモ帳


  初心者向け アメピグ情報局  貼りつけるとこうなります。




アメブロ カスタマイズ CSSメモ帳




  アメブロ カスタマイズ CSSメモ帳 保存を押したら 完了です。



ここでは、全体のプレビューが出来ないので、ブログを開いて確認して下さい。




長々、ありがとうございました。





初心者向け アメピグ情報局



                  ダウン ランキング参加中 ニコニコ


                お役に立てましたら ポチッとお願い致します。


                       にほんブログ村 ブログブログ ブログノウハウへ


                            アップ

  

                 みなさまの、ワンクリックが 励みになります。