はじめに // 配布テンプレ&利用規約

<< ninjaブログ用カスタマイズ用4 + main + カスタマイズ用plain >>

よくある質問集

えーコメントをつける方は最低でもよくある質問集はチェックしてください。この記事にコメントつけてるのに、ここに書いてある項目を見ていないとか???ってなってしまいます。 今後はここに書いてあるのに、っていうコメントを頂いた時はコメント数の氾濫を防ぐためにも解答後そのコメントを削除させて頂きます。


ユーザー助け合い掲示板にもあるんですが
目次の意味も兼ねて。随時追加予定。
自分のスキルを上げたい、1から身につけたいって人は
まずcss講座xhtml講座を見てください。


■基本的なことである色換えや背景、文字装飾などは下のcss。
アイコン追加、不要項目削除などはhtmlと独自タグを見てください。


■具体的カスタマイズ

スポンサーサイト

一定期間更新がないため広告を表示しています

| | Comment 0 | - |

何故テーブルレイアウトが苦手なのか

第1に重いからです・・・・・・。
flatで画像をいっぱい張っている or ブログパーツが多いサイト を
初めて開く時とかたっぷり10秒くらい何も表示されません。
cssにレイアウトを頼ったテンプレは、
読み取れたところから表示してくれるんですが
全体をテーブルでくくってあるレイアウトは全部読み込んで全部表示なので
中身が多いほど真っ白のまま待たされることになります。
これが結構苦痛・・・・・・。
なぜこのご時世に個人サイトで開くまで延々待たないとならんのか。
用事がなきゃ即閉じてます。


第2にソース見難い。
cssレイアウトはdiv idなどを目安にすると、どういう構造になっているのか
(cssになれている人なら)作成者以外にもぱっと分かりますが
テーブルで凝ったレイアウトをされていると
tr tdがあちこちにあって、ソースが雑然としており、
どういう配置されているのか読み解くのが面倒です。
特に入れ子になってたりしたら、サポート投げたくなる。


っつーわけで正しい正しくないではなく、個人的な理由で苦手です。
なので2カラムのカスタマイズしたいけど、flatは嫌だ、
っていう人がいらっしゃったらコメントください。cssメインで1個作ります。
誰もいないのに作るのはかったるいぜー。


| 09:28 | Comment 16 | - |

スポンサーサイト

| 09:28 | Comment 0 | - |

Comment

こんにちは。
いつも参考にさせてもらっています。
一つ質問してもよろしいでしょうか?

今、ブログを作っている(もうほとんど完成です)のですが、
最後の問題が

表示が遅い!!

ということなのです。

ちなみに公式テンプレートのflatをいじってつくったものですが、
・画像はひとつ(2.01KB)
・レビューのサイトなので、記事は商品へのリンクとテキストのみ
・背景色にセーフカラーでないカラーコードを使っている(でもこれは譲れないのです)
・font-familyでフォントを複数指定している
・独自タグ(?linktextやdescriptionなど)をちょっといじり、linktext2,deccription2というものをつくった。


…原因はなんなのでしょうか。
自分のパソコンが重いというわけではなさそうです。他のサイト(こちらのサイトもです)はすんなりと、早く表示されるので。

仰るとおり重いと見る気が失せてしまうので、できるだけ軽くしたいのです。
ブログパーツをたくさん使ったブログより重いのは何故なのでしょうか…。

ぜひ、ご教示ください。
お願いします。

| もくば | 2008/04/28 5:56 PM |

flatはテーブルレイアウトという作りですので
全てを読み込むまで表示されません。
その為、文が長かったりすると表示が自然遅れます。
あとはキャッシュがまだされていないかどうか、や
JUGEMのサーバにはあたりはずれがあるので
はずれのサーバにあたってしまったか、ですね。

他の事は実際みてみないとわかりませんが、
もくばさまが箇条書きにされてらっしゃるようなことは
余り関係ないと思います。

もし気になるようでしたら
http://nous.jugem.jp/?eid=93
のテンプレは一見flatと同じ表示になりますが
テーブルレイアウトを排してつくってあるので
こちらのテンプレを落としてみて表示速度が改善されるなら
テーブルレイアウトをやめてみる、という手もあります。

