WordPress(AFFINGER5)で同人サイトを構築する(4)【小説一覧編】

さて、Wordpressで同人サイトを構築するシリーズ第4回、今回は小説一覧編となります。

こんにちは、ささお(sasao_blog)です。

今回カスタマイズする小説一覧画面はイラスト一覧画面とほとんど同じカスタマイズを行っているため説明などはアッサリとしていますので、前回記事と合わせてご覧ください！

前回記事

WordPress(AFFINGER5)で同人サイトを構築する(3)【イラスト一覧編】

さて、Wordpressで同人サイトを構築するシリーズ第3回、今回から早速カスタマイズに入って行きたいと思います。 こんにちは、ささお(sasao_blog)です。 WordPressで、といいつつA ...

続きを見る

小説一覧画面の完成形

デモサイトの該当ページへ

ブログ記事の一覧画面と差別化を図るためにイラスト一覧画面と同じくカード型にしています。

イラスト一覧画面と異なる部分は、

の3か所です。

サムネイル表示以外は個人の好みが出るところかな、と思っているので好きにカスタマイズしてもらえれば良いかなぁと思っています。

カスタマイズ実施

1.編集するテンプレートデータ

今回のカスタマイズで編集するテーマファイルは下記です。

前回のイラスト一覧画面とほぼ一緒です。

違う所はサムネイルなし用のテンプレートファイルを修正してカスタマイズするという所ですね。

とはいえ、この記事ではテンプレートファイルの中身を置き換える事を想定しているので、②の「itiran-thumbnail-off.php」については特に意識することは無いです！（笑）

興味のある方は元のPHPファイルと中身を見比べてみてください。

2.「category.php」を編集する

2-1.「category.php」を「category-スラッグ名.php」に変更する

前回と同じように今回は「ジャンルA」の小説一覧（カテゴリーのスラッグ名：novel-a）を変更する事にしたいと思うので、ファイル名を「category-novel-a.php」にリネームします。

2-2.コードを修正する

101行目の以下のコード

<?php get_template_part( 'itiran' ); //投稿一覧読み込み ?>

ここを下記のように変更します。

<?php get_template_part( 'itiran-thumbnail-off-novel' ); //投稿一覧読み込み ?>

イラスト一覧画面と同じくcategory.phpの編集箇所はここのみです。

3.「itiran-thumbnail-off.php」を編集する

3-1.「itiran-thumbnail-off.php」を「itiran-thumbnail-off-novel.php」に変更する

イラスト一覧画面と同じく、サムネイルなしのテンプレートファイルを複製して、末尾に「-novel」を付けたものを作成します。

3-2.コードを修正する

作成した「itiran-thumbnail-off-novel.php」の中身を以下のソースに置き換えます。

<div class="kanren itiran-custom">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div class="clearfix novel-h">
            <?php get_template_part( 'st-single-category-nolink' ); //カテゴリーとタグ ?>
            <h3>
            <?php the_title(); ?>
            </h3>
                <?php if ( $post->note ) : ?>
                    <div class="gallery-note">
                        <?php echo post_custom('note'); ?>
                    </div>
                <?php endif; ?>
            <a href="<?php the_permalink(); ?>">記事ページへ</a>
        </div>

    <?php endwhile;
    else: ?>

    <?php endif; ?>
</div>

小説一覧画面はイラストと異なり、カスタムフィールド「note」の表示をすべて表示する記述にしています。

説明文は沢山書きたかったりすることもあるかな？　と思いまして…。

その場合PC表示ではボックスの高さによっては文章が途切れてしまう事があるため、CSSで高さを調整できるようにクラスを追加しています。

4.「st-single-category.php」を編集する（編集済みの場合は不要）

既にイラスト一覧画面でカスタマイズを実施した人は不要です。

「イラストは描かないし、小説だけだよ～」という方は前回記事を参考に「st-single-category.php」の編集を行ってください。

5.テンプレートファイルをアップロードする

前回記事と同様、テンプレートファイルを子テーマのフォルダにアップロードしてください。

 6.CSSを調整する

表示のCSSは以下の通りです。

前回のイラスト一覧のCSSとほぼ同じなのですが、小説はPC表示でのボックス高さを変更する用に黄色いハイライト部分を追記しています。

まるっと置き換えでも、該当箇所のみ追加でも、お好きな方でどうぞ。

もちろん、「ボックスの高さはイラストも小説も同じでいいや～」という場合は今回追加した記述はなくてOKです！

/*========================================

記事一覧をカード型表示

===========================================*/

/*media Queries 横記事デザイン（546px以上）
----------------------------------------------------*/
@media only screen and (min-width: 546px) {
    /*----------------------------------------------------
    記事一覧デザイン
    -----------------------------------------------------*/
    .itiran-custom .clearfix {
        width: 44%;
        height: 130px;
    }
    .itiran-custom .novel-h {
        height: 110px;
    }
}
 
/*media Queries 縦記事デザイン（546px以下）
----------------------------------------------------*/
@media only screen and (max-width: 546px) {
    /*----------------------------------------------------
    記事一覧デザイン
    -----------------------------------------------------*/
    .itiran-custom .clearfix {
        width: 93%;
        height: auto;
    }
}
/*----------------------------------------------------
それ以外の共通デザイン
-----------------------------------------------------*/
 
/*----------------------------------------------------
記事一覧デザイン (イラスト)
-----------------------------------------------------*/

.itiran-custom .clearfix {
    display: block;
    padding: 10px;
    margin: 0 1% 17px 1%;
    cursor: pointer;
    background: white;
    float: left;
    position: relative;
    overflow: hidden;
    transition-duration: 0.5s;
    border: solid 1px #ccc;
}
.itiran-custom .clearfix:before {
    content: " ";
    position: absolute;
    bottom: -4px;
    left: 0px;
    width: 0;
    height: 0;
    border-width: 0 4px 4px 0px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #f0ebeb;
}
.itiran-custom .clearfix:hover {
    background: #f1f1f1;
    -moz-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    -o-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: none;
}
.itiran-custom .clearfix a {
    text-decoration: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0; /*テキスト非表示*/
    text-indent: 150%; /*テキスト非表示*/
    white-space: nowrap; /*テキスト非表示*/
    overflow: hidden; /*テキスト非表示*/
}

.itiran-custom .clearfix h3 {
    width: 100%;
    float: none;
    height: auto;
    font-size: 1em;
    line-height: 1.6;
    color: black;
    margin: 0;
    border: 0;
}

.itiran-custom dl:last-child{
    border: solid 1px #ccc;
    padding: 10px;
    margin: 0 1% 17px 1%;
}



.gallery-tag {
    background: #212121;
    color: #ffffff;
    font-size: 11px;
    margin: 0 0 5px;
    padding: 6px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    line-height: 1em;
}

.itiran-custom .gallery-note {
    color: #666666;
    font-size: 13px;
    margin-bottom:5px;
}

完成！

これで小説の一覧画面は完成です。

イラスト一覧とあまり変わり映えはないですが、同じ「NoImage」のサムネイルがズラッと並ぶよりは良いかな？　という感じですね。

今日のひとこと

次回は他ジャンルのカテゴリー一覧を見た場合にも同じ見た目になるカスタマイズについて紹介する予定です。

AFFINGERのというよりは、Wordpressのカスタマイズが中心です。