【新型コロナウィルス対応】でも、ただの近況報告です！

（おおげざなこの画像、ブログの内容とは全く関係ありません…）

みなさん、コロナ禍の毎日いかがお過ごしですか。

私事で恐縮ですが…

バラは４月から大きく生活環境が変わっています。

・脱サラでサラリーマンを卒業

・緊急事態宣言で毎日家にいる

 ということで、

最近「あれ、自分でも変わったなー」

ということを近況報告します。

ブログを書くようになった 

このブログもそうなんですけど…

ブログを書くようになりました。

今は名前からして適当ですけど２つのブログを書いています。

【コーヒー特化ブログ】

バラのコーヒー大好き！

【雑記ブログ】

バラ＠コーヒー校長ブログ　（このブログ）

何でかわかりません。

もっと動画（YouTube）も作らなければとも思っているのですが…

バラさん、なぜかブログを再開したね！

去年も今頃やっているから春だけかもね？

ドラマを見るようになった

 サラリーマン時代は毎日会社に出勤していましたので、ほとんどドラマを見ませんでした。

でも、４月からは結構見ています。

だから、ネットでこんな記事を見ると、

「あ、あの人だ。あの演技良かったー」

なんてピン！と来るようになりました。

堀田真由さんの記事

リンクも切れるかもしれませんが貼っておきます。

女優・堀田真由 朝ドラ「エール」好演でブレークの予感― スポニチ Sponichi Annex 芸能

今、欠かさずに見ているのはこの２つのドラマです。 

・朝ドラ「エール」　窪田正孝主演　TVで

・「結婚できない男」　「まだ結婚できない男」
　　阿部寛主演　アマゾンプライムで

２つともコミカルタッチなのでゲラゲラ笑っております。

NHKのサイトです。 

www.nhk.or.jp

アマゾンでリンクあるので一応貼っておきます。

アマゾンプライム会員はそのまま観れると思います。

バラさんもドラマ見るよになって少しはまともになったかな？

分からないけど、ドラマで笑ってたよー

散歩をするようになった

散歩を毎日するようになりました。

散歩は以前からしているのですが、毎日ではありませんでした。

時間の余裕があるので、

周りの景色の写真や動画を取りながらのんびりとしています。

先日はこんな動画を取りました。

YouTubeにしないと貼り付けられない（と思う）のでこれは写真です。

近所の川の人工堰です。

２日前の雨で川の水量が増え、音も交えてド迫力でした。

この堰、実はゴムでできていて、

水量に合わせて大きくしたり、小さくしたりして調整できるようです。

近くの川の堰

またこんなキレイな夕日も撮ることができました。

当たり前ですが、天の動きにコロナウィルスは関係ありません。

夕陽

近所でもキレイな写真撮れるんだね！

最近のスマホのカメラの性能のおかげだね！

緊急事態宣言、自粛要請、予想されるコロナ恐慌、

「こんな時にー！」と思いますが、

こんな感じでまた近況をご報告させていただきます！

ありがとうございました。

こんなブログもやっております。

短めですのでコーヒー好きの人は是非見てください。
blog.yumiinc.xyz

【新型コロナウィルス対応】ソーシャルディスタンス

３密、PCR検査、ロックダウン、、、新型コロナウィルスで新しい言葉が一杯！？

ウィルスだけでなく言葉も新型かな！？
２ヶ月前に聞いたら何それ？？？だね

昔からあるけど、一般化してない言葉も…

最近よく聞く「ソーシャルディスタンス」ってなんだろう、、

緊急事態宣言から２週間

緊急事態宣言が出て２週間経ちました。

みなさん、大小の差はあれ大変なご苦労を強いられていると思います。

バラも終日家に籠もってパソコンに向き合う生活で

＃おうち時間　を過ごしています。

心配なことは運動不足。

そこで、時々短時間の散歩に出かけています。

散歩していて、最近ちょっと気になるのが人と人との距離。

３密を避けるため、近づくこと自体がエチケット違反の空気が
屋外の散歩道にも充満してきました。

