会話形式にするために
やったことは、
- Chromeの拡張
- デザインＣＳＳに貼り付ける
この2つです。
いろいろな方のBlogを拝見していると、上記のような会話形式見たことありませんか？
普通にそのまま会話をBlogに書くと、見にくい！「」をいちいち打つのも面倒です。私だけかもしれませんが
そのため先人の力を借りて、ついに私も会話形式デビューしました。
www.notitle-weblog.com
シロマ (id:shiromatakumi)さんのサイトを参考にしました。大変助かりました！本当にありがとうございます。
CSSとChromeの拡張を行うと、簡単に設定することができました。自分なりに線の太さや、影を無くしてみたり、シンプルに表示されるように頑張りました。
Chromeの拡張を行うと、会話形式を表示するHTMLを、簡単に記事編集画面に一瞬でピュッ！と入力してくれます。一度拡張して、デザインCSSに張り付ければ、後はもういつでも簡単に使うことができるので、是非試してみてください。
①borderのところの2pxを1pxにして線の太さを細くする
②box-shadow: 1px 1px 5px #aaa;の部分を消すと影が消える
③border-right: 2px solid #999;とborder-bottom: 2px solid #999;の2pxを1pxに変更し、上記の全ての#999を#666に変更する
④デザインCSSに張り付ける
#999から#666に若干グレーを濃く表示させたつもりが、黒になっていませんか？それは何故なのか。細くて黒に見えているが、実は濃いグレーなのか。それとも、黒になってしまっているのか。黒が良かったので結果オーライなのですが、何故黒くなってしまったのかは全然分かりませーん！ 調べ続けてみます。
会話形式にしたかった理由
なぜ会話形式したかったのかというと、先日でででーさん(id:d3dayo)からイラストを描いていただいたため、どうしても会話形式で使ってみたかったのです。
www.diy-mp.com
そしてでででーさんは、私が会話形式にするのを、誰よりも一番に楽しみにしてくれていたのです。
まず最初に…実物には全く似てないのでご安心ください！そして、超持ち上げすぎってくらいに持ち上げて頂きありがとうございます！会話形式もすごく楽しみにしております<(｀･ω･´) / “でででーさんからイラストを描いてもらいました！…” https://t.co/HFCNc6eyt9
— でででーさん (@d3_dayo) 2017年9月14日
えへへ！会話形式にすることができました！でででーさんの書いてくれたアイコン使わせていただいております。ありがとうございました。
Chrome拡張の方法
www.notitle-weblog.com
Chromeの拡張の詳しい説明もこちらで参考にさせていただきました。シロマ (id:shiromatakumi)さんの説明は非常に分かりやすく、1分も経たずに拡張することができました。
Chromeを拡張できたら、CSSを張り付け設定完了。記事編集画面で、
右上のはてなブログのマークをクリックして、クラス名を入力から「r-fuki クラス名」または「l-fuki クラス名」を入力するだけで会話形式に表示することができます。
パソコンのスクリーンショットの方法調べて、古くて中古でボロボロのパソコン（10,000円）でも撮れるか試したのですが、ペイントに上手く張り付けができませんでした。そのためさらに調べまくり、ＮＥＣはFnとPrt Scrを同時に押すことでスクリーンショットを撮ることができました。そしてペイントに貼り付けて、名前を付けて保存して、Ｂｌｏｇで使用できました。
皆さまもこのように会話形式に表示させて見てください。会話だけでブログが書けるかもしれませんし、おすすめです！
最後までご覧いただき、ありがとうございました。]]>
23 件のコメント
レベル高っ。スゴいですね。勉強になります。
堺の雪待ニンニクさん
そんなことないです！リンクしたサイトさまのおかげでございます♥︎それを参考にして、少しだけいじっただけのことなので、大してすごくはないですが、多少すごいかもしれません！えへへ(えっ勘違い)
堺の雪待ニンニクさんの自転車への知識のほうがスゴイですよ♥︎
昭和原人さん
もー進化を見届けてくれて私嬉しいです♥︎
はてなブログはproなんですが、私自身はproではないですー（ ; ; ）どうにかブログカスタマイズのproの方々のように見やすいブログに進化していきます！頑張るぞ！おー！
昭和原人さんもデザインCSSの所に色々貼り付けたら、何でもカスタマイズ出来ますよ♥︎あっでもサブブログとかで試しにやってからメインブログに貼り付けしないと、元に戻せないので大変です（ ; ; ）
記事が見やすいし、
どんどん面白くなりますね！！
OWET45さん
面白くなってきてますか！？めっちゃ嬉しいです（ ; ; ）♥︎これからもどんどん見やすく面白く楽しく頑張っていきます！OWET45さんのブログがすさまじく見やすいですし、エアブラシアートが凄すぎますし、いつも感心しております♥︎
会話形式はお見事でした。
欲を言えばみっぷうさんのアイコンはカラーにしてください。
希望としては
「髪は金髪、ほほはほんのりピンク色に、洋服もピンク」です。
softwindさん
ありがとうございます！
ちょっと手描きでアイコン作成してきますね笑♥︎
金髪で頬と洋服がピンクですね！softwindさんの好みが大変分かりました笑＾＾♥︎
すごい！
読みやすいし、マネしたい…
まだ、ブログ初心者すぎるから、
もう少ししたら、読み返してマネさせていただきます
(≧∇≦)b
秋ちゃんさん
その時は是非リンクしたシロナさんのサイトに詳しく書いてくれているので参考にさせてもらってください^ ^♥︎CSSをコピーしてデザインCSSに貼り付ければすぐに使えますよ♥︎私もまだブログ始めて1ヶ月も経ってないのですが、先人の教えのおかげでこのようにカスタマイズ出来ております♥︎
すごいすごい！！
どんどん成長してる～！！
みっぷうさん、頑張ってますね～❤
ayaさん
え、嬉しいです♥︎ayaさあぁあん＼(^-^)／♥︎
寝不足気味で台風が接近しているので、今日はゆっくりしようと思います♥︎
みっぷうさん、こんにちは。
プロ級のテクニック恐れ入りました。
残念ながらご老体の私には無理な
芸当なのでシンプルを
貫きますよ~(о´∀`о)
ライダーマンさん
プロ級なのはシロナさんです笑♥︎でも私もCSSのお勉強したいので本を購入しようかと思っております^ ^♥︎
シンプルイズベストですよね♥︎
イエス！(^-^)v
初めまして～＾＾
会話を会話形式で表示させようと思ってやってみようと思わせてもらえました☆ そうなると画像をどうしようか悩みどころです。。。
これからも記事を楽しみにしています～
tabitoshashinさん
tabitoshashinさんのブログ何度も遊びに行っていました♥︎読書登録しましたのでこれからよろしくお願いします^ ^
私は画像はこちらのイラスト屋さんから使わせてもらいました！http://www.irasutoya.com/?m=1
あと私の画像はでででーさんから描いてもらったものです！イラスト屋さんの画像は可愛いのでオススメです♥︎
コメント嬉しいです！ありがとうございます♥︎
イラスト屋さんのことを教えてい頂きましてありがとうございます～＾＾早速見に行けばたくさんのイラストがあって凄いですね。
こちらこそご返信嬉しいです～☆ 実は僕もこそっと遊びに行っていましたしお互いブログ楽しみましょうね～♪
tabitoshashinさん
沢山あって迷いますが、人物のイラストから顔のアイコンの所から選びました！とても可愛いですよね。このいらすとやさんの画像使わせていただいてるブログも多いですし、人気ですよね♥︎
え！本当ですか？(*⁰▿⁰*)♥︎遊びに来てくれていたなんて、嬉しい！改めてこれからよろしくお願いします！仲良くしてくださいね♥︎
ほんとたくさんあって迷いますね☆
ふふふ♪こちらこそブログでもフォローさせて頂いたツイッターでもよろしくお願いします♪
tabitoshashinさん
twitterフォローめっちゃめちゃ嬉しいです！twitter初心者なのでもしかするとtabitoshashinさんに色々聞いてしまうかもしれません笑 よろしくお願いします♥︎
とても見やすいです。
DIYのブログも、自分は出来なそうですが、モノが出来上がっていく工程を見ること自体楽しいです。どんどん手作りのモノ作ってください。
どくとるマンボウさん
わーっありがとうございます！最近はカスタマイズとかの話ばかりなので、DIYも頑張っていきたいです。
どくとるマンボウさんの楽しいお話が大好きです♥︎生駒ちゃん先生めっちゃ可愛いです^ ^♥︎これからよろしくお願いします！どくとるマンボウさんのブログ楽しみにしています！
┌(┌ ・ω・)┐到着！
なるほど･･みっぷぅさんの会話形式は、
ここから生まれたのか！
スクショ･･･スクリーンショット･･･
｡ﾟ(PД｀q｡)ﾟ｡あぁ～ん！俺はバカか？
今度教えて貰おう･･･そもそもパソコンを、
これだけ使っててまだ押したコトないボタンが･･･
１５個くらいあるー！子どもか俺は！
この、cssってのが曲者だよなぁ。
クローム拡張･･･。666･･･999･･･
( ､・ω・)､みっぷぅさんすごいなぁ。
あんなことやこんなコト。スイスイやってのける･･
俺？頑張れば俺だってこのくらい･･･
明日･･･もう１回読もう。
まずはクローム拡張にトライしよう！
でもグーグルアドセンスも放置してるし･･･
ლ(´∀`ლ)色々知りました！ありがとうございました★