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プロパティを変更することでデザインを変更します。
レスポンシブにするとセルからはみ出したりしたので、親テーマのエディタ用 テーブルの箇所を削除