ソーシャルディスタンスとは？

そこで急に登場してきた（と思える）言葉が「ソーシャルディスタンス」。

え、「ソーシャルディスタンス」って何？

もしかしたら日本お得意の和製英語？

かと思ったら立派な英語のようです。

Google先生によれば、

「２mくらい人と人との距離を空けること」

と、まあ思っていることを教えてくれました。

さらに調べると、2006年の医学論文で初めて使用されたとの情報もありました。

「ソーシャルディスタンス」はコロナ騒動が終わっても一般化して残りそうです。

コロナ騒ぎ終わったのだから、もっと近づこうよ？

何いってるの、あなたとはずっとソーシャルディスタンス！

 ブラジルでも一般語になっていた

もしかしたら、日本だけ通じる言葉なのかな？と思い、

念のためブラジルのクリティバ市に住んでいる
ブラジル人の友人に聞いてみました。

ブラジルでも、他人と距離を取るという意味で使っているそうです。

そして、お店やスーパーに行く時は、
マスク着用が義務付けられているそうです。

ブラジルでも一般語のようです

世界的企業のロゴ

もうちょっと調べたら世界的な大企業が、

ソーシャルディスタンスを訴えるため自社ロゴをちょっともじっているようです。

世界共通用語なのですね。

面白いので、

「ロゴ　ソーシャルディスタンス」と検索して、

画像を表示してみてください。

いろいろ出てきますよ！

ソーシャルディスタンスを呼びかけるロゴのことを「SDL」というそうです。

マクドナルド　SDLロゴ

Audi ロゴ　SDL

マスターカード　ロゴ　SDL

この辺のことはCNNの記事になっていますので、

リンクを貼っておきます。

www.cnn.co.jp

急激に変わる社会

あえて言わなくても、

世の中が急速に変わっています。

新しい言葉も出てきました。

コロナ惨禍の後の世界「アフターコロナ」

確実にコロナ前と違ったものになるでしょう。

私たちはよくも悪くも、変化に立ち向かわなくてはいけません。

こんなブログもやってます。

コーヒー好きの人、見てください。

サクッと読めます。

blog.yumiinc.xyz

【新型コロナウィルス対応】国の大きさ考慮した時、死亡率は？自分の頭で考えよう！

毎日コロナのニュースだけど、アメリカってすでにコロナで４万人も亡くなっているのね。

すごいね。日本だったら町や市が一つ無くなってしまう数だね。

ショッキングだわ。
世界全体で自粛して、早くコロナを封じ込める必要があるわ。

まさにその通りだね。
ところで、ニュースになるのは感染者数とか死亡者数。そして、ひどい国や地域のことばっかりだよね。

そう言われてみるとそうだわ。

自分の考えを持つ前に人口比率のデータとか、地域内のデータ比較も必要だよね。
自分で頭で考えてみよう。 

報道は絶対数が多い

日本では全国対象の緊急事態宣言の下、毎日のニュースは新型コロナ関連がほとんどです。

もちろん、パンデミックを避ける、効果的な対策を行う、ためには絶対数の把握は必要です。

東京都の感染者数を毎日比較して、感染の爆発をどうにか抑えていかなければなりません。

しかし、メディアの一部の情報だけで「日本はダメだ、マスク２枚を配布なんてアホのことしかできていない」と批判するのはどうかと感じます。

そこで、普段は絶対数の報道ばかりなので、興味がおもむくままに感染者数、死亡者数の人口比率を算出してみました。

世界各国の人口比率を出してみる

人口比率から感染者数、死亡者数を計算してみました。

元データはGoogleニュース

https://news.google.com/covid19/map?hl=ja&gl=JP&ceid=JP:ja

の記事です。

人口データはグルーバルノートというサイト

世界の人口 国別ランキング・推移（国連） – Global Note

のを使用しました。

全体の数字

細かいですが、上記サイトからこんな表を作ってみました。

もちろん各国の定義感染者数、死亡者数の統一性と信憑性は別の問題です。

