【Stinger5】ワンクリックで挿入できる!文章に背景色をつけるカスタマイズ

スタイルシートにスタイルを登録する方法とタグを使って呼び出して文字列に背景をつけるカスタマイズを紹介します。

読みやすい文章にしよう

よく見えるphoto by akihito sakakibara

ブログを書いているなら多くの人に記事を読んでもらいたいですよね。
記事の内容はもちろん大切ですが、見やすさも大きなポイントです。

初心者の方にピッタリな記事を見やすくする文章(文字)装飾法を紹介します。

必須ではありませんが、この後紹介する方法が手軽に使えるように「AddQuickTag」のインストールをおすすめします。
面倒なタグや定型文を簡単挿入!AddQuicktag
スポンサーリンク

文字(文字列装飾)のテクニック

文章を際立てるには、テキストの色も大事ですが、長文だとくどくなります。そんなときは背景色をつけましょう。

文字列の後ろに背景色を付ける

1
このように特定の文字列の背景に色を付ける方法です。文字ばかりの記事に比べ見やすくて大きなアクセントになります。

準備とバックアップ

まずは、スタイルシートstyle cssを開いてください。

お使いのテーマがStinger5であれば、ダッシュボード → 概観 → テーマ編集 → スタイルシートです。

開いたらまずはバックアップをとりましょう。
今回はスタイルシートを修正するのでスタイルシートをバックアップしておきます。
エディタソフトにコピーしておけば十分だと思います。

<参考記事>cssカスタマイズ前の簡易的なバックアップの取り方

カスタマイズ

Stinger5はレズポンシブデザインですので、コードを挿入する場所に気をつけます。
PC、タブレット、スマホすべてに適応したいのなら

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) 

よりも上にコードをいれます。

<参考記事>これは!ログさん:Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!

挿入するコードはコレです。

.bgcoloryellow2 {
	background-color: #FFFA7C;

}

コピー&ペーストしてください。

b2

このようになります。
bgcoloryellow2のところは自分で好きな名前をいれてください。必ず半角英小文字で。
直前の「 . 」を忘れないように気をつけてください。

background-color: #FFFA7C; の「 #FFFA7C」のところが背景の色を表します。

色はこちらで選びましょう。CSS色見本

そして保存します。

この場合はこのように背景色が付きます。(自分でプレビューしたい時は先に下まで読んでください)

b3

見事背景色が付きました。でも、背景色の幅は文字と同じです。これでは少し味気ありません。

もう少しアレンジしてみましょう。

背景の幅を広げる

Padding 要素を使います。背景色幅を文字列から離す時に使います。

例えば padding: 10px; であれば上下左右文字列から10px離れます。
これを加えると

.bgcoloryellow2 {
	background-color: #FFFA7C;
	padding: 10px;

}

このようになります。

b4

幅がでて背景らしくなりました。しかし背景色は指定した距離を保って四角を形成していますので、ちょっと硬いイメージです。印象を変えるため角を少し丸くしてみましょう。

背景の角を丸くする

Radius 要素をを使います。

border-radius:5px; 5pxが丸みをあらわしています。

radius5px

これを加えると

.bgcoloryellow2 {
	background-color: #FFFA7C;
	padding: 10px;
	border-radius:5px;

}

このようになります。

b5

ちょっと分かりにくいので丸みを強くしてみます。
5pxから15pxに変えてみます。

.bgcoloryellow2 {
	background-color: #FFFA7C;
	padding: 10px;
	border-radius:15px;

このようになります。

b6

少し軟らかい印象になりました。

さて、これでスタイルシートに背景をつけるためのコード登録ができました。

実際に使うときは、タグを使って呼び出します。

呼び出すときのタグのつけ方

さて、スタイルシートからタグを呼び出して見ます。

投稿画面を開きます。

そして好きな文章を入力します。

”文字列に背景色をいれてみよう!” 

といれてみます。

装飾無しではこのように表示されます。

b8

登録したコードを呼び出します。文章をこのようなタグで囲みます。

<div class="(登録した名前)”> 文章 </div> 

登録した名前はスタイルシートに半角英数字で登録したものです。先頭の「.」は、いりません。

今回名前をつけた「.bgcoloryellow2」だとこのようになります。

b12

毎回タグを打ち込んでもいいのですが、AddQuicktagを使うと簡単に呼び出せるのでとても便利です(^_^)

一連の流れをまとめると
①スタイルシートにスタイルを登録
②投稿記事作成時にタグを使ってスタイルを適用する

まとめ

いかがでしたか?文章の背景に色をつけるだけで印象がグッとかわります。

使いすぎは逆効果ですが、強調したいところやごちゃごちゃしがちなところにぜひ使ってみてください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク