「デマって自分で判断ができないのか？」と、担当利用者の夫80歳に投げかけられた

 トイレットペーパー騒ぎ

私の仕事は、「モニタリング」という利用者宅を訪問する業務がある。

Ａさん宅は80歳になるご主人の話しが面白く、毎月の訪問が楽しみの数少ないお宅なのですが、いつも人生勉強になることや驚くことなどたくさん教えてもらっています。

今日は

私「トイレットペーパーは大丈夫でした？」

Ａ「たくさん買い溜めしている人がいるって聞いたけど、トイレットペーパーとコロナとどういう関係があるんだい？」

私「デマに騙されたのでしょうね」

Ａ「わかんねぇなぁ、デマって・・自分で判断できないのか？」

私「・・・・・（笑）」

私が行列に並ばなかったのは、単純に仕事が忙しく、買いに行く暇がなかった。たまたま買い置きがあったこともあると思うけど。

そろそろ落ち着いた頃かと、この週末に家の近くのドラッグストアに行ったら、いまだになかったのでまだ買えていない始末。

最悪、葉っぱでも拾ってこようかな・・なんて思ってたし

どうして冷静であったのか

担当しているＡさんはとても心優しい人で、ご主人の冗談にコロコロ良く笑う。

でもそれは最近は調子が良いからで、悪い時は幻聴幻覚がひどく夜中に外へ飛び出して行ってしまう。ご主人は常にＡさんを心配して一緒に過ごし、健康に良いことをいつも考えている。

面白いことを言って笑わせてくれるが、時々「生きるのは大変なことだよ」とご主人の気持ちがポロッ。

私事で恐縮ですが、長年の闘病中の家族がいるため1日1日が割と必死なので、トイレットペーパーで慌てるという心理にはならなかったのだと思います。

恐らく行列に並べる人は生活に余裕があるのではないかと。

かつて、東日本大震災の時に「日本のマナーは世界一、感動」と称賛されました。

今の日本はどのように映っているのだろうかと・・・

コピペで使えるシンプル軽い見出しCSSを12種！

 

超初心者の方：見出しタグについて

 webサイトの見出しが正しく整理されていることで、ユーザーがコンテンツの内容について理解しやすくなります。そして、検索エンジンはページの階層構造を認識しやすくなるため、見出しはユーザーの利便性とSEO効果に重要となります。

見出しについては、詳しいサイトを載せておきます。

seolaboratory.jp

シンプル軽い見出し12種

 CSS（ウェブページのスタイルを指定するための言語）だけで、見出しを少し目立つようにカスタマイズしましょう。

見出し：1本線

見出し①

見出し②線を少し太くしました

見出し③太さや色を変えればイメージが変わります

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px; /*文字周りの余白*/
border-bottom: 1px solid #000; /*線の太さ、スタイル、色*/
}

見出し：点線

見出し①

見出し②

見出し③線の太さを変えるとイメージが変わります

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px; /*文字周りの余白*/
border-bottom: 1px dotted #000; /*線の太さ、スタイル、色*/
}

見出し：２本線

見出し①

見出し②

見出し③太さや色を変えてカスタマイズしましょう

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px; /*文字周りの余白*/
border-bottom: 4px double #483d8b; /*線の太さ、スタイル、色*/
}

見出し：上下線

見出し①

見出し②

見出し③

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 8px 0px; /*文字周り、上下の余白　左右の余白*/
border-top: 1px solid #db7093;/*上の線の太さ、スタイル、色*/
border-bottom: 1px solid #db7093; /*下の線の太さ、スタイル、色*/
}

見出し：上下点線

見出し①

見出し②

見出し③太さや色を変えてカスタマイズしましょう

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 8px 0px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-top: 1px dotted #000;/*上の線の太さ、スタイル、色*/
border-bottom: 1px dotted #000; /*下の線の太さ、スタイル、色*/
}

