吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - SHIROMAG
2016年10月2日17：53に追記： コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。 2019年12月23日17：20に追記： デザイン、CSSを微調整しました。 CSSとChrome拡張を使って会話形式の記事を書く 今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。 吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。 「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。 最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。 見た目はこんな感じ↓↓ 先生、今日は吹き出しを簡単に実装する方法を紹介します。 運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。 ・・・
ライブドアブログで『LINE風ふきだし会話』を作ろう！ – iF-Log（イフログ）
ライブドアブログはスマホにCSSが適用できない問題 ライブドアブログは、PC版のデザインにはCSSが適用できるんですが、スマホ表示だと全クリアされます(；´Д｀) 今読んでいるこの記事は見出しの部分が青になっていると思いますが、ライブドアブログの標準仕様だと文字が太くなるだけです。 それがどうにも気に食わないので、何度か試行錯誤した結果、見出しに色がついています。 この記事を書いたときは、ブログ記事の冒頭にCSSを記述してるんだけど、最近は個別タグに直接スタイル指定をしているという有様(；´Д｀) まあ、これならスマホでもパソコンでも同じように見えますけど……ぶっちゃけめんどくさい。 ただ……この方法では実現できない野望があったんです。 それは…… ライブドアブログのスマホ表示で、ラインみたいな会話形式を実現できないのかと悩み中 — 赤ペソ先生 (@spinf60) 2016年11月10日
WordPress・会話形式にできる吹き出しがプラグインなしでできました
LINEやメッセージアプリのように、会話風に見せることができる吹き出し、ブログでときどき見かけます。 会話風にすることによって、すごくわかりやすくなるのでいいなあと思っていました。 Speech bubbleというプラグインもありますが、今回はCSSで導入してみます。 CSSで吹き出しを作るお友達のブログでさっそく試してみました。 ジョンソン選手の奥様のブログを日本語に訳して紹介している「No Carp No Life」。 カーリーさん公認ですよ！ ジョンソン奥様のブログ 妻の目線から開幕戦の後にすぐカーリーさんがブログを更新されたのですが、今回の記事を読んで泣いてしまいました。 確かに開幕戦のジョンソンはいつもとは違ってました。 というよりは、今までみたことがないくらい良くなかったです。 でも、1年を通していい時も悪いときもあるのは当たり前です｡ この記事はじーんときました。 CSSを追
【WordPress】会話形式の吹き出しをプラグインなしで導入する方法
ブログで会話形式の「吹き出し」を使うのが流行ってますね。 テーマによっては最初から吹き出し機能が付いていますが、後付けする場合は「Speech Bubble（スピーチバブル）」というプラグインを使う人が多いようです。 ただ、「スピーチバブル」を入れると他のプラグインと競合してうまく機能しない例があるようなのでちょっと心配ですね。（どのプラグインにもある話ですが・・・。） ZAKKIPOSTはなるべくプラグインを使わないことをモットーにしていますので、今回も例のごとくプラグインなしで「吹き出し」を導入してみたいと思います。 今回は、こちらの記事を参考にさせていただきました。 はてなブログで吹き出しを導入する内容になっていましたので、WordPress用に少しアレンジを加えてご紹介します。 こんな感じで表示できるようになるよ。 きゃー。かわいいー！ 設定方法（CSSの登録） こちらのCSSをコ
会話形式、吹き出しのＣＳＳ設定、使い方メモ（はてなブログ初心者） - スキゾイドな「ウサキさん」の思考
会話してるみたいな吹き出しの設定、やり方メモ 苦戦したけど、やっと成功しました！！ 手順が多くて、ややこしいです。 忘れちゃうので、メモしときます。 はてなフォトライフに画像ＵＰ（画像の準備） 画像アドレスをコピー (画像のURL) 設定の仕方 デザイン → カスタマイズ → デザインＣＳＳ → コピペする デザインＣＳＳにコピペしたやつ /* 吹き出しのCSS */ .entry-content .l-fuki, .entry-content .r-fuki { position: relative; width: 80%; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 20px; border-radius: 6px; border: 2px solid #999; box-shadow: 1px 1p
【はてなブログ】吹き出しで会話形式にする方法をインスタント化にしてみた！（定型文貼り付け） - takabonblog.com
吹き出しで会話形式にするのって面倒なことなのかな？ やっぱり手間がかなりかかるのでは？ ワワワワワ～～～～ン！ ハッハッハッハッハ！ちょのも吠えてるわ！ その吹き出しを誰でもかんたんにできるように インスタント化にしようかと・・・。 このように吹き出しで会話形式にしているブログってよく見かけますよね。吹き出しで書きたいけどやり方がわからないって人も結構いると思います。でも最初の設定さえきちっとしてしまえば、後はかんたんに吹き出しを使うことが可能なんですよ。 例の「定型文貼り付け」に設定してしまえば、ワンタッチで吹き出しの会話を書くことができます。面倒ですがこの記事を見ながら吹き出しで会話形式にする設定だけを済ませておけばあとはかんたんに吹き出しを使えます。 というわけで今回は『【はてなブログ】吹き出しで会話形式にする方法をインスタント化にしてみた！（定型文貼り付け）』について解説させていた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
