アメブロカスタマイズでサイドバーの見た目を変更する5つの方法



アメブロのCSSカスタマイズはサイドバーの文字色や背景色なども簡単にオリジナルに変える事ができます。

サイドバーはどの記事を読んでも必ず表示される重要な枠。ここをしっかりとカスタマイズして目立つようにすればクリックされる確率も上がります。

今回はサイドバーの以下の項目のカスタマイズ方法を紹介していくので参考にしてください。

スポンサーリンク

 

サイドバーに画像や写真を設置する方法

サイドバーに画像を設置するには画像設置用のhtmlタグをフリースペースに貼り付ける必要があります。

htmlタグがわからない場合は以下の方法でコピーする事ができます。

1:「ブログを書く」画面を開く

サイドバーに画像や写真を設置する方法

 

2:「画像アップロード」ボタンをクリック

サイドバーに画像や写真を設置する方法

 

3:サイドバーに貼り付けたい画像を選択しアップ

サイドバーに画像や写真を設置する方法

 

4:アップした画像をクリック

サイドバーに画像や写真を設置する方法

 

5:画像をクリックして画像サイズの横幅を300pxに変更、貼り付け位置は「中央寄せ」をクリック

サイドバーに画像や写真を設置する方法

 

6:「HTML表示」タブをクリック

サイドバーに画像や写真を設置する方法

 

7:表示されたhtmlをコピー

サイドバーに画像や写真を設置する方法

 

8:「フリースペース編集」を開く

サイドバーに画像や写真を設置する方法

 

9:フリースペースにコピーしたhtmlを貼り付け

サイドバーに画像や写真を設置する方法

 

10:「保存」をクリック

サイドバーに画像や写真を設置する方法

 

 

 

これでサイドバーに画像や写真を設置する事ができます。

 

 

サイドバーの背景色を変更する方法

サイドバーの背景色は以下のコードをCSS編集で一番下に貼り付けてください。

右サイドバーの背景色のみ変更する(新CSS編集デザイン)

.skin-blogSubA {
background-color: ■カラーコード■;
}

 

左サイドバーの背景色のみ変更する(新CSS編集デザイン)

.skin-blogSubB {
background-color: ■カラーコード■;
}

 

サイドバーに配置している項目の背景色を変更する(新CSS編集デザイン)

[amb-component=”widgetBody”] {
background-color: ■カラーコード■;
}

 

左右のサイドバー背景色を変更する(旧CSS編集デザイン)

.skinSubArea {
background-color: ■カラーコード■;
}

 

右サイドバーの背景色のみ変更する(旧CSS編集デザイン)

.skinSubA {
background-color: ■カラーコード■;
}

 

左サイドバーの背景色のみ変更する(旧CSS編集デザイン)

.skinSubB {
background-color: ■カラーコード■;
}

 

サイドバーに配置している項目の背景色を変更する(旧CSS編集デザイン)

.skinMenuBody {
background: ■カラーコード■;
}

 

 

サイドバーの枠線の色を変更する方法

サイドバーの枠線の色を変更するには以下のコードをCSS編集で一番下に貼り付けてください。

サイドバーに配置している項目の背景色を変更する(新CSS編集デザイン)

[amb-component=”widgetBody”] {
border: 1px solid ■カラーコード■;
}

 

サイドバーに配置している項目の背景色を変更する(旧CSS編集デザイン)

.skinMenuBody {
border: 1px solid ■カラーコード■;
}

 

 

サイドバーの見出しタイトルの色を変更する方法

サイドバーの見出しタイトルの色を変更するには以下のコードをCSS編集で一番下に貼り付けてください。

サイドバーに配置している項目の見出しタイトルの色を変更する(新CSS編集デザイン)

.skin-widgetTitle {
color: ■カラーコード■;
}

 

サイドバーに配置している項目の見出しタイトルの色を変更する(旧CSS編集デザイン)

.skinMenuTitle {
color: ■カラーコード■;
}

 

 

サイドバーにリンクを設定する方法

サイドバーにリンクを設定するにはフリースペースにリンクを設定してフリースペースをサイドバーに配置するとリンクを表示できます。

フリースペースにリンクを設定するには以下の方法で行ってください。

1:「フリースペース編集」をクリック

サイドバーにリンクを設定する方法

 

2:移動先のURLを貼り付け

サイドバーにリンクを設定する方法

 

3:「URL」ボタンをクリック

サイドバーにリンクを設定する方法

 

4:作られたコードの「</a>」の前にリンクにしたいテキストを入力する

サイドバーにリンクを設定する方法

 

5:「保存」ボタンを押して保存する

サイドバーにリンクを設定する方法

 

 

これでフリースペースにリンクを設定する事ができます。

上記でリンクの設定は完了しますが、フリースペース自体をサイドバーに配置しないと設定したリンクは表示されないので注意しましょう。

フリースペースは配置設定でサイドバーに配置しておきましょう。

 

今回はサイドバーのカスタマイズを紹介しました。

全体の背景をカスタマイズで変更したい時などはこちらを参考にしてください。

 


スポンサーリンク