ニャンコボタンで文字に装飾をつけましょう

本文のタイトルに見出し２を設定するところは、わかりましたでしょうか？
説明不足の部分が多いので、心配なのですが、いままでのところを、すべて理解しなくても問題ないと思いますので、とりあえず進みますね♪

文章の中で文字に装飾をつける方法
例題として、↓この文章を使います。(なんども書いてますが文章に深い意味は、ありません。)

---ここから---
まさに、必要は発明の母　所詮この世は色と欲
技術の進化に一番貢献するのは、理想ではなく、常に欲望と戦争なのか？
人間の根源的な欲求に応えるものだから
ああ、人間。されど人間。
エロって意外に生きるエネルギーだったりするんですわこれが。
---ここまで---

では、最初の１行目にスタイル(文字の装飾)を設定しますよ。
まず、スタイルを選択したい部分の文字をマウスでドラッグします。
マウスの左ボタンを押しながら引きずるやつです。ウィンドウズの基本操作ですね。

"まさに、必要は発明の母　所詮この世は色と欲"←この部分です(文字色反転しましたね)
続いて文字を選択した状態でニャンコボタンをクリックします。
んっ？ニャンコボタンが無いってかたは、↓こちらを参照してください。
ホームページビルダーユーザー定義の設定方法のページを開いてみる。
　　(後で、このページに戻ってきて欲しいので、別窓で開きます。)

文字を選択した状態で、↓ニャンコ(猫)ボタンをクリックすると

↓こんな画面が出ますのでクラス(C)の▼をクリックして適用するスタイルを選択します。

一番上の a_Midashi01 を選択してＯＫを押します。


↓そうすると、こうなりませんか？(注：テンプレートでは、アイコンの形は、違うかもしれません。)
　　---スタイルシート適用後---

まさに、必要は発明の母　所詮この世は色と欲
↑このように、文字の左側にアイコンが表示され、さらに文字の色と太さが変わっていれば成功です。パチパチ(拍手)
そうです、このサイトで、何度も見慣れている見出しですね。

いままで文字に↓こういう装飾をするには、HTMLで行なっていました。
ホームページビルダーの場合だと、文字の左のアイコンは、画像を選んで貼り付け(画像の挿入)、文字のサイズを変える(Ａ文字サイズ拡大)→色を変える(フォントの変更→色指定)→太字にする(Ｂボタン)という４つの工程をやっていたのが、このニャンコボタンで簡単に文字を装飾できてしまういうのがおわかりいただけたでしょうか？

いままでやっていた、文字を太くして→大きくして→色をつける、のほうが大変だと思いませんか？　そして、この方法だとスタイルシートを使っているという感覚は無いと思います。

もうすこし練習
お次は、すこしだけ文章内で、文字を強調させたい部分にスタイルを設定します。
" 常に欲望と戦争なのか？"←この部分だけを選択した後に




←ニャンコボタンをクリック



スタイルの設定で上から４番目のb_Moji01を選択してＯＫを押します。
すると、こうなります。

---スタイルシート適用後---　　　　　　　　　　　　　　　　　↓ここだけ色が変わりましたね
"技術の進化に一番貢献するのは、理想ではなく、常に欲望と戦争なのか？"

どうですか？　色が変わって文字が少しだけ強調されましたね。
もっと強調したい場合は、Bボタンで太字(ボールド)にすると良いでしょう。

さらにもっと強調したい場合
A▲ボタンで(ニャンコの左側のやつ→)
文字を大きくしてもいいのですが、やりすぎるとダサくなるのでほどほどにしときましょう(笑)


見出しと文字のスタイルは、それぞれ２つありますが、基本的に使うのは一つです。
いちばん上と、上から３番目だけを使うだけで、済んでしまうと思うのですがどうでしょうか？

魅力的な言葉にしましょう
ここまで、できたら名前を付けて保存しましょう。
ページにタイトルをつけるのを、お忘れなく。
↑見出しのタイトルじゃなくて、ページのタイトルですよ。

【編集】→【背景/文字色の設定】→いちばん左のタブの【ページ情報】でページタイトルとなってる部分です。　魅力的な言葉にしましょうね♪
わたしの場合、ページタイトルをつけるのは、SEO的に有効というより、名前をつけて保存したときに、同名ファイルになって上書きにならないようにするくらいで考えてます(笑)

さらに、さらに強調したい場合は？
文字の背景に色をつける方法
↓こんな感じ。　これは、かなり極端ですね(笑)


まさに、必要は発明の母　所詮この世は色と欲


まず、スタイルの設定で上から３番目のb_Moji01を選択してＯＫを押します。
次にスタイルが適用された文字の上で右クリック→【スタイルの設定】→右下の現在のタグのみにスタイルを設定の【編集(4)】をクリック→上の左から２番目の色と背景のタブをクリック→【背景色▼】で好きな色を選ぶ。(上の文字は、文字の大きさと前景色も変更してます)

使いすぎないようにしましょうね♪
テンプレートには、標準で他にもいくつかスタイルが設定されています。

なんだろ？

どんなスタイル？

それでは、どんなスタイルが設定されているかを見てみましょう。


前に見てたページに戻る