WordPress STINGER7

STINGER7:記事一覧をカード型にカスタマイズ【その1】

当サイトはアフィリエイト広告を利用しています。

eye_stinger7

ちょっと忙しくて間が空いてしまいました、すみません(^^;)
お待たせしました!「記事一覧の表示をカスタマイズ」をしたいと思います!

記事一覧のカスタマイズは問い合わせが多かったので、2タイプに分けてやってみようと思います。
今回は初期状態と同じように1行に1つの記事でカード型にするタイプです。
完成するとこんな感じになります↓

20160504a

それでは早速やっていきましょう〜♪

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

記事一覧部分の背景を消す

まずは記事一覧を囲む大枠の背景を消します。
以下のファイル全ての同じ部分を変更します。

home.php(トップページ記事一覧)
category.php(カテゴリー別の記事一覧)
archive.php(タグ別、年別などの記事一覧)
search.php(検索結果の記事一覧)

上から5行目辺りにあるこのコードを↓

<main <?php st_text_copyck(); ?>>

このように変更します(class名を追加)↓

<main class="backnon" <?php st_text_copyck(); ?>>

<?php st_text_copyck(); ?>」の部分は、STINGER管理の画面にあるSEO関連設定の「テキスト選択不可にする」というチェックを入れた場合に必要になるので念のため残してあります。
テキストを選択してコピーできないようにする設定ですね。

class名を追加したら、CSSで背景と余白を削除します。
style.cssに以下のコードを追記してください↓

.backnon {
	background: none;
	padding: 0 10px;
}
@media only screen and (min-width: 781px) {
.backnon {
	padding: 0;
}
}

これで記事一覧を囲っている大枠の白い背景が消えたと思います。
上記CSSはPCとタブレット以下(780px以下)のサイズで左右の余白を変えています。

ちなみに当ブログのように記事ページや固定ページの背景も全部消したい場合はこのコードを追加してください↓

main {
	background: none;
}

 

itiran-thumbnail-on.phpを編集

記事一覧をカード型にする下準備として「itiran-thumbnail-on.php」を少し編集します。

抜粋文を削除

下から10行目辺りにある以下のコードを探して削除してください↓
抜粋文を残したままにしたい場合は飛ばしてください。

<div class="smanone2">
	<?php the_excerpt(); //抜粋文 ?>
</div>

class名を追加

編集に必要なクラス名を追加します。
itiran-thumbnail-on.phpの一番上にあるこのコードを↓

<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">

このように変更して「itiran-custom」というクラスを追加します↓

<div class="kanren itiran-custom <?php st_marugazou_class(); //サムネイルを丸くする ?>">

クラス名を追加する理由

なぜ「itiran-custom」というクラスを追加するのか少し説明します。
STINGER7では、メイン部分の記事一覧記事下に表示される関連記事サイドバーのNEW POSTなど、全て共通のコードになっています。

そのため、クラス名を追加しないままCSSで装飾しようとすると、関連記事やNEW POSTの部分にまで反映されてしまいます。

今回のように1行に1つの記事なら同じようにCSSで指定しても良いかもしれませんが、そのうちメイン部分の記事一覧は1行にカード型で2つ以上の記事が並ぶようにカスタマイズするつもりなので、個別にCSSを指定できるようにクラス名を付けておきます。

CSSでカード型に装飾

ではいよいよカード型にしてみましょう!
以下のコードをcssに追加してください↓

.itiran-custom dl {
	border: none; /* 下にあるボーダーを消す */
	background: #fff; /* カードの背景色 */
	padding: 10px; /* カード内側の余白 */
}
.itiran-custom dl:last-child {
	padding-bottom: 10px; /* 最後のカードに設定されている余白を修正 */
}
@media only screen and (min-width: 414px) { /* スマホは除外 */
.itiran-custom dl h3 a {
	font-size: 20px; /* 記事タイトルの文字サイズ */
	line-height: 1.4em; /* 記事タイトルの行の高さ */
}
}

