お久ぶりです♪１人で生きれるモンッです。
ヤッホー。
更新出来ておらずすみません。５月病（シンプルに風邪）引いておりました。みなさんも５月病にはお気をつけ下さい。
風邪ひきながら、ブログを見るとこんな記事を発見しました。
すごい！そう言えばこのブログを見てくださってる方も殆どスマホからの接続だから、早速使おうと思ったところ、、。
あ。。。無料はてなブロガーだった。。。笑
あえなく断念。なんと世知辛い。やっぱりお金を払っている有料はてなProブロガー様と同じようには出来ないんですね、私達無料勢は、、、。
ということで、無駄な前置きが長くなりましたが、本日は無料はてなブロガーでもできるスマホデザインを２つ作ったのでご紹介させて頂きます。
完成デザイン
上から降りてくるバージョン
横から出てくるバージョン
ちなみに今の１人で生きれるモンッのブログでは、この横からメニューが飛び出す方を使ってるので、操作感を確かめたい方は右上のボタンを触ってみて下さい。
デザインと言っても、ボタンが下につくか、右上につくかだけの変化しかありません。ガッカリされた方すみません。
無料ブロガーはあまりカスタマイズしたら駄目？
ひつじの雑記帳のブロガー様が紹介されていたヘッダー・フッダー辺りのカスタマイズも無料ブロガーでもやろうと思えば出来るのですが、
- 本サービス内でのページデザイン変更により、当社が標準的に表示しているヘッダ、フッタ、広告及び著作権表示を当社の許諾なく体裁や位置を改変し表示する、あるいは非公開にする行為
と、利用規約にあるので無料はてなブロガーはヘッダ・フッタはいじらないほうが無難かなと思います。
実装方法
CSSとHTML・JSのコードをコピペで２箇所に貼り付けるだけです。HTMLの方はあなたのページに書き換える必要があるので、５箇所程あなたのサイトのURLに書き換えて下さい。
CSSの貼り付け場所
CSSに関しては、【デザイン→カスタマイズ（ペンチのマーク）→「｛｝デザインCSS」】の順に進み、デザインCSSに欄に貼り付けて下さい。元々３行ほど書き込みがありますが、それは消さずにその下にコピペして下さい。
HTML・Javascriptの貼り付け場所
【デザイン→サイドバー→モジュールの追加→HTML】を選んでそこに貼り付けて下さい。タイトルも一応入力する必要があるのでなにか適当なものを入力しておいて下さい。もしくは、もう既にサイドバーにHTMLで何か入力済みのものがあるのなら、その下に続けてコードを貼り付けても問題ありません。
HTMLの編集
【あなたのページのURL】という記載の箇所はあなたのサイトのURLに置換して下さい。
【あなたのページをはてなブックマークで検索した時のURL】というところは、下の画像の用にはてなブックマークのTOPページの右上の検索窓であなたのページを検索して、【人気順】をクリックした後のブラウザのURLをコピーして置換して下さい。
ちょっと解説
「？なんでサイドバーのHTMLの欄にコード貼り付けるの？」と思われた方も居ると思います。
無料はてなでもヘッダのタイトル下、もしくはフッタにはHTMLを書き込めるのですが、サイドバーに表示されるようなアーカイブをスライドメニューにも表示させたかったので、サイドバーにHTML書き込むようにしています。その代償として、
↑こんな感じの空っぽのサイドバーが最後に１つ追加されてしまいます。それでも良いよって方はどうぞコピペで使って下さい。
あと、スマホ・タブレット以外はメニューボタンは不要なので768px以上の画面で見る時はボタン自体が非表示になるようしています。
上からメニューのコード①
メニューが上から出てくるバージョン（CSS）
メニューが上から出てくるバージョン（HTML・javascript）
横からスライドメニューのコード②
メニューが横から出てくるバージョン（CSS）
メニューが横から出てくるバージョン（HTML・javascript）
まとめ
公開するくせにコードが汚くてゴメンナサイ。。。
また、風邪しっかり治ったらもうちょっとちゃんと作り直そうと思います。絶賛ウエブ系言語勉強中なので、「こんなん作って！」みたいなリクエスト頂ければ作ります。作れそうなら！
頭がボーっとする。。。
本日も最後まで読んでいただきありがとうございます。
ブログ書いていなかった間の消費HP
会社員時代の借り上げ賃貸退去費用などなど 10万HP
残りHP 32万HP