アメブロのメッセージボードに画像枠をつけるカスタマイズ方法

アメブロの新タイプのCSS編集用デザインでは、トップページのメッセージボードは、境界線もなにも無い非常にシンプルなものになっています。

ですがこの場所は、トップページの訪問者に様々なアピールを行うのに最適な場所ですので、もう少し目を引くことができたほうが良い場合もあるでしょう。

そこで、当記事では、メッセージボードに画像枠を付けて、目を引くデザインにするカスタマイズ方法をご紹介します。

メッセージボードに画像枠をつける

それでは、以下の手順でカスタマイズしていきましょう。

画像枠になる画像を準備する

まず、必要な画像を準備しましょう。

当記事のメッセージボードに画像枠をつけるカスタマイズでは、

  • 全体背景画像
  • 上部背景画像
  • 下部背景画像

の3種類の画像を使用します。

今回は、以下のような画像を用意しました。

【全体背景画像】

【上部背景画像】

【下部背景画像】

それぞれの画像は、以下の画像のように背景画像として配置します。

全体背景画像をメッセージボードの上から下まで縦方向に敷き詰め、上部背景画像をメッセージボードの上端に、下部背景画像をメッセージボードの下端に、どちらも全体背景画像に重ねて配置しています。

画像を重ねますので、透明あるいは半透明部分のある画像は使えません(使う場合は別の方法を検討する必要ががあります)のでご注意下さい。

なお、画像枠に加工できそうな画像は、こちらの無料ダウンロードサイトで「フレーム」というキーワードで検索するとたくさん見つかりましたので、よろしければ探してみて下さい。

画像を用意できたら、画像フォルダにアップロードして、それぞれ画像のURLを取得しましょう。

もし、画像のアップロードと画像のURLの取得方法についてわからない場合はこちらの記事を参考にしてください。

取得した画像のURLは、このあとの手順で使いますので、メモ帳などに貼り付けておいて下さい。

CSSを編集してメッセージボードに画像枠をつける

次は、ブログデザインCSSの編集をしますので、もし、やり方が分からない場合は、先にCSSの編集の方法をチェックしておいて下さい

CSSには、以下のようなコードを、末尾に追加します。

「【上部背景画像URL】」「【下部背景画像URL】」「【全体背景画像URL】」は、それぞれ該当する画像のURLに置き換えます。

また、余白の設定は、画像枠と文字表示領域の間に設ける余白の設定ですので、デザインに合わせて調整して下さい。

編集が完了したら、保存して表示確認をしておきましょう。

まとめ

以上、新タイプ(第二世代)CSS編集用デザインで、トップページのメッセージボードに画像を使った囲み枠を表示するカスタマイズ方法をご紹介しました。

今回の方法は、透明・半透明画像には対応していませんが、その分設定が簡単ですので、もしよかったら試してみてくださいね。

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。