ちゃんと検査していないだろうとか、他の病気かコロナで死亡したのか判断が微妙な場合もあるかと思います。

そこは信じる！ことでご容赦ください。

全体感染者数（絶対値）

まずは感染者数です。

よくニュースなどで目にする数値です。

各国感染者数

アメリカ合衆国が約８０万人で突出しております。

アメリカは８０万人も感染しているのね。怖いわ。

これを人口比率に直すとどうなるかです。

人口に対する感染者比率

比率に直すとこんな感じです。

突出していたアメリカの数値が小さくなり、

代わりにスペイン、イタリアが高いことがわかります。

アメリカは極端に低くはないが、スペインたイタリアに比べては感染率は低いようです。 

人口に対する死亡者比率

人口に対する死亡者比率はどうでしょうか？

人口に対する死亡率

死亡者比率にするとするともっと差が出ます。

スペイン、イタリア、イギリス、フランスが大きく、

アメリカはこれらのヨーロッパ諸国（ドイツ除く）より小さくなっています。

つまり、国の対策の巧拙と医療崩壊度の側面から、ヨーロッパ諸国は対策が上手く行っていないことが分かります。

ヨーロッパの国々はドイツを除いてひどいことになっているね。

アメリカ合衆国内の感染者数と死亡者数

それではアメリカ合衆国内の感染者数と死亡者数はどうなっているのでしょうか？

州別データを

アメリカ合衆国における2019年コロナウイルス感染症の流行状況 - Wikipedia

をより調べてみました。

2020年4月18日のデータです。

アメリカ合衆国の感染者数

アメリカ合衆国の１００万人あたりの感染者数です。

地図から東海岸の一部の州と、南部のルイジアナ州で多いことが分かります。

アメリカ合衆国100万あたりの感染者数比率

アメリカ合衆国死亡者数

 データを円グラフにしました。

アメリカ合衆国死亡者数

このグラフから、死亡者の約３分の１強がニューヨーク州に集中していることが分かります。

日本でアメリカのニュースを見ると、

ニューヨークで多数の感染者や死亡者が出ていることが報道されます。

そのニュースから、アメリカ全土で同様なことが起きている

ような錯覚に陥りますが、事実はひどい状況になっているのはニューヨーク州とその他のいくつかの州です。

ニューヨーク州で頑張る日本人医師が出てきて危機を訴えるニュースを見たことがありますが、アメリカ全土で同じような状況ではないことが分かります。

アメリカはニューヨーク州だけが突出してひどい状況になっているのね。
ニューヨークの医療現場の大変さがわかるわ

自分の頭で考えてみよう

コロナ感染者数、死亡者数の絶対数を比率で見たところで、私たちがするべきことは変わりません。

でも、ニュースの数字をそのまま鵜呑みにして、

ヨーロッパとアメリカが同様なコロナウィルス感染状況かというと、違うことが分かります。

ポイント

・国の大きさから死亡率を見ると違った姿が見えてくる

・ひどいことになったいるのはヨーロッパ（ドイツを除く）の国々

・アメリカ合衆国内では州により感染者数がかなり異なる

日頃、ニュースで数字に触れることが多いですが、

どのようにその数字が使われているか、

飲み込む前に考えてみる姿勢が大切です。

毎日見るニュースは感染者数などの絶対数ばかり。
今日は勉強になったわ

ヨーロッパの中でも、ドイツとその他の国の状況が違うよね。
日頃から自分の頭で考えることが大切だね。

長くなってしまいました。

ここまでありがとうございました。

【ブログの作り方】はてなブログを装飾する（ポイント囲み）

ブログはHTMLとCSSを使用すると表現力が倍増します。

はてなブログの場合も同じです。

最初はちょっと難しいと思っても一回理解してしまえば、あとは繰り返しです。

頑張って勉強してみましょう。

ねえねえ、「はてなブログ」のことでちょっと教えて！

何を教えて欲しいの？

ブログの最後にカッコよくまとめをしたいの〜
なにかいい方法ない？

