アメブロ 枠 (メッセージボード)を記事内に作る方法【ameblo デザイン カスタマイズ】


アメブロ デザインカスタマイズ メッセージボードを記事内に作る

アメブロ デザインカスタマイズ メッセージボードを記事内に作る


 

アメブロ(ameblo)でオリジナルのデザインを自作してみましょう。今回は、アメブロ 枠 (メッセージボード)を記事内に作る方法を紹介します。
 

ここでは、下記のように枠を作り、外部の参照先に飛ばせるように設定する方法をご紹介します。今回のやり方は、記事にHTML,CSSを直接書くためスマホも対応しています。
 

アメブロ 案内板
 

※2017年1月13日のアメブロ仕様での設定手順になります。
 

もくじ

以下は本記事のもくじです。

  1. 1. アメブロ 枠(メッセージボード) を記事内に作る方法
    1. 1-1. 完成イメージ
    2. 1-2. 設置手順
    3. 1-3. 補足
    4. 1-4. 動画による説明


 

それでは概要から入っていきます。
 

スポンサーリンク



 
 

1. アメブロ 枠(メッセージボード) を記事内に作る方法

 

1-1. 完成イメージ

 
今回は、記事の中に下記のような枠(メッセージボード)を表示する手順です。
 

アメブロ 記事のプレビュー画面

アメブロ 記事のプレビュー画面


 

それでは設定手順に入っていきます。
 
 

1-2. 設定手順

 
まず、下記のコードをコピーしてください。

 

 

つぎにアメブロのブログ投稿画面を開きます。
 

アメブロの編集タイプで「HTML」を選択して、先ほどコピーしたコードを記事に貼り付けます。★マークのあるところには任意の文章やURLを入れてください。
 

アメブロ 記事編集画面 HTML

アメブロ 記事編集画面 HTML


 

表示を確認するボタンを押下します。

アメブロ 記事編集画面 表示を確認する

アメブロ 記事編集画面 表示を確認する


 

下記のような枠ができていたらOKです。

アメブロ 記事のプレビュー画面

アメブロ 記事のプレビュー画面


 

通常の文章を付け加えていく際は、「通常表示」にしてからブログを書いていきます。

アメブロ 通常表示 編集画面

アメブロ 通常表示 編集画面


 
 

補足

#0000ffなどの色指定をよく見かけると思いますが、下記のカラーパレットが役に立ちますので参考にしてみてください。
 
https://material.io/guidelines/style/color.html
 

また下記のコードをコピーして、background:url(★★ここに画像のURLを入れる)のところに画像のURLを入れると、指定した画像を背景にすることもできます。

 
 

以下は背景を木目調にした例です。
アメブロ 案内板

 

 

1-4. 動画による説明

最後に動画で一連の手順を説明したいと思います。

 

このようにして、記事にオリジナルにカスタマイズすることができますので是非試してみてください。
 

今回の手順は、記事に直接書いているため、スマホで見たときにも同様に表示されます。
アメブロ スマートフォン プレビュー画面
 
 

今回は以上になります。最後までご覧いただきありがとうございました。
 
 

スポンサーリンク



&nbsp
 

参考)アメブロ カスタマイズ関連記事

 

アメブロ カスタマイズ関連の記事です。難易度は雰囲気で設定しました!!

 

アメブロやってます!読者登録歓迎です(^^)

 

 

こちらの記事もおすすめです


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!