Design WordPress

ブログの記事一覧を横2列にカスタマイズする方法

投稿日:

Pocket

やっと完成したブログデザインカスタマイズ。

前回はこの記事一覧を横2列という配列することに苦戦して諦めてましたが、結局納得行くまでやめられないのがA型の性。

結局仕事もすっぽかしてひたすらに調べまくってカスタマイズに挑んだ結果、なんとか綺麗に横2列にすることができました。

下には参考までにカスタマイズ方法を書いています。

ここまでが妥協して完成としていたブログデザイン。

カードタイプの記事一覧にはできたんだがどうしても横2列にできないでいた。

 

前に別のデザインで3列にすることができたことがあったんで、頭の片隅で「やったことあるんやけ絶対できるじゃん。。」ってぐるぐるしてまして。

 

だからできたものができないわけねぇ、っていうかデザイン変更してクオリティ下げてどうするんやって自分に言い聞かせ、リッチマン、プアウーマンを観なおしてやる気を起こし、再構築していきました。

 

主に施したCSSの内容は下の通り。

/*--------------------------------
トップページやアーカイブ一覧表示
---------------------------------*/

/* タイトル名 */
#topnews dd h3 {
font-size: 15px;
line-height: 30px;
margin-bottom: 5px;
}

.backnon {
background: none;
padding: 0 10px;
}

/*-- 記事エリア(全体)の幅 --*/
#content{
max-width:1200px;
}

/*-- 記事一覧をタイル状に表示 --*/
.itiran-custom {
position: relative;/*相対位置*/
text-align: center;/*記事エリア及びタイトルを中央揃え*/
background: none;/*背景色*/
}
.itiran-custom dl {
width: 48%;/*横幅*/
display: inline-block;/*横並びでブロック配置*/
background: #ffffff;/*背景色*/
border: none;/*ボーダーなし*/
padding: 0px;/*内側の余白*/
margin: 7px;/*記事と記事の間隔*/
margin-bottom: 30px;/*カード下の余白*/
box-shadow: 3px 7px 4px #a0a0a0;/*影をつける*/

}
.itiran-custom dt {
overflow: hidden;/*拡大領域固定*/
list-style: none;/*マーカーなし*/
}
.itiran-custom dt img {/*アイキャッチ画像*/
width: 100%;/*画像幅*/
height: 300px;/*画像の高さ*/
transition: .3s;/*拡大・縮小速度*/
}
.itiran-custom dt img:hover {/*マウスホバーで画像拡大*/
transform: scale(1.1);/*拡大率*/
}
.itiran-custom dd a {/*記事タイトル*/
font-weight: bold;/*文字を太字に*/
color: #fff;/*文字色*/
font-size: 15px;/*文字サイズ*/
text-decoration: none;/*下線なし*/
}
.itiran-custom dd {
text-align: left;/*タイトル左寄せ*/
padding: 10px;/*タイトルの余白*/
}
.eyecatch-t {/*-- 記事一覧画像にカテゴリー追加 --*/
position: relative;/*絶対位置*/
}
p.eyecatchlabel-t {
position: absolute;/*絶対位置*/
font-size: 15px;/*文字サイズ*/
font-weight: bold;/*文字を太字に*/
color: #fff;/*文字色*/
background-color: #0d1a00;/*背景色*/
padding: 0px 25px;/*縦と横の幅*/
left: 0;/*左からの位置*/
top: 0;/*上からの位置*/
opacity: 0.8;/*透明度*/
z-index: 2000;/*重なりの順序*/
}

/*-- この記事を見るボタンの配置 --*/
.readmore {
text-align: right;/*ボタンを中央に移動*/
margin-top: -30px;/*上からの余白*/
margin-bottom: 0px;/*下からの余白*/
}
/*-- ここまで --*/

このブログのCSS編集内容そのままなので、もし自分のブログで適用させる場合は細かい部分は試しながら編集する必要があります。

 

そしてようやくできたのがこれ

これこれ。

ちゃんと背景に浮かんで見えるようにカード型。

記事のタイトルや書き出しは画像を縮小して撮っているんで、かなりぎゅってなってます。

 

PCなら記事一覧の画像にカーソル持っていくと「もわんっ」って大きくなる。

 

FashionとかGoodsとかのカテゴリがものすっごいちゃちいのでまた気が向いたら改善します。

っていうかファッション記事なんか書くつもりサラサラ無いんだが。

 

スマホでの閲覧は横2列だとぎゅってなるんで一列にしています。

こっちのスクロールも背景はしっかり固定されてる。

Google Chromeとかで観ると若干不快感あるけどとりあえず我慢。

対処方がわからん。。

 

やっと納得。

ただカテゴリページとかに行くと背景が白くなってるんで完璧とは言えないが、もうめんどくさい。

自己満足に時間をかけすぎたんでそろそろ妥協して仕事することにしました。

 

メモ用に書いとこうと思ったけどめんどくさいので、もし需要がありそうなアクセスが流れ来たらまとめよう。

 

それとまだまだ完成してないんでやることメモっておこう。

 

メモ

Hタグデザイン

 

あれ、これくらいしか思いつかない。

-Design, WordPress

Copyright© YOuTsk , 2019 All Rights Reserved Powered by STINGER.