見出し：上下2本線

見出し①

見出し②

見出し③

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 8px 0px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-top: 4px double #696969;/*上の線の太さ、スタイル、色*/
border-bottom: 4px double #696969; /*下の線の太さ、スタイル、色*/
}

見出し：左に線いろいろ

見出しデザイン

.entry-content h3 {
margin: 30px 10px;
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px 15px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-left: 6px solid #6495ed;/*左の線の太さ、スタイル、色*/
border-bottom: 1px solid #87ceeb; /*下の線の太さ、スタイル、色*/
}

見出しデザイン

.entry-content h3 {
margin: 30px 10px;
background-color: #fff5ee;
font-size: 16px; 
padding: 5px 15px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-left: 14px double #fa8072;*左の線の太さ、スタイル、色*/
}

見出しデザイン

.entry-content h3 {
margin: 30px 10px;
background-color: #f0fff0;
font-size: 16px; 
padding: 5px 15px; /*文字周りの余白：左から、上下の余白　左右の余白*/
border-left: 15px solid #20b2aa;*左の線の太さ、スタイル、色*/
}

見出し：ステッチ風

見出し①

.entry-content h3 {
  background:#000;/*背景色*/
  color:#fff;/*文字色*/
  font-size: 16px;
  padding:6px;/*文字周りの余白*/
  border-top:2px dashed #fff;/*上の線の太さ、スタイル、色*/
  border-bottom:2px dashed #fff;/*下の線の太さ、スタイル、色*/
  box-shadow: 0 0 0 5px #000;
}

見出し②

.entry-content h3 {
  background: #ff8c00;/*背景色*/
  color: #000;/*文字色*/
  font-size: 16px;
  padding: 6px 10px;/*文字周りの余白*/
  border: 2px dashed #fff;/*線の太さ、スタイル、色*/
  box-shadow: 0px 0px 0px 5px #ff8c00;
}

見出し：角を丸く

見出し

.entry-content h3 {
  width: 400px;/*見出し全体の幅*/
  background: #3cb371;/*背景色*/
  font-size: 16px;
  color: #fff;/*文字色*/
  padding: 10px 20px;/*文字周りの余白*/
  display: inline-block;
  line-height: 20px;/*行の高さ*/
  border-radius: 20px 0px 0px 20px;/*左側の角を丸く*/ 
}

CSSの使い方

※はてなブログ以外の場合は、クラス名を変えて使ってください。

はてなブログの見出しデザインのカスタマイズ

①.entry-content h3 {

　↑ このクラス名は、はてなブログでのクラス名になります。

　h3  ←は、見出しの順番に変えてください。

②/*　*/ ←これで囲まれた文字はウェブ上には表記されませんので、覚書としてあると便利です。

③記載する場所

ダッシュボード ⇒ デザイン ⇒ スパナマーク ⇒ デザインCSS

※はてなブログのテーマによっては、見出しがうまくいかない場合があります。その場合の方法について、SHIROMAGさんが教えてくれています。

www.notitle-weblog.com

 HTML・CSSについて

ブログなどのwebサイトを制作するときに、HTMLやCSSの知識が少しでもあるとないとでは、見た目やSEO効果に違いが出てきます。

私もまだまだ成長途中ですので、ミス記述などお気づきの点がありましたら教えていただけると嬉しいです。

web上でお勉強するときに役立つサイトを載せておきます。

www.htmq.com

 カラーコードはこちら

www.colordic.org

コロナなんかに負けてたまるか

と、心の中で叫ぶ・・

トイレットペーパーが消えた

商品棚からトイレットペーパーが消えた画像が、県外の友人から届いた。

私の住むところは田舎だし、まさかねぇと思いながら土曜にドラッグストアやスーパーへ行ってみたら本当に消えていた！

学校が休校になることも重なってなのか。

デマとわかっていても買い占めたくなる人間の集団心理の怖さ。

私がまず考えたのは・・

「葉っぱでも拾ってこようかな」

でもこれは現実には肌が痛みそうで無理ですね。

月曜日に職場に来て思ったこと。

いつものことだけれど、紙の節約のために両面印刷にしたり、裏紙を使うけれど、これがやっかいで設定を間違えたり忘れるから、印刷のやり直しで返って紙を無駄にしてしまう。

「待てよ！こんなに綺麗なＡ４用紙をこんなに無駄にシュレッダーにかけていて、トイレットペーパーがないっておかしいでしょ！」

しかも介護業界は遅れているから、監査対策のために膨大な紙媒体の保存が未だに行われている。

おかしな世の中だなぁと思ってしまう。

日本がこんなに大変な危機であるのに、日本人は己のトイレットペーパーのことしか考えられなくなっている。

悪者探しをしても仕方がない、一人ひとりが何ができるのか冷静になりたい。

コロナ感染対策でサービス担当者会議が不要に

ようやく居宅の業務にも2/27付けで通知が出された。

【介護保険最新情報vol.773】R2/2/28新型コロナウイルス感染症に係る介護サービス事業所の人員基準等の臨時的な取扱いについて

 問９ 居宅介護支援のサービス担当者会議について、どのような取扱いが可能か。
（答）
感染拡大防止の観点から、やむを得ない理由がある場合については、利用者の自宅以外での開催や電話・メールなどを活用するなどにより、柔軟に対応することが可能である。
なお、利用者の状態に大きな変化が見られない等、居宅サービス計画の変更内容が軽微であると認められる場合はサービス担当者会議の開催は不要である。

 高齢者と関わる業務なので、感染予防は必須である。

しかし、神経質になってデイサービスへ出かけることも躊躇している家族もでてきている。それは活動の機会が奪われて筋力低下をまねき⇒介助量が増えて⇒家族の負担が大きくなるという未来に繋がる。

日本の未来のために1日も早い収束を願うばかり。

1人1人が個人から少し大きな単位で、マクロの視点で見られるようになることがコロナ退治につながると思う。

相田みつをさんの「わけ合えば」より

うばい合えば足らぬ
わけ合えばあまる
うばい合えばあらそい
わけ合えばやすらぎ

うばい合えばにくしみ
わけ合えばよろこび
うばい合えば不満
わけ合えば感謝

うばい合えば戦争
わけ合えば平和
うばい合えば地獄
わけ合えば極楽

うばい合えば足らぬ　わけ合えばあまる

無料アプリZEPETOで３Ｄアバターを作って、ブログにアクセント

自分のアバターをいろんなポーズや背景に使って手軽に遊べちゃいます。

ZEPETOとは

顔認証を利用して自撮りするだけで、自分そっくり？の3Dアバターが作成できるアプリです。

特徴

• 手持ちの写真と合成できる
• ZEPETO同士で集まって写真やムービーを撮影できる
• インスタグラムなどのＳＮＳにアップできる
• メッセンジャーアプリ用に絵文字（スタンプ）を作成できる
• 着せ替え

などなど

ZEPETO：アバターの作り方

 まずは、ZEPETOのアプリをダウンロードして会員登録を済ませよう。

ガイドに従って、メールアドレスやＳＮＳで新規登録するだけなので簡単です。

	3通りの作り方 ①キャラクターから作る ②カメラで自撮りして作る ③アルバムの写真から作る
【②「カメラ撮影でスタート」から作ってみよう】
	何度でも撮り直しができて、登録後でも好きなように細部までいじれるので大丈夫！
【ヘアスタイルを決めよう】
	ヘアは、ショート・ミディアム・ロング・アレンジ・スペシャルと種類を選べます。 ①の横スクロールで、ヘア・ヘアアクセサリー・フェイス・チーク・眉・目・目元・鼻・口・リップ・ひげ・メガネの順にカスタマイズ
【眉を決めよう】
	ちょっと眉を細くしてみました。
【目を決めよう】
	目もたくさん種類がありますが、「カスタム」から手動で好きな形に作れます。
【カラコン（コインが必要）もある】
	目には、まぶたとカラコンも選べるので、二重まぶたの加減などを調整できます。 カラコンはコインが必要なので、コインに余裕があれば購入しましょう。 ※コインは初回登録時や毎日のログインなどで貰えるので、基本、無料で遊べます。
【目元をつくろう】
	マスカラマークからは、アイライン・アイシャドウ・まつげが作れます。
【口元を決めよう】
	口も「カスタム」から手動で好きなように作れます。
【リップを決めよう】
	色と形を決めましょう。
【ひげを決めよう（男性）】
【ファッション（所持コインで購入できるものを選びましょう）】 　靴やアクセサリーもあります。

いかがですか、 ZEPETOは無料でも十分に遊べます。

毎日のクエストクリアでコインが貯められるので、慣れてきたらインテリアもオシャレに模様替えしてみよう。

ZEPETO：遊び方

	←ホーム画面
フォトブース
	フォトブースの入り方 ホーム画面⇒下中央の「＋」ボタンで ←この画面になります 一番上に写真の撮り方もいろいろあります。 今回はフォトブースでの写真の撮り方を紹介します。
一番上からポーズの種類を選べます 好きなポーズを選んで	キャラクターを選ぶ⇒完了
	できました！ あとは背景を選んだりして保存。 ＳＮＳにシェアすることもできます。
スタンプ（絵文字）
	スタンプの入り方 ホーム画面 ⇒ 右下のプロフィール ⇒ 右上のネジマーク
	ここから選ぶこともできますが、下の「絵文字を作る」から自分で作ることもできます。 ※なぜか「絵文字」という表記になっているため、最初はたどりつけなかった。
説明がわかりにくかったらごめんなさい。
ゼペットワールド
	ワールドの入り方 ホーム画面 ⇒ 下の右から2番目「ワールド」 こちらから好きなワールドへ入ります。 ワールドでは、他のゼペットユーザーとコミュニケーションが取れたり、自分のアバターが動くのを見れます。

 楽しみ方

私の場合は、流行ったころにゲーム友達から教えてもらって少し遊んでいたけれど放置していました。そして、はてなブログのプロフィール画像をどうしようか迷っているときに「ちょうどいい！」と思い出して使いました。その後、ブログ記事作成の時にちょっとした画像を探していて「そうだ！合成してみよう！」と使ってみたら、いい感じなので気に入っています。

久しぶりに遊んでみたら進化していて、テーマパークがオープンしてチャットでコミュニケーションをとったり、同じ趣味の仲間同士が集まれる「クルー」という機能もあるので楽しみ方はたくさんあると思います。

リンク

ヨーグルトで花粉症が治ったと聞いて、ヨーグルトメーカーでヨーグルト作りをして2年

2021/01/30更新

ヨーグルト手作りのきっかけ

数年前から花粉症時期になると、くしゃみと鼻水が気になるようになった。

母は花粉症であるが、私は昔からコショウを使っただけでもくしゃみと鼻水が出るので、ただ単に「異物に敏感なだけ」と自分に言い聞かせていた。

しかし、そんなごまかしも効かなくなり、2年前にとうとうヒドイ状態になってしまった。そんな時に同僚が「ヨーグルトを食べ続けて治ったよ」と言い放った。

そんな！ヨーグルトを食べるだけで治るなんて、そんな素敵なことって。

ヨーグルト効果はこんなに良いことばかり！

• 免疫力UP
• 便秘、肌トラブルの改善
• 老化防止（認知症予防）
• 骨や歯を丈夫にする
• 血糖値を上げにくくする

同僚の話では5年続けて完全に治ったということであるが、便秘もある私としては治らなかったとしても健康に良いのだからやってみよう！とすぐ行動。

ヨーグルトの作り方

ヨーグルトメーカー選びは、手ごろなお値段で簡単操作なものをAmazonで検索して、アイリスオーヤマのものにした。（2年前で2980円）

準備するもの

1. 牛乳（成分無調整のもの）
2. ヨーグルト１個
3. ヨーグルトメーカー（水切りカップ、混ぜるスプーン、牛乳パック用ふた、レシピブック付き）

たったこれだけで、１リットル分のヨーグルトができちゃいます。

ヨーグルトの作り方

①市販のヨーグルト１個分の容量分の牛乳（100～110g）をパックから減らす。

②市販のヨーグルト１個を牛乳パックに入れて良く混ぜる。

※私は極小泡だて器で混ぜてゆるくしてから牛乳パックに入れています。

※かき混ぜスプーンは煮沸消毒などせず、水洗いで乾燥させているだけです。

③牛乳パック用ふたでしっかり留めて、パックのままヨーグルトメーカーに入れる。

④温度と時間は設定を変えずにスイッチを入れるだけ。

　※40℃で8時間、おいしく出来上がります。

　※牛乳を冷蔵庫から出してすぐでもおいしく出来上がります。

ヨーグルト生活2年で経過は？

ヨーグルトメーカーでヨーグルトを作り続けて丸2年が経過。

完全に治ったという同僚は5年だと言っていたので、焦ることもなく、しかもちょっと高価なヨーグルトを毎日お手頃に食べられるので、ストレスはなし。

LG21ヨーグルト1個あたりのお値段は？

＜単純計算＞

牛乳1リットル（200円）＋LG21ヨーグルト（120円）＝320円

これはLG21ヨーグルト9個分として、1個あたり36円也！

とうにヨーグルトメーカーの元はとりました！

2年経過後の効果は？

今まさに花粉症時期に突入して、私の向かいの上司は「かゆい、かゆい」と目をこすったりしている状況。

今のところ、私はまだ症状が出ていません。

※誰でもが治るという保証があるわけではありません。

季節のフルーツやジャムと一緒に食べるとなお一層おいしく頂けます。

食べきれなかったヨーグルトは、付属品の水切りカップでギリシャヨーグルトが簡単にできちゃうので、パンにつけて食べたりするとまた違った美味しさが味わえます。

もちろん、R1など他のヨーグルトも10種類以上試したけれど、失敗もほとんどないので本当にお得です。（私の失敗は、スイッチの入れ忘れを1年に1回くらい）
 

画像はLB21を使っていますが、菌の種類で作用は異なるので種類を変えてさまざまな菌をとると良いようです。

www.macrophi.co.jp

≪ポイント5倍★1日～7日11時まで≫ヨーグルトメーカー アイリスオーヤマ 低温調理 タイマー設定 IYM-014 飲むヨーグルト 発酵 家電 調理 健康 ヘルシー 甘酒 納豆 麹 手作り 美容 自家製 手作り 塩麹 発酵食品 手作 のむヨーグルト

はてなブログで見出しのカスタマイズをしようとしたら、h2タグ問題でつまずいた

 

今回は、見出しを素敵にカスタマイズしようとしたところ、”はてなブログにはh2タグがない！？”問題にぶつかって、お勉強した内容を記録します。

※初心者の方の参考になれば幸いです。

見出しタグとは？

ユーザーや検索エンジンにページの重要なテーマを伝えるために、HTMLでマークアップするhタグのことで、「h1、h2、h3、h4、h5、h6」このように6種類あります。

見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。
※引用元：検索エンジン最適化（SEO）スターター ガイド – Search Console ヘルプ

そして、Googleは「Google が掲げる 10 の事実」と「ウェブマスター向けガイドライン」において、”ユーザーの利便性を最優先に考慮してページを作成する”と掲げています。

検索で順位を上げるためではなく、見出しタグをユーザーのために活用してユーザビリティを考慮することが結果的にSEO効果に期待ができるということになります。

はてなブログのh2タグはヘッダにあった

最も重要な大見出しにh1タグ、小見出しをh2タグ、次の小見出しがh3・・というようにh1から順番にタグを使うことが重要とされています。

はてなブログの記事タイトルはh1タグですが、大見出しがh3から始まるという驚き。

はてなブログのh2タグがどこへ行ったかというと、ヘッダーにあるブログタイトルがh1でブログの説明文がh2タグになっているのです。

h1タグの複数使用については、意味のある場所で使用すればいくつ使っても問題はないようです。

ただ、記事内にh2タグが抜けていることは正しい順番ではなくなるので問題です。

最初は、「まっそれくらいはいいんじゃない？」と思っていましたが、お勉強するほどにh2タグを何とかしなければと決意。

見出しについてわかりやすく解説してくれているサイトが SEOラボさん。

seolaboratory.jp

 はてなブログにおいての見出しh2タグの解決法

 10年以上前にテキストエディタでサイトを作成していた頃は、書籍もたくさん購入してお勉強していたのですが、10年でかなりの変化もあり、思い出しながら付いていくのが必死です。

 しかし、はてなブログは優秀で親切なブロガーさんが多く、検索すると解決法についての記事もたくさんみつかります。

 ３種類の方法がありました。

ショートカットを使う

• h1　…　なし
• h2　…　Shift + Alt + 2
• h3　…　Shift + Alt + 3
• h4　…　Shift + Alt + 4
• h5　…　Shift + Alt + 5
• h6　…　Shift + Alt + 6
• テキストに戻す　…　Shift + Alt + 7

 h2タグにしたい見出しを選択して、ショートカットすればできるのです。

※過去記事については手動でひとつひとつ変更していかなくてはならない。

※見たままモードでの入力が必要。

はてなブログの大見出し問題についての解決法を詳しく書かれているフラパパさん。

www.flapapa.com

Chrome の拡張機能を使う

Chrome Add-on for Hatena

chrome ウェブストアでこちらの拡張機能が手に入ります。

ブラウザのchrome を開くと右上に鉛筆マークが出るので、そこをクリックするとこのような画面が出ます。

見出しにしたい文章を選択して「h2」ボタンをクリックするだけです。

便利なのは、「記事の管理」をクリックするとダッシュボードが開くので、ログイン画面を出す手間がはぶけます。

※こちらも過去記事については手動でしなければならないことと、見たままモードでの使用になります。

jQueryで書き換える

jQueryは「JavaScriptを使いやすく拡張したもの」で、WEB業界の発展に最も大きく貢献している世界標準のJavaScriptライブラリです。

 jQueryのコードをフッターに貼って、h3・h4・h5タグがh2・h3・h4タグに書き換わるようにします。

コードや使い方について詳しい記事を書かれているガイさんの記事です。

www.ikemenmusuko.net

 ※一度設定すれば、どの編集モードでも使用でき、過去記事も書き換えてくれるので便利ですが、不具合が出たときに私には対処ができない。

過去記事も一括で変換する方法

捕捉ですが、一括で過去記事を変換できる方法もありました。

ＨＴＭＬ全文をメモ帳に貼り付けて、すべて選択⇒編集⇒置換⇒「検索する文字列」にh3と入力⇒「置換後の文字列」にh2と入力⇒すべて置換⇒すべて選択⇒はてなブログに貼り付ける

過去記事を一括で変換する方法を教えてくださっているのが副業newsさん。

https://www.worker-ant0818.work/2019-04-18-000100/

感想

私はショートカットの方法を利用しています。

１番良いのは、はてなブログさんに修正していただけると嬉しいのですが、今回たくさんのブログ記事を読ませていただいて、それでも魅力があるのが「はてなブログ」だということも再認識しました。

気を取り直してこれから記事をガンガン・・書いていけるといいなぁと思うのですが、この記事書くのに3日もかかっている！

読者登録している人気ブロガーのフミコフミオさんは、見出しなんて特にないうえ、30分以内で書いているんだから、あれこれ難しく考えすぎるのも良くないですね。

delete-all.hatenablog.com

はてなブログのカスタマイズはテーマInnocentでナビゲーションバーから

はてなブログに移行してから19日目。

なんとか落ち着いてきたので、私のカスタマイズを記録していきます。
とにかく私は失敗が多いので、初心者の方がそのあたりを参考にしてもらえたらと思います。

デザインテーマはシンプルな”Innocent”で

公式テーマは数が少ないので、はてなブログのテーマストアで好みのテーマを選びます。

blog.hatena.ne.jp

実はテーマ選びには苦労をして、かなりの数のテーマを試してみて最終的に”Innocent”に落ち着きました。
何に苦労したかと言えば、実際にインストールしていじってみると思うようにいかないのです。
ナビゲーションバーは絶対に導入したかったので、”Innocent”でうまくいったときの喜びようはなかった。

moonnote.hateblo.jp

”Innocent”はナビゲーションバーを内蔵しているため、設置がスムーズです。

そして、他のテーマではうまくいかなかった見出しのカスタマイズも一発。
ということは自由さが高いので、好きなイメージにカスタマイズができて、大変気に入っています。

カスタマイズ前の準備

1.テキストエディタ

Web ページを作成する時に使われるのが、HTML言語やCSS（レイアウト）やJavaScript（動き）。
webページの画面で、右クリック⇒ソースの表示を選択すると、そのページのソースコードが見られます。
それらはwindows付属のメモ帳でも書けるのですが、私は過去にメモ帳で作成していてソースが壊れてしまったことがあるので、無料のテキストエディタTeraPadを使用しています。

tera-net.com

初心者の方なら、シンプルで国産で使いやすく十分です。

2.テスト用に新しいブログを作成

念のためにテスト用のブログを作成して、「公開設定」で”自分のみ”にチェックを入れておきます。
テスト用もテーマは”Innocent”にしておきます。

ナビゲーションバーの設置

moonnote.hateblo.jp

”Innocent”を作成された半月さんがカスタマイズも教えてくれています。

設置の手順は
①jQuery をフッターに記述する
②HTML をヘッダーに記述する

これだけでＰＣとスマホ・タブレット用のメニューが展開できるようになります。

ホント素晴らしい！
”Innocent”川*'O')ﾉﾔｯﾎｰ♪

一応、私のカスタマイズ例を載せておきます。
はてなのダッシュボード⇒デザイン⇒スパナマーク⇒{}デザインＣＳＳ
コピペすると、revivelのナビゲーションになるので、色やボーダーを変えてオシャレにしてみてください。

/* ナビゲーションバーここから */
@media screen and (min-width: 1024px) {
    .main-navigation {
        text-align: center;
    }
}
.main-navigation,
.main-navigation ul ul {
    background-color: #f8f5ee;/* 注)ナビの背景色 */
    color: #000000;/* 注)ナビの文字色 */
    border-top: 2px solid #000;/* 注)ナビ上ボーダー */
    border-bottom: 2px solid #000;/* 注)ナビ下ボーダー */
}
.main-navigation a { 
  text-decoration: none;
  color: #000000;/* リンクの文字色 */
}
.main-navigation a:hover {
  color: #4169e1;/* マウスを載せたときの文字色 */
}
.main-navigation a,
.menu-toggle { color: #000000; }/* 注)スマホ用トグルボタンのリンク色 */

.main-navigation a:hover,
.menu-toggle:hover { color: #4169e1; }
/* ナビゲーションバーーここまで */

↑の/* ナビゲーションバーここから */などの表記は、web上には見えません。
自分でわかりやすくするために記載しています。