まだまだ初心者の域を脱していないが、simplicity2の改造(改造ってほどでもないが)しましたので、忘れないうちに書き留めておきたいと思っています。
改造した日:2018/01/25
AMP対応
ampに対応させるため、最初はプラグインの「Accelerated Mobile Pages」を使用していましたが、英語対応でよく分かりません。
しかし、simplicity2には 外観 → カスタマイズ → AMP(β機能)があり、それを使うことにしました。
まあ、チェック1つ入れるだけで済むので、簡単極まりないです。
そのついでに、AMP用のAdSenseコード も設定することにしました。
AMP用広告ユニット
GoogleAdSenseの広告の設定から、APM専用の新しい広告ユニットを新規に設定します。
この時注意するのは、広告のサイズ 300×250 レクタングル で設定すること。
そして、コードを取得します。
data-ad-client=”ca-pub-XXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”></amp-ad>
取得したコードの中から、
data-ad-client=[ *** ]
data-ad-slot=[ *** ]
***の部分を抜き出して、ampのほうのXXXXXXXに書き加えます。
(2行とも、写しましょう)
できあがったコードを、外観 → カスタマイズ → AMP(β機能)の
AMP用のAdSenseコードの枠の中に貼り付けて終わり。
簡単でしたね。
AMP広告の位置
amp広告は設定できましたが、広告の位置が下段の2カ所になっており、上部の方が少しさみしいので、上段にも広告を載せたいと思い、いじくってみました。
投稿本文記事下 と 関連記事下の2カ所 が規定値でした。
最初に
親テーマから「amp-content.php」を子テーマ(child)にコピーします。
ロリポップにおいては、「ロリポップ!FTP」で簡単にコピーできます。
(子テーマを改造しないと、バージョンアップした時に消えて無くなります)
外観 → テーマの編集 → amp-content.php
get_template_part(‘ad-amp’); ?>
広告を載せたいところに、この2行を挿入します。
今回は、投稿本文上にセットしました。簡単でした。
AMP用プロフィールを削除
ついでに、通常BLOGではプロフィールが、終わりの方へ(関連記事の上)にでているのを消していたので、統一するためにもAMP表示も消すことにしました。
(ソーシャルサービスと関連記事の間にプロフィールがでます。)
外観 → テーマの編集 → テーマファイル(右端の枠から) amp.css に
.footer-post-meta {display: none !important;}
を書き加えて、登録。
すると、ちゃんと消えていました。めでたしめでたし。!
PC画面の改造
まだ、関連コンテンツ広告の域に達していないこのブログは、AdSense収入はわずかなものです。
したがって、他の広告に頼っているのが現状で、改造を試みました。
インフィード広告
BLOGのインデックスリストのボトムには、ダブル「PC広告用ダブルレクタングル」を貼っていますが、インデックスミドルにはPC開示用として、インフィード広告を貼っていました。
これは、記事リスト3行の下に、広告が出てくるシステムです。
インデックストップには、メニューがぶら下がって、広告を隠してしまう恐れがあるので、インフィード広告は貼っていませんでした。
記事リストを20行に設定しているので、少しさみしいと思い、3行毎に広告をだせないものかと、考えていました。
そこで、改造することにしました。
親テーマから「list.php」を子テーマ(child)にコピーします。
ロリポップにおいては、「ロリポップ!FTP」で簡単にコピーできます。
(子テーマを改造しないと、バージョンアップした時に消えて無くなります)
外観 → テーマの編集 → list.php
if ( $count == 6 && //6番目
is_list_style_entry_type() && //表示タイプがエントリーカードタイプの時のみ
is_active_sidebar( ‘widget-index-middle’ ) && //インデックスミドルに値が入っているとき
!is_pagination_last_page() && //インデックスリストの最後のページでないとき
is_posts_per_page_6_and_over() //1ページに表示する最大投稿数が6以上の時
) {
echo ‘<div id=”widget-index-middle” class=”widgets”>’;
dynamic_sidebar( ‘widget-index-middle’ );
echo ‘</div>’;}
これをコピーして行き、数値を変えればいくらでもインフィード広告を出すことが出来ます。
カテゴリー表示の移動
通常、カテゴリー表示は、登録日付の右側にあるのですが、アイキャッチ画像の左上に色をつけて置くことにしました。
外観 → テーマの編集 → style.css
* アイキャッチ左上にカテゴリー
——————————- */
/*アイコン消す*/
#list .category .fa {
display: none;
}
#list .entry {
position: relative;
}
#list .category {
position: absolute;
left: 0px;
top: 3px;
background: #FF4500;
padding:0;
opacity: 0.9;
}
#list .post-meta .category a {
color:#ffffff;
font-size:10px;
font-weight:bold;
text-decoration:none;
padding:0 4px;
}
#list .post-meta .category {
padding-right: 0;
}
色をつけて、文字を少し小さめにしてみました。
かなり、雰囲気が変わったような気がします。
ページ送りナビ
ページ送りナビの表示スタイルの設定は、サムネイル付きに設定しています。
( [前ページ] [次ページ] ナビタイプ )
少しさみしいので、矢印に色をつけました。
外観 → テーマの編集 → style.css
* ページネーションタイプ
*——————————- */
.navigation a span {
color : #f4049c ;
}
#prev-next #prev-title, #prev-next #next-title{
border :1px #f4049c solid;
}
少し明るくなりました。
カテゴリー見出し
カテゴリーを見出しから変えると、記事リストの上に
「○○○」一覧 と出ていたのが邪魔な気がして、消すことにしました。
外観 → テーマの編集 → style.css
* カテゴリー見出しを消す
*——————————- */
#archive-title{
display:none;
}
これで消えました。
最後に
素人が、画面を色々といじくっていますが、これがまた楽しいんです。
あれこれと、試行錯誤し、WEBで調べたり、思うようにならない時は、半日でも一歩も前に進まない時があります。
しかし、思うとおりになった時の爽快感はたまりません。
よく考えてみますと、そんな時間がるのなら、記事を書いた方がPVが伸びて、収益も上がるには分かっているのですが、『出来なかった時の悔しさ』、『出来た時のうれしさ』、これが自分にとっては、ブログを作る楽しみのような気がしてきました。
当初は、お金目的でありましたが、少しずつ変わってきました。
(今でも、PVと収益は欲しいです)
この楽しみで、これからも続けていこうと考えた1日でした。
コメント