ブログの一番上にメニューバーがあるのってかっこいい！！
SEO的にも効果があるってバズ部様は言ってるし、せっかく訪問してくれた人に分かりやすいページにしたい。ただでさえ記事はグチャグチャだから…。
はてなブログは新しいせいか、Googleさんに聞いてみても良い答えが返ってこない。「はてなブログ」と「はてなダイアリー」を混同して書いてる人もいるし。
なんだかんだで自力で最後は試行錯誤。
レスポンシブwebデザインに挑戦してみた
頑張ってみた。素人が頑張ってみたよ。
このブログにはスマホ・携帯端末からアクセスする人が多いみたい。だからせっかくなので流行りのレスポンシブwebデザインってのを試してみた。
PCブラウザでは横並びのメニューバーが、480px以下の端末になると縦並びに移るっていうやつ。
いつもお世話になっているドットインストール様を大いに参考にさせて頂きました。
[ HTML ]<div id=”aaa”>
<ul>
<li><a href=”#”>ホーム</a></li>
<li><a href=”#”>映像集</a></li>
<li><a href=”#”>縄跳び</a></li>
<li><a href=”#”>シルクドゥソレイユ</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
<div id=”bbb”>
<ul>
<li><a href=”#”>ホーム</a></li>
<li><a href=”#”>映像集</a></li>
<li><a href=”#”>縄跳び</a></li>
<li><a href=”#”>シルクドゥソレイユ</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
#aaa ul {
list-style: none;
overflow: hidden;
}
#aaa li {
float:left;
width: 18%;
text-align: center;
background-color:#f5f5f5;
border:1px solid #fff;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-left:3px;
}
#aaa a {
text-decoration:none;
color:black;
display:block;
font-weight:bold;
}
#aaa a:hover {
border-bottom:2px groove blue;
font-weight:bold;
}
/* スマホのスタイル */
#aaa {
display: none;
}
#bbb ul {
list-style: none;
}
#bbb li {
text-align: center;
background-color:#f5f5f5;
border:1px solid #fff;
}
#bbb a {
text-decoration:none;
color:black;
display:block;
}
#bbb a:hover {
background-color:blue;
color:#fff;
}
/* 通常のスタイル */
@media all and (min-width: 480px) {
#aaa {
display: block;
}
#bbb {
display: none;
}
}
デザインのヘッダー、CSSにぶち込む
このソースをヘッダーの部分とデザインCSSの部分にぶち込んでみた。
ってかこのCSSの編集画面、はやく直してほしいなぁ。。。上手く編集ができないから、毎回別のテキストエディタで編集してからCtrl + Aで全選択、その後Ctrl + Vで貼り付けをしてる。
ちなみに一番上の〈/system〉で囲まれてる部分は消すと全てのデザインが飛ぶから、編集してるエディタにバックアップして、一緒に貼り付けましょう。
んでもってヘッダーの方も同じ。はてなブログのコードいじりはやりにくい。
PCブラウザでは動作確認できるけど、スマホはNG
開発環境はGoogle Chromで、他のIEとFire Foxも動作確認。だけどスマホはダメだった。何回いじっても、表示すらされない！！
一番上にある「@import」で呼ばれるCSSの中にスマホ用の記載がされてると思う。
/* <system section=”theme” selected=”aero2″> */
@import “/css/theme/aero2/aero2.css”;
/* </system> */
どうやら、追記をしていっても スマホの方には反映されないらしい。
PCブラウザ上でウィンドを小さくする時だけ動作するって、それじゃ意味ないし(笑)
はてなブログさん、スマホ用のCSSをいじらせてください！
前に使っていたFC2ブログはCSSの自由度が大きかった。その理由はテンプレートになってるCSSを直に弄ることができたからだ。このフォントが気に入らない、このマージンを少し開きたい、痒いところを探せばダイレクトに反映させられた。
一方はてなブログはCSSが呼び出しなので直には触れない。変更も一苦労だ。
まだ開発中とのこと。
CSSの操作性を上げてもっと自由にデザインを出来るようにしてほしいなぁ。