これでとりあえずカードっぽくなったと思います!
以下のカスタマイズはお好みでどうぞ↓

サムネイル画像のサイズを変更する

サムネイル画像のサイズ変更は以前に記事を書いていますので参考にしてみてください。

STINGER7/Plus:トップページ記事一覧のサムネイル画像のサイズを変える方法
STINGER7で「サムネイルのサイズを変更したい」というリクエストを頂いたので早速カスタマイズしたいと思います!

サムネイル画像の角を丸くする

メイン部分のサムネイル画像のみ角を丸くする場合は以下のcssを追記してください↓

.itiran-custom dt a img {
	border-radius: 10px;
}

「記事下の関連記事」や、「サイドバーのNEW POST」のサムネイル画像も全て角を丸くする場合は以下のコードで↓

.kanren dt a img {
	border-radius: 10px;
}

数字を大きくすると丸みも大きくなります。
お好みで調整してくださいね。

カードに影を付ける

css3の「box-shadow」でカードに影を付けてみましょう。
先ほどcssに追加した「.itiran-custom dl」に以下のように追加してみます↓

.itiran-custom dl {
	border: none;
	background: #fff;
	padding: 10px;
	margin-bottom: 20px; /* カード下に余白を追加 */
	box-shadow: 1px 3px 3px #999999;
	-moz-box-shadow: 1px 3px 3px #999999;
	-webkit-box-shadow: 1px 3px 3px #999999;
}

「box-shadow」の値はそれぞれ以下の様な指定になっています。

1番目の数字・・・横方向の向き。正の値は右へ、負の値は左へ移動します。
2番目の数字・・・縦方向の向き。正の値は下へ、負の値は上へ移動します。
3番目の数字・・・ぼかしの大きさ。値が大きいほどぼかしが強くなります。

影の色も好きな色に変更できるし、「 background: #fff; 」を削除すると背景色が無くて影だけ付くのでこんな感じになります↓

20160504b

あなたのサイトに合わせて色々試してみてくださいね(^^)

まとめ

ということで今回はSTINGER7の記事一覧をカード型にするカスタマイズでした!
次回はさらに応用編をやってみたいと思います!

【その2】書きました↓

STINGER7:記事一覧をカード型にカスタマイズ【その2】
...

【その3】も書きました↓

STINGER7:記事一覧をカード型にカスタマイズ【その3】
...

STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。
WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. なっち より:

    はじめまして、なっちと申します。

    こちらの記事に出会ってから、STINGER7のカスタマイズがとても楽しくなりました♪
    素敵な記事ばかりで、全部読破してしまいました!
    ありがとうございますm(_ _)m

    一つ質問なのですが…

    記事一覧で、PCでは抜粋文を載せたいのですが、スマホは非表示にしたいと思っています。
    そのようなことは可能なのでしょうか?

    どうもスマホに抜粋文を載せると見た目が良くないんですよね…。
    (改行されてサムネイルより下に飛び出てしまうので)

    もしお分かりでしたらご教授いただければと思い、コメントさせていただきました。
    お手数おかけしますが、よろしくお願いします。

  2. DICEDICE より:

    なっち様

    コメントありがとうございます!
    お役に立てて幸いです(^^)

    抜粋文をスマホだけ非表示にする場合は簡単です!

    <div class="smanone2">
    <?php the_excerpt(); //抜粋文 ?>
    </div>

    「itiran-thumbnail-on.php」にある上記コードの「"smanone2"」を「"smanone"」にするとスマホで表示されなくなりますよ。
    試してみてくださいね〜♪

  3. なっち より:

    お返事ありがとうございます!
    たったこれだけなんですね!ビックリです!
    早速やってみます♪

    これからも記事更新頑張ってください☆
    ありがとうございました(^^♪

タイトルとURLをコピーしました