はてなダイアリー・CSS・HTMLについての質問です。

Question

麻衣＝リュウママ

68

0もっと見る

はてなの使い方ウェブ制作

はてなダイアリー・CSS・HTMLについての質問です。

私のブログ（http://d.hatena.ne.jp/hb64226326174d111/）は「ニンテンドーDSiブラウザー」などで私のブログにアクセスすると、スタイルシート（自作の背景）や左のサイドメニュー（フッタ）がきちんと表示されなかったり「ウェブページの容量が大きいため、正しく表示されない場合があります。（故障ではありません。）」などと表示されます。
ですので「ニンテンドーDSiブラウザー」でも私のブログがすべてきちんと表示される方法をわかりやすく教えてください！
回答よろしくお願いいたしますm(_　_)m

※現在書き込んでいる『ヘッダ』・『フッタ』・『スタイルシート』はこの質問のコメント欄にすべて書きますので回答をしてくれる方は見てください！
（解決したら、そのコメントは削除します。）

回答の条件

1人5回まで

登録：2012/01/17 08:55:03
終了：2012/01/24 09:00:06

麻衣＝リュウママ 2012/01/17 08:57:00

ページのヘッダ↓
<p></p>

<div class="main">

ページのフッタ↓
</div>
<div class="sidebar">
<div class="hatena-widget">

<script type="text/javascript" src="http://ct2.enokorogusa.com/sc/1586917"></script>
<noscript><a href="http://ct2.enokorogusa.com/gg/1586917" target="_blank">
<img src="http://ct2.enokorogusa.com/ll/1586917" border="0" alt="カウンター" /></a><br />
<span id="NINCT1SPAN1586917" style="font-size:9px">[PR] <a href="http://blog.ninja.co.jp/" target="_blank">ブログ</a></span></noscript>

</div>
<hatena name="clock" type="handwriting" color="#cc0000">
<div class="hatena-module">
<div class="hatena-moduletitle">リュウプロフィール↓</div>
<div class="hatena-modulebody">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20111118/20111118134100.png?1321591423" alt=""><br>
名前　リュウ<br>
犬種　パグ<br>
性別　♂(オス)<br>
誕生日　2009年5月19日　　おうし座<br>
好きなモノ　牛肉・女の子・ボーロ<br>
特技　ポーズをする・大食い・笑顔<br>
リュウから自己紹介↓<br>
こんにちは、リュウです!<br>
最近…最近お肉がたるんできましたｗ<br>
パグのオスで色はフォーンです＾＾体重は10Ｋｇ前後です。<br>
こんな僕ですが、仲よくしてくれるとうれしいです＾＾<br>
<span class="deco" style="color:#CC0099;">- - - - - - - ⋈ - - - - - - </span><br>
<span class="deco" style="color:#ff6633;">☆ブログ情報は、</span><a href="http://d.hatena.ne.jp/hb64226326174d111/about">こちらです</a><span class="deco" style="color:#ff6633;">。</span><br>
☆交互リンクは犬を飼っている飼い主様のブログのみ受け付けます！<br>
★<span class="deco" style="color:#FF9900;">パグ友も募集中です。</span>
</div>
</div>

<div class="hatena-module">
<div class="hatena-moduletitle">管理人プロフィール↓</div>
<div class="hatena-modulebody">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20111118/20111118134215.png" alt="">　　　　　　　　　　　　　　　　　　　　　　　あだ名　リュウママ<br>
ユーザーネーム　音色<br>
性別　♀（女）<br>
血液型　B型<br>
誕生日　7月14日かに座<br>
管理人から一言↓<br>
リュウママこと音色と申します！<br>
不定期ですがリュウと一緒にブログ更新しています。<br>
こんな管理人ですがよろしくお願いしますm(_　_)m<br>
<span class="deco" style="color:#CC0099;">- - - - - - - ⋈ - - - - - - </span><br>
<span class="deco" style="color:#3333FF;">☆管理人については、</span><a href="http://www.hatena.ne.jp/hb64226326174d111/">こちらです</a><span class="deco" style="color:#3333FF;">。</span>
<br>♥コメント返信のときは、
hb64226326174d111で書き込みます。<br>
<span class="deco" style="color:#9900BB;">♥皆様からの大切なコメントは、楽しく読ませてもらっています！</span>
<span class="deco" style="color:#FF0033;">♥商業用等のコメント・宣伝コメント・読んだ方が不快に感じるコメントなどは削除させていただきます。</span>
　　　　　　　　　　　　　　　　<span class="deco" style="color:#660033;">♥コメント返信は遅くなりますが、必ず返信します！（貴方がコメントした記事に私がその記事のコメント欄に「○○さんへ」と返信します。）</span>

