またちょっと色々触ったので備忘録として残しておきます。
今回はcss触っただけ。
タグ部分を調整
タグをボタンな感じにしてみました。以下css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .tagcloud a { font-size: 14px !important; line-height: 1em; background: #330c16; color: #fff; display: inline-block; white-space: nowrap; padding: 8px 8px; margin-top: 3px; border-radius: 4px; text-decoration: none; } .tagcloud a:hover { background: #e73562; /* ストロベリー色 */ color: #454545; } .tagcloud a:before { font-family: "FontAwesome"; content: "\f02b"; padding-right: 4px; } |
参考サイト様はこちら
文字サイズは!importantで固定しておかないとガタガタになります。マウスホバーした時の色をストロベリー色（色大辞典より）っていうのがあったのでそれにしてみた。そこはこだわり。
Indexページを調節
ページごとにcssを管理できるようになったので早速その機能を利用してみました。
更新履歴部分を左側が日記、右側がギャラリーみたいな感じです。
cssはこちら。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ul.news_list{ display: inline-block; float: left; width: 48%; margin: 0 .5em; } @media only screen and (min-width: 641px) and (max-width: 960px) { ul.news_list{ float: none; width: 100%; margin:1em 0; } } @media screen and (max-width: 640px) { ul.news_list{ float: none; width: 100%; margin:1em 0; } } |
スマホ、タブレット表示の時は横並びを解除するように設定しました。
もし崩れてたりしたら拍手等でご一報を。
コメントを残す