WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法
主な手順 主な作成手順は、こんな感じです。 CSSをstyle.cssなどに貼り付ける CSSのclassを用いて文章を書く CSSさえ貼り付けてしまえば、あとは「吹き出しクラスを適用したpタグ」などで、書き込むだけです。それほど手間もかからないと思います。 作成方法 作成方法は以下です。 style.cssに貼り付ける 以下のCSSをstyle.cssにコピペします。 /******************************* * 左からの吹き出し ********************************/ .left_balloon { position: relative; background: #fff; border: 1px solid #777; margin: 10px; padding: 10px; border-radius: 15px; margin-
CSSだけで簡単に吹き出しを作成する方法4つ！
こんにちは、橋本です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し（ボーダー付き） ぽわわーんとした吹き出し 丸い（曲線の）吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp
無料で全60種類のユニークな吹き出しが使える「フキダシデザイン」
プレゼン資料やフリーペーパーを作る時に吹き出しを使うことがしばしばありますが、ソフトに入っている吹き出しでは物足りない人も多いはず。そんな時に使えるのがWEB制作、DTP制作、PowerPointやWord、Excelなどの資料制作に無料で使える吹き出し素材「フキダシデザイン」です。 吹き出し素材専門サイト「フキダシデザイン」 http://fukidesign.com/ ダウンロードして使用する際は、まず気に入った吹き出しをクリックします。 画像のダウンロードは、ai形式、png形式、jpg形式で可能です。今回はpng形式を選択。 吹き出しには8つのバリエーションがあり、アイコンをクリックすることで吹き出しが変化します。 囲み枠のないタイプ。 スタンダードな枠の描かれたタイプ。 吹き出し内が透過されているもの。 枠線の太さに強弱がついてアメコミっぽい感じ。 吹き出しの下部に行けば行くほど
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Arrow Please - By Simon Hoejberg - @shojberg