</div>
</div>

<div class="hatena-module">
<div class="hatena-moduletitle">ランキング↓</div>
<div class="hatena-modulebody">
★バナーをクリックして、リュウを応援してくれるとうれしいです↓<br>
<a href="http://dog.blogmura.com/"><img src="http://dog.blogmura.com/img/dog88_31.gif" width="88" height="31" border="0" alt="にほんブログ村犬ブログへ" /></a><br> <a href="http://dog.blogmura.com/">にほんブログ村</a><br>
<a href="http://dog.blogmura.com/pug/"><img src="http://dog.blogmura.com/pug/img/originalimg/0000129914.jpg" width="152" height="52" border="0" alt="にほんブログ村犬ブログパグへ" /></a><br> <a href="http://dog.blogmura.com/pug/">にほんブログ村</a>
</div>
</div>

<hatena name="sectioncategory" template="hatena-module">

<div class="hatena-module">
<div class="hatena-moduletitle">過去の記事はこちら↓</div>
<div class="hatena-modulebody">
<div style="position: relative; left: -5px;">
<a href="http://d.hatena.ne.jp/hb64226326174d111/archive" id="ryukakonokizi" alt="過去の記事"></a>
</div>

<hatena name="antenna" template="hatena-module">

<div class="hatena-module">
<div class="hatena-moduletitle">リンクフリー！</div>
<div class="hatena-modulebody">
</span><br><span class="deco" style="color:#CC33CC;">＊</span>下のリンクフリーのバナーの張り付けコードは、<a href="http://d.hatena.ne.jp/hb64226326174d111/about#rinkunituite">こちらです</a>。<br>
<a href="http://f.hatena.ne.jp/hb64226326174d111/20110907164725"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20110907/20110907164725.jpg" alt="バナー" title="バナー"></a>
</div>
</div>

</div>

スタイルシート↓
body {

background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20111220/20111220103737.png?1324345768');

background-repeat: repeat-y;

background-position: center;

background-attachment: fixed;

filter: alpha(opacity=80);

-moz-opacity:0.80;

opacity:0.80;

}

#ryukakonokizi {
display:block;
width:169px;
height:125px;
border:0;
background-color:transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20120113/20120113151734.png?1326435556");
background-position:left;
}
#ryukakonokizi:hover {
background-color:transparent;
background-image:url("http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20120113/20120113151735.png?1326435908");
background-position:right;
}
Hidden 2012/01/17 12:42:55

