会話形式の記事がた～のしぃ～♡

昨日書いた記事

route53.hatenablog.com

文中で会話形式を使って書いております。

これやりたかったんだよね～

でもなかなかそのシチュエーションがなくてね。

誰かとの会話を文章だけで書くよりイメージ浮かぶし、

なんか楽しいじゃない？

ぼちぼち使っていきたいと思っている次第です。

で、昨日の記事を読んでくださったid:mamicozさんがコメントで、

「あの会話形式のやつなんですか！ほしい。やりたい！」って言ってくださって。

コメントでお話してもよかったんだけど、

せっかくだから今日のネタとして 少しでも広まったら楽しいなって思いまして、

今日の記事というわけ。

そうは言っても、わたくしCSS＆HTMLに長けておりませんので、

こちらを拝借したのです。

akiueo.hatenablog.com

もう完全コピペのみです。

id:akiueosさんありがとうございます。

個々がいじるのはただ１点。

HTMLにあるアイコンとなる「画像のURL」のみです。

画像URLの取得

1. アイコンにしたい画像をはてなフォトライフにアップデートする。
2. 画像にカーソルをあて右クリックし「画像アドレスをコピー」する。
3. HTMLの「画像のURL」にコピーしたものを貼り付ける。

貼り付ける場所

これはカスタマイズしている皆様にはおなじみかと思いますが。

CSSは

「ブログダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」へ。

一度貼り付けておくと以後は触る必要なし。

HTMLは

「記事を書く」→「HTML編集」の入れたい場所に。

記事を書くたびに挿入するといった具合です。

HTMLは質問者・回答者の一対が用意されてますので、

私はメモにコピペコピペを繰り返しておいて、会話内容を書きます。

そして記事を書く際にまとめてHTMLへ貼り付けます。

記事を書いてる最中にHTML編集内で張り付けたり、会話を記入したり、

編集してるうちに消しちゃいけない部分を触ることもあると思うので。

スマホでも表示したい

スマホでも表示させるには、Proでないと無理かもしれません。

CSSを「デザイン」→「スマホ」→「ヘッダ・タイトル下」に貼り付けます。

その際、<style></style>で囲みましょう。

スマホのサイズによって画像と吹き出しが被ってしまうことがあります。

ではどこを触れば綺麗に表示されるかというと・・・たぶんですよ？

私が色々触って思うように表示されたところは、

/*============================================================
フキダシデザイン 
============================================================*/
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 30px 25px;
    border-radius: 10px;
    width: 70%;
    font-size: 13px;

冒頭からの８行目「width: 70%」の部分を変更することで、

吹き出しサイズを変えられます。

私はiPhone６使用ですが、50％に変更したら納得する表示になりました。

ってことで全力他力本願記事になりました💦

ブログの表現の幅が広がると思うので、ぜひお試しください。

ARIGATO☆