STINGER5でGoogleアドセンス広告を記事内センタリング

STINGER5をシンプルな子テーマ使用で設定やカスタマイズ

STINGER5カスタマイズ公式サイトからダウンロード

「外観」から「テーマ」で検索しても出てきません。

テーマのダウンロードからインストールまで詳しく説明があります。

管理画面の「外観」の①「テーマ」から
②「テーマのインストール」を選択。
③の「アップロード」をクリックして、④の「参照」をクリック
出典： https://stinger3.com/…

FTPツールを利用して、アップロードする時は、インストールしたワードプレスのフォルダを開き、その中にある「wp-content」から「themes」を開いてアップロードします。

アップロードがうまくいけば、「外観」から「テーマ」で先程のテーマがあるはずです。

親テーマではなく子テーマを有効にする

ワードプレスのテーマは随時更新を行っていて、テーマを更新するとカスタマイズした所が元通りになるみたいで、そうならないようにするのが【子テーマ】を利用するようです。
子テーマといっても先程アップロードした事と同じ事をするだけです。

STINGER5は利用している方が多くて、【子テーマ】を配布されている方もいました。

【Stinger5カスタマイズ】子テーマのテンプレート準備しました。時短したい方はどうぞ。＾＾
はい、どうぞ。＾＾
自由に持って行って下さいな。
上述の通り「@import url(‘../stinger5ver20141123/style.css’);」の部分で親テーマの情報を継承しますので、バージョンが異なる場合には、ここを親テーマのバージョンに合せて下さい。
出典： https://www.empowerments.jp/…

SIMPLESTERはSTINGER5の子テーマなので親テーマが無くては話しになりません。
出典：https://simplester.degitekunote.com/…

最新のテーマどうしでは、ダウンロードしてFTPでアップしてプレビューしてみたら問題なく適用されました。

※ただ、通常は、ダウンロードして「テーマ」にアップロードするだけでは認識してくれませんので、親テーマとのバージョンを合わせて下さい。

Template: stinger5ver20141227
@import url('../stinger5ver20141227/style.css');

この箇所を訂正してあげるって事ですね。

そしたら、「外観」から「テーマ」へ行くと先程アップロードしたテーマが表示されている。
テーマの上にマウスを乗せると「有効化」か「ライブプレビュー」が選択できるので、ちゃんとテーマを認識してるか「ライブプレビュー」してみる。
認識していたら「保存して有効化」する。

記事内に引用する場所のカスタマイズ

stinger5もblockquoteで背景に画像が表示され、引用と分かるようになります。
その場所のカスタマイズです。

子テーマに引用部分のCSSをコピーしてペーストします。
親テーマのCSSでblockquoteを検索すると、すぐに発見できます。

/* 引用 */
.post blockquote {
    background-color: #f3f3f3;
    background-image: url(images/quote.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 70px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCC;
}

上記の箇所の上部の余白が多いような気がしたので、少し余白を小さくしました。
padding-top　15px
padding-bottom　0px

一行目を見出し的にしたかったので、h4にして左側の　″　が見えるぐらいまで余白を確保

.post blockquote h4{
margin-left: 50px;
font-weight: bold;
}

TOPページでブログの最新記事を表示してある場合、サイドメニューにもNEW POSTを表示にすると、mainもsideも同じ記事が表示されていて、見た目上良くない。
記事を更新したらTOPページに更新した記事を表示させれば、被る事はないので、いいと思う。

TOPページでのNEW POSTを非表示にする方法

変更箇所は、「外観」から「テーマ編集」でsidebar.php

トップページで最新記事の一覧が出ているのに、
サイドバーのNEW POSTでも全く同じ内容を
表示していても無意味ですよね。
出典：https://kinchannel.com/…

記事を更新したら、更新した順番でTOPページに表示させたい。

試す前に事前にバックアップをしてから試しました。

home.phpの

<?php get_template_part('itiran'); ?>

上記の箇所を下記へ変更すれば、古い記事を更新したらTOPページに表示されました。

<?php query_posts($query_string .'&orderby=modified'); ?>
<?php get_template_part('itiran');?>
<?php wp_reset_query(); ?>

Googleアドセンス広告を記事内でセンタリング

投稿記事内に2つ設置している場合もありますが、私は1つにしてあります。

理由としては、同じ広告が2つ表示されていて、うざいな～って思う事が多々あるからです。

なので300×250サイズを一つにしてます。しかし、1つだと表示される場所が左側なので、デザイン的にセンターにしたいなと思った。

センタリングの仕方は非常に簡単。

CSSを利用して、下記をCSSに記述しておく。

.center {
text-align: center;
}

単一記事の投稿 (single.php)に移動して、下記の上とか下にアドセンス広告を設置する

<?php get_template_part('sns'); //ソーシャルボタン読み込み ?>

赤い部分の先程のセンタリングのクラスで挟んであげる。

<div class="center">
アドセンスタグ
</div>

コメント欄の削除

まず上記のように子テーマを適用させた場合、子テーマにはstyle.cssしか存在してませんので、親テーマであるstinger5ver20141227からダウンロードして使用します。

FTPでstinger5ver20141227へアクセスしてsingle.phpをダウンロードして自分のPC内に子テーマのフォルダを作ってその中に入れておきます。

そしたら、すぐに、FTPで子テーマのSIMPLESTER-Ver4へアクセスして、先程ダウンロードしたsingle.phpをアップロードします。

それから編集していきます。

『外観』→『テーマ編集』→『single.php』の中にある

<!--ループ終了-->
<?php if( comments_open() || get_comments_number() ){
          comments_template(); } ?>
<!--関連記事-->

 上記の赤字の部分のみ削除します。

テーブルのレスポンシブ対応

tableやtr、tdなどのテーブル関連のタグのdisplayプロパティを変更することでデザインを変更します。

レスポンシブにするとセルからはみ出したりしたので、親テーマのエディタ用　テーブルの箇所を削除