2016/07/26

[WordPress]Stinger5へ移行!カスタマイズした項目まとめ1

STINGER5 最近色々と立て続けに災難が降りかかってきているのですが、火の粉を振り払いながら頑張っています。今回は、先週末に少し時間ができたので、Stinger3子テーマキャンディクレイジーからStinger5へ移行した際にカスタマイズした項目をまとめました。

備忘録的な意味合いが強い内容となっております。 Stinger5使っている方で何か活用できれば幸いです。

基本的な項目が多いので、参考にならん!と一蹴されそうですが、初心者なりに頑張ってみました。(^_^;)

スポンサーリンク

Stinger3からStinger5へ移行した理由

移行した理由としては、単純に新しい物好きなのとレスポンシブデザインというスマホとPCを一体で変更できるという点に惹かれて変更しました。〈どちらも変えるの面倒くさいというのと、見落とすんです〉

子テーマキャンディクレイジーがStinger5に対応してからでも良かったのかなぁと思ったのですが、どうせだったらやれる時にやろうと一念発起でバシッと変更しました。後、Stinger5カスタマイズ記事が多くなってきたのも理由の1つです。

カスタマイズ記事を載せて頂いている方々、この場を借りてお礼申し上げます。※Stingerの作成者ENJIさんは、Stinger3でも現状問題ないとブログ上で書いていたはずです・・・

色々ファイル弄っていたのが再度最初からというので、今まで何を変えてきたかとか詳細書いていませんでした。 次また移行したら、またゼロベースからというのは苦しいので、冒頭にも書いた通り備忘録として残しておきたいという気持ちになりました。

カスタマイズ内容

①子テーマ作成(style.css他子ファイル作成)

Stinger以外でもそうですが、テーマ変更した際のファイルを直に触ると収集がつかなく なる時があります。

それを防ぐために子テーマを作成して、そちら側で修正をかけていく方法を取ります。

やり方はサーバによって違うみたいですが、ロリポップ使っているサイトを参考に作成。 FTPで直にファイルアップする方が早いかもです。

Blogテーマを「STINGER5」に変更、初めての『子テーマ』作成!

 ②AazonJSのコード追加(style.css修正追加)

プラグインAazonJSのコードを子テーマスタイルシートに追加。 AazonJSは、ワンボタンで設置できるので書評とか書いているサイトだと重宝します。

設定は、本サイトのこの記事を再度確認しながら設定

「AmazonJS」を導入!初心者が引っかかった所を報告してみる。

③moreタグに AdSense追加(style.css、function.css、single.php修正追加)

※function.cssは編集十分注意下さい。画面真っ白になります! 記事冒頭付近にGoogle AdSenseを入れるため、小テーマスタイルシートにコード追加。

当初、スマホ用の AdSenseを設定せずにスマホ画面からはみ出ていたのを修正。

moreタグで記事内にアドセンスをセンタリングで設置する方法[Stinger3and5]

④トップ記事一覧間に広告の挿入(style.css、itiran.php修正追加)

トップ記事一覧の間に広告を挿入。一瞬見づらいかなと思ったのですが、不便なさそうなので引き続き運用中。

http://cv0629.com/stinger5-top-ad/

⑤Google検索バー設置(side.php修正追加)

元のStingerでも検索バーはあるのですが、Google検索バーに置き換え。

http://podemos-resolver.mints.ne.jp/stinger/post-1291/ 

⑥h2,h3タグの変更(style.css修正追加)

Stingerの初期のh2、h3タグを修正。 イマイチ自分の思った通りにできていません。h2タグのバックカラーを透明にしたいのに、どこのコード弄ればいいのか分からなかったりしています。

ブログの悩みどころ見出しデザイン(h2)をすこし考えてみました。

終わりに

まだまだやりたい事一杯あるのですが、弄りだすと時間いくらあっても足りません。 纏まった時間出来次第第2弾をお届けできたらなと思っています。 何分初心者なので初心者レベルの修正しかできておりませんが、何かのお役にたてれば幸いです。

おしまい