アメブロのデザインをカスタマイズしたい方向けにアメブロカスタマイズ関連の記事を書いています。

 

 

※2016年3月から利用できるようになった新しいタイプのCSS編集用デザインを対象としています。

 

 

記事の実績

現在(2017年1月14日時点)、「アメブロ デザイン」「アメブロ カスタマイズ」「アメブロ ヘッダー」「アメブロ メニューバー」「アメブロ twitter」などのキーワードでGoogleで上位に入っている実績があります。

 

 

 

 

これから随時追加更新していきますのでお楽しみに!
 

 

もくじ 記事一覧

 

 


 

各記事紹介(抜粋)

 

1. アメブロ ヘッダー の作り方 

 

アメブロ ヘッダー の作り方を紹介した記事です。デザインカスタマイズの一番基本となります。

 

 

下記のような形で、オリジナルのヘッダー画像の追加して、背景に合わせてブログタイトル・説明文、およびタイトル位置の調整する方法を説明しています。


 

 

カスタマイズ用CSSの適用とヘッダー作成(ヘッダー画像の追加、ブログタイトル・説明文の調整、タイトル位置の調整)をご紹介しています。

 

 

詳細の手順は下記をご参照ください。

 

 


【アメブロ・ameblo】 デザインカスタマイズ メニューバーの作成
アメブロ メニューバー作成

 

 


 

 

2. アメブロ メニューバーの作り方 1

アメブロ メニューバー の作り方を紹介する記事です。

 

 

下記のように一番上に透明なメニューバーをページ上部で固定して、ページを下にスクロールしてもついてくるようにしています。少しおしゃれなタイプのメニューバーの作り方です。

 

 

 

詳細の手順は下記をご参照ください。

 


【アメブロ・ameblo】 デザインカスタマイズ オリジナルヘッダー作成
アメブロ オリジナルヘッダー作成

 

 

 

 


 

 

3. アメブロ メニューバーの作り方 2

同じく、アメブロ メニューバー の作り方を紹介する記事です。

 

 

前回とは違って、下記のようにヘッダー画像の下にメニューバーを表示する手順です。

 

影もつけて少し浮き出るようにしています。

 

 

5の「アメブロ ヘッダー 下部のメニューバーを消す方法」とセットで設定すると良いかと思います。

 

 

詳細の手順は下記をご参照ください。

 


【アメブロ・ameblo】 デザインカスタマイズ オリジナルヘッダー作成
アメブロ オリジナルヘッダー作成

 

 


 

 

4. アメブロ 背景画像の設定方法&影を付ける方法【ameblo デザイン カスタマイズ】

 

 

 

アメブロ 背景 画像を設定する方法を紹介した記事です。

 

 

アメブロのトップページの背景に画像(下記の例では木目調の画像)を設定する方法を紹介します。また、メインコンテンツとサイドバーの横の背景に影をつけて立体的に表示するようにします。

 

 

 

詳細の手順は下記をご参照ください。



アメブロ 背景画像の設定方法&影を付ける方法【ameblo デザイン カスタマイズ】

 

 


 

 

5. アメブロ ヘッダー 下部のメニューバーを消す方法【ameblo デザインカスタマイズ】

アメブロ ヘッダー 下部の メニューバー を 消す方法を紹介した記事です。

 

 

下記のように、アメブロトップページのヘッダー下部にある、標準のメニューバーを消す(非表示にする)方法をご紹介します。

 

3のメニューバーの作り方とセットで参照すると良いかと思います。

 

 

 

 

詳細の手順は下記をご参照ください。

 

 

アメブロ ヘッダー 下部のメニューバーを消す方法【ameblo デザインカスタマイズ】

 

 


 

6. アメブロに twitterタイムライン を表示する【ameblo ツイッター 埋め込み】

アメブロにTwitter のタイムラインを表示する手順を紹介した記事です。

 

 

twitterのタイムラインをアメブロに表示することで、アメブロユーザーからのtwitterフォローや集客アップを図れる可能性があります。

 

 
アメブロとtwitterアカウントがあれば簡単に設置できます。

 

 

 

詳細の手順は下記をご参照ください。

 

 

アメブロに twitterタイムライン を表示する【ameblo ツイッター 埋め込み】

 

 


 

 

7. アメブロ Facebook 連携 Facebookページを追加する【ameblo フェイスブック 埋め込み】

 

 

アメブロとFacebook ページの連携に関する記事です。
 

 

お使いのFacebookページをアメブロのトップページに追加することで、アメブロからFacebookページに流入、いいねをもらえる可能性があります。
 

 

アメブロとFacebookページがあれば簡単に設置できますので、下記のようにアメブロトップページにFacebookページを設定する手順を記載しています。

 

 

 

 

詳細の手順は下記をご参照ください。

 

 

アメブロ Facebook 連携 Facebookページを追加する【ameblo フェイスブック 埋め込み】

 

 


 

 

8. アメブロ プロフィール 画面のカスタマイズ 設定方法

この記事では、アメブロ プロフィール 画面をカスタマイズする方法を紹介しています。
 

アメブロのトップページをオリジナルにカスタマイズされている方は多いと思いますが、プロフィール画面をカスタマイズしている方は少ないのではないでしょうか。
 

せっかく、トップページが綺麗に装飾されていても、プロフィールに移動した時に、デフォルトのままだと印象に残りにくいのではないかと思います。
 

 

■カスタマイズ後のプロフィールページ

 

詳細は下記をご参照ください。

 

アメブロ プロフィール 画面のカスタマイズ 設定方法 【ameblo デザイン カスタマイズ 】

 

 

 


 

 

9. アメブロ プロフィール 画面のカスタマイズ 設定方法

この記事では、アメブロ 枠 (メッセージボード)を記事内に作る方法を紹介しています。

 

 

記事の中に下記のように枠(案内板・メッセージボード)を作り、外部の参照先に飛ばせるように設定する方法をご紹介します。記事にHTML,CSSを直接書くためスマホも対応しています。

 

詳細は下記をご参照ください。

 

https://keimatsumoto.com/ameblo-design-customize-border-message-board-post/

 

関連リンク


facebook
facebook - keimatsumoto


 

読者登録はこちら


本ブログを一読されてご興味のわいた方は読者登録いただけると幸いです!
 

↓↓↓ぽちっと押下↓↓↓

 

AD