stinger plus2
WordPressカスタマイズstinger plus2アイキャッチ

【WordPress】Stinger Plus2で記事一覧のアイキャッチ画像を大きくしたり、トップページのカスタマイズ！

2017.09.15

今回は久しぶりにStinger Plus2の記事です。
基本的にはコピペでとりあえずできるので、
お手軽にお試しください。
細かいところはご自分を修正をお願いいたします。

なお、こちらはStinger8の記事です。
Stinger Plus2とは少々作業が異なりますので、
Stinger Plus2の場合は、こちらをご覧ください。
【WordPress】Stinger8でトップページ記事一覧のアイキャッチやカテゴリー等をカスタマイズ！

カスタマイズをするので、子テーマ推奨です。

ちなみにデフォルトの状態はこんな感じです。

完成はこんな感じです。

スポンサーリンク
新たにレンタルサーバーを選ぶならこれ！
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー！
  • 自動バックアップ機能に標準対応で安心運用可能！
気になるポイント！キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！ またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！ またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

クラス名を追加する！

トップページの記事一覧を編集する場合はまず、
itiran-thumbnail-on.phpを編集します。

<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<dl class="clearfix">
			<dt><a href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
						<?php the_post_thumbnail( 'thumbnail' ); ?>
					<?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; ?>
				</a></dt>
			<dd>
				<?php get_template_part( 'st-single-category' ); //カテゴリー ?>
				<h3><a href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a></h3>

				<div class="blog_info <?php st_hidden_class(); ?>">
					<p><i class="fa fa-clock-o"></i>
						<?php the_time( 'Y/m/d' ); ?>
						&nbsp;<span class="pcone">
							<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
							<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>
          </span></p>
				</div>

				<?php if( !st_is_mobile() && trim( $GLOBALS['stdata202'] ) === '' )://モバイル以外の場合のみ表示 ?>
					<div class="smanone">
						<?php the_excerpt(); //抜粋文 ?>
					</div>
				<?php endif; ?>

			</dd>
		</dl>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>
<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">

1行目にある上記のコードを見つけ、
下記の通りkanren-02というクラス名を追加します。

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

アイキャッチ画像を大きくする！

アイキャッチ画像を大きくする場合は、
同様に itiran-thumbnail-on.phpのファイルの6行目にある
以下のコードを探します。

<?php the_post_thumbnail( 'thumbnail' ); ?>

このコードにあるの‘thumbnail’を‘medium’に書き換えます。

style.phpを編集する！

下記のコードをstyle.cssに追記します。

.kanren-02 dt{
	width:270px;
}
.kanren-02 dt img{
	width:270px;
}

.kanren-02 dd{
	padding-left:315px;
}

これで大きくなりました。

スマホ用のコード

そのままの設定ですと、
スマホでの表示の場合は、崩れてしまうので、
スマホ用にもstyle.cssに以下のコードをに追記します。

@media screen and (max-width: 480px) {

.kanren-02 dt{
        float:none;
        width:100%;
        margin:0 auto;
}

.kanren-02 dt img{
        width:100%;
}

.kanren-02 dd{
        margin-top:10px;
        padding-left:0px;
}

画像の大きさは好みだと思いますので、
好きな大きさに変更して下さい。

新着記事のタイトルにおける文字サイズを変更する

記事のタイトル部分の文字サイズを変更する場合は、
以下のコードをstyle.cssに追記し、font-sizeを調整してください。

.kanren h3 a{
     font-size: 23px;
}

抜粋文を消す！

ごちゃごちゃしてしまうので、
抜粋文を消してしまいます。

抜粋文を消す場合は、
以下の様にコメントアウトするか、この1行を削除してしまいましょう。

<!--<?php the_excerpt(); //抜粋文 ?>-->

これで抜粋文がなくなりました。

タグを非表示にして、カテゴリーを装飾する

タグとカテゴリーは個人的には、かぶる傾向にあるので、
どちらかでいいと思っています。
そのため、今回はタグを非表示にします。

タグを非表示にする

タグを非表示にする場合は、
itiran-thumbnail-on.phpファイルの26行目にある以下のコードをコメントアウトするか、消しましょう。

<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>

タグを装飾する

記事一覧のタグを装飾する場合は、
以下のコードをstyle.phpに追記します。

.pcone a {
	background: #38b48b;
	margin-right: 6px;
	margin-bottom: 6px;
	color: #fff !important;
	padding: 4px 6px;
	border-radius: 4px;
	font-size: 12px;
	display: inline-block;
}

こんな感じになります。

こまかい補足

細かいところですが、少しだけ補足があります。

カテゴリー間の【，】を消去する

上記のカスタマイズをしても、カテゴリーとカテゴリーの間に
【，】が入っています。
これをなくす場合は、
itiran-thumbnail-on.phpの25行目にある以下のコードを見つけてください。

<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>

上記のコードにある(‘，’)の，を半角スペースに変更してください。

<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ' ' ) ?><br/>

これで完了です。

投稿日とカテゴリーを2段にする

投稿日とカテゴリーを2段にするためには、
itiran-thumbnail-on.phpの23行目あたりにある
＜?php the_time( ‘Y/m/d’ ); ?＞というコードを見つけ、
その後ろに、＜br/＞を追記してください。

<?php the_time( 'Y/m/d' ); ?><br/>

投稿日を一番上にする

上記と同様にitiran-thumbnail-on.phpの22行目あたりにある、
下記のコードを探します。

<i class="fa fa-clock-o"></i>
<?php the_time( 'Y/m/d' ); ?>

こちらのコードを切りとり、
＜?php get_template_part( ‘st-single-category’ ); //カテゴリー ?＞
の下あたりに貼り付けます。

最終的にitiran-thumbnail-on.phpのコードは以下の様になっています。

<div class="kanren kanren-02 <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<dl class="clearfix">
			<dt><a href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
						<?php the_post_thumbnail( 'medium' ); ?>
					<?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; ?>
				</a></dt>
			<dd>
				<?php get_template_part( 'st-single-category' ); //カテゴリー ?>
						
						 <i class="fa fa-clock-o"></i>
                         <?php the_time( 'Y/m/d' ); ?>
						
				<h3><a href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a></h3>

				<div class="blog_info <?php st_hidden_class(); ?>">
					<p>
						&nbsp;<span class="pcone">
							<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ' ' ) ?><br/>
							<!--<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ',' ); ?>-->
          </span></p>
				</div>

				<?php if( !st_is_mobile() && trim( $GLOBALS['stdata202'] ) === '' )://モバイル以外の場合のみ表示 ?>
					<div class="smanone">
						<!--<?php the_excerpt(); //抜粋文 ?>-->
					</div>
				<?php endif; ?>

			</dd>
		</dl>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>
	<?php endif; ?>
</div>

まとめ

いかがだったでしょうか？
ざっくりではありますが、
トップページの記事一覧のカスタマイズをご紹介いたしました。

そろそろトップぺージのデザインが飽きてきたので、
新たにカスタマイズをすることを検討中です。

コピペも良いですが・・・

カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ！

私が使用したおすすめの本はこちらです。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

posted with カエレバ
エビスコム ソシム 2014-10-28
Amazon
楽天市場
HTML&CSSとWebデザインが 1冊できちんと身につく本

posted with ヨメレバ
服部 雄樹 技術評論社 2017-07-21
Amazon
Kindle
楽天ブックス
楽天kobo

コメント

  1. 免疫大魔王 より:
    2017年12月20日 12:50 PM

    ぷるぷる様

    初めまして！
    当方、最近はてなからワードプレスに引っ越しました。
    STINGER Plus2を使っているのですが、こちらのサイトには大変お世話になっております。
    そこで質問ですが、この記事の記事一覧のタグの装飾についてお聞きしたいのですが、
    私のブログの記事一覧にはそもそもカテゴリーの表記がありません。というより、どこかを
    いじれば表記できるのでしょうが、どうしても判らずに困っております。
    それが表記できれば、こちらのカスタマイズも活かせるかと思うのです。
    どのようにすれば記事一覧にカテゴリーを表記することが出来るでしょうか？

    返信
    • ぷるぷるぷるぷる より:
      2018年1月10日 9:55 AM

      免疫大魔王　さん

      コメントありがとうございます。
      また、返信が遅くなり申し訳ありません。

      カテゴリの表記がないとのことですが、解決しましたでしょうか？
      ちなみにSTINGER PLUS2でもカテゴリーの表記がデフォルトでされているとは思うのですが・・・
      もしかすると作成した記事でカテゴリーを設定していない状態ではないでしょうか？

      返信
  2. ぷー より:
    2019年6月26日 4:43 PM

    こんにちは。
    いきなりですがご質問となります！

    私もSTINGERplus2を使っていてこの記事同様に記事一覧を変えたいと考えています。

    記載している手順でしたんですが、
    アイキャッチは大きくはなりましたが、画像の下にタイトルが表示されている状態になってしまいます。
    一応一通り工程全て試しましたが改善なく。。

    見本のように画像の右側にタイトル等が表示されないのは、何が原因かわかりますでしょうか？

    私自身が詳しくなく操作が間違っている可能性と説明下手くそですみません。。
    返信いただけると嬉しいです。
    よろしくお願い致します。

    返信
    • ぷるぷるぷるぷる より:
      2019年6月27日 10:14 PM

      ぷー　さん
      コメントありがとうございます。
      アイキャッチ画像の下にタイトルが表示されてしまうということですが、
      実際にそのサイトを確認してみない事には原因がわかりません。

      差し支えなければ、ぷーさんのサイトのURLを教えていただけると助かります。

      返信