はてなブログ 収益化&デザインガイド

はてなブログの収益化とデザインカスタマイズを解説するブログ

~ お知らせ ~
『アフィリエイト(ASP)で収益化』
解説マニュアルできました!

 

-- Affiliate Know-How --

ブログで収益を得るにはどうするの?

はてなブログProで手軽にできます

おすすめのアフィリエイトの始め方も紹介

稼げるノウハウをお伝えします

-- Blog Design  --

かっこよく、おしゃれなサイトにしたい

はてなブログProならカスタマイズできます

ブログのカスタマイズにハマっても安心

楽しくなるデザインをご紹介します

-- Recommended ASP --

ブログを始めたら登録すべき おすすめASPを解説

丸ボタンを押すと各ASPの解説記事になります

A8.net A8.net
もしもアフィリエイト もしもアフィリエイト
バリューコマース バリューコマース
Googleアドセンス Google AdSense
本サイトはプロモーションが含まれています

-- New Articles --

簡単!はてなブログの文字に背景色や半透明色をつける(色変更・コピペOK)

文字に背景色や半透明色をつける方法

文字に背景色や半透明色をつける方法

はてなブログを始めたばかりの初心者の頃に悩んだのが、文字に背景色をつける方法

文字色の変更は簡単だけど、背景色は?

文字色の変更は簡単だけど、背景色は?

文字の色は「見たまま編集画面」で「文字色アイコン」から簡単に変更できるけれど、文字の背景色はアイコンで変更する方法がないんですよね。

  • 書いた 文字の一部に背景色 をつけたい。
  •  文字の背景の色 をたくさん使い分けたい。
  •  初心者でも簡単に背景色 を使いたい。
  • コピペで使えるコードある?

この記事は文字の背景色をカスタマイズしたい人の悩みを解決します!

実はブログ初心者でも、簡単に文字の背景に色をつけることができるんですよ!

さっそく具体例を見ていきましょう。

はてなブログの記事の文字の背景に色をつける方法

文字の背景色をつけてブログをデザイン

文字に背景色をつけてブログをデザイン

この記事では、個別の記事の文章の文字の一部に背景色をつける方法を解説します。

繰り返しいろんな記事で使う、蛍光ペン風のマーカーの設定方法は、『はてなブログに蛍光マーカー(下線)を設定する』の記事を参考にしてください。

「見たまま編集」画面の「HTML編集」でHTMLコードを使って文字の背景に色をつける

はてなブログ初心者の人は、見たまま編集の画面で記事を作成している人が多いと思います。私もそうです。

一通り記事の文章を打ち込んだ後、 色をつけたい部分 に次のHTMLコードを使えば、文章の一部に背景色がつきます。

 HTMLコード
<span style="background: #ffd700;">背景色をつける部分</span>

コードの中の「#ffd700」は「カラーコード(色コード)」です。あとで詳しく解説します。

では、具体的に文字の背景に色をつけてみましょう。最初は手順を確認したあと、コードをコピペしながら進めていけばOK!

文字に背景色をつける方法を、図と例でわかりやすく解説

文字の一部に背景色をつける手順は次のとおりです。

STEP
記事本文を作成する

記事の文章を書いて、文字に背景色をつけたい部分を決めます。

例として「書いた文字の一部に背景色をつけたい」の文字の一部に背景色をつけていきます。

<見たままモード>

見たままモードで文章を作成する

まず、見たままモードで文章を作成する

 

<HTML編集画面>

HTML編集画面の表示を確認する

HTML編集画面の表示を確認する

 

<プレビュー画面>

プレビュー画面の表示を確認する

プレビュー画面の表示を確認する

 

まだ色をつけたい部分に背景色はついていない状態です。

上記画面の「書いた文字の一部に背景色をつけたい」の文字の一部に、 オレンジの背景色 をつけてみます。

STEP
HTML編集画面にして、背景色をつけたい文字の部分をHTMLコードではさむ

HTML編集画面にして「書いた文字の一部に背景色をつけたい」の文字のうち、「文字の一部に背景色」の部分を先ほどのコード<span style="background: #ffd700;">と</span>で挟みます。

<HTML編集画面>

背景色をつけたい部分をspanで挟む

背景色をつけたい部分をspanで挟む