| tk | 2008/04/28 6:04 PM |

早速のお返事ありがとうございます。

>JUGEMのサーバにはあたりはずれがあるので

そうなのですか!
それを解決するためには新しくブログを作り直すしかないのですよね。
それはちょっとめんどくさいですねぇ。

>こちらのテンプレを落としてみて表示速度が改善されるなら

ダウンロードしてみました。
私がいま作っているブログを開くと、まずback-groundに指定した背景色のみが出て、それ以外なにも表示されないまま5秒ほど反応が無いです。(ステータスバーに"http://~~~を開いています"という文字が出て、それから"表示されました"とでるのですが、それから5秒ほど)

カスタマイズ用plainで開いてみると、メニューやコンテンツはすべて表示されるのですが、そのままマウスが効かない状態で5秒ほど止まってしまいます。

もし、お時間があり、もし、個人的にメールなどできましたら(それにブログのURLを貼ります)、ブログをみていただきたいのですが…。
本当にずうずうしいことを言っているのは承知ですので、迷惑だったら仰ってください。m(_ _)m

| もくば | 2008/04/28 6:35 PM |

うーん、外部ツールなど何もつかっていないのでしたら
アクセス解析やアクセスカウンターなど
本文中に何を書いているかかもしれません。
スクリプトやタグなどなしにただの文章だけの記事でも表示が遅れるのなら
JUGEMのサーバの問題ですね。
JUGEMに問い合わせてみたほうがよろしいかと。

お力になりたいのはやまやまなのですが、
このブログは小中学生も見ているブログなので
メルアドを公開すると質問メールに対応しきれないということで
メールでのサポートはしないということになっております。

もし上記に書いたどれもがあてはまらないのでしたら
私が実際みても分からないでしょうから、どの道解決できない、ということになります。
申し訳ありませんがご了承くださいませ。

| tk | 2008/04/28 6:52 PM |

>本文中に何を書いているかかもしれません。
本文中にテーブルタグを使っている記事も少しだけあります。

>メルアドを公開すると質問メールに対応しきれないということで
>メールでのサポートはしないということになっております。

そうですよね。本当に失礼なことを言ってしまって申し訳ないです。

テーブルを使っていないテンプレートでもダメということは、やはりJUGEMの方に問題があるのでしょうね〜。
これは新しくブログを作り直せば解決するのですか?それもはずれでなければ)

丁寧なアドバイスに感謝しています!

| もくば | 2008/04/28 7:18 PM |

うーん、テーブルタグは中身にもよるのでピンきりですね。
JUGEMの割り当てサーバというのは
一つのものがいっぱいになったら次、となるので
作り直しても同じサーバに割り振られれば同じです。
(管理画面トップにサーバの数が表示されていると思います)
なので作り直してなおることもありますし
なおらないこともある、とくらいしか言い様がありません。
申し訳ありません。

| tk | 2008/04/29 3:54 PM |

あの質問いいですか?
/*--------------------------------------------------
 全体の背景は以下の()内にURLをいれてください
----------------------------------------------------*/
のところに画像のURLを入れても背景が変わらないんです。どうすればいいでしょうか?

| 怜菜 | 2008/04/29 4:19 PM |

すみません。私の勘違いでした。
お手数をおかけしてすみません。

| 怜菜 | 2008/04/29 4:23 PM |

何度もすみません。
左側のもこもこ枠が表示されないのですが…

| 怜菜 | 2008/04/29 4:36 PM |

されてるように見えます。

| tk | 2008/04/29 4:46 PM |

そうですか。
私のは表示されないのですが…
PCの不具合かもしれませんね。
ご迷惑をおかけしました。

| 怜菜 | 2008/04/29 4:51 PM |

tkさん、こんばんは。
今、新しくplainを元にして(これもcssでデザインされているのですね)一から作っている最中です。かなり軽くなってうれしいです。
ただ、わからないことがでてきてしまいました。


元は、右側にメニューがあったのを、下記のようにして左メニューにしました。

#main {
float: right;
width: 500px;
border:1px solid #000;
}