それならば、POINT囲みはどう？
一度設定して仕舞えば毎回使えるよ。

POINT囲みはこのような装飾方法です。

箇条書きをPOINT囲みで囲むとカッコよくなります。

ポイント

・POINT囲みを学びます

・HTMLとCSSの設定が必要です

・一度設定するとずっと使えます

ブログは積み重ね

フロー型とストック型

世の中で情報発信の方法はたくさんあります。

たくさんあるのですが、

私はある特徴で大きく２つに分けられると考えています。

フロー型とストック型です。

フロー型

Twitter、FacrBook、インスタグラムなどのSNS

ストック方

YouTube、ブログ、noteなど

フロー型は、

投稿したら短時間に広がりますが、見られても１日です。

タイムラインが中心です。
（もちろん検索して古い投稿を見ることもできます）

ストック型は、

投稿をどんどん積み重ねて行きます。

ですから、長期間にわたり見られます。

検索されら結果閲覧されることが中心になり、

どちらがいいというのではなく、

どちらもバランスよくやっていく必要があると思います。

ブログはストック型

ブログはストック型の代表です。

一度書いてしまえば、半永久的と言えるくらい長期間、

サーバーで公開できます。
（もちろんサーバ使用料などの経費は必要です）

ですから、書けば書くほど積み上がります。

積み重ねが大切です。

ポイント囲みのような装飾も積み重さなります。

一度設定してしまえば、長期間使用できます。

ですから、早く設定して早く活用すればそれだけお得です。

やることはCSSとHTMLの設定

やることは前回、角丸囲みをした時と同じです。

CSSとHTMLの設定を行います。

毎回、書くのですが難しいそうですが、やることは基本はコピペです。

あとは自分のブログに合った色の設定です。

CSSの準備

POINT囲みのCSSを準備をします。

一度設定すれば、あなたのブログのどの記事からも共通に使用できます。

CSSのコードはサルワカさんの記事を参考にしています。

.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0;
padding: 0;
}

”border: solid 3px #62c1ce;”

の「#62c1ce」が囲み枠の色の設定になります。

”background: #62c1ce;”

の「#62c1ce」が上の耳の部分の色の設定になります。

#62c1ceなどの色の設定は

RGBと16進数カラーコードの相互変換ツール - PEKO STEP

記事をご参考ください。

PC用に

「はてなブログ」＞デザイン＞カスタマイズ＞{}デザインCSSに設定（挿入）します。

挿入する位置は、後日みたときに分かりやすいよう

もしあれば、他のbox設定の近くにしてください。

また、同じ設定をスマホ用に

「はてなブログ」＞デザイン＞スマートフォン＞フッタに設定します。

フッタの中でラジオボタンを

「スマートフォン用にHTMLを設定する」を選んでください。

デザインCSSの使用方法は前回の私のブログをご参照ください。 

www.arakan.life

HTMLを設定する

次はHTMLの設定です。

記事のHTML編集を選ぶます。

”ポイント囲み”を表示したい部分に

<div class="box27">
<span class="box-title">ポイント</span>
<p>ここに箇条書き文章</p>
<p>ここに箇条書き文章</p>
</div>

を挿入します。

”ここに箇条書き”の部分を

記事に合わせて複数変更してください。

何行設定しても構いませんが、ポイントなので最大でも５行程度かと思います。

終わりです

これで終了です。

CSSは各記事共通

HTMLは各記事ごとになります。

一度、設定すれば何回でも使用できますので、

見やすいブログにするため、

設定をおすすめします。

ということで、今回のポイントです。 

ポイント

・基本はコピペ

・CSSを設定する（ブログ全体に有効）

・CSSに自ブログに合った色を設定する

・HTMLは各記事に設定（各記事で設定）

ここまでありがとうございました。
 

【新型コロナウィルス対応】ペライチ決済無料セミナー（4/29）、ネットショップを持ちたい方へ

コロナ感染の勢いがなかなか止まらないこの状況、

いかがお過ごしですか。

多くの方が自粛のため、ご自宅で過ごされているのかと思います、

