楽天ショップやブログで使える!会話形式のコンテンツ用CSS

公開日:  最終更新日:2016/10/31

こんばんはハカセです。 需要があるのか無いのかよく分からないものを提供する、でお馴染みの「ハカセの研究室」。今回はCSSのクラスを指定するだけで会話形式のコンテンツが出来る、吹き出し付きのCSSを作ってみました。

暑いのでお酒を飲みながらコードを書いていますので、おかしな所があるかもしれませんがどうかご容赦を。親しみやすいコンテンツを作る時にきっと役に立つはずです。好きな様にカスタマイズしてお使い下さい。

CSSのクラスを指定するだけでお手軽に実現可能!

会話形式のブログってあんまり見ないな。

多分更新が面倒なんじゃないですかね。

たまにあってもtableとか画像になってたりするよな。

そうですね。

そんなのこまめに更新するなんて、発狂しそうだな。

それ用のCSS用意したら良いんじゃないですか?

お!そうしよう!

早速コピペだ!会話形式の吹き出し付きCSSS

ソースはこんな感じでdivにクラスを指定して、pの中に会話の内容を書いています。

<div class="hakase">
	<p>会話形式のブログってあんまり見ないな。</p>
</div>
<div class="jyosyu">
	<p>多分更新が面倒なんじゃないですかね。</p>
</div>

CSSはこんな感じです。吹き出しの三角形を作るために長くなってますが、詳しい方はどうぞ短く書きなおして下さい。

.hakase {
	padding-left:100px;
	background:url(images/hakase_icon80.png) no-repeat left top;
}
.jyosyu {
	background:url(images/jyosyu_icon80.png) no-repeat right top;
}
.hakase , .jyosyu { width:600px; margin-bottom:30px; min-height:80px;}
.hakase p , .jyosyu p {
	position: relative;
	background: #fff;
	border: 3px solid #404040;
	padding:10px;
	width:450px;
	min-height:50px;
	border-radius: 5px;
	-webkit-border-radius: 5px;    
	-moz-border-radius: 5px;
}
.hakase p:after, .hakase p:before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.jyosyu p:after, .jyosyu p:before {
	left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.hakase p:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 10px;
	top: 20px;
	margin-top: -10px;
}
.hakase p:before {
	border-color: rgba(64, 64, 64, 0);
	border-right-color: #404040;
	border-width: 14px;
	top: 20px;
	margin-top: -14px;
}
.jyosyu p:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #fff;
	border-width: 10px;
	top: 20px;
	margin-top: -10px;
}
.jyosyu p:before {
	border-color: rgba(64, 64, 64, 0);
	border-left-color: #404040;
	border-width: 14px;
	top: 20px;
	margin-top: -14px;
}

まとめ的な何か

思いつきで作ったものの、楽天ショップのセールページなど「親しみやすさ」や「わかり易さ」が重要な場面では意外と使えるのでは無いでしょうか。

お客さんを楽しませたり買い物がしやすいページを作るために工夫できる事は、これ以外にもまだまだたくさんあるはずです。一つやったらそれで満足では無く、常に新しい取り組みをし続ける事は色んな方面に良い影響を与えるはずです。

ただし、やった事は必ず、良かったのか悪かったのか、何が良かったのか悪かったのかを検証して、次の取り組みに活かして下さい。闇雲な手当たり次第のアウトプットは上手く行く時は良いですが、失敗した時には疲弊しか産みません。
結果を残す人は失敗からより多くの事を学ぶのです。

今日もオチはありませんがこれで終わりとします。
それではまた。

コメント

  1. がちょぴん より:

    参考にして、レスポンシブ対応にしたいのですが、
    どういうタグを追加したらいいのか分からないので教えてほしいです。

    • ハカセ より:

      がちょぴん様
      コメントありがとうございます。

      レスポンシブ対応ですか?!
      レベル高すぎで僕には付いて行けないかも・・・

      多分なんですが、viewportとかでブラウザの幅等によって読み込ませるcssを新たに作る必要があります。

      iPhoneには「iPhone.css」ってCSSファイルを読み込ませて、PCには「pc.css」ってCSS読み込ませて、みたいな感じで読み込ませるCSSファイルを変えるのがセオリーかと。

      ココらへんが詳しいかも知れません。
      レスポンシブWebデザインの作り方(簡単設定方法)

      すみません、あまりお役に立てなくて・・・。
      よろしくお願い致します。

      • がちょぴん より:

        ハカセさん
        返信ありがとうございます。

        「viewport」にしたいのではなく、
        会話形式をレスポンシブ対応にしたいという事です。
        「max-width」など試してみたのですが、表示は変わらず記事枠はみ出てました。

        • ハカセ より:

          がちょぴん様

          僕の知識が少ないのもあって、どんなものを目指されているのかが良く分かりません。スミマセン・・・。

          .hakase , .jyosyu のwidthと.hakase p , .jyosyu pのwidthを調整すれば一応スマホ用の表示も出来ます。僕はスマホサイトよく分かってないので余り自身はありませんが・・・。

          ちょこっといじってみたのがこちらです。
          https://hakase-labo.com/custom_page/test/test-sp.html

          参考になれば幸いです。

          • がちょぴん より:

            上手く伝えられず申し訳ございません。

            紹介されている会話形式は、2人で会話していますが、
            提示されているCSSタグを参考に左側(ハカセ)の吹き出しを
            使用したいという事で、1人会話形式(独り言)にしました。

            CSSタグ入れて設定を行ってスマホ(端末ないのでツール)で確認したところ、
            吹き出し部分が記事枠からはみ出ていたので、レスポンシブ対応にしたいなと思っています。
            調べて色々CSSタグなど入れて表示確認しても変わらなかったので、ハカセさんにコメントしたという経緯になります。

            わざわざページ作ってもらってお手数おかけしました…
            CSSタグは、メモしたので削除しても大丈夫です。
            試して変化がなければ再度情報収集します。

  2. ハカセ より:

    がちょぴん様
    ご丁寧にありがとうございます。
    お役に立てたかどうかは分かりませんが、僕個人の課題は見えました。(笑)
    「モバイルファースト」って言葉もあるくらいなので、モバイル(今は主にスマホ・タブレット?)は大事ですよね。
    そのうち時間を見つけてスマホ関連の記事も書いてみますので、これからもどうぞよろしくお願いします。

    • がちょぴん より:

      話題が見えて嬉しいです!w
      「モバイルファースト」初耳です!

      そうですね~。
      スマホ or タブレットは大事だと思います。
      是非、スマホ関連の記事を公開した際、
      会話形式レスポンシブも記載して頂けますと幸いです。

  3. がちょぴん より:

    Pタグではなく下記のような形にしたいのですが、
    上手く吹き出しが表示されないので教えて頂けますと幸いです。

    あいうえお

    • がちょぴん より:

      ※タグ表示されていないので再コメント

      Pタグではなく下記のような形にしたいのですが、
      上手く吹き出しが表示されないので教えて頂けますと幸いです。

      <div class=”fukidashi”>
      あいうえお
      </div>

      • ハカセ より:

        がちょぴん様
        いつもコメントありがとうございます。
        返信がすっかり遅くなりましたが、
        Pタグをクラスを指定したdivタグに変更したいという事でしたら、
        CSSのpの部分をClassに変えれば多分大丈夫なはずです。

        .hakase p , .jyosyu p {
            position: relative;
        /*省略*/
        }
        

        これを

        .hakase .fukidashi , .jyosyu .fukidashi {
            position: relative;
        /*省略*/
        }
        

        この様に変えます。(他にもpが出て来るので全部変える必要があります)

        よろしくお願い致します。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る