人生の教養ブログ

学びを広める

はてなブログ『CONTENTS』のカスタマイズ【対話形式】

テーマを変更しました

今回は少し趣を変えて、ブログのカスタマイズのことについて書きたいと思います。

実は、ブログのテーマを変更しまして、対話形式ができるようになったのです!

ちなみに私が使っているテーマは「CONTENTS」 です。

blog.hatena.ne.jp

様々なカスタマイズができて、Responsiveなのでスマホ対応もしっかりしているテーマです。

私はこのデザインのシンプルさと色のかっこよさで選びました。(笑)

その機能の中で、対話形式ができるということでチャレンジしてみようと思い、書いています。

カスタマイズにあたり、こちらの記事を参考にしました。


www.dreamark.tokyo

それでは少しご覧下さい!

はじめまして 

 
(おりおりさん)
こんにちは!今日は私のお友達をご紹介します。ふっくんです、どうぞ!
 
(ふっくん)
どうも、こんにちは!本名は「福朗」といいます。「ふっくん」って呼んでくださいね!どうぞよろしく!
 
(おりおりさん)
ふっくんには時々、登場してもらおうと思っているので、覚えてあげて下さい!ふっくんは今学生で、いろいろなことを勉強しているんだよね。
 
(ふっくん)
はい!僕はいろんなことを学んで、幅広い知識と教養を身につけたいと思っているです。みなさん一緒に学びましょう!

対話形式の導入方法

ではこのやり方を、先ほどリンクを貼った記事を参考にご説明します。

CSSで画像を指定する 

まずはCSSにこちらのコードをコピペします。 

gist.github.com

f:id:oriorisan:20190629213311j:plain

デザイン→スパナマーク→デザインCSS

この、”ここに画像のURLを記入する”、というところを画像のURLを貼ります。

そのURLを取得するために、はてなフォトライフに行きます。

f:id:oriorisan:20190629212641j:plain

管理画面の右上にある四角から、はてなフォトライフに移動します。

そうすると、次のような画面が出てきます。

f:id:oriorisan:20190629212841j:plain

  1. Hatena Blogを押します。(ブログなどに使用した画像が全て出てきます。)
  2. もし使いたい画像がここにない場合、アップロードを押して、画像をアップロードします。
  3. 使いたい画像を選択し、「ブログに貼り付ける」をクリックします。すると、HTMLが出てくるので、コピーします。

そして、このHTMLを先ほどの()の中に貼るのですが、必要なのは一部のみです。

(例)このHTMLの場合、必要なのは赤で示した(https~png)部分のみです。

f:id:oriorisan:20190629220957j:plain

これを自分用と相手用に設定します。これでCSSは完了です。

HTML編集 

次に対話形式の使い方です。
記事執筆画面の「HTML編集」にこちらのコードを貼り付けます。

gist.github.comこの「自分/相手名前」と「ここに文章を入れる」を変えればできあがりです!

改行はShift+Enterでして下さい。HTMLなら<br>です。Enterのみの<p>タグを使う場合は<p></p>を最初からいれておくと使う事が出来ます。

とのことです。(初心者の私にはよく分かりませんが...)

ちなみに、このやり方でできるのは、「CONTENTS」を使っている方のみですので、ご注意ください。

f:id:oriorisan:20190629222945j:plain

終わりに

 
(おりおりさん)
どうですか?うまくできましたでしょうか?
 
(ふっくん)
対話形式ができると、ブログ執筆の幅が広がりますね!
 
(おりおりさん)
これからもたまに対話ブログを書こうと思います。本日は以上です。読んでいただきありがとうございました。今後ともふっくんをよろしくお願いします!
 
(ふっくん)
よろしくお願いします!では、また!