こんにちは！シンプルライフナビです🤗
ブログをはじめてしばらくすると、他の方のブログを見る機会が増えると思います。
すると、いろんなデザインが駆使されていて、いつか自分も使えるようになりたいな〜と思うことありませんか？🧐
ブログの表現力（デザイン）を向上させる方法
ブログ超初心者だった私が*1、文字の背景に一部だけ色をつけてみたい、ちょこっとだけカスタマイズしてみたいという方の参考になるよう、私がしていたことをご紹介します。
いつも使っている記事作成画面だけでできちゃいますよ！😀*2
（はてなブログ利用者の方以外でも、このページに記載の追記情報をHTMLにコピペすればそのまま使えると思います。）
CSSを利用する場合はデザインCSS画面の操作が必要
文字に背景色を付けるなどの装飾をするには、一般的にはCSS*3を使うことが多いと思います。しかしながら、CSSを加工・追記するとなると「はてなブログ」では「デザインCSS」をいじる必要があり、不要な修正や変更、あるいは削除をしてしまわないか不安な方もいると思います😖
デザインCSSの画面を触るのは少し不安だよ〜
ふだん使っている記事作成画面だけでも文字に背景色をつけることができるよ！
そこで、記事を作成する際に、CSSには触らずにカンタンに「記事作成画面だけで背景色をつけて文字装飾ができる方法」を、ご紹介します。
超初心者には多少難しく感じる部分があるかもしれませんが、知っておくとブログの表現幅が広がりますので参考にしてください。
超初心者でもできる文字の背景色設定（CSS操作不要）
具体的にはHTMLに少し手作業でコードを追加します。
それでは早速やってみましょう！😃
文字カスタマイズの基本「背景色設定の方法」
まずは、文字の背景に色をつけてみましょう。
例文は、次のとおりとします。（薄いグレー背景の部分です）
HTMLは日本語や全角文字を使うことはできません。
例文を記述してみよう
まず、「編集」見たままの画面で例文を打ち込みます。
そして「HTML編集」の画面を開いてみましょう。
次のようになっていると思います。
（いわゆるHTML形式の記述になっています。）
<p>HTMLは日本語や全角文字を使うことはできません。</p>
背景色と文字色を指定してみよう
それでは、背景色を黄色にして、文字を赤色にしてみましょう。
次のように記載します。（青色が追加する部分です。pとstyleの間の半角スペースを忘れず、また必ず英数半角文字で入力してください。（以後同じ））
<p style="background: yellow; color: red; ">HTMLは日本語や全角文字を使うことはできません。</p>
backgroundが背景色を決めるコード、colorが文字の色を決めるコードになります。
入力後に「プレビュー」で見てみると、次のように表示されます。
＜プレビュー結果＞
HTMLは日本語や全角文字を使うことはできません。
見た目を調整しよう①
なんだか左側が窮屈ですね。1文字分空白を入れましょう。
次のように記載します。（青色部分はさらに追加した部分です）
<p style="background: yellow; color: red; padding: 1rem;">HTMLは日本語や全角文字を使うことはできません。</p>
paddingはこの場合文字を中心とした余白の幅を決めるコードです。1remなら1文字、2remなら2文字分になります。
文字を中心とした四方の周りに1文字分の余裕があるようになります。
＜プレビュー結果＞
HTMLは日本語や全角文字を使うことはできません。
見た目を調整しよう②
ついでに角を丸めてみましょう。 次のように記述します。
<p style="background: whitesmoke; colur:red; padding: 1rem; border-radius:10px;"HTMLは日本語や全角文字を使うことはできません。</p>
border-radiusという構文を使うと角が丸まります。そういう呪文があると覚えておきましょう🤠
10pxは角マルの半径で、数字が小さいほど角（カド）は四角いままになります。数字を大きくすると丸みが大きくなります。
背景色の角が丸まりましたね。
HTMLは日本語や全角文字を使うことはできません。
学んだことを利用した作成例と解説
上記で試した文字に背景色をつけて、角を丸めるのを使うと、下記のような記事を作成することができるようになります。
作成例
〜ここから作成例〜
今週のおもしろ体験
沖縄の○○スパに行ってきました！
行ってよかったことをご紹介します。
ここがよかった！
沖縄といえば、青い空、青い海。屋根の上にはシーサー。
そして赤い花・・・そんな環境にある○○スパ！
〜ここまで作成例〜
作成例のコード表示
この部分のHTMLコードの記載、どのようになっているかわかりますか？
HTML編集の画面をみてみると、このようになっています。
<p>
<span style="font-size: 150%;">
<strong><span class="blogicon-search"> </span>
今週のおもしろ体験</strong></span>
</p>
<p>沖縄の○○スパに行ってきました！
</p>
<p>行ってよかったことをご紹介します。
</p>
<p><img src="XXXX(画像イメージのアドレスは省略しています)" alt="" title="" class="hatena-fotolife" itemprop="image" />
</p>
<p style="background: papayawhip; color: dimgray; border-radius: 8px; padding: 1rem;">
<span class="blogicon-good lg"> </span>ここがよかった！
<br />沖縄といえば、青い空、青い海。屋根の上にはシーサー。
<br />そして赤い花・・・そんな環境にある○○スパ！
</p>
※「 」の部分は一度プレビュー画面にすると赤の点（・）になりますが、書き換えずにそのままでOKです。
※画像部分（<p><img~~></p>）を除けば、上のコードをコピーしてHTML編集画面に貼り付けすればそのまま使えます。あとは文字情報や色の指定（カラーコード）を書き換えてください。
うまくいかない場合は「;」が抜けていないか確認してください。アイコンがうまく表示されなかった場合、もう一度上のコードをコピペして利用してください）
※下線は今回ご紹介している部分の内容の応用部分です。HTML編集画面では実際には下線や色は付いていません。
コードの解説
<p>〜</p>が一つの文章の塊なので5つの部分に分けられますね。
最初の<p>〜</p>の部分は、フォントのサイズが150％になっていて、strongで挟んだ部分が太字になっています。
<span class="blogicon-XXXX"> </span>の部分は、はてなブログユーザーが使えるアイコンフォントです。わたしの過去の記事を参考にしてください。
（使えるアイコンは、こちらの記事を参考にしてください）
4つ目のimgを含む部分は画像を挿入した場合に自動作成される部分です。
上記コードの記述の青色部分が今回試した方法の応用部分です。
作成例で背景に色をつけた部分が5つめの<p>〜</p>で挟まれた部分になります。
<p></p>で挟まれている部分は、文章を先に打ち込んでおいて、あとからHTML編集画面でstyleを個別に指定してあげると、いろいろ表現ができるのがわかりますね！
なお、緑色部分は色の名前です。
原色大辞典のHTMLカラーコード（色見本）をみて、コードの緑色部分に好きな色を指定してください。
なお、背景色をつける部分で文章を任意の位置で改行したい場合は、Shiftキーを押しながらリターンキーを押します。(いわゆる行間の狭い改行にする。)
その場合、改行位置は<br/>で記述されます。
普通のリターンキーによる改行の場合、そこで文章が切れ、<br/>ではなく、</p>になり、そこで背景色の適用も終わってしまいますので注意です。
この方法で指定した「style」はひとつの<p>〜</p>の間の範囲でしか適用されません。
先に文章をバババッと書き、HTML画面で文字装飾したい部分の<p>〜</p>部分に、上でした内容を当てはめればいろいろできますよ！
CSSは使わずHTMLだけを使った文字装飾のまとめ
いかがだったでしょうか。
<p>〜</p>で囲まれた内容の表現カスタマイズが簡単に出来そうじゃないですか？
もう一度まとめると、次のようになります。
style="
background:背景色;
color:文字の色;
padding: 文字と背景色の幅;
border-radius:背景色の角を丸める数値;
"
<p>〜</p>の部分の最初のpの後ろに、このstyleを指定してあげるとよい、ということです。*4
今回ご紹介した内容は、個別のページで個別の部分を装飾する方法になります。
一回ずつ指定するのが面倒だったり、記事が違っても同じ装飾を使いたいという場合（＝全記事に簡単に装飾を反映する場合）には「カスタマイズCSS」と紐付けして装飾内容を指定してあげるという方法になります。
今回の基本的な仕組みを知っておくと、HTMLだけの装飾から次のステップとしてCSSを使う装飾を考えるときにも、役に立つと思います。
HTMLやCSSを少し知りたい初心者におすすめの本です。
少しマニアックな話になってしまいました…
最後までお読みいただき
ありがとうございました😊🌿
追記：さらにCSSの使い方を知りたい方は、こちらの記事を参考にしてください。