今日は、ペライチセミナーの報告(4/17)とオススメです。

無料セミナーです。

誰でも参加できます。

第２回目が 4/29 にあります。

peraichi.com

ペライチとは何？

こちらをご覧ください。

peraichi.com

緊急事態宣言の期間中、

売り上げ大幅減など、

手をこまねいていていませんか？

どんどん学んで、

次の手を打っていきましょう。

こんな方におすすめです。

特にこんな方におすすめです。 

会話風にしてみました。

私はお店のオーナーです。

私はWebマーケットの専門家です。

緊急事態対応でリアルショップは全滅　(T-T)
ネットショップを開設してけば良かった。
とほほ、、、、

なぜネットショップを今まで持たなかったのですか？

だって、開発・維持にものすごくお金かかるもの。
アマゾンや楽天を利用しても手数料高いし。

ペライチでネットショップ持てますよ

でもお金と時間かかるのでしょう？

月額2,980円で持てます。
しかも、Webの専門知識はいりません。

え！ホント？

しかも、無料セミナーが4/29もある。

その話もっと聞かせて！！

第１回セミナー（4/17）を受講

私はこのオンラインセミナーを4月１７日に受講しました。

大変勉強になりました。

 ペライチ決済機能の特徴

 決済機能はこちらをご参照ください。

kessai.peraichi.com

改めて驚いたことが５点ありました。

１．すごく簡単

２．費用が安い（1,980円/月）

３．決済オプション３ヶ月無料

４．決済はクレカ、ペイパル、コンビニ払い対応

５．最初は無料なのでリスクがない

 本当にすごいです。

セミナーの様子

Zoomのウェビナー機能でオンラインで行われました。

詳細は受講者には分かりませんが、

２００人くらいの方が参加して大盛況でした。

ペライチの上田和貴さんが講師です。

上田さんの説明はメチャわかりやすいです。

ペライチの直江つかささんが司会をしました。

上田さんとのやり取りの上手でした。

説明終了後、たくさんの質問が出ました。

参加者の熱意を感じました。

後日、セミナーのビデオを無料でいただけるそうです。

第２回目セミナー（4/29）

同様な内容で第２回目のセミナーが予定されています。

日程は

　4月29日(水祝)　15:00～17:00

です。

申し込みは当日の１時間前までです。

ネットショップに興味のある方、

是非とも参加をおすすめします。

peraichi.com

これは受講するしかなさそうだね

無料だから申し込んでみて

今すぐ申し込もう。

私もペライチセミナーを開催しております。

是非ともご確認ください。

peraichi.com

ここまでお読みいただきありがとうございました。

www.arakan.life

www.arakan.life

【ブログの作り方】はてなブログを装飾する（会話風吹き出し）

お題「#おうち時間」

みなさん、コロナの影響はいかがですか？

バラがよく行くジムは、

緊急事態宣言を受けて今日から閉鎖になりました。

近所のスーパーも縮小営業を始めました。

世の中気が滅入る話が多いですが、

＃おうち時間　を使って

ブログの作り方を勉強しましょう。

今回は、はてなブログで会話風吹き出しをつける方法です。

今日ははてなブログで「会話風吹き出し」の設定を学びましょう。

何それ？

こんな感じー！
マンガのように吹き出しでセリフを装飾するやり方だよ。

楽しそう！

このような設定ができると、

表現の幅がグッと広がり

ブログが楽しくなりますよね。 

この表示をするためには、

CSSとHTMLの設定が必要です。

なんだか難しそうですが、

やることは、

キャラクターの画像の準備と

CSSプログラムのコピペ。

そして各記事でのHTMLの設定です。

しかも、一度設定してしまえば、

これからずっと使えます。

とっつきにくいですが、やってみましょう。

アイコン画像の準備

画像の準備

会話に使用する画像を準備します。

形式はpngでもjpgでも良いです。

私は、正方形でバックが白の

顔アイコンを用意しました。

欲張って、たくさん用意しましたが、

２人の会話形式ならば、

２つ用意すれば十分です。

