俺育て!虎ヘッド風味:ver2.3

ねこぱんち日記:カスタマイズ(040727)
くくさんののっぺりブログ:ブログ人でコメントをツリー化

いや、もう、ちょっと前から、あちこちのブログでツリー化したコメント表示を見まして、ああ、いいなぁ。と思ってましたら、
なんと、できちゃうんですね!
しかも、CSSをいじらないでできちゃうんですよ!
びっくりしますよ!

しかも、20分かかりませんでしたよ!

もう、なんかね、すごいのね。
みんなすごいよ!なんで、こんなこと考えついちゃうのか、もう尊敬しちゃいますよ。

知識もなんにもいりません。ただ、お手本どおりにやってみましょう。

できちゃいますから。
スポンサーサイト
もともと、CSSをいじりたいと思った理由は、
メインの文章の部分をもう少し広くできないか?
と思ったからなんです。
これができたら、とりあえず満足だったんですけど、色々いじれるようになったらちょっと楽しくなってしまいました。

で、まあとりあえずstyles.cssを右クリックしてホームページビルダー7を呼び出します。
表示部分のサイズを変更するのはここからです


#containerを開きます。【位置】タブを開きます。
そこで、『幅』が指定されていますので、その数値を大きくすれば、表示部分が広がります。
私は900ピクセルにしてみました。
サイドバーの幅がそれぞれ200ピクセルですので、本文の部分を500ピクセルまで広げることができます。
#leftはサイドバー左
#rightはサイドバー右
#centerが本文

というようになってます。
それぞれの設定で、背景色などを変えることもできます。
#centerの【位置】タブで『幅』を500ピクセルに変更してみました。
本文のスペースが広がりました。

とりあえず、ここまでできたんで、私としては満足しちゃってます。
でも、ヒマを見て色々いじってみて、何か面白そうなことができたらまたご報告したいと思います。

実は、まず最初にいじったのが実は文字からでした。
リンクの文字がいまいちわかりづらい。リンク文字の下線がどうも邪魔。
そのへんを解消してみました。
まずは、CSSファイル右クリックしてホームページビルダーで開きます。
スタイルシートマネージャが開きます。

【A(リンク)】をダブルクリック。
ちなみに、シングルクリックすると、下の欄に、定義されてる箇所が表示されます。
今現在のスタイルシートで、何が定義されてるかはそこで確認できます。
【フォント】のタブをクリックすると【文字飾り】の部分の『下線』のチェックボックスにチェックが入ってます。
それを解除して「文字飾り なし」にしてOK→適用でリンク文字から下線が消えます。

A:LINK
A:VISITED
A:ACTIVE
A:HOVER

は、それぞれ、マウスでクリックしたとき、マウスポインタを文字の上に置いたとき、などの条件下での色指定ができます。
この部分は、前景色だけ指定していった方が良さそうですね。
背景色を指定することもできますので、マウスポインタを置いたときだけ、背景色がちょこっと変化するくらいのいじりかたならあまりうるさくならないかも。
私の場合は、まあ、あまりうるさい色にならないようにやってみました。

H1見出し1
H2見出し2
H3見出し3

ですが、H1はタイトル、H2はサブタイトル、H3は各記事の見出しに対応してます。
私の場合は、
H1の背景に少し画像を入れて、【文字のレイアウト】のタブの『水平方向の配置』の中央揃えに設定しました。
H2は、もともとHTMLタグで黄色にしてたので、そのまま【文字のレイアウト】→『水平方向の配置』の中央揃えに設定
H3は、背景色を少しつけてみました。

まあ、私は淡色が好きなんですけど、無難ですよね。
原色をバリバリ使って冒険してみてもいかもしれないけど、それを見やすくまとめる才能はないかも・・・。

設定を変更したら、【適用】を忘れずに。
画像を挿入したら、必ずWEB上にアップし、その画像のアドレスを【背景画像】の部分に書き込むことも忘れないでください。
出来上がったCSSファイルをWEB上にアップすることも忘れずに。



前の記事の続きです
まいった!
私は自営業なもんで、仕事の合間に文章を打ってたりするんですけど、最近うちの子が、パソコンをいたずらしてるみたいなんですわ。
で、仕事してる間に、どうやら前の記事を公開されてしまったらしいんですわ。
まあ、文章的に区切りがいいところで終ってたからいいんですけど。

さて、本題ですが、
背景の色を変えることができたら、なんか壁紙なんかを挿入したくなってきます。
そのときはこの画面の

【背景画像】の部分に、挿入したい壁紙のアドレスを入れてあげればいいわけです。
ただし、注意しなければいけないのは、ホームページビルダー本体の仕様であれば、パソコンのどこから画像を持ってきても、ちゃんとしかるべきフォルダにコピーしてくれますが、スタイルシートマネージャはそこまで親切じゃありません。
あらかじめ、使用したい壁紙を、わかりやすいフォルダにコピーしておくのがいいと思います。

もう一つ重要なことは、
【背景画像】の部分に書き込むアドレスは、必ずWEB上のアドレスでなければいけません!
最初に準備してもらったサーバースペースに、挿入したい壁紙のデータをアップします。
私の場合、etc01というファイルをwww1.ocn.ne.jp/~susibar/にアップしましたので、
http://www1.ocn.ne.jp/~susibar/etc01.jpgというアドレスを書き込みます。

更新されたCSSファイルをブログに反映させるには、今のところ以下の方法しかありません。
あそぼ~!スタイルシートのリンク方法
肝心な部分のみ抜粋します
</h2>
<link rel="stylesheet" type="text/css"
href="http://からはじまるCSSファイルをアップしたアドレス ○○.css">
<h2>

この記述をブログ人の編集画面の『サブタイトル』の部分に書き込みます。
更新したCSSファイルは、すでにWEB上にアップしてあることが前提です。

これで、WEB上のブログのページに新しいスタイルシートが反映させられます。

『ホップ』コースより上のコースにはファイル管理の機能があるんですけど、そこにCSSファイルをアップしても、反映するのは一時的で、すぐにもともとのCSSに書き換えられてしまうのです。
簡単にはCSSをいじらせないぞ!って感じですね。
いやいや、批判はやめたんだ・・・。何かあってもいつでも元通りの安心設計ですね!
もとのブログのデザインに戻したければ、サブタイトル欄に書き込んだ記述を消せばはいすぐ元通り。

というわけで、まずはいじってみてください。
さてさて、まずは、自分のブログがもともとあると思いますので、それを前提にお話します。

まずは、自分のパソコンのどっかにフォルダを作って適当な名前をつけます。
私は『CSS_TEST』って名前をつけました。
そこへ、自分のブログを【ファイル】→【名前をつけて保存】でまるごと保存してしまいます。
フォルダの中にはHTMLファイルと、もう一つ○○.filesというフォルダができてるはずです。
で、ホームページビルダーを起動させて、そのHTMLファイルを読み込んでみますと

このようになってしまいます。
もう、なんか、わけわかんない漢字がいっぱい・・・。
力技は通用しないか・・・と一度はあきらめたんですけど、HTMLファイルをブラウザで読み込んだ場合はちゃんと表示されるわけだし・・・、
と思い、保存したフォルダを開いて○○filesを開いてみますと【styles】というファイルがありました。
それが、CSSファイル。
で、それを右クリックして『プログラムから開く』→『プログラムの選択』→『ホームページビルダー7』という具合にやってみますと、出ました!

スタイルシートマネージャが単独で開きました。

そこから、まあ、あれこれ半日以上いじってみたんですけど、その過程はおいといて・・・。途中、うちの子のとんでもない妨害があったりもしましたけど・・・。
まあ、いじくりまわしてどうしようもなくなったら、全部削除して、もう一回ファイルを保存しなおせばいいんですけどね。

で、壁紙を変更してみます。
壁紙は、スタイルシートマネージャの一番上の『BODY』をダブルクリックします。
すると

この画面になりますんで【カラーと背景】のタブを選択してください。
「前景色」は「標準」のままにしといて、
「背景色」をクリックしますと、パレットが出てきます。ユーザー定義を選択すると、より細かいパレットが出てきます。
それで色を指定して、OKにして、【適用】をクリックします。
ブラウザでHTMLを表示させると、ブログの画面の外側の色が変化しているはずです。
変化してないときは、ブラウザの【更新】ボタンをクリックしてみてください。

これで、気分によって、壁紙を好きな色にチェンジすることが可能になりました。
すいません。ごめんなさい。
まず謝っておきます。
知識の無い者が、プログラムをいじる場合、やはりツール頼みになってしまうわけです。
で、結局、うちにあったIBMホームページビルダー7を使うことにしました。
多分、最近のホームページ作成ツールには『スタイルシートマネージャ』のようなCSSをいじれるツールがついているんじゃないか?と思われますが、どうなんだろ?
フリーのツールでCSSが直接いじれる何かいいのがあったら、どうかご紹介ください。

また、このカテゴリでは、まず『はじめの一歩』コースのカスタマイズについて、私がやってみたことを報告します。
ああ、でも、他のブログサービスでも多分同じような要領でカスタマイズ可能かも。

さて、準備するのはまず、ツール。
私の場合、ホームページビルダー7です。

さらに、各種ファイルを置くためのWEBスペース。
カウンター、アクセス解析ツール類
で、上記の二つは、忍者ツールで全部揃ってしまいます。
なんと、100Mの無料ホームページスペースが提供していただけちゃいます!
とりあえず、ホームページスペースができたら、礼儀として「index.html」くらいはすぐに作った方がいいです。

これで、まずは準備はOKです。

5/17追加
忍者ツールのサーバーは、ファイルを置いて、外から画像などを呼び出すことが不可能な仕様になっております。
OCNのユーザーであればPageOnでサーバーを確保する。
もしくは、そのへん寛容なジオシティーズ
携帯で撮影した動画3gpファイルも置いておけるisweb
などにサーバースペースを確保しておくことをオススメします。

アドバイスいただいたmokekeさんに感謝します
結局、完全にダウングレードすることにしました。
ブログ人批判は、もうあまりしないことにしようかと思います。
ただ、有料プランの『ホップ』に関しては、少々容量がでかいだけであまり意味が無いように思えます。
「はじめの一歩」コースでも、30Mあります。
アクセス解析も、外部のツールの方が優れています。
まあ、無料といってもOCNのプロバイダを利用している人のみが無料なわけですが・・・。
フォトアルバムは私には必要ないということがわかりました。
あと、AMAZONのコードを打ち込むだけでサムネイルがサイドバーにできるシステムですが、
私の推薦する本は、サムネイルが用意されてない、もしくはサムネイル表示をはばかられるものだというこtがわかりました。

ただ、『ジャンプ』コース以上のプランだと、本当にすごいものができるんじゃないかな?
とりあえず、私は30M使い切ってから、プランを変更しようかと思ってます。

見た目、けっこう変わったでしょ?
これは、今日からボチボチレポートしていきます。

新カテゴリを作ります『CSS知識の無い人のためのカスタマイズ』にしようかしら?
長い?