アメブロカスタマイズ メニューバーを追加する
何故はてなブログでアメブロの記事を書くっ(； ･`д･´)
えーと。開発中のアプリ「いちおくまんえん」のキャラデザ等、色々お世話になる「あめちぇる」さんからの依頼なんです(´・ω・`)
CSS分からん！とお怒りの様子でしたのでお手伝いすることになりました。
昔素人だった頃はその辺から拾ってきたテンプレに少し手を加えたり、拾ってきたプラグイン突っ込んだりして
(｀ω´) ふんすっ！
といい気になってたわけですが、一応本職になってしまったのでむしろ配布側のような存在になってるわけなんですよね。
最近WEB系のお仕事はゲーム作成しつつ片手間でPHPでDBいじくらせてJSON返すようなことしかしてなかったので久しぶりのWEBビューｗ
CSSだけで出来ることもだいぶ増えたので、CSSいじくるだけで終わっちゃうかと思ってたんだけど。
ど。
上がってきたラフデザイン見たらメニュー付いとるΣ(ﾟдﾟlll)ｶﾞｰﾝ
そしてこんな感じとアメブロカスタマイズで商売してる人のサンプルのリンクが飛んでくる。
ほら？出来るんだろ？この人達が出来てるんだからさ
だから、ホラ。さっさとヤレヨ！(▼皿▼ﾒ)ﾉ
きっとこういうことに違いない・・。恐ろしい子！
実際は、出来なかったらいいよーとか、やっぱりもっかい自分でやってみようかな・・とか言ってくれてて。
やっぱりほら。一応プロじゃん？プロじゃないけど(； ･`д･´)
というわけで色々試行錯誤してみました。
プラグイン使えばJavaScript使えるよ！ってことなのでJavaScriptからDOM要素いじくって実装してみたんだけど。
・・・重い。すごく。
alert一発の軽量なものですら、すごく遅い。
jQuery入れてどうのこうのしてるからとかではない。困った。
JavaScript使えるなら何でもやりたい放題じゃんとか浮かれてたのに・・。
というわけでHTMLとCSSだけでなんとかする。
とりあえず適当にリストで実装。
でけた。
Chromeで画面見ながらスタイルいじって決まったらCSSに書き出しって感じなので、もちろんChromeでは綺麗に表示してくれてました。
えぇみんな大好きIEちゃん。
ダメー／(^o^)＼
知ってた！！
何かメニューがずれてました。
が、どうやらIEが悪いというよりIEにしか出ないGoogle Adsenseがレイアウト崩してました。
つまりIEが悪い(o´・∀・｀o)ﾆｺｯ♪
というわけで親にposition一個も付けないまま、position: absoluteで合わせてたのを、間に一個position: relative挟むことでAdsenseの影響受けさせずに調整することが出来ました。
ものすごい無理やり感があるけどJavaScriptでDOM書き換えまくってる方が健全じゃない気がしなくもないｗ
そもそも他所様のサイトを自分好みに書き換えようってことなんだから無理やりやるしかないですよね！
一応メニュー周り完成形
メニューむっちゃ適当に作ったやつなのに気に入っていただけたようでこのままでいいや頂けました（・３・）アルェー
背景とか、記事タイトルとか、サイドメニューの飾りとかその辺も素材とかデザイン貰ったら当てる予定。
その辺は特に難しくもないのでサクッと終わるでしょう。
今回のレイアウトでいじったとこはこちらから。
https://github.com/yasuhiro-matsuda/ameblo_css/commit/c22f43c09557f29a85600bb3c7e6f6647e3e3524
リストのHTMLはフリープラグインなら改行ありでいいんですけど、フリースペースに貼り付ける場合は改行入っちゃうんで、改行消して詰めて下さいね。
