2018年8月11日土曜日

【Blogger ブログ】「吹き出し」会話形式の記事を書く方法

 今日はブログプロジェクト、しらべてやってみたシリーズです。
 このブログは blogger でやっていますが、blogger ブログでいろいろ試してみたいと思っています。

 最近は空き時間にいろいろブログを眺めて楽しんでいます。ブログ研究。みんなどんなことを書いて、どんなものを売って、どうやって儲けているのかな (そこ?)
 まぁお金のことだけでなくて、どういう風に面白いブログを書いているのか、いろいろな面から調べて、考えてみています。

 形も大事で、なんとなくの雰囲気というものも、読んでもらうには重要なんだなぁと思うところがあります。

 文字ばかりのブログ、読む気力がわきにくかったり、そもそも読みにくいこともありますからね。

 いくつか見ているうちに、吹き出しをつかった会話形式のブログが結構はやっていることに気づきます。きれいなブログに多く、やはり基本は WordPress で作られているブログに多いようです。しかし、このブログは「Blogger」でやっておりますし、別のブログも今はまだ「はてなブログ」です。


 でもでも…、こういう感じの吹き出しを使ってるブログが多いから、真似したい!!

 というわけで、調べてやってみました!

 そして結論から言うと、できました !! (見ればわかるよ !?)

 というわけで、やり方をまとめておきます。



参考にさせてもらったブログはこれ



 ▶ 「火消しに行って油を注ぐ」さんの
   Bloggerで使える「吹き出し」で会話形式の記事を書く方法

 ▶ 「Movelog」 さんの
   Bloggerで記事内に吹き出しを作り会話形式で書く方法

 ▶ 「No TITLE 」さんの
   吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】

 ▶ 「MuLife」 さんの
   吹き出しを使用して会話形式にする。はてなブログ

 さて、結論から書きますと、これらのブログで紹介されている方法は、デザインCSS に吹き出しを作るコードを書き込んでおいて、各記事においてはそれを呼び出すコードをちょっと書く、というものでした。


 なんだか面倒そうだな、と一瞬思いましたが、やってみたら全然大丈夫!

そんなに難しくないですし、すぐできる作業でした!

 上記ブログの中にもやり方が書いてありますが、ここでもまとめます。





実際の手順を順番に



1. 以下のブログに行き、140行あるコードをまるまるコピーします。
 ▶ 「火消しに行って油を注ぐ」さんの

   Bloggerで使える「吹き出し」で会話形式の記事を書く方法

2. 次に、コピーしたコードを Blogger の管理のページの、
 「テーマ」から編集してHTMLに貼り付けます。

 具体的には、まず Blogger の管理ページへ行き、❶「テーマ」を選びます。
 次に、❷デザインの下にある「HTMLの編集」を選びます。






 次に、ソースコード内の「</b:skin>」を検索します。
 ソースコードのどこかをクリックしたのちに、<Ctrl> + [F] を押すと検索窓が出てくるので、</b:skin> を入れて検索します。

 すると、コードが圧縮された状態で見つかるので、「…」をクリックして展開させます。で、</b:skin> の直前の行に、上でコピーしておいたコードを貼り付けます






 ここまでで CSSへの編集作業は終わりです。あとは各記事の中で会話を選びます。


 左側・右側に絵が出てくるタイプの吹き出しをそれぞれ、以下のページから得て、左上のHTMLを選択し、コードを記事に貼り付けてつくります


 ▶ 「火消しに行って油を注ぐ」さんの
   Bloggerで使える「吹き出し」で会話形式の記事を書く方法


 さて、次に会話の丸枠部分に表示するための画像をアップロードしてみます。
今回はこの絵を選んでみました。なんとなく自分に似ていたので…。



 まず、記事を編集する画面の「画像を挿入」ボタンを押します。そして、通常の画像挿入同様に画像をアップロード。

 



 画像一覧が表示されたら、吹き出しの丸の中にに使いたい画像を右クリックして、「画像アドレスをコピー」を選択します。









 そして、コピーしたアドレスを左側または右側の吹き出しをのソースコードの「画像のURL」と書かれた部分にペーストして置き換えれば完了です。



 うまくできたかな


 というわけで、今日の調べてやってみた、は終わりです。

気が向きましたら応援クリックをお願いします!↓
  

note に 医学・医療関係の記事をまとめています

病理の話題は別ブログにまとめています

研究関係の話題は別ブログにまとめています


その他のブログ一覧はこちら

投げ銭・ご寄付などのリンク
もしよい情報などがありましたら
▶ リンク

0 件のコメント:

コメントを投稿