どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
STINGER8のトップページ記事一覧を、前に通常のデザインのものからカード型にカスタマイズを行いました。
今回はその応用編ともいえるカード型のデザインから、「タイル状」にして２列、３列に記事を並べられるようにしていきたいと思います。
カード型にする時はかなりの時間がかかりましたが、今回は前回の経験を活かすことができたので、比較的スムーズにカスタマイズができて少しホッとしています。
それではSTINGER8の記事一覧を、タイル状に並べて表示するカスタマイズ方法をご紹介していきます。
カード型の記事をタイル状に並べる
前にご紹介させて頂いたSTINGER8の記事一覧を、カード型にしたカスタマイズがこちらになります。
このカスタマイズは随分苦労しましたが、これを少し応用するだけで以下のようなタイル状に変更することができます。
最近ではよく他のブログで見かけるようになりましたが、かなり雰囲気も変わってユーザー視点でも記事が見やすくなったのではないでしょうか。
まずはカード型にカスタマイズ
今回の記事一覧をタイル状に並べる為には、まずカード型にカスタマイズしておく必要があります。
もしまだ変更されていなければ、以下の記事でご紹介している「style.cssでデザインを調整する」までの作業を先に行っておきましょう。
| 参考：STINGER8の記事一覧をおしゃれなカード型にカスタマイズする方法 |
準備ができたらいよいよCSSを使ってタイル状に記事を並べていきます。
タイル状にカスタマイズする
ここで使用するテーマファイルは「style.css」だけになるので、基本的にコピー＆ペーストでカスタマイズできます。
ファイルの編集前には不都合が起きてしまった時に、すぐに前回の編集内容に戻せるようタブを２つ開いておくことをオススメします。
また、ファイルの変更は親テーマではなく「子テーマ」で行っていくので、間違えないよう注意しておきましょう。
「style.css」で２列に表示させる
ワードプレスの管理画面の左メニューから「外観」⇒「テーマの編集」と進んだら、子テーマ「style.css」ファイルを開いて下さい。
次にファイル内の空いているところに、以下のCSSコードを追加しましょう。
/*-- 記事エリア(全体)の幅 --*/
#content{
max-width:1140px;
}
/*-- 記事一覧をタイル状に表示 --*/
.itiran-custom {
position: relative;/*相対位置*/
text-align: center;/*記事エリア及びタイトルを中央揃え*/
}
.itiran-custom dl {
width: 48%;/*横幅*/
display: inline-block;/*横並びでブロック配置*/
background: #4169e1;/*背景色*/
border: none;/*ボーダーなし*/
padding: 0px;/*内側の余白*/
margin: 5px;/*記事と記事の間隔*/
margin-bottom: 30px;/*カード下の余白*/
box-shadow: 3px 7px 4px #a0a0a0;/*影をつける*/
}
.itiran-custom dt {
overflow: hidden;/*拡大領域固定*/
list-style: none;/*マーカーなし*/
}
.itiran-custom dt img {/*アイキャッチ画像*/
width: 350px;/*画像幅*/
height: 250px;/*画像の高さ*/
transition: .3s;/*拡大・縮小速度*/
}
.itiran-custom dt img:hover {/*マウスホバーで画像拡大*/
transform: scale(1.2);/*拡大率*/
}
.itiran-custom dd a {/*記事タイトル*/
font-weight: bold;/*文字を太字に*/
color: #fff;/*文字色*/
font-size: 16px;/*文字サイズ*/
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: #4169e1;/*文字色*/
background-color: #7cfc00;/*背景色*/
padding: 0px 25px;/*縦と横の幅*/
left: 0;/*左からの位置*/
top: 0;/*上からの位置*/
opacity: 0.8;/*透明度*/
z-index: 2000;/*重なりの順序*/
}
/*-- この記事を見るボタンの配置 --*/
.readmore {
text-align: right;/*ボタンを中央に移動*/
margin-top: -30px;/*上からの余白*/
margin-bottom: 0px;/*下からの余白*/
}
２列に上手く収まらない場合は記事エリアの「max-width」を大きくしたり、「width」の数値を小さくしたりして調整してみて下さい。
「この記事を見る」ボタンは以下の記事でご紹介している内容で、すでに表示させている方に限り有効なコードなので、もし必要であればこちらを参考にして下さい。
| 参考：続きを読むボタンはどこだ？STINGER8で表示させるカスタマイズ方法 |
「style.css」で３列に表示させる
次は記事を１列に３つ表示させるコードですが、基本的には２列のコードとほとんど内容は同じになります。
なので、３列のカスタマイズで変更が必要な部分のコードだけを記載しておきます。
/*-- 記事エリア(全体)の幅 --*/
#content{
max-width:1180px;
}
.itiran-custom dl {
width: 30%;/*横幅*/
}
.itiran-custom dt img {/*アイキャッチ画像*/
width: 230px;/*画像幅*/
height: 180px;/*画像の高さ*/
}
/*-- この記事を見るボタンの配置 --*/
.readmore {
margin-top: -33px;/*上からの余白*/
}
.readmore a {
font-size: 13px !important;/*文字のサイズ*/
}
このままSTINGER8で表示させると以下のような記事一覧になります。
記事タイトルは基本的に３行までに収まる長さであれば高さもキレイに表示されますが、４行目までいくとその分記事の幅が高くなってしまいます。
その場合は文字サイズを縮小してみるなどの調整をしてみて下さい。
これでSTINGER8の記事一覧をカード型から、タイル状に２列・３列で表示させるカスタマイズができたかと思います。
スマホ対応のCSSコード
スマホでは上記コードが上手く表示できずに崩れてしまうので、スマホからの閲覧時の場合は以下のコードでカード型のまま１列で表示させるようにします。
@media only screen and (max-width: 420px) {
.itiran-custom {
text-align: left;/*記事エリア及びタイトルを中央揃え*/
}
.itiran-custom dl {
width: 100%;/*横幅*/
float: none;/*配置なし*/
}
.itiran-custom dt {
float: left;/*左に寄せる*/
margin-right: 10px;/*画像とタイトルの間隔*/
}
.itiran-custom dt img {/*アイキャッチ画像*/
width: 135px;/*画像幅*/
height: 140px;/*画像の高さ*/
}
.itiran-custom dd a {/*記事タイトル*/
font-size: 15px;/*文字サイズ*/
}
.itiran-custom dd {
text-align: left;/*タイトル左寄せ*/
padding: 3px;/*タイトル位置*/
}
p.eyecatchlabel-t {
font-size: 10px;/*カテゴリー文字サイズ*/
padding: 0px 5px;/*縦と横の幅*/
}
.readmore {
text-align: right;/*ボタン右寄せ*/
margin-top: -18px;/*上からの余白*/
margin-bottom: 0px;/*下からの余白*/
}
.itiran-time {
font-size: 8px;/*投稿日時文字サイズ*/
margin-top: -25px;/*上からの余白*/
}
}
これでスマホから見た場合は以下のような表示になります。
記事一覧をパソコンからはタイル状に表示、スマホからはカード型で１列に表示と使い分けられるので、一番利用しやすい方法でお使い頂ければと思います。
記事エリアの白背景が気になる方は
STINGER8ではデフォルトの状態で、記事エリアに白背景が設定されています。
これをなくして全体の背景と同色にしたいという方は、以下のコードをstyle.cssに追記して下さい。
/*-- 記事エリアの背景 --*/
.st-main {
background: none;/*背景なし*/
padding: 0 10px;/*余白なし*/
}
上記コードを反映させると、余白も削除することができるので今までよりも横幅を広く使うことができます。
記事一覧以外に投稿ページの背景もなくなるので、もし都合が悪い場合は以下のコードをstyle.cssに追加して、ブログ背景を好きな色に変更するといいかと思います。
/*-- ブログの背景 --*/
html,body {
background-color: #fff; /*背景色*/
}
STINGER8カスタマイズまとめ
STINGER8の記事一覧を一度カード型にカスタマイズしてしまえば、あとはタイル状にしたりするのは簡単な作業でできます。
今回ご紹介したコードはあくまで私が使っているサンプルデザインのようなものなので、そこから自分らしいデザインにカスタマイズしていくのが基本になります。
とは言っても私自身もCSSにメチャメチャ詳しい訳ではないので、今も勉強中ですが色々ブログのデザインを自分の手で変えることはとても楽しいので、ぜひSTINGER8でカスタマイズに挑戦されてみて下さい。
