こんにちは。 あなたのアメブロを徹底的にサポートさせていただく、アメブロサポーターの三浦です。
毎週日曜日は、かんたんにアメブロをイメージチェンジすることができる、「かんたんアメブロカスタマイズ」をお届けしています。
この「かんたんアメブロカスタマイズ」は、ヘッダー作成やカスタマイズを自分でやってみたい方、本格的なデザインでなくても良いので、まずはブログをオリジナルなものに変えてみたい、という方に向けて書かせてもらっています。
過去記事も参照されてみてください。
第6回 お知らせがわかりやすい!目立つメッセージボードを作ってみましょう
第7回目の今日は、記事本文を罫線で囲む方法をご紹介します。
通常、アメブロ記事の本文は、薄いグレーの直線の枠で囲まれています。
今回は、この枠を太めの罫線で囲むように変えてみましょう。
マイページ → 管理トップ → デザインの変更の順にクリックして、(CSS編集デザイン)を選択し、CSSの編集をクリックします。
(ブログデザインのCSSの編集)画面を表示し、(現在使用中のブログデザインCSS)内を下方向にスクロールして、(3-6)メッセージボードを表示させます。↓
border:の後の文字列、1px solid #dddddd; を消します。↓
消した部分に、下記の文字列をコピー&ペーストで貼り付けます。
4px dashed #0000ff;
ちなみに4pxの数字は線の太さ、dashedは破線のこと、#0000ffは色番号で青色の番号です。
破線を細くしたい場合は数字を小さく、色を変えたい場合は、こちら のサイトから色番号を選んでみてください。
最後に忘れずに保存します。
ブログを表示させると、記事本文の周りが青い罫線で囲まれていることが確認できます。↓
前と同じ画面のまま変わっていない場合は、F5キーを押して更新してみてください。
小さい画面だとわかりづらいので、実際のサイト をご覧ください。
また、記事本文内に囲い枠を入れたい場合は、パソコン先生の川上雄大さんの、こちらの記事 を参照にされると良いと思います。
さらに上級に・・・ もっとバリエーションに富んだ罫線を作りたい方は、尊敬する大先輩、アメブロ集客コンサルタント、住福純さんの、こちらの記事 を参照されてみてください。
これからも、毎週日曜日毎に「かんたんアメブロカスタマイズ」の方法を記事にしていきますので、ぜひ参考にしてみてください。
「かんたんアメブロカスタマイズ」記事に関して、わからないこと、質問等がありましたら、どうぞご遠慮なく、メッセージからご連絡くださいね。
ブログを本格的にカスタマイズしたい事業者の方は、こちらなどいかがでしょうか?
あなたのブログの魅力を最大限に・・・ オリジナルヘッダー作成サービス
今日も最後までお読みいただきまして、ありがとうございます。