これらをはてなの「フォトライフ」機能を

使用してブログのサーバーにアップします。

右上の「Hatena」マークをクリックします。

「Hatena」の全体メニューになるので、

左側メニューの「フォトライフ」をクリックします。

「フォトライフ」の画面になります。

「フォトライフ」のアップロード機能を使用します。

 右側の操作パネルから、

アップ先のフォルダーを「HatenaBlog」にセットしてください。

波線で囲まれた部分へ、用意した画像を、

MacならFinder、

WIn10だったらエクスプローラーから

ドラッグ＆ドロップします。

 

しばらくするとアイコン画像のアップロードが終了します。

次に、アップしたアイコン画像のURLをチエックします。

画像にマウスオーバー（マウスの矢印を重ねる）して右クリック、

「画像アドレスをコピー」を選します。 

コピーをしてメモ帳アプリ等にコピーしておいてください。

　具体的には

「https://cdn-ak.f.st-hatena.com/images/fotolife/〜」

になります。

アイコン画像が２枚ならば、

２つの画像アドレスが必要です。

吹き出しのCSSをセットする

CSSはあなたのはてなブログの記事、全てに共通です。

本体コード

本体コードです。

あとでコピペしてはてなブログのCSSのエリアに挿入します。

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: calc(100% - 82px);
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #ddd;
box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
background-color: #fff;
z-index: 1;
box-sizing: border-box;
}
.entry-content .l-fuki {
margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 60px;
height: 60px;
top: -6px;
border-radius: 50%;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
box-sizing: border-box;
}
.entry-content .l-fuki::after {
right: -82px;
}
.entry-content .r-fuki::after {
left: -82px;
}
@media screen and (min-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 80px;
height: 80px;
}
.entry-content .l-fuki,
.entry-content .r-fuki {
width: calc(100% - 106px);
}
.entry-content .l-fuki::after {
right: -106px;
}
.entry-content .r-fuki::after {
left: -106px;
}
}

キャラクタクラスの設定

次に、吹き出しに使用するキャラクタ部品のクラスを設定します。

ここが第１の山場です。

.クラス名::after {background-image:url(画像のURL);}

これを使用する画像アイコン数分用意します。

アイコンと吹き出しの組み合わせの設定になります。

例ですが、私の場合は

クラス名：femalehairpin

画像のURL：https://cdn-ak.f.st-hatena.com/imag〜

のようになっています。

細かいことですが、

左のアイコンは右吹き出し用として、

右のアイコンは左吹き出し用として、

別々のクラスを用意しました。

数多く用意したのでCSSはこんな感じです。

PC用にCSSをセットする

本体とキャラクタクラスの両方を

CSSをはてなブログのデザインCSSに

コピペで挿入します。

デザインCSSの使用方法は前回の私のブログをご参照ください。 

www.arakan.life

具体的にはここになります。

ブログ左上のプルダウン＞設定（パレットのアイコン）

 「{}　デザインCSS」を選び下記のCSSを適当なところへ挿入します。

スマートフォンにも設定する 

引き続きスマートフォン用のCSSエリアにも設定します。

スマートフォン用はプルダウンメニューの下の方、

フッタ＞スマートフォン用にHTMLを設定するを選択

で表示されるエリアです。

 

プログラムはSHIROMAUさんのサイトを参考にしております。

ありがとうございます。

www.notitle-weblog.com

サルワカさんのサイトにも同様なブログラムが掲載されていますが、

右吹き出しのみですので、

SH IMARUさんのサイトを参考にさせていただきました。

HTMLを設定する

いよいよHTMLの設定です。

これもどうしても必要です。

難しいと感じるかもしれませんが、

我慢してください。

ここが第２の山場です。

HTMLは記事ごとに設定します。

どのアイコンを使うか、

右吹き出しにするか、左吹き出しにするかを

HTMLでコントロールします。

 右吹き出し
<p class="r-fuki クラス名">テキスト</p>

 左吹き出し

<p class="l-fuki クラス名">テキスト</p>

