Stinger8のカスタマイズ – くまほーブログ

メモ代わりに置いておきます。
カスタマイズというほどでは無いのですが、どこを弄ったのか忘れないように。

サムネイル画像のサイズ変更

CSSに以下を追加。

/*アイキャッチ画像*/
.kanren dt {
    float: left;
    width: 120px;
}
.kanren dt img {
    width: 100%;
}
.kanren dd {
    padding-left: 135px;
}

ちなみに150px以上にする場合はfunction.phpを弄る必要があるようです。
参考サイト　STINGER8でアイキャッチ（サムネイル）の画像のサイズを変える方法　らいふーるさま
 STINGER8をカスタマイズ。トップページ、記事一覧サムネイル画像のサイズを調整する。　40歳からのメジャーデビューさま

トップページから最新記事一覧を削除

sidebar.phpの以下の部分

<?php get_template_part( 'newpost' ); //最近のエントリ ?>

を以下のように変更。

<?php if ( !is_home() ) : ?>
		<?php get_template_part( 'newpost' ); //最近のエントリ ?>
<?php endif; ?>

アドセンスを横並びに

記事エリアの横幅を広げておく。
CSSに以下を追加。

/*記事エリアの幅変更*/
/*PCのみ*/
@media print, screen and (min-width: 960px) {
 
.st-main {
  padding: 30px 29px 30px;
}

子テーマのsingle.phpで「広告」で検索すると出てくる箇所をコメントアウト。

<?php //get_template_part( 'st-ad-on' ); //広告 ?>

そのすぐ下に以下のコードを追加。

<div align="center">
<div class="label"><p>スポンサーリンク</p></div>
</div>
 
<!-- 広告枠 -->
 
<div class="adbox">
  
  <?php if ( st_is_mobile() ) { //スマホの場合 ?>
  <?php get_template_part( 'st-ad' ); //アドセンス読み込み ?>
 
<div class="adsbygoogle" style="padding-top:10px;">
  <?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>
</div> 
 
  <?php } else { //PCの場合 ?> 
 
<div class="ad-box clearfix"> 
 
<div id="ad-pc-left">
  <?php get_template_part( 'st-ad' ); //アドセンス読み込み ?>
</div> 
 
<div id="ad-pc-right">
  <?php get_template_part( 'st-ad' ); //アドセンス読み込み ?>
</div> 
 
</div> 
  <?php } ?>
</div> 
 
 <!-- /広告枠 -->

を追加。

さらに以下のCSSを追加。

/*アドセンス記事下　ここから*/
/*PC・タブレット*/
@media print, screen and (min-width: 768px) {
 
.ad-box { 
  margin-bottom: 40px;
}
 
#ad-pc-left {
  float: left;
}
 
#ad-pc-right {
  float: right;
}
}
 
/*アドセンスラベル　ここから*/
.label p {
 margin-bottom:0;
 font-size:12px;
}

自動挿入される「スポンサーリンク」のラベル表記を消す。

子テーマのst-ad.phpを以下のように編集。

<?php /*<p style="color:#666;margin-bottom:5px;">スポンサーリンク</p>*/ ?>

いろいろなサイトを見ましたが、参考サイトさまの方法が一番問題なく動きました。

参考サイト：【STINGER PLUS】記事エリアの横幅を広げてアドセンス（レクタングル大）を横並びに配置する方法　Kanamiiさま

更新日を削除

single.phpを開き、更新で検索。
以下の部分をコメントアウト。

更新日：<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_modified_date() ); ?></time>

具体的に以下のようにします。

<?php /* ?>更新日：<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_modified_date() ); ?></time><?php */ ?>

参考サイト　STINGER8　更新日を非表示にする　Likirokuさま

H2見出しのデザイン変更

CSS見出しジェネレータを使って吹き出しふうに。

/* 中見出し */
h2 {
    position: relative;
    color: #000000;
    background: #f8f8f8;
    border: 2px solid #dadada;
    margin: 30px 0px 22px 0px;
    padding: 10px 5px 10px 10px;
    border-radius: 9px;
}
h2:after, h2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
h2:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #f8f8f8;
}
h2:before {
    left: 38px; 
    border: 12px solid transparent;
    border-top: 12px solid #dadada;
}

スマホでは抜粋文を非表示

itiran.phpの下のほうにある

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

のクラス名smanone2をsmanoneに変更。

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

これからもちょこちょこ追加していきますが、テーマを変えると面倒ですね(^_^;)