すたらブログ

文系Webプログラマの備忘録

さくらのブログのサイドバーにバナーを設置する方法

目次


要望

こんな感じでバナーを設置したいです。


バナーの作成

まず、バナーを作成します。
ブログのテーマ「超シンプル(右サイドバー)」の場合は、幅240pxです。


バナー画像のアップロード

さくらのブログの管理ページを開きます。
http://blog.sakura.ne.jp/cms/home/

「ファイルマネージャ」をクリックします。

「ファイルを選択」して「アップロード」します。
その後、画像ファイルが追加されていることを確認してください。


設置

左のサイドバーから「デザイン」をクリックして、「コンテンツ」をクリックします。

左側の「コンテンツ」の中の「ブログ画像...」をドラッグ&ドロップでサイドバーの最上部に設置します。

設置した「ブログ画像」をクリックして編集します。
モーダルウィンドウ(小さなウィンドウ)が表示されます。
その中の「コンテンツHTML編集」をクリックします。

既存のソースコードをすべて削除します。

モーダルウィンドウの内部をスクロールして、先程アップロードした画像をクリックします。

モーダルウィンドウの上部へ戻って、新たにHTMLタグが挿入されていることを確認してください。

バナーのリンク先となる「href属性」を変更します。
今回は例としてヤフーのトップページに移動するよう変更します。

href属性を変更したら、モーダルウィンドウの一番下へスクロールして、「保存」をクリックします。

「編集を完了しました」というメッセージが表示されたら、「×」をクリックしてモーダルウィンドウを閉じます。

ブログ全体の設定を保存するために「保存」をクリックします。

「設定を変更しました」というメッセージが表示されたら、「ブログを見る」をクリックして表示を確認します。
これで完了です。