はてなブログの記事上部にメニューバーを設置する方法の事例

ブログの一番上にメニューバーがあるのってかっこいい!!

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>

[ CSS ]

#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の部分にぶち込んでみた。

f:id:shoichikasuo:20130525113407p:plain

ってかこの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の操作性を上げてもっと自由にデザインを出来るようにしてほしいなぁ。

[スポンサードリンク]

この記事を書いてる人


縄跳びパフォーマー 縄のまっちゃん
 ※本名:粕尾将一(カスオショウイチ)

全国の学校やイベントで縄跳びをつかったパフォーマンスや出張なわとび教室を行い、子ども達に運動の楽しさを伝え笑顔を引き出す仕事をしています。

【略歴】
全日本チャンピオン、アジアチャンピオン、世界大会6位。2010年よりシルク・ドゥ・ソレイユ常設ショー「La Nouba」に6年間約2500回の長期出演を果たす。