buttoblog

ぶっとびの活動場所。ゲーム音楽とか作曲とかバイオリンとか日常とか。

ブログのカスタマイズをしたその4【グローバルメニューとデザイン】

f:id:buttobimusic:20161101183437j:plain

ブログのカスタマイズをしたよ今日!
見た目はそんなに変わってないけど地味ーな作業をしました。

ほとんど自分メモ忘備録ですすみません!

 

グローバルメニューの見直し

グローバルメニューの根本を見直してデザインも整えました。
前のソースコードだといじれないところがたくさんあったから一から変えたよ!

f:id:buttobimusic:20170318170359p:plain

参考にさせていただいたのはこちら。

ゆきひーさんのブログはめっちゃお世話になってます。

あとはフォントサイズとか色とかスマホ表示の調整とか。
あ、スマホで見るときに子メニューを表示しない設定になってます。これ見やすくていいと思うんだけどどうかな…。

 

子メニューの間に隙間を入れたかった

んで、そのグローバルメニュー。

ゆきひーさんのデモでは間に隙間があるように見えるんだけど、なぜか私のブログでは隙間なくぴったりとくっつく感じになってたので、このコードを足しました。

 #menu-content > li > ul.second-content > li{
 margin: 1px;}

 

いらないグレーのラインを消した

私が今使ってるのが「Blank」というテンプレート。たくさんの人が使ってるシンプルでカスタマイズしやすいデザインです。

んでこれデフォルトでトップと記事の間に灰色のラインが入ってるんですけど、これをどーーしても消したくてですね!
消し方がわからない私は、白いラインを引くという荒技を実装しましたw

まずここでどこにコードを書けばいいのかをチェック。めっちゃ便利。


そして場所がわかったところで以下のコードをいれました。

  #content{
 border: 1px solid #fff;}


これでスッキリ真っ白!

 

プロフィールの詳細へのリンクを太字にした

これはただ <b> タグをいれただけ。

 

 

あとシェアボタンをフラットなデザインにしたいんだけどやってみたらなんかが上手くいってなくて今日は断念…。
目次もあれから放置だしそこも整えたいなー。

たぶん一回まっさらな状態に戻してそこからコピペしてった方がいいんだよなー。
今度できるときにやろう。昔よりわかってきたし!

というわけで今日は終わり!おつ自分!

広告を非表示にする