こんにちは。ビースマ!タイゾーです。
今回はAFFINGER5の環境下で、当サイトでも適用している「カード型記事一覧」を無料で実現する方法を紹介します。
導入ビフォー/アフター
記事で紹介する方法の、導入前後のイメージです。
AFFINGERを使用中であれば、「JET」という有料テーマを購入することで簡単にカード型記事一覧にカスタマイズできますが、税込み4980円とちょっとお高め。できれば無料で導入したいところ。
そんな時に、無料でカード型一覧のカスタマイズ方法を紹介して下さっている記事を見つけたので、それを参考に導入しました。
当記事の内容の90%以上はクラインの備忘壺さんの記事を参考にしています。
まずはクラインの備忘壺さんの記事へアクセス頂き、わからない事があれば戻ってきてください。
クラインの備忘壺 さん
【AFFINGER5】TOPページの記事一覧をおしゃれなカード型にカスタマイズする方法【CSSで対応する】
HTML,CSSの知識が乏しく、wordpressを初めて1ヶ月未満の僕でも、導入ができました。
クラインの備忘壺さんの内容に加え、より細かな導入法と、スマホでの2列表示適応の為にカスタマイズした手順を紹介しします。
導入準備編(PC上での操作)
step
1Affinger 5テーマを購入した際の、親テーマフォルダ・子テーマフォルダの展開。
affinger 5テーマを購入した際フォルダがZIPのままであれば、それぞれを解凍・展開する。
step
2affinger5-child フォルダのコピーを作成
子テーマフォルダのコピーを作成し、card型テーマ用である事がわかる名前をつける
step
3親テーマフォルダの2ファイルを子テーマフォルダにコピー
affinger フォルダの中から、以下2つのファイルをコピーする
・itiran-original-thumbnail-on.php
・itiran-thumbnail-on.php
step
4コピーした2つのファイルを子テーマフォルダ(affinger5-child-card)内に貼り付け
・itiran-original-thumbnail-on.php 、・itiran-thumbnail-on.php コピーして作成した子テーマフォルダ(affinger5-child-card)内に貼り付け
step
5affinger5-child-cardフォルダを.zipに圧縮
affinger5-child-cardフォルダをzip形式に圧縮します。
以上にて、事前準備完了です。
続いて、wordpressで作業をします。
WordPress実装編
step
1子テーマをwordpressにアップロード
準備した「カード型記事一覧用」の子テーマをwordprssにアップします。
アップロード手順
- wordpressにログイン
- 管理画面より 外観→新規追加→テーマのアップロード の順にクリック
- ファイルを選択→ affinger5-child-card.zipをアップロード&インストール
- テーマ一覧のうち、新しく追加されたaffinger-childテーマを有効化する。
step
2テーマにCSSコードを追加
CSS追加手順
- 管理画面より 外観→カスタマイズ→追加CSS の順にクリック
- 追加CSS内に、以下のコードを丸々コピペする
- CSSがコピペできたら「公開」ボタンで反映
「コードを表示」をおすとCSSコードを表示します。
/*===========
Top一覧カード化
============*/
.kc-kanren {
display: flex;
flex-wrap: wrap;
}
.kc_card {
/*width: 100%;*/
width: 48%;
overflow: hidden;
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: #fff;
transition: all 0.25s ease-in;
}
.kc_card:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
box-shadow: 0 7px 7px -7px rgba(0, 0, 0, 0.3);
}
.kc_card .details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1em 1em 0 1em;
font-size: 0.8em;
}
.kc-card-image {
position:relative;
}
.kc-blockcat {
background-color:#4682b4;
color: #ffffff;
font-size: 1.1em;
margin-top: 0.6em;
margin-left: 0.7em;
padding: 0.4em 0.7em;
border-radius: 0.3em;
position: absolute;
}
.kc-kanren dt {
width: 100% !important;
float:none !important;
}
.kc-kanren dt img {
width: 100% !important;
}
.kc-kanren dd {
text-align:center !important;
padding-left: 0 !important;
}
.kc-kanren dd h3 {
margin-top: 0.7em !important;
}
.kc-readmore-container {
margin: 0 auto;
margin-top: 2.5em;
}
.kc-readmore {
border: #696969 double;
padding: 0.7em;
font-size: 1.2em;
text-decoration: none;
color: #4682b4;
font-family: FontAwesome;
content: '\f061';
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
vertical-align: middle;
font-weight: bold;
}
.kc-bloginfo-container {
float: right;
margin-right: 1.5em;
margin-top: -0.4em;
margin-bottom: -0.5em;
}
.kc-title-container {
margin-left: 0.7em;
margin-right: 0.7em;
margin-top: 1em;
}
.kc-title {
font-size: 1.3em !important;
}
.kc-bloginfo-container p {
font-size: 1.2em !important;
}
/* PC */
@media screen and (max-width: 1024px) { }
/* Tablet*/
@media screen and (max-width: 896px) {
.kc-title {
letter-spacing: 0.1em;
line-height: 1.5em !important;
}
}
/* SP */
@media screen and (max-width: 480px) {
.kc_card {
width: 100%;
}
.kc-title {
font-size: 1.2em !important;
letter-spacing: 0.1em;
line-height: 1.5em !important;
}
.kc-bloginfo-container p {
font-size: 1.0em !important;
margin-top: 1.0em !important;
}
}
step
3子テーマのPHPファイルの編集
wordpress のテーマエディタから、子テーマにコピーしたPHPファイルを編集します。
子テーマの編集手順
- 管理画面より 外観→テーマエディタ の順にクリック
- 右端に、準備編でコピーしていた2つのファイル(itiran-***)があることを確認する。
- ・itiran-original-thumbnail-on.php ・itiran-thumbnail-on.php
それぞれに以下コードをまるまるコピー(上書き)する。 - コピー後、それぞれ、「ファイルを更新」で適用する。
テーマエディタでitiran-ファイルがない場合、子テーマ選択に誤りがありので、外観→テーマ からもう一方のaffinger-child テーマを有効化してください。
itiran-**タブでコードを表示
<div class="kanren kc-kanren<?php st_marugazou_class(); //サムネイルを丸くする ?>">
<?php
if ( trim( $GLOBALS["stdata99"] ) !== '' ) {
$category_ID = esc_attr( $GLOBALS["stdata99"] );
} else {
$category_ID = 0 ;
}
$args = array(
'cat' => array($category_ID),
'paged' => $paged
);
if(trim($GLOBALS['stdata214']) !== ''):
$st_infeed = $GLOBALS['stdata214'];
else:
$st_infeed = '';
endif;
$st_infeed_count = 1;
$st_query = new WP_Query( $args ); ?>
<?php
if ( $st_query->have_posts() ): ?>
<?php
while ( $st_query->have_posts() ) : $st_query->the_post(); ?>
<?php //インフィード広告
if( (is_active_sidebar( 26 ) && (trim($st_infeed) !== '')) && ($st_infeed_count % $st_infeed === 0) ){ ?>
<div class="st-infeed-adunit">
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 26 ) ) : else : ?>
<?php endif; ?>
</div>
<?php
}
$st_infeed_count ++;
?>
<?php
//必要なカテゴリ情報を変数に格納する
$category= get_the_category(); //カテゴリ
$catId = $cat[0]->cat_ID; //カテゴリID
$cat_slug = $category[0]->category_nicename; //slig
$cat_name = $category[0]->cat_name; //カテゴリ名
$cat_link = get_category_link($catId); //カテゴリ固定ページへのリンク先
?>
<dl class="clearfix kc_card">
<dt>
<a href="<?php the_permalink(); ?>">
<div class="kc-card-image">
<a href="<?php $cat_link; ?>" class="kc-blockcat <?php echo $cat_slug ?>"><?php echo $cat_name ?>
</a>
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumbnail-top' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<?php if(trim($GLOBALS['stdata97']) !== ''){ ?>
<img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="100" height="100" />
<?php }else{ ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
<?php } ?>
<?php endif; ?>
</div>
</a>
</dt>
<dd>
<?php //get_template_part( 'st-single-category' ); //カテゴリー ?>
<h3>
<a href="<?php the_permalink(); ?>">
<div class="kc-title-container">
<?php the_title('<p class="kc-title">', '</p>'); ?>
</div>
</a>
</h3>
<div class="kc-bloginfo-container">
<?php get_template_part( 'itiran-date' ); //投稿日 ?>
</div>
<?php //get_template_part( 'st-excerpt' ); //抜粋 ?>
</dd>
</dl>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
<?php
if(trim($GLOBALS['stdata214']) !== ''):
$st_infeed = $GLOBALS['stdata214'];
else:
$st_infeed = '';
endif;
$st_infeed_count = 1;
?>
<div class="kanren kc-kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php //インフィード広告
if( (is_active_sidebar( 26 ) && (trim($st_infeed) !== '')) && ($st_infeed_count % $st_infeed === 0) ){ ?>
<div class="st-infeed-adunit">
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 26 ) ) : else : ?>
<?php endif; ?>
</div>
<?php
}
$st_infeed_count ++;
?>
<?php
//必要なカテゴリ情報を変数に格納する
$category= get_the_category(); //カテゴリ
$catId = $cat[0]->cat_ID; //カテゴリID
$cat_slug = $category[0]->category_nicename; //slig
$cat_name = $category[0]->cat_name; //カテゴリ名
$cat_link = get_category_link($catId); //カテゴリ固定ページへのリンク先
?>
<dl class="clearfix kc_card">
<dt>
<a href="<?php the_permalink(); ?>">
<div class="kc-card-image">
<!--
<a href="<?php //$cat_link; ?>" class="kc-blockcat <?php //echo $cat_slug ?>"><?php //echo $cat_name ?>
</a>
-->
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumbnail-top' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<?php if(trim($GLOBALS['stdata97']) !== ''){ ?>
<img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="100" height="100" />
<?php }else{ ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
<?php } ?>
<?php endif; ?>
</div>
</a>
</dt>
<dd>
<?php //get_template_part( 'st-single-category' ); //カテゴリー ?>
<h3>
<a href="<?php the_permalink(); ?>">
<div class="kc-title-container">
<?php the_title('<p class="kc-title">', '</p>'); ?>
</div>
</a>
</h3>
<div class="kc-bloginfo-container">
<?php get_template_part( 'itiran-date' ); //投稿日 ?>
</div>
<?php //get_template_part( 'st-excerpt' ); //抜粋 ?>
</dd>
</dl>
<?php endwhile;
else: ?>
<?php endif; ?>
</div>
以上でブログカード化は完了です!
トップページを確認し、記事一覧がカード型になっているか確認しましょう。
スマホ表示で2列表示にする
上記内容だと、PCで表示した際は、ブログカードが2列表示になりますが、
スマホで表示した場合は、1列表示となり少し閲覧しづらいです。
外観→カスタマイズ→追加CSS 内の /* SP */ 以下のコードを好みの値に変えることで解決できますが、
「わからないよ!」という方はビースマ!で適用している数値をコピペしてください。
「コードを表示」をおすとCSSコードを表示します。
/*===========
Top一覧カード化
============*/
.kc-kanren {
display: flex;
flex-wrap: wrap;
}
.kc_card {
/*width: 100%;*/
width: 48%;
overflow: hidden;
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: #fff;
transition: all 0.25s ease-in;
}
.kc_card:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
-webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
box-shadow: 0 7px 7px -7px rgba(0, 0, 0, 0.3);
}
.kc_card .details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1em 1em 0 1em;
font-size: 0.8em;
}
.kc-card-image {
position:relative;
}
.kc-blockcat {
background-color:#4682b4;
color: #ffffff;
font-size: 1.1em;
margin-top: 0.6em;
margin-left: 0.7em;
padding: 0.4em 0.7em;
border-radius: 0.3em;
position: absolute;
}
.kc-kanren dt {
width: 100% !important;
float:none !important;
}
.kc-kanren dt img {
width: 100% !important;
}
.kc-kanren dd {
text-align:center !important;
padding-left: 0 !important;
}
.kc-kanren dd h3 {
margin-top: 0.7em !important;
}
.kc-readmore-container {
margin: 0 auto;
margin-top: 2.5em;
}
.kc-readmore {
border: #696969 double;
padding: 0.7em;
font-size: 1.2em;
text-decoration: none;
color: #4682b4;
font-family: FontAwesome;
content: '\f061';
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
vertical-align: middle;
font-weight: bold;
}
.kc-bloginfo-container {
float: right;
margin-right: 1.5em;
margin-top: -0.4em;
margin-bottom: -0.5em;
}
.kc-title-container {
margin-left: 0.7em;
margin-right: 0.7em;
margin-top: 1em;
}
.kc-title {
font-size: 1.0em !important;
}
.kc-bloginfo-container p {
font-size: 1.2em !important;
}
/* PC */
@media screen and (max-width: 1024px) { }
/* Tablet*/
@media screen and (max-width: 896px) {
.kc-title {
letter-spacing: 0.02em;
line-height: 1.2em !important;
}
}
/* SP */
@media screen and (max-width: 480px) {
.kc_card {
width: 50%;
}
.kc-title {
font-size: 0.9em !important;
letter-spacing: 0.09em;
line-height: 1.3em !important;
}
.kc-bloginfo-container p {
font-size: 0.8em !important;
margin-top: 0.5em !important;
}
}
まとめ
今回はaffinger5テーマ環境で使用できる「ブログのカード型記事一覧」をCSSで実現する方法を紹介しました。
「JET」には憧れるものの、無料でできたらそれに越したことはないですよね。
好みの見た目になると、ブログ更新のモチベーションもあがります。