buttoblog

ぶっとび(buttobimusic)の音楽活動や演奏会感想など書いてます。ご依頼もこちらから!

メニューをスマホではスクロールに&バーみたいなの入れた【カスタマイズ9】

ツイッターでこんなアンケートをしました。

やっぱスマホかーー!!

スマホ表示の方はあんまちゃんと整備されてなかった私のブログ。
これを機に他もいろいろカスタマイズしてみました。

今回は自分でコード書いたりもしたよ!

 

 

 

グローバルメニューのレスポンシブ対応を変えた

PCでは従来のままですが、スマホ表示になるとスクロールメニューになるようにカスタマイズしました!

【PC版】
f:id:buttobimusic:20180812123635j:image

スマホ版】 
f:id:buttobimusic:20180812123640j:image

 

スクロールメニューはゆきひーさんのこのページを参考にさせていただきました。


ここに書いてあるCSSコードを元々の

 @media screen and (max-width: 〜〜px)

の中に入れて自分のブログ用に数値いじって調整。

でもまだ手直しの必要性を感じてるのでこれから手直しする際にこちらも参考にさせていただこうと思ってます。(自分メモ)

ついでにカテゴリーも減らしてちょっとスッキリ。
このへんはまだ検討中です。

 

メニューの下にバーみたいなリンクを入れました

コレ!!!!やりかたがずっっっっっとわからなかったやつ!!!!!!!

検索ワードもわからないしどう書いていいかもわからないしで詰んでたんですけど、なんと自力で作っちゃいました!

「ヘッダー」の「タイトル下」にHTML書いてCSSでデザイン作ってます。
完全にコピペ&見よう見まねなのでいろいろ間違ってるかもしれないんだけど、とりあえず現時点でできてるのでOKーー!!

文字だけリンクにするんじゃなくてバー全体をリンクにするのとか結構手間取りました。
実装してるグローバルメニューのアレコレをじっくり見てトライ&エラーで完成させました。よくできた!!えらい!!がんばった!!

 

あ、内側に影入れて少しへこませた感じにしたかったのでそれはこちらを参考にさせていただきました。


あとPC表示のとき、グローバルメニューの子メニューの出方がちょっとおかしくなってたのですが、これはレイヤー表示的な設定をいじれば直りました。

グローバルメニューの

 z-index:

の数値を元々のものより1プラスしました。
これで無問題〜〜〜解決ゾロリ〜〜〜〜〜〜

 

と、ここまできて実はブログのデザインを変えようかと思い始めてます。
やっぱカード型のデザインがいいかなーみたいな。

カスタマイズ云々というよりもテンプレートそのものから変えることになりそうなのでちょっと大掛かりです。
なんだかんだとこのブログ結構続いてるしワードプレスに移行するのも考えたんだけど、ドメイン云々とかサーバー云々とかがまだ考えられそうにないので今回は見送り。

ほんとはブログで収益〜〜みたいなこともやってみたいんだよぉ〜〜〜(結果収益になるかは別として)

ま、私のペースでやりたいようにやってくぜ!