CANPAN ブログ検索
Loading
  • もっと見る

2012年05月25日

ブログのサイトバーにリンク付き画像を入れる

サイドバーにリンク画像を使って、メニューを配置した例


下のブログの枠内部分のメニューはリンク付き画像

3_1.jpg


ブログのサイトバーにリンク画像を入れる方法


@画像を準備
 横160ピクセルまで
 ※デザイン一覧の「ライトグレー」を利用している場合は横200ピクセルまで

A「スキンサイドバー > コンテンツ > エキスパート」の画面を開く
baner1.jpg

Bコンテンツで「自由形式」を選び「コンテンツの追加」ボタンを押す
baner2.jpg

Cバナーの内容を入力する
 1.タイトルを入力する
 2.@で準備したバナー用のファイルをアップロードする
  ※サムネイルで表示=チェックを外す
  ※別ウィンドウで原寸大表示=チェックを外す
  ※配置指定=中央寄せ

 3.自由入力欄に画像を追加する
baner3_1.jpg

D画像にリンクを貼る
 1.画像部分を選択する
baner4.jpg

 2.「リンクを挿入」ボタンを押し、リンクしたいURLを入力する
baner5.jpg

 ※バナーをクリックしたときに別ウィンドウで画面を表示したい場合を除いて、選択部分を削除する。
 3.「保存する」ボタンをクリックする
baner6.jpg

Eサイドバーにバナーを配置する
 1.「スキンサイドバー > コンテンツ > ノーマル」画面を開く
baner7_1.jpg

 2.ごみ箱にDで作成したバナーがあるので、選択(※カーソルが十字マークの状態)してサイドバーへドラッグする
baner7.jpg

 3.「設定を反映」ボタンを押す
baner8_1.jpg


<リンク画像配置前>

baner10.jpg


<リンク画像配置後>

baner11.jpg



どんな時に使うの?
@イベントや告知など目立たせたい記事がある時

Aカテゴリーの代わりにバナーをメニューにする
 ブログがワンランクアップしたホームページに見えますよ!
 例)こどもステーション山口
  画面左上の方のメニューは、サイドバーにバナーを貼る方法で作っています。


この記事へのコメント
コメントを書く
この記事へのトラックバックURL
トラックバックの受付は終了しました
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック