タダで配ってるってホント?2019-10-25【超図解】ブログの会話形式を導入してみた!Web関連この記事をシェアするFacebookTwitterPocketLINEこんにちは、じんのんです。おっちゃん「いやぁ~、無知って怖いですね。部下ちゃん「そうですね~。」おっちゃん「まさか、これも初めから実装されてたなんてね。初めまして、じんのんで~す。今日からブログに登場しま~す!部下ちゃん「おぉっ!マジか?」おっちゃん「まさかね、最初から実装されていたなんて。」と言うことで、今日は会話形式の導入方法を説明します。あっ!おっちゃんの使っているデザインテーマ限定ですからね。会話形式についてついに記事の中にキャラクターを登場させることに成功しました。「パチ、パチ、パチ」じんのん:呼ばれて飛び出てジャジャジャジャーン!はいはい、ちょっと引っ込んでおいて下さいね。皆様のおかげで、ブログのメインキャラクターが決まったことですし、これからは、キャラクターたちにあんなことや、こんなこと、ムフフなことを思いっきりしゃべらせてやりますよ。覚悟してくださいよ~。じんのん君:ただし、注意も必要やで!おっ、さっそく助言を有難う。うざい」と出てきますね。みなさんも、検索バーでやってみてください。うざい」で出てくる記事を辿っていくと、こんな記事が出てきます。文章途中にたまにアクセントとして管理人からの一言みたいな感じで入ってるのは全然苦にならないんです。最初から最後までこの調子で意味のよくわからない創作キャラに会話させてる。確かに使いすぎると、読者様にウザがられるかもしれませんね。他にも、そもそも会話形式になっていない。会話内の文章と通常テキストの文章がほとんど変わらない。これではせっかくの会話形式なのに台無しになるかもしれませんね。今回ご紹介したコメントは、それぞれの個人的な見解かもしれませんが、ブログを見て下さる方に不快感を与えないような使い方が必要なのかもしれないですね。注意点を理解したところで、会話形式の導入手順について解説していきましょう。会話形式の導入手順それでは、やり方について解説していきます。いいますか、おっちゃんが使っているデザインテーマには、初めからこの機能が組み込まれていますので、今からご説明するHTMLコードをコピーして、現在、書き掛けているブログ記事の任意の位置に貼り付けるだけで会話形式になります。記事を書く時の編集モードをHTML編集モードにしておく。下記のHTMLコードをコピーします。HTMLコードには、自分のキャラクター用と、相手のキャラクター用の2種類があります。部下ちゃん:ぼくのことだよっ!。じんのん君:えっ!、君が部下ちゃんになったの?部下ちゃん:どさくさに紛れてそうなったみたい。キャラクターの出過ぎは確かにうざいかもですね。皆さんもご注意くださいね。参考までに、おっちゃんの編集画面を貼り付けておきます。これで、ブログ内にキャラクターが登場し、会話形式で話しをすることが出来ているはずです。ん、なっていない?編集モードをプレビューにして確認してみてください。このままだとこのデザインテーマのデフォルトキャラが登場しているはずです。任意のキャラクターを登場させる方法は、のちほどご説明します。次に相手キャラクターのHTMLコードです。class="balloon-serif-right">相手名前<br>ここに文章を入れる。要領は自分のキャラクターと全く同じです。💡ポイント会話の吹き出し内で改行したい場合は、見たままモードに変更し、改行したいところで「Shift+Enter」してください。注意Shiftを押さずにEnterすると、吹き出しが二つに分かれてしまいます。常にプレビューで確認されることをお勧めします。以上で会話形式の導入手順は終了です。次は任意のキャラクターを登場させる方法です。任意キャラクターの設定手順はてなフォトライフを使った方法を解説します。ご自身で、好きなキャラクターの画像を準備してください。準備するアイコンについては、下記記事をお読みください。アイコン画像は縦横100PXで表示されています。画像が大きくても縮小されるようになっていますが(デモで使用しているのは縦横300px)、読み込みの時に画像が重くなってしまいますので、大きすぎない方が良いと思います。比率異なる画像も使用出来ますが、使用されるのは画像の中心部分となります。1で準備した画像をはてなフォトライフに保存する。注意ここでは、はてなフォトライフの使い方は説明致しませんので、ヘルプなどをご参照ください。CSSコードの貼り付けCSSコードをデザインCSSに貼り付け、青文字部と赤文字部を画像のURLに編集する。設定が完了したら、「変更を保存する」で保存しておいて下さいね。💡ポイント画像のURLは、はてなフォトライフの画像を右クリックし、「画像アドレスをコピー」するのが早いです。まとめデザインテーマ製作者様のお陰で、とても簡単に会話形式のブログが出来上がりました。本当にありがとうございました。同じテーマを使われている皆様も、是非、参考のうえ、チャレンジしてみて下さいね。やり方が分からない場合は、コメント欄にご記入ください。(id:dreamark)様、参考にさせて頂き、ありがとうございました。www.dreamark.tokyo以上、バックアップなどの事前準備を十分に行い、チャレンジしてみてください。22:50【超図解】ブログの会話形式を導入してみた!関連記事2019-10-24【超図解】グローバルメニュー(ナビゲーションメニュー)の設置方法こんにちは、じんのんです。お気付きになら...2019-10-16ブログアイコン、皆さんのおすすめはどれ?こんにちは、じんのんです。今日は10月16日です。~キーワードって何?~こんにちは、じんのんです。こんにちは、じんのんです。-こんにちは、じんのんです。今月のおすすめスターウォーズを一気見するなら!。育児・子育てライフスタイルおっちゃんお薦めアフィリエイト//更新日表示(手動)スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。