仕様です。
Dsiブラウザーでは、一定の容量(体感では200~300KB位?)
を超えると正しく表示されない場合があります。
はてなダイアリーのサイトだけでも20KB位あるので
フッタ、CSSを含めると約30KBで
さらに画像などを読み込むと50~150KBなどの数値になってしまいます。
あと、そちらのサイトを見てみると
背景+タイトル画像のみで450KBも読み込んでいます。
さらに、記事もあわせると1MBも読み込んでいます。
さすがに、PCでやってもかなり読み込みが遅いです。
DSiで表示させるには無理があると思います。
もし、DSiブラウザーで表示させたいのなら
ブラウザーの設定から画像の表示をOFFにしてください。
(あと、PCでも重いのでもうすこしかるくしてくれないかな(チラッチラッ
rouge_2008 2012/01/17 13:16:16

警告メッセージの通り、HTMLページのサイズが大きいのだと思います。
次のQ&Aにもありますので、画像の表示サイズを小さく、枚数もなるべく少なくしてみてください。
http://www.nintendo.co.jp/ds/dsiware/hngj/q_and_a.html
-------------------------------------------------------
Q.14　表示できないホームページがあります。
A.14　FlashやPDFなどを用いているホームページでは、部分的に表示できません。また、大きな画像データが使われているなど、ファイル容量が大きいページは、表示できない場合があります。その場合、スタートページに戻ることがありますが、故障ではありません。
-------------------------------------------------------

フォトライフ記法で表示する画像のサイズを指定する事が出来ます。
フォトライフにアップロードした画像を記事に挿入すると、[f:id:ユーザーアカウント:画像のID:image]という記述が貼り付けられると思います。
[f:id:ユーザーアカウント:画像のID:image:画像サイズ指定]のように「image」の後ろにコロンで区切って画像の表示サイズを指定してみてください。
※「medium」は長編120pxとの事です。[f:id:アカウント名:画像のID:image:medium](記事への挿入時は「M」にチェックを入れます。)
※「w**」で直接横幅のサイズを指定できます。上記mediumで小さすぎる場合は、[f:id:アカウント名:画像のID:image:w240]のように指定してみてください。
http://hatenadiary.g.hatena.ne.jp/keyword/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A9%E3%83%88%E3%83%A9%E3%82%A4%E3%83%95%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%97%E3%81%9F%E5%86%99%E7%9C%9F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%EF%BC%88fotolife%E8%A8%98%E6%B3%95%EF%BC%89

※HTMLタグ「<img src="～">」で画像を表示している場合は、「width」(横サイズ)と「height」(縦サイズ)の指定を追加してみてください。
※画像のアスペクト比(縦横比)に注意してください。(400×300の画像でしたら、240×180ですがPCで見る分には結構小さいです。280×210、200×150等、好みのサイズでなるべく小さめにしてみてください。)
※画像サイズを小さくしてからアップロードした方がより効果的かもしれません。(あるいは、フォトライフ記法でmediumを指定すると小さすぎるかもしれませんが、サムネイル画像を作成するので、表示する画像のサイズ自体が小さいです。LやLL,またはw**でサイズ指定した場合は、オリジナル画像を拡大・縮小して表示していますので・・・)

画像のサイズを小さくしてもまだ表示されないようでしたら、1ページあたりの記事表示日数を減らしてみてください。
管理画面で「設定」→「記事の設定」にアクセスして、「表示設定」の「1ページの表示日数」を3日分程度に変更してみてください。(※現在5日分に設定されていると思います。)

※clockモジュールで日時を表示していますが、ニンテンドーDSiブラウザーはFlashに未対応のようです。
上記の対処の他、clockモジュールを削除してから表示確認してみてください。
http://www.nintendo.co.jp/ds/dsiware/hngj/spec.html

これでもまだ不十分かもしれませんが、とりあえず・・・
※背景画像が大きいので、スタイルシートのbodyへの「background-***」という指定をすべて削除してみてください。(※以下の部分)

background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20111220/20111220103737.png?1324345768');

background-repeat: repeat-y;

background-position: center;

background-attachment: fixed;

※上記の変わりに色指定「background-color:#fff;」を適当に追加
麻衣＝リュウママ 2012/01/17 18:30:40

とりあえず…フッタ(サイドメニュー)の『過去の記事』というところのバナーを削除し、<hatena name="section" template="hatena-module" listlimit="5">で表示しました。
fut573 2012/01/17 23:59:09

現在、topからはてなフォトライフへのリンクが25個あるので、それを減らすのが一番の容量削減になるかと思います

[「続きを読む」記法とは - はてなキーワード」
http://d.hatena.ne.jp/keyword/%A1%D6%C2%B3%A4%AD%A4%F2%C6%C9%A4%E0%A1%D7%B5%AD%CB%A1
を使って、記事の2枚目以降の写真をtopから読み込まないようにするとtopページの軽量化できます。
麻衣＝リュウママ 2012/01/18 08:36:01

続きを読む記法とはこちらでしょうか↓
http://d.hatena.ne.jp/keyword/%A1%D6%C2%B3%A4%AD%A4%F2%C6%C9%A4%E0%A1%D7%B5%AD%CB%A1
有希 2012/01/21 20:08:27

とにかく、仕様なので、上手く表示されない、ということですか？
リュウママ（音色）さんとおなじ立場だったので、ずっと謎でしたw
参考にさせていただきます！

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

Cherenkov · Answer 1 · 2012-01-21T16:40:09+09:00

コメントにある通り「ニンテンドーDSiブラウザー」の仕様でしょう。

「ウェブページの容量が大きいため、正しく表示されない場合があります。（故障ではありません。）」

一番の要因は記事中の画像です。
DSのブラウザに最適化しても味気のないブログになってしまうと思うので、これはもうしょうがないと諦めるのがいいと思います。

はてなダイアリー・CSS・HTMLについての質問です。

回答（1件）

Cherenkov15044932012/01/21 16:40:09

コメント（7件)

この質問への反応（ブックマークコメント）