こんにちは。 あなたのアメブロを徹底的にサポートさせていただく、アメブロサポーターの三浦です。




毎週日曜日は、かんたんにアメブロをイメージチェンジすることができる、「かんたんアメブロカスタマイズ」をお届けしています。


この「かんたんアメブロカスタマイズ」は、ヘッダー作成やカスタマイズを自分でやってみたい方、本格的なデザインでなくても良いので、まずはブログをオリジナルなものに変えてみたい、という方に向けて書かせてもらっています。



過去記事も参照されてみてください。



第1回  ブログのヘッダーに画像を設定してみましょう


第2回  ブログの背景に画像を設定してみましょう


第3回  ブログのヘッダーのサイズを変更してみましょう


第4回  ブログ全体の文字フォント(字体)を変えてみましょう


第5回  ブログタイトルのカラー・大きさを変えてみましょう


第6回  お知らせがわかりやすい!目立つメッセージボードを作ってみましょう



第7回目の今日は、記事本文を罫線で囲む方法をご紹介します。



通常、アメブロ記事の本文は、薄いグレーの直線の枠で囲まれています。




今回は、この枠を太めの罫線で囲むように変えてみましょう。



マイページ → 管理トップ → デザインの変更の順にクリックして、(CSS編集デザイン)を選択し、CSSの編集をクリックします。


(ブログデザインのCSSの編集)画面を表示し、(現在使用中のブログデザインCSS)内を下方向にスクロールして、(3-6)メッセージボードを表示させます。↓




border:の後の文字列、1px solid #dddddd; を消します。↓



消した部分に、下記の文字列をコピー&ペーストで貼り付けます。


4px dashed #0000ff;



ちなみに4pxの数字は線の太さ、dashedは破線のこと、#0000ffは色番号で青色の番号です。



破線を細くしたい場合は数字を小さく、色を変えたい場合は、こちら のサイトから色番号を選んでみてください。



最後に忘れずに保存します。






ブログを表示させると、記事本文の周りが青い罫線で囲まれていることが確認できます。↓




前と同じ画面のまま変わっていない場合は、F5キーを押して更新してみてください。



小さい画面だとわかりづらいので、実際のサイト をご覧ください。




また、記事本文内に囲い枠を入れたい場合は、パソコン先生の川上雄大さんの、こちらの記事 を参照にされると良いと思います。



さらに上級に・・・ もっとバリエーションに富んだ罫線を作りたい方は、尊敬する大先輩、アメブロ集客コンサルタント、住福純さんの、こちらの記事 を参照されてみてください。




これからも、毎週日曜日毎に「かんたんアメブロカスタマイズ」の方法を記事にしていきますので、ぜひ参考にしてみてください。



「かんたんアメブロカスタマイズ」記事に関して、わからないこと、質問等がありましたら、どうぞご遠慮なく、メッセージからご連絡くださいね。



ブログを本格的にカスタマイズしたい事業者の方は、こちらなどいかがでしょうか?


あなたのブログの魅力を最大限に・・・ オリジナルヘッダー作成サービス



今日も最後までお読みいただきまして、ありがとうございます。