会話にするため、この２種類を用意して、

交互に使うことになります。

上の例ですと、

<p class="r-fuki bararight">今日ははてなブログで「会話風吹き出し」の設定を学びましょう。</p>
<p class="l-fuki femalehairpin">何それ？</p>
<p class="r-fuki bararight">こんな感じー</p>
<p class="l-fuki femalehairpin">楽しそう！</p>

になります。

これをブログの「HTML編集」欄で直接入力していきます。

編集（見たまま）では入力（設定）できないので

ご注意ください。

また、出来栄えはプレビューでチェックします。

PC版、スマホ版、両方のチェックが必要です。

やっと終わりです

終了です。

繰り返しになりますが、

CSSは各記事共通

HTMLは各記事ごとになります。

吹き出しセリフ内の改行は

編集（見たまま）で改行すれば反映されます。

難しい~

やってみて。
諦めずに設定をやっていけば必ず上手できるから。

理解力よりも根気ね

そうかもね。
絶対に上手くいくよ

ポイント

・アイコン画像を複数準備

・CSSはブログ全体に有効

・CSSは本体とキャラクタ用２種類を設定

 ・HTMLは各記事に設定

・PC、スマホ用それぞれ確認

ここまでありがとうございました。

www.arakan.life 

【ブログの作り方】はてなブログを装飾する（角丸囲み）

お題「#おうち時間」

みなさん、コロナの影響はいかがですか？

在宅を余儀されている方も、

多いのではないかと思います。

今日は時間があるならば、

ということで、ブログの作り方です。

「はてなブログ」をちょっと見やすくする方法に挑戦しましょう。

「角丸の囲み」

でブログをカッコよくする方法です。

 ↑

こんな感じです。

一度、覚えると他の装飾もできるようになるます。

是非ともこの #おうち時間　でやってみましょう。

あなたのブログの作り方、どんどん進化しますよ。

角丸の囲みを作る方法 

角丸にする前

昨日の私のブログです。

下半分のスケジュールの部分を角丸にします。

 

CSSを設定する

CSSとは（Cascading Style Sheets）

カスケーディング・スタイル・シートと言って

デザインの詳細を決める言語です。

完全に理解しようとすると、

多少難しいところもありますが、

わからなければ、そのままコピペでOKです。

PC用の設定とスマホ用の設定があります。

PC用の設定をする

 はてなブログの左上プルダウン＞デザイン　を選ぶ

デザインCSSを選ぶ

ステートメントが入っている箱をクリック！

次のCSSをコピペして挿入する。

.box2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #6091d3;/*文字色*/
background: #FFF;
border: solid 3px #6091d3;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box2 p {
margin: 0;
padding: 0;
}

このステートメントはサルワカさんのブログを参照しています。

saruwakakun.com

文字色、線の太さと色、角の丸みは調整も可能です。

スマホ用の設定をする

 デザインCSSを選ぶまで戻り

今度はスマホのマークを選ぶ

下の方にあるフッタで「PCと同じHTMLを表示する」をクリックする。

ステートメントが入っている箱をクリック！

PC用と同じ次のCSSステートメントを挿入する。

.box2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #6091d3;/*文字色*/
background: #FFF;
border: solid 3px #6091d3;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box2 p {
margin: 0;
padding: 0;
}

こんな感じです。

最後に変更を保存する。

HTML文章を設定する 

次にHTMLを設定します。

もう少しがんばりましょう。

ブログの編集画面へ行き、

HTML編集を選ぶます。

 該当場所に次のステートメントを挿入する。

<div class="box2">

</div>

こんな感じです。 

やっとですが以上で終了です。

プレビューで確認する

最後に設定が反映されているか確認します。

「スマートフォン」へ切替え確認します。

スマートフォンは横幅が狭いので、

１行の文字数が少ないです。

想定外のところで改行されていないか、

注意してください。

ふー、終了です

以上で終了です。

ちょっと長くなってしまいました。

サルワカさんには他のデザインも載っています。

チャレンジしてみてください。

お疲れ様でした。