スタイルシートとCurvyCornersで吹き出しを設置する

スタイルシートとCurvyCornersというライブラリで吹き出しを設置する方法を紹介します。以前のオンマウスで現れる吹き出しとはちょっと違います。

このようにシンプルな吹き出しと、下にある円形のものがあります。

シンプルな吹き出し

幅や高さは自動で調整されますので、どこにでも設置できます。
サンプルもあるので設置も簡単かな。

円形の吹き出し
下のサンプルはCurvyCornersを使って画像を使わずに曲線を描いています。
<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
<script type="text/JavaScript">
  window.onload = function() {
    settings = {
      tl: { radius: 10 },
      tr: { radius: 10 },
      bl: { radius: 10 },
      br: { radius: 10 },
      antiAlias: true,
      autoPad: true
    }
    var myBoxObject = new curvyCorners(settings, "rounded");
    myBoxObject.applyCornersToAll();
  }
</script>
上のサンプルの場合はJavaScriptは必要ありません。下のサンプルの場合も角型になりますがCurvyCornersがなくても設置できます。 ブラウザは以下のバージョンで動作確認されています。
  • Internet Explorer 6 ~
  • Firefox 2.0 ~
  • Safari 2.0 ~
  • Opera 9.0 ~
  • html内は以下のようにシンプルです。
    <div class="bubble">
      <blockquote>
        <p>このようにシンプルな吹き出しと、下にある円形のものがあります。</p>
      </blockquote>
      <cite>シンプルな吹き出し</cite>
    </div>
    
    <div class="bubble">
      <div class="rounded">
        <blockquote>
          <p>幅や高さは自動で調整されますので、どこにでも設置できます。<br>
          サンプルもあるので設置も簡単かな。</p>
        </blockquote>
      </div>
      <cite class="rounded">円形の吹き出し</cite>
    </div>
    
    blockquoteタグ(引用文であることを表す)やciteタグ(出典・参照先を表す)など普段あまり使っていないタグを使っていますが問題ないと思います。
    フィードやTwitterで最新情報をチェック
    follow us in feedly
    この記事に付いているタグの最新記事一覧
    loading...
    コメント
    こんにちは。
    こちらの内容と少し違うのですが引用のことなのでこちらに質問させていただきます。
    引用部分の背景色を変えたいのですが上手くいきません。
    スタイルシートに以下を貼り付けているのですが色がつきません。
    色コードを変えてみてもかわりません。
    どこか問題がありますでしょうか。
    ちなみにテンプレートはこちらのものを使わせていただいてます。
    blockquote{
    margin:15px 20px;
    padding:10px;
    border:1px solid #:CCCCCC;
    background:#EAFFD5;
    }
    【2009/09/26 16:25】 | かのん #nLnvUwLc | [edit]
    このテンプレートを使わせていただいています。
    レイアウトが崩れる件なのですが・・・。
    1画面に3記事ずつ表示させていて、カテゴリ別記事にすると一番下の記事のタイトルが大きくなりサイドの左側の列が下に落ちてしまいます。
    IE7、XPなのですが、どこをどうすれば崩れなくなるでしょうか。
    よろしくお願いします。
    【2009/09/27 15:54】 | るなのん #nLnvUwLc | [edit]
    すみません。先ほどのレイアウトが崩れる件なのですがカテゴリ別(すべての記事に引用を使っている画面です)でした。落ちる列は左ではなく右でした。
    記事の横に 次ページ 等の文字がきてサイドの列が右に押しやられて右側が落ちたような感じです。
    【2009/09/27 16:03】 | るなのん #nLnvUwLc | [edit]
    かのん さん

    たぶんbackground-colorで背景を指定すればよいと思います。
    【2009/09/29 22:46】 | 管理人 #E2ywrYdA | [edit]
    るなのん さん

    実際見てみないと分からないですが

    http://weboook.blog22.fc2.com/blog-entry-75.html

    3カラムテンプレートは上のリンク先の図のような仕組みになっており
    例えば「box2」の幅と「right」の幅の合計が「container」より大きくなると
    rightが下に落ちてしまいます。

    この点に注意して幅を調整するとよいかと思います。
    【2009/09/30 21:08】 | 管理人 #E2ywrYdA | [edit]
    返答ありがとうございました。
    原因は他にあったようで解決いたしました。
    【2009/10/08 19:30】 | るなのん #nLnvUwLc | [edit]
    すみません、また質問なのですが・・・。
    一度「続きを読む」で記事を更新し、修正で「続きを読む」をやめても「続きを読む」の文字が消えないのですが消す方法はありますか?
    【2009/10/09 20:38】 | るなのん #nLnvUwLc | [edit]
    追記の部分を全て消すと「続きを読む」は消えるはずですが。。
    あと、空白が残っていたりすると消えないと思います。
    【2009/10/09 22:23】 | 管理人 #E2ywrYdA | [edit]









    ※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

    Recent Entry
    Popular Entry
    • このエントリーをはてなブックマークに追加