初心者向けにはてなブログで文字に背景色をつける方法を解説。さらに、見たまま編集でシェル表記する手順も紹介します。
文字の背景に色をつけると、アクセントがつき、見やすくなりますよね。←こんな感じです。
ただ残念ながら、たいていのブログプラットフォームでは、通常のメニューボタンからでは文字の背景色の変更ができません・・。
変更するには はてなブログの場合、「HTML編集」をつかいます。慣れれば、カンタンにできますので、これを読んでぜひやってみてください！
ブログにメリハリがついて、オススメです(≧◡≦)❤️
文字の背景に色をつける
まず、背景に色をつける文字を書いたら、メニューから「HTML編集」をクリックします。
すると、HTMLが編集できる画面に切り変わります。背景に色をつけたい文字を含むこの部分を・・
HTMLで編集
<p>背景に色をつけたい文字</p>
<p><span style="background-color: #ffff99;">背景に色をつけたい文字</span></p>
背景に色をつけたい文字
このように、<p>～</p>のなかに、<span>～</span>を追加して文字を囲み、スタイルを適用（style="XXXX: XXXX;"）します。
「background-color」というのは背景色を指定するプロパティで、style= のあとにつづく「" と "」で囲むことで効果を発揮します。ほかにも、style="" で使えるものはいろいろありますが、代表的なものとしては
- 「
font-size」が文字の大きさ、 - 「
color」は文字の色
を指定することがきます。
カラーコード
また、背景が黄色の「#ffff99」の部分を「カラーコード」といいます。
カラーコードとは、Webページで色を表現するためのコードです。
「#」のうしろの６けたの１６進数の組み合わせで色を表します。たとえば、マンダリンオレンジ は「#f3981d」などで表すことができます。
こちらのサイトがよくまとまっていて、たいへん参考になります。指定した色の濃度違いや反対色など、バリエーションも調べることができます。
カラーコードの部分（#ffff99）を変更すれば、自由に色を変えられますので、お好みの色に変更してください♪
あとは、編集画面にもどって通常どおり作業を続ければ、ＯＫです！(„◕᎑◕„)⸝⸝꙳ｸﾞｯ。文字の背景にちゃんと色がついてるか、確認してくださいね。
おつかれさまでした！
おまけ：CSSでシェルを表現、ボタンで反映
コマンドプロンプト（Shell）のコードを表現するばあい、「はてな記法」で
>|shell| コマンドプロンプト cmd ||<
と記述する方法があります。
・プレビュー画面
ですが、これですと編集記法が変わってしまうので、「見たまま編集」や「HTML編集」は当然使えません。
また、『記事を書く』 で「はてな記法」を新しく別で開き、シェルの記法でコードを書いて、プレビューから「見たまま編集」に戻ってコピペする方法もあてのですが…。
どちらも少し不便に感じましたので、見たままのまま笑で、できる方法を考えてみました。※ブラウザの機能拡張を利用します。
まず、こちらのコードを『デザイン デザインCSS』に貼り付けて、『変更を保存』を選択してください。
CSSコード（Code embedded in GitHub）
つぎに、こちらの記事で紹介されている、プラグイン（拡張機能）をブラウザに追加します。
こちらは、はてなブログの記事執筆において、ボタン一つで文字を中央寄せにしたり、簡単にクラス指定したりすることができる便利なツールです。「Chrome Add-on for Hatena」といいます。
こちらが導入できたら、下記を実行してください。
シェル表記したい文字列を選択後、
- Chrome Add-on for Hatenaをクリック
- クラス名に「shell」と入力
- [Add Class] をクリックまたはエンターキーを押す
> python sample.py
> pip install matplotlib
いかがでしょうか？プレビューで確認すると、上記のように書式が反映されているかと思います。
「HTML編集」では、のように記述されています。
<p class="shell">> python sample.py<br />> pip install matplotlib</p>
コードを改行して続けたいときは、『Shift』+『Enter』で書式が引き継げますよ♪
noindexなハナシ
ここからは、記事タイトルに関係ない、雑記です；^ω^） 動画と広告だけの場合、アリ
「整理は大事。いろんな意味で。（散らかしっぱなしは、いけません）」
Tonight's Tune
Tonight's Pick
全シングル32曲に加え、“赤いシリーズ”のテーマ曲など話題のB面曲や引退後発表の「あなたへの子守唄」なども収録。
1.人にめざめる14才 としごろ
2.青い果実
3.禁じられた遊び
4.春風のいたずら
5.ひと夏の経験
6.ちっぽけな感傷
7.冬の色
8.湖の決心
9.夏ひらく青春
10.ささやかな欲望
11.ありがとう あなた
12.白い約束
13.愛に走って
14.赤い運命
15.横須賀ストーリー
16.パールカラーにゆれて
17.赤い衝撃
18.初恋草紙
19.夢先案内人
20.イミテイション・ゴールド
[Disc2]
1.秋桜
2.赤い絆(レッド・センセーション)
3.乙女座 宮
4.プレイバック Part 2
5.絶体絶命
6.いい日 旅立ち
7.美・サイレント
8.曼珠沙華
9.愛の嵐
10.しなやかに歌ってー80年代に向ってー
11.愛染橋
12.謝肉祭
13.ロックンロール・ウィドウ
14.さよならの向う側
15.一恵
16.あなたへの子守唄
17.美・サイレント (リアレンジ)
18.惜春通り (リアレンジ)
