コピペで使えるメモ帳風お知らせBOXのインラインCSS

コピペで使えるインラインCSSシリーズ〜〜。

文房具好きです(再び)。

今日は大判の罫線つき付箋、もしくはカラフルなメモ帳をイメージしたお知らせBOXです。

※お使いのブログテーマのCSS設定により、表示のされ方は当ブログのサンプルと若干異なる場合があります。

メモ帳風お知らせBOX

本文の点線罫線は、境界線(border-bottom)を使用。 残念ながら、こちらのやり方では罫線風の下線は文字の下にしかつきません。

横幅いっぱい

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

<div style="border: 1px solid #ffcc99; padding: 10px; background-color: #ffebcd; box-shadow: 5px 5px 5px #999;"><p style="border-bottom: 6px double #ffcc99; font-size: 130%; font-weight: bold; padding: 0px 10px;">タイトルタイトルタイトル</p><span style="border-bottom: 2px dotted #ffcc99; color: #444; padding: 0px 10px;">本文本文本文本文本文本文本文本文</span></div>

横幅狭め(中央寄せ)

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

<div style="border: 1px solid #ffcc99; padding: 10px; background-color: #ffebcd; box-shadow: 5px 5px 5px #999; width: 70%; margin: 0 auto;"><p style="border-bottom: 6px double #ffcc99; font-size: 130%; font-weight: bold; padding: 0px 10px;">タイトルタイトルタイトル</p><span style="border-bottom: 2px dotted #ffcc99; color: #444; padding: 0px 10px;">本文本文本文本文本文本文本文本文</span></div>

メモ帳風お知らせBOX(罫線に画像使用)

本文の罫線に境界線(border-bottom)を使ったやり方では、文字のあるところにしか下線が引かれず、ノートっぽさに欠けるので、左端まで罫線を引く方法もご紹介します。

が、難易度高めです。

左端まで罫線を引くには、罫線に背景画像を使用します。
参考)ノートのように罫線(下線)を引くデザインの作り方 [ホームページ作成] All About 罫線用の画像(greendot.gif)をこちらからいただきました。他に青色破線、緑色点線、赤色ブラシ、青色実線、茶色実線の罫線画像があります。

罫線画像をお使いのブログにアップロードし、画像URLを取得する

  1. 罫線用の画像はノートのように罫線(下線)を引くデザインの作り方(6ページ目)から、欲しい罫線用画像を長押し→画像を保存でスマホの写真ライブラリに保存してください。
  2. お使いのブログの編集画面から、記事中かメディアライブラリなどに画像をアップロードしてください。
  3. 次に、アップロードした罫線用画像のURLを取得してください。

iPhoneの場合、画像を載せた記事を公開し、記事の中で表示されている画像を長押し→「コピー」で画像のURLがコピーされます。メモ帳アプリなどにそのURL(http://ameblo.jp/…***.jpg)をペースト(貼り付け)しておいてください。

※くれぐれもAll About記事中の画像のURLを直接、使用しないでください。直リンクとは|用語解説辞典|【公式】NTTPC

  1. 以下の「メモ帳風お知らせBOX(罫線に画像使用)」のコード中の罫線用画像URLを、先ほど取得した画像のURL(http://ameblo.jp/…***.jpg)に置き換えてご使用ください。

画像URLを取得後、記事の中でアップロードした画像を表示させたくない時には、HTML編集で<img>タグ内の最後に、<img **** style=”visibility: hidden;”/>と追記してください。
そうすると、その画像は記事の中では表示されません。
記事中の画像や画像を載せた記事を削除しないでください。他のページで参照している罫線画像も消えてしまいます。

横幅いっぱい

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

<div style="border: 1px solid #3eb370; padding: 10px; background-color: #ccffcc; box-shadow: 5px 5px 5px #999;"><p style="border-bottom: 6px double #3eb370; font-size: 130%; font-weight: bold; padding: 0px 10px;">タイトルタイトルタイトル</p><p style="background-image: url('罫線用画像URL'); line-height: 25px; margin: 0px; color: #444; padding: 3px 10px;">本文本文本文本文本文本文本文本文</p></div>

横幅狭め(中央寄せ)

タイトルタイトルタイトル

本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

<div style="border: 1px solid #3eb370; padding: 10px; background-color: #ccffcc; box-shadow: 5px 5px 5px #999; width: 70%; margin: 0 auto;"><p style="border-bottom: 6px double #3eb370; font-size: 130%; font-weight: bold; padding: 0px 10px;">タイトルタイトルタイトル</p><p style="background-image: url('罫線用画像URL'); line-height: 25px; margin: 0px; color: #444; padding: 3px 10px;">本文本文本文本文本文本文本文本文</p></div>

おわりに

最初は、もっと紙っぽくするために端を三角に折る装飾にしようかと思いましたが、長くなりすぎるのでやめましたが、興味のある方は[CSS]角丸と併用可能、紙を折ったようなエフェクトを実装するチュートリアル | コリスを参考にさせていただいて、ぜひチャレンジしてみてください。

せめて影をつけてみましたが、それっぽく見えているでしょうか?

色や線のバリエーション違いなどご要望がありましたら、お気軽にどうぞ〜。

スポンサーリンク
レクタングル(大)

シェアする

スポンサーリンク
レクタングル(大)