無料ブログはココログ

« ホームページビルダーV17で作成したhtml文書を、ホームページビルダーV11で読み込むと文字化けする(解決) | トップページ | 我が家の近所で写した野生のスミレ »

2016年4月 2日 (土)

KentWebのTopicsBoardのテンプレートの色の変え方、記事本文のバックグラウンド(背景)色の変更について

KentWebのTopicsBoardの本文記事の背景はデフォルトでは白ですが、ちょっとまぶしいので、背景色を変えられないか、いろいろ試してみました。私はタグの知識が全くないので、ホームページビルダーを使ってやってみたところ、テンプレートの色を変えたり、本文記事の背景色を変えることができましたので、私自身の覚え書きのために記載します。私は試していないのですが、無料ホームページ作成ソフト「Homepage Manager(ホームページマネージャー)」なども使えるのではないでしょうか。

TopicsBoardの説明には、「全画面テンプレート式のため、レイアウトやデザインを自由に修正することができます。」と書いてあるのですが、やり方が全く分かりません。KentWebで質問したところ、てけてん様からテンプレートファイル(tmplディレクトリ(フォルダ)内のhtmlファイル)やスタイルシート(style.css)を編集して下さい。」とのヒントを頂きました。

ホームページビルダーを使ってのやり方を記載します。

1.私のホームページビルダーはV17です。まず、TopicsBoardのTmplフォルダーの中にあるbbs.htmlを読み込みます。20160402_08_53_01_2

2.次に、表示メニューから、スタイルシートマネージャーをクリックします。すると下の画面になります。
外部スタイルシートの追加をクリックします。

20160402_08_54_18_02

3.外部スタイルシートの選択ダイアログが出ますから、参照をクリックして、TopicsBoardの下層に置いてある、style.cssを選択します。リンクに◎を付けます。OKをクリックします。

20160402_08_55_17

4.ホームページビルダーの画面が下図のように変ります。

20160402_08_56_18

5.ここから色の変更作業に入ります。例として、画面の左右にある灰色の色を変えてみます。body.td.thを選択し、編集ボタンをクリックします。

20160402_08_57_19
6.スタイルの設定ダイアログが出ますので、デフォルトの背景は、#DDDDDD(灰色)になっていますので、ユーザー定義の右側にある下向きの矢印をクリックして、好みの色に変えます。変えてからOKをクリックすると、左右の灰色が指定した色に変ります。

20160402_08_57_20

 
7.このようにして、下図の右側にあるスクロールバーで下の方に動かすことによって、色の変更は容易に出来ます。デフォルトのデザインがしっかりしていますので、あまり変える必要はないと思います。

20160402_11_15_21

8.変更が終わったら、画面の下に、下図がありますので、OKをクリックします。
20160402_08_59_03

10.素材ファイルをコピーして保存ダイアログが出ます。ここはそのままOKをクリックしますと、bbs.htmlが入っているtmplフォルダーの中に入ってしまいます。TopicsBoard.zipファイルを解凍して出来たstyle.cssはtopicsフォルダーの直下にありますので、そこに置くようにすべきだと思います(これは私の思い込みで、tmplフォルダーの中に入れてもいいのかも知れません?)

20160402_09_00_04_2


8.私が変更したかったのは、記事本文のバックグラウンド(背景)の方です。デフォルトは白ですが、ちょっとまぶしいので、#FFFFDAという淡い茶黄色に変えることにしました。

9.まず、ホームページビルダーで白紙を出し、そこに記事を書きます。

20160402_09_03_05
10.表示メニューから、スタイルシートマネージャーをクリックします。すると下の画面になります。

埋め込まれたスタイルシートを選択して、追加をクリックします。

20160402_09_05_06

11.スタイルの設定ダイアログが出ますので、色と背景タブをクリックして、背景色が標準になっています。その右側にある下向きの矢印をクリックして、ユーザー定義を選択します。

20160402_09_06_07

12.色が選べる画面が出ます。

20160402_09_07_08

13.色は好みで選びますが、例えば#FFFFDAという淡い茶黄色を選んでみます。

20160402_09_09_10

14.下図のようになります。OKをクリックします。

20160402_09_10_11

15.スタイルシートマネージャーが出て、背景色が、埋め込まれました。

20160402_09_11_12

16.画面の右側に、bodyという文字があり、これをクリックすると、下に、background-colorが出て、#ffffdaという色が埋め込まれているのが分かります。

20160402_09_13_14

17.本文記事の文字を太くしたり、文字の色を変えたりするのは、Wordなどと同じで非常に簡単にできます。

20160402_09_15_15

18.記事の投稿フォームの画面です。17項で最終的な文面を作成したら、それを全部コピーします。HTMLタグ有効にチェックを付けて、17項でコピーした記事を、本文欄に貼り付けます。送信するのボタンをクリックすると、本文の背景色が変った記事が投稿されます。

20160402_09_17_16

« ホームページビルダーV17で作成したhtml文書を、ホームページビルダーV11で読み込むと文字化けする(解決) | トップページ | 我が家の近所で写した野生のスミレ »

パソコン・インターネット」カテゴリの記事

コメント

http://kamagrabuy-jelly.org/ - Kamagra Jelly For Sale Celebrex Generic http://synthroidonlinebuy.net/

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/150691/63428491

この記事へのトラックバック一覧です: KentWebのTopicsBoardのテンプレートの色の変え方、記事本文のバックグラウンド(背景)色の変更について:

« ホームページビルダーV17で作成したhtml文書を、ホームページビルダーV11で読み込むと文字化けする(解決) | トップページ | 我が家の近所で写した野生のスミレ »

2017年3月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31