画面の横幅
画面の横幅を変えてみました。
DOS/V初期のVGA(640p)はさすがに時代に合ってないだろうと言うことで、SVGA(800p)に収まる様に今まで設定してきました。ホームページが個人的に作られるようになったときも、800pに収まるのが基本とか耳にしていましたので、ホントのところは知りませんが(^^;)。
ナチュラムのテンプレートにも、960pの物がここ数年で用意されたりとか、色々なサイトが800pを超えたサイト作りになってきています。
あ、テンプレートと言うのは、ブログのデザインの雛形みたいな物で、管理画面のサイドメニュー「ブログの設定」に用意されています。３種類登録しておけるようです。
その頁のテンプレートのカスタマイズを選択すると、色々と設定が変更できます。失敗しないようにオリジナルはコピーして保存しておいた方が間違いが有ってもリカバリー出来ますので忘れないようにしましょう。
、、、、、、、と、ここまで書いて何ですが、、、、、、私、、、、、HTML文書はさっぱり分かりません(^^;)。
バイクのキャブの燃調みたいにここを絞れば薄くなる、ここを変更すれば濃くなると言った具合で、試行錯誤でやってますので、正しいやり方かどうか全く分かっていませんから真似をしないで下さいねぇ。あくまでも私の備忘録として書いてみますので。
テンプレート画面の一番上、スタイルシート：をいじります。幅や画像の張り替えも大体ここだけいじれば変わるようです。
サイドメニューの幅や、
本文の入るスペースの幅、
本文自体の幅、
トップ画像の変更
日付部分の背景画像
各記事の題名の前のアイコン画像
本文の文字サイズ
コメント部分の文字サイズ
など全てこのスタイルシートで変更できました。
まず最初に、スタイルシート全体を選択してコピーし「メモ帳」などテキストファイルで確実に保存しましょう。
保存しておけば、もし間違ってもそれをコピペするだけで元に戻ります。 保存忘れると、、、、、、大事なブログがとんでも無いことになるかもぉ、、、、、、。
◆◆◆まずは全体の幅の変更です。図のＡの部分です。
スクロールしていくと、最初色々な設定がありしばらくすると以下の記述が発見できると思います。
赤色数字のところが幅の設定ですので、これを変更します。以前は760pxにセットしましたが、今回はXGA(1024p)に収まるように960にしました。
最近のネットブックなど小型ノートパソコンでも1024なのでまぁ、画面からはみ出ることもないかなという判断です。スマホは小さいけどねぇ、、、、、今回は想定の外です(^^;)｡
｜#container{font-size:12px;
｜
｜ width:960px;
｜ background-color:#ffffff;
｜ margin:0px auto;
｜ border-top-width: 1px;
｜ border-right-width: 1px;
｜ border-bottom-width: 1px;
｜ border-left-width: 1px;
｜ border-right-style: solid;
｜ border-left-style: solid;
｜ border-top-color: #CCCCCC;
｜ border-right-color: #CCCCCC;
｜ border-bottom-color: #CCCCCC;
｜ border-left-color: #CCCCCC;
｜ text-align:left;
｜}
続きましてぇ、、、、、コロコロとスクロールしていくと、、、、、
◆◆◆本文の入るスペースの幅の変更です。図のＢの部分です。
赤色数字のところが幅の設定ですので、これを変更します。今回は730にしました。
｜#content{
｜ width:730px;
｜ float:right;
｜}
◆◆◆サイドメニューの幅の変更です。図のＣの部分です。
すぐ下にあります。
赤色数字のところが幅の設定ですので、これを変更します。今回は210にしました。
全体の幅960に対して本文側が730なので、サイドメニューの幅は230未満とします。
｜#links{
｜ width:210px;
｜ float:left;
｜ text-align:left;
｜ margin:0px 0px 0px 0px;
｜ padding:18px 0px 0px 10px;
｜ overflow:hidden;
｜}
◆◆◆本文自体の幅の変更です。図のＤの部分です。
コロコロと少し下にあります。
赤色数字のところが幅の設定ですので、これを変更します。今回は690にしました。
本文用のスペースが730なので、バランスを見て決めました。
｜.main{
｜ width:690px;
｜ color:#000;
｜ font-size:14px;
｜ margin:16px 10px 15px 0px;
｜ overflow:auto;
｜ line-height:135%;
｜}
ちなみに、水色のfont-sizeは、老眼用に12pxから14pxに大きくしてみました。
次に、画像ですが、、、、、
トップ画像も、幅を960に合わせて大きくしています。画像は大きさを変えると、その都度変更しなくてはいけないので、画像の保管場所のURLを確認してから取りかかりましょう。
ナチュラムの用意したテンプレートの画像は、URLが'http://admin.naturum.ne.jp/_img/*******/*******.***に成ります。
（*******は、画像によって変わります。）
テンプレート上では、/_img/*******/*******.*** と、省略して記述も出来るようです。
自分の画像を使う場合は、URLが'http://img01.naturum.ne.jp/usr/******/*********.***になります。
このURLは、管理画面の「画像一覧」から表示させれば確認できます。
テンプレート上では、/usr/*******/*******.*** と、省略して記述も出来るようです。
◆◆◆トップ画像の変更です。図のＤの部分です。
全体の幅を決めた所のすぐ下にあります。
赤色文字のところが画像のURLですので、これを変更します。
｜#banner,#subbanner{
｜ background:#fff url(/usr/rider/DSCN0566.jpg) left;
｜ padding:0px 0px 0px 0px;
｜ height: 220px;
｜}
水色は画像の高さですから、画像を作るときはこの高さに合わせるか、変更するんだと思います、ずっと220で来ているから知りません、、、、、(^^;)。チャレンジ求む。
画像を作ったら、画像一覧からアップロードしてそのURLを貼り付けると簡単です。
とこんな感じで、画像のURLを調べてからそれを表示させ、幅が足りなければお絵かきソフトで画像を変更、それをアップロードして、URLを貼り替える。それの繰り返しになりす。
また、テンプレートによって記述の仕方が違う物があるようです、慎重に対応して下さい。
一つ変更しては、スタイルシートをそれぞれ別にテキストファイルで保存しながらやると失敗が少なくできると思います。
間違っても、あれもこれもいっぺんに変更しない方がよいと思います。
日付の背景画像はこちら、
｜.date{
｜ border-top : 1px solid #cccccc;
｜ border-left : 1px solid #cccccc;
｜ border-right : 1px solid #cccccc;
｜ background-image: url(/usr/rider/blog_title.jpg);
｜ color : #fff;
｜ font-size : 12px;
｜ letter-spacing : 2px;
｜ padding :5px 0px 5px 15px;
｜}
ざっとこんな感じですかねぇ。失敗しても責任取れませんので、くれぐれもご注意下さいねぇ。
また書き込もうって、励みになります。
すいません、↓プチッとお願いしますm(_ _)m。
テンプレート画面の一番上、スタイルシート：をいじります。幅や画像の張り替えも大体ここだけいじれば変わるようです。
サイドメニューの幅や、
本文の入るスペースの幅、
本文自体の幅、
トップ画像の変更
日付部分の背景画像
各記事の題名の前のアイコン画像
本文の文字サイズ
コメント部分の文字サイズ
など全てこのスタイルシートで変更できました。
まず最初に、スタイルシート全体を選択してコピーし「メモ帳」などテキストファイルで確実に保存しましょう。保存しておけば、もし間違ってもそれをコピペするだけで元に戻ります。 保存忘れると、、、、、、大事なブログがとんでも無いことになるかもぉ、、、、、、。
◆◆◆まずは全体の幅の変更です。図のＡの部分です。
スクロールしていくと、最初色々な設定がありしばらくすると以下の記述が発見できると思います。
赤色数字のところが幅の設定ですので、これを変更します。以前は760pxにセットしましたが、今回はXGA(1024p)に収まるように960にしました。
最近のネットブックなど小型ノートパソコンでも1024なのでまぁ、画面からはみ出ることもないかなという判断です。スマホは小さいけどねぇ、、、、、今回は想定の外です(^^;)｡
｜#container{font-size:12px;
｜
｜ width:960px;
｜ background-color:#ffffff;
｜ margin:0px auto;
｜ border-top-width: 1px;
｜ border-right-width: 1px;
｜ border-bottom-width: 1px;
｜ border-left-width: 1px;
｜ border-right-style: solid;
｜ border-left-style: solid;
｜ border-top-color: #CCCCCC;
｜ border-right-color: #CCCCCC;
｜ border-bottom-color: #CCCCCC;
｜ border-left-color: #CCCCCC;
｜ text-align:left;
｜}
続きましてぇ、、、、、コロコロとスクロールしていくと、、、、、
◆◆◆本文の入るスペースの幅の変更です。図のＢの部分です。
赤色数字のところが幅の設定ですので、これを変更します。今回は730にしました。
｜#content{
｜ width:730px;
｜ float:right;
｜}
◆◆◆サイドメニューの幅の変更です。図のＣの部分です。
すぐ下にあります。
赤色数字のところが幅の設定ですので、これを変更します。今回は210にしました。
全体の幅960に対して本文側が730なので、サイドメニューの幅は230未満とします。
｜#links{
｜ width:210px;
｜ float:left;
｜ text-align:left;
｜ margin:0px 0px 0px 0px;
｜ padding:18px 0px 0px 10px;
｜ overflow:hidden;
｜}
◆◆◆本文自体の幅の変更です。図のＤの部分です。
コロコロと少し下にあります。
赤色数字のところが幅の設定ですので、これを変更します。今回は690にしました。
本文用のスペースが730なので、バランスを見て決めました。
｜.main{
｜ width:690px;
｜ color:#000;
｜ font-size:14px;
｜ margin:16px 10px 15px 0px;
｜ overflow:auto;
｜ line-height:135%;
｜}
ちなみに、水色のfont-sizeは、老眼用に12pxから14pxに大きくしてみました。
次に、画像ですが、、、、、
トップ画像も、幅を960に合わせて大きくしています。画像は大きさを変えると、その都度変更しなくてはいけないので、画像の保管場所のURLを確認してから取りかかりましょう。
ナチュラムの用意したテンプレートの画像は、URLが'http://admin.naturum.ne.jp/_img/*******/*******.***に成ります。
（*******は、画像によって変わります。）
テンプレート上では、/_img/*******/*******.*** と、省略して記述も出来るようです。
自分の画像を使う場合は、URLが'http://img01.naturum.ne.jp/usr/******/*********.***になります。
このURLは、管理画面の「画像一覧」から表示させれば確認できます。
テンプレート上では、/usr/*******/*******.*** と、省略して記述も出来るようです。
◆◆◆トップ画像の変更です。図のＤの部分です。
全体の幅を決めた所のすぐ下にあります。
赤色文字のところが画像のURLですので、これを変更します。
｜#banner,#subbanner{
｜ background:#fff url(/usr/rider/DSCN0566.jpg) left;
｜ padding:0px 0px 0px 0px;
｜ height: 220px;
｜}
水色は画像の高さですから、画像を作るときはこの高さに合わせるか、変更するんだと思います、ずっと220で来ているから知りません、、、、、(^^;)。チャレンジ求む。
画像を作ったら、画像一覧からアップロードしてそのURLを貼り付けると簡単です。
とこんな感じで、画像のURLを調べてからそれを表示させ、幅が足りなければお絵かきソフトで画像を変更、それをアップロードして、URLを貼り替える。それの繰り返しになりす。
また、テンプレートによって記述の仕方が違う物があるようです、慎重に対応して下さい。
一つ変更しては、スタイルシートをそれぞれ別にテキストファイルで保存しながらやると失敗が少なくできると思います。
間違っても、あれもこれもいっぺんに変更しない方がよいと思います。
日付の背景画像はこちら、
｜.date{
｜ border-top : 1px solid #cccccc;
｜ border-left : 1px solid #cccccc;
｜ border-right : 1px solid #cccccc;
｜ background-image: url(/usr/rider/blog_title.jpg);
｜ color : #fff;
｜ font-size : 12px;
｜ letter-spacing : 2px;
｜ padding :5px 0px 5px 15px;
｜}
ざっとこんな感じですかねぇ。失敗しても責任取れませんので、くれぐれもご注意下さいねぇ。
また書き込もうって、励みになります。
すいません、↓プチッとお願いしますm(_ _)m。
