【小ネタ】漫画ページのレイアウトを変えました

　漫画ページの作品リストの文字/抜粋無しを横並びにしました。あと寂しかったのでリンクにホバーを加えてみた。

横並びにする

I'll be NET

ulリストのliアイテムを横並びにする方法あれこれ｜I'll be NET

https://illbenet.jp/view/css-howto_li_side_by_side?pathinfo=view/29

もくじはじめに ulリストのliアイテムを横並びで表示する方法 ...

bicycle.life.coocan.jp

横並びリストと項目の区切り｜たかみんつ

~~http://bicycle.life.coocan.jp/takamints/index.php/techtips/inlineList~~

HTMLのリストを横に並べる方法と、各項目間に区切り文字を表示する方法をご紹介

　上記サイト様方を参考に作ってみました。コードは以下。

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;/*抜粋の形跡を消す*/
}

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要素を使用しています。相変わらず強引な解決方法に頼っていますね。

リンクを装飾

　真っ黒太いリンクで寂しいなって思ったのでちょっと文字が拡大する感じのホバーを入れてみました。あんまり強く主張させることが苦手なので。以下リンク参考

copypet.jp

コピペでできる！CSSとhtmlだけのテキストリンクデザイン12選 | copypet.jp｜パー...

https://copypet.jp/397/

htmlとcssだけでできるテキストリンクデザイン12選です。

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);/*文字、抜粋無しリストのリンクをホバーに*/
}

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;を加えないと動作しないので注意。参考サイト様ではこれだけではなく色々なアニメーションするリンク装飾例があるので見てるだけで楽しいからおすすめ。

【小ネタ】漫画ページのレイアウトを変えました

横並びにする

リンクを装飾

コメントを残すコメントをキャンセル

Profile

カテゴリー

最近の投稿

横並びにする

リンクを装飾

関連記事一覧:

コメントを残す コメントをキャンセル

Profile

カテゴリー

最近の投稿

タグ

コメントを残すコメントをキャンセル