Amebloのデザインをカスタマイズする-Site01｜Q&A85

　

Ameblo（アメーバブログ）のデザインのカスタマイズ方法

Ameblo（アメーバブログ）のデザインのカスタマイズ方法は、下記の３種類あります。

1. トップ画像（ヘッダー画像）のみ変更する簡易カスタマイズ
2. css編集をして、メニューバーを設置したり、ブログの背景画像設定、サイドバーに装飾した枠欄を設けるなどの本格的カスタマイズ
3. アメーバキング２という有料ツールを購入して、デザインを一新
   
   

トップ画像（ヘッダー画像）のみ変更する簡易カスタマイズ

1. ブログ管理画面の左メニューにある「デザイン」をクリック
2. サムネイルリストの下段にあるリストの中の「カスタム可能」をクリック
   
   　
3. 気に入ったデザインを選択して「適用する」をクリック
4. デザイン編集画面で、ヘッダー画像を変更する
   １）ヘッダー画像にしたい画像をアップロード
   ２）アップロードした画像のURLをコピーして、所定の位置に張り付ける

※ヘッダー画像以外の部分の変更はできません。

css編集可能なデザインを選択して、css編集などコードを入力して変更する方法

1. ブログ管理画面の左メニューにある「デザイン」をクリック
2. サムネイルリストの下段にあるリストの中の「カスタム可能」をクリック
   
   　　　
3. css編集可能なデザインの３種類のうち下の左側のデザインを選択、
   ２カラムにしてから、「適用する」をクリック
   
   
4. 編集画面で、ヘッダー画像、ブログ背景画像（必要なら）をアップロード、CSSを編集、「設定・管理」⇒「フリースペースの編集」をして、ヘッダーメニューや、サイドバーの装飾枠を作成、必要は情報を入力していく。

cssカスタマイズ後の参照サイト（未完成）

ameblo.jp

愛知県岡崎市の「こころ＆カラダほっこりCafe」ブログ

https://ameblo.jp/shortshot

のほほんさんのブログです。最近の記事は「全く別の種類のカードが同じ方向を示してる今朝のカードたち（画像あり）」です。

※メニューバーの色は、好きな色に変更できます。
※ヘッダー画像、ブログ背景も好きなものに変更できます。

注目を引くための囲み線＠アメブロ・カスタマイズ

Webサイト・紹介動画等、一緒に創りあげていく［Sugi-Studio］

2020.07.29

注目を引くための囲み枠線＠アメブロ・カスタマイズ｜Q&A102

https://sugi-studio.sugiha-style.com/注目を引くための囲み枠線＠アメブロ・カスタマ

7/28に開催した「Web・PC関連相談会」でのご相談内容の回答です。アメブロの記事投稿画面の最後に注目を引くための囲み線の作り方アメブロの記事投稿画面などを「HTML表示」にし、そこに、CSSコードで囲み線の線種と色、そしてボタン仕様に背景色の変更などが出来ます。囲み枠・例１のソースコード<div style="padding:5px; border: 2px dotted #ff0000; background:#ffefef; border-radius:10px; width:300px;">枠内の四方の空白幅：5px、<br>線の太さ：2px・線種：ドット・線の色：赤色、<br>背景色薄い...