つづいて、うまい具合に文字に背景色が設定されたかどうか確認します。

STEP
完成!プレビュー画面で表示イメージを確認する

プレビュー画面にして、表示イメージを確認してみましょう。

下の画像の通り、文字の背景色が設定されたことが確認できます。

<プレビュー画面>

指定した部分に背景色がついた

指定した部分に背景色がついた

文字の背景に色がつきました!やったね!

次は、いろんな色を使う方法を解説していきます!

文字の背景色にいろんな色(カラーコード指定)を使う方法

背景色の多色展開方法を解説

背景色の多色展開方法を解説

それではもう一度HTMLコードをみてみましょう。

 HTMLコード
<span style="background: #ffd700;">背景色をつける部分</span>

コードの中の「#ffd700」が背景色を決める「カラーコード」(色コード)でした。だから、ここに好きな色を指定すれば、多数の背景色指定(色の変更)が可能です。

文字の背景にカラーコードで色変更をしてみた実例

さきほどの例文を使って、多色利用(色変更)の実例を紹介します。次のように「カラーコード」(色コード)を指定してみましょう。

 HTMLコード
<ul>
<li>書いた<span style="background: #ffd700;">文字の一部に背景色</span>をつけたい。</li>
<li><span style="background: #87cefa;">文字の背景の色</span>をたくさん使い分けたい。</li>
<li><span style="background: #ffc0cb;">初心者でも簡単に背景色</span>を使いたい。</li>
</ul>

あなたの「はてなブログのHTML編集画面」にコピペしてみてもOK!

<プレビュー画面表示イメージ>

  • 書いた 文字の一部に背景色 をつけたい。
  •  文字の背景の色 をたくさん使い分けたい。
  •  初心者でも簡単に背景色 を使いたい。

3色表示されましたか?コピペするだけで簡単に色を変更して使えそうでしょ!

カラーコード(色コード)を探す方法について

カラーコード(色コード)を変えればいろんな色が使えることはわかったけど、カラーコード(色コード)ってどうやって探すの?という声が聞こえてきましたよ。

これも簡単です。

私が「カラーコード(色コード)」を確認する時によく使うサイトがこちら。

画像引用:色大辞典

画像引用:www.colordic.org

色の名前の下に「カラーコード(blackなら #000000)」が表示されているので、#XXXXXXの部分をコピーして使えばOK。

半透明色も使ってみたい人むけのカラーコード(色コード)解説

大体の人はここまでで大丈夫だと思いますが、中には淡い色や半透明色が使いたい人もいると思います。実は私も半透明色をブログで使っています。

半透明色を指定したい場合は、次のようにHTMLコードの一部を変更してください。コピペして使ってみるとわかりやすいですよ。

 HTMLコード
<p>
例えば、<span style="background: #ff4500;">オレンジレッド(orangered)</span>の場合、<span style="background: rgba(255,69,0,0.5);">半分半透明にした</span>場合、<span style="background: rgba(255,69,0,0.1);">90%透明にした</span>場合で、だいぶ色の印象が違ってくると思います。
</p>

例えば、オレンジレッド(orangered)の場合、50%透明にした場合、90%透明にした場合で、だいぶ色の印象が違ってくると思います。

  • 50%透明にする場合は、HTMLカラーコードの色パネルをクリックすると、R:255 G:69 B:0という細かいカラーコードがわかります。
  • この数値を、rgba(R,G,B,A)のそれぞれ、R,G,B部分に指定し、A部分は「半透明なら100%から50%引いた値」「90%透明なら100%から90%を引いた値」を入れればOKです。
  • rgba(R,G,B,A)部分の数値を変えれば、色変更も簡単にできます。

まとめ|文字の背景に背景色や半透明色をつけるのは簡単!

いいデザインのブログにしよう!

いいデザインのブログにしよう!

「文字の背景に色をつける方法」を実際にやってみたら簡単にできたと思います。半透明色も使いこなせるようになりましたね!

(さすがに、文字の色変更みたいにボタンで簡単には変えられないですが…)

ブログは記事作成も楽しいけれど、カスタマイズして育てるのも楽しいよね!

文字の背景色や、カラーコードの使い方がわかるとブログのデザイン力も上がりますよ。

はてなブログのデザインや収益化の参考に、当ブログの他の記事も参考にしてください!