#side {
width: 200px;
background-color: #80aba9;
}


そこで、この画像をみていただきたいのですが…。
ttp://enjoi.blogdns.net/up/src/2895.gif

sideとmainの間(星のぶぶん)をつめるにはタグをどのようにいじればよいのでしょうか?

それと、sideの部分が、メニューのある分だけしか表示されません。
メニューのあるなしにかかわらず、mainの記事と同じ分だけ表示させたいのですが。

tkさんの貴重なお時間を割いてしまうのは心苦しいのですが、よろしければまたアドバイスお願いします。

| もくば | 2008/04/29 8:14 PM |

間ですがcssに

/*-----------------------------------------
 #mainや#sideの数字を増やした時はここのwidthも増やしてください。
 本文とサイドの間の隙間を空けたい時も、widthを増やせば空きます。
----------------------------------------------*/

#wrapper {
margin:0 auto;
width: 720px;
text-align:left;
}

という箇所がありますね。
裏を返せば数字を減らせば縮まります。

2番目ですが、サイドの方が短く、脇線が途中で途切れる
ということでしょうか。
逆ならありえるのですが、ちょっとどういう現象なのか分かりません。
cssの最初に注意書きで

左右のカラムを逆にしたい場合は
#layoutのbackground-positionのrightをleftに
#mainのfloatをleftからrightに
#sideのfloatをrightからleftに
書き換えれば変更できます。

と書いてあるのですが、こちらはご覧になりました?
これ以外のやり方をするとサイドメニューの背景は正しく表示されません。

記事本体が短く、サイドがずらーっと長いため記事部分の背景がでない
という現象ならおこりうるものですが
これの調整はあちこちを入れ替える必要があるのでcssに詳しい方でないと
ぱっと理解できないかもしれません。
まずはcssの注意書き通りの変更をされているか、からご確認ください。

| tk | 2008/04/29 8:20 PM |

ごめんなさい、書き忘れていました。

えっと、tkさんのカスタマイズ用plainではなく、jugemの公式テンプレートのplainをいじりました。

#wrapper {
padding: 0px 25px;
background-color: #FFF;
}

#layout {
width: 760px;
}

#main {
float: left;
width: 500px;
}

#side {
float: right;
width: 220px;
}

これを、
#wrapper {
padding: 0px 0px;
background-color: #FCFCF9;
}

#layout {
width: 760px;
}

#main {
float: right;
width: 500px;
}

#side {
width: 200px;
background-color:#80aba9;
}

としました。

layoutが760で、mainが500でsideが200なので、残りの60がsideとmainの隙間になってしまうのですよね。
ならばと、main+side=760にしてみたところsideが落ち…。
ぴったりくっつけたいのですが。

本当に長々とすみません…。

| もくば | 2008/04/29 8:34 PM |

ううむ。
数字を微調整してみました? 760を減らすとか。
=になるように数値を設定すれば普通落ちます。
flatやカスタマイズ用plainをみればわかるでしょうが
普通5-10px余裕をとるものです。
ぴったり、がどういうことか分かりませんが
デザイン上ぴったりにしたいのなら背景画像の見せ方などで調節するものです。

これ以上はそれこそブログを見てみなければ分かりませんし
cssの癖についてそれなりに知識を得ないと
自力では解決は不可能だと思います。
ブログをさらしたくない、勉強している時間がない
ということならある程度デザインに妥協をするのは仕方のないことかと。

| tk | 2008/04/29 8:50 PM |

確かにURLを出さずに、言葉だけでここをこうしたい、ああしたいと質問をするのは無茶なことですよね。

今までそんな質問に付き合ってくれたtkさんの心の広さに土下座したいくらいです。(ほんとです)

もうtkさんのお手を煩わせるのは嫌なので、今日は徹夜するくらいの気持ちで、自力でいじりにいじりまくってみようとおもいます。

cssデザインにしたらどうか、というtkさんのアドバイスのおかげで、ブログの軽量化には成功しました。
デザインは妥協できないので、頑張ってきます。

本当にありがとうございました。
感謝しています。

| | 2008/04/29 9:16 PM |

Submit Comment