DESIGN WEB WING|Affinger5 WORDPRESS プラグイン

【新着記事|横並びのdl dd dtを縦並びに変更したい】デザインまで含めたCSS公開。WORDPRESS編

投稿日:

【新着記事|横並びのdl dd dtを縦並びに変更したい】デザインまで含めたCSS公開。WORDPRESS編
横並びのdl dd dtを縦並びに変更したい!

 

メモ

デザインまで含めたCSS公開!簡単に!

 

新着記事の横並びアイキャッチ画像写真のdlを縦並びに変更したい!

新着記事のトップページへの自動出力。

ありがたいことです。

何も設定していない状態だと横並びです。

修正前

【新着記事|横並びのdl dd dtを縦並びに変更したい】デザインまで含めたCSS公開。WORDPRESS編

 

縦並びにしたい!

修正後

 

【新着記事|横並びのdl dd dtを縦並びに変更したい】デザインまで含めたCSS公開。WORDPRESS編

 

 

左の鳥の方のアイコンが上に行っているように見えるのはもともとのアイコンがheigt:100pxに達していないらです!

お気にならさらずに!

 

ひとまずサイズ指定して無理やり下へ下ろしてみた!

borderタグは分かりやすくするために入れて作業してます。
最終段階はさらに下へスクロールしてください!

 

CSSはこちら

.kanren dl {
border:1px solid red;
width: 100px;
height:auto;
display: inline-block;
}

.kanren dt
{border:1px solid blue;
width: 100px;
height:100px;
display: block;
}

.kanren dd
{border:1px solid black;
width: 90px;
margin:10px 5px;
display: inline-block;
}

.kanren dd h3 a
{font-size:0.6em;
}

 

【新着記事|横並びのdl dd dtを縦並びに変更したい】デザインまで含めたCSS公開。WORDPRESS編

 

とりあえず、ここまで出来ました!
オリジナルにカスタイズしたい人はボーダーを付けて作業するのがオススメ!

 

dl.dt.dd.微調整をしていきます

最終的にはこんな感じでです!

【新着記事|横並びのdl dd dtを縦並びに変更したい】デザインまで含めたCSS公開。WORDPRESS編

AFFINGERではない方のCSS

/*新着記事の出力を横並びから縦並びに変更*/
dl {
width: 100px;
height:auto;
display: inline-block;
border-bottom:none
}

dt
{ width: 100px;
height:100px;
display: inline-block;
}

dd
{border-bottom:none;
width: 90px;
margin:0px 5px;
display: inline-block;
}

dd a
{font-size:0.6em;
line-height:0em;
}

dl {
margin-bottom: 0px;
padding-bottom: 0px; }
/*新着記事の出力を横並びから縦並びに変更 おわり*/

 

AFFINGER5の方はこちら!

/*新着記事の出力を横並びから縦並びに変更*/
aside .kanren dl {
width: 100px;
height:auto;
display: inline-block;
border-bottom:none
}

aside .kanren dt
{ width: 100px;
height:100px;
display: inline-block;
}

aside .kanren dd
{border-bottom:none;
width: 90px;
margin:0px 5px;
display: inline-block;
}

aside .kanren dd h3 a
{font-size:0.6em;
line-height:0em;
}

aside .kanren dd {
padding-left: 0px;
}

aside .kanren dl {
margin-bottom: 0px;
padding-bottom: 0px; }
/*新着記事の出力を横並びから縦並びに変更 おわり*/

aside kanrenをつけています!

 

CSS メモ

行間の調節 CSS line-height:が結構便利です!

Copyright© うふふ.TOKYO , 2019 All Rights Reserved.