漫画ページの作品リストの文字/抜粋無しを横並びにしました。あと寂しかったのでリンクにホバーを加えてみた。
横並びにする
bicycle.life.coocan.jp
横並びリストと項目の区切り｜たかみんつ
HTMLのリストを横に並べる方法と、各項目間に区切り文字を表示する方法をご紹介
上記サイト様方を参考に作ってみました。コードは以下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ul.shortcode-text.noexcerpt li{ float: left;/*横並びにする*/ } ul.shortcode-text.noexcerpt li:not(:nth-child(1)):before{ content:"||";/*リスト2番目以降に記号を追加する*/ color:silver; } .shortcode-text li:not(:last-of-type){ margin-bottom:0;/*多分抜粋ありの時に使う余白を消す*/ } ul.shortcode-text.noexcerpt li h4{ margin:0 .5em;/*リンクの左右に余白を加える*/ } ul.shortcode-text.noexcerpt div{ display:none;/*抜粋の形跡を消す*/ } |
display: inline;では何故かリンクの間に線が入らなかったのでfloat要素を使用しています。相変わらず強引な解決方法に頼っていますね。
リンクを装飾
真っ黒太いリンクで寂しいなって思ったのでちょっと文字が拡大する感じのホバーを入れてみました。あんまり強く主張させることが苦手なので。以下リンク参考
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ul.shortcode-text.default li a{ display: inline-block; padding: 0.3em; transition: .3s; transform: scale(1); } ul.shortcode-text.default li a:hover{ transform: scale(1.05);/*文字、抜粋有りリストのリンクをホバーに*/ } ul.shortcode-text.noexcerpt li a{ display: inline-block; transition: .3s; transform: scale(1); } ul.shortcode-text.noexcerpt li a:hover{ transform: scale(1.05);/*文字、抜粋無しリストのリンクをホバーに*/ } |
ちゃんとa要素にdisplay: inline-block;を加えないと動作しないので注意。参考サイト様ではこれだけではなく色々なアニメーションするリンク装飾例があるので見てるだけで楽しいからおすすめ。
コメントを残す