WordPressのテーマを変える前に、アルバトロスで行ったカスタマイズのCSSコードを忘れないようにメモしておく!

s-toptop

どうもNon太(@LoveWifeLives)です。

僕はWordPressのテーマをアルバトロスにしています。

そのテーマを作っているOPEN CAGEから新たに新作が発表されましたね。

参考⇒新たな新作テーマ「STORK(ストーク)」のページはこちら

近々このテーマに変更する予定ですが、良い機会なので今までに自分が行ったカスタマイズで、スタイルシート(style.css)やfunction.phpなどに記述したCSSコードを忘れないようにメモしておこうと思いました。

完全に個人的な記事になりますが、同じような設定にされたい場合は参考になる人もいるかもしれませんので書いて残しておくことにします。

では早速どうぞ!

スポンサーリンク

1.カエレバ・ヨメレバ・トマレバのカスタマイズ+ポチレバも!

Amazonや楽天のリンクを簡単に且つ、綺麗に表示させてくれる素晴らしい機能を持つカエレバ・ヨメレバ・トマレバ&ポチレバ。

これをカスタマイズしたCSSが以下です。

このコードでPC表示もスマホ表示もうまくまとまってます。

▼カエレバ(最近買ったパオw)

▼ヨメレバ(もっとExcel勉強したいかも)

▼トマレバ(石垣島に行きたい!!)

と言った感じに表示が出来るようになりました。

ここではやってませんが、ポチレバのカスタマイズも以下に。

テーマを変えたらコードは記述する予定をしています。

これもカエレバなどと同じような背景になります。

が、ポチレバでリンク作成をした場合、画像の左側の幅(marginのこと)が0になっているのを15pxぐらいにしてあげないと、枠内にうまく表示されないです。

良く分からないと言う方は、しなくてもいいんじゃないかと思います。

スポンサーリンク

2.固定ページに新着記事を表示させる

s-top

固定ページを使用している時のトップページに新着記事を表示させるカスタマイズです。

以下の記事でも書いていますね。

Newpost Catchを使って固定ページに新着記事(最新記事)を表示させる方法まとめ

2016.04.15

完璧なカスタマイズとは言い難いものでしたが、それなりに良い感じにはなってたんじゃないかと。

ストークにすれば固定ページにサムネイル付きで表示させるカスタマイズが、ウィジットあたりで簡単に出来るはず…なので、このカスタマイズはリンク先を見てもらえればと思います。

3.Google Mapをスマホでも綺麗にさせる

アルバトロステーマを使用していたら、Google Mapを記事内に貼り付けても、スマホ表示の時も自動でリサイズされて表示されるはずだったのですが、いつしか表示されなくなってしまいました。

(多分自分でカスタマイズしておかしくなった?のかもしれない…)

なので、以下のコードをスタイルシート(style.css)に記述しておきました。

上記のコードを記述した上に、記事内でGoogle Mapを貼り付ける際にGoogle Mapのコードを

こんな風に囲ってあげてました。

こうすることでPC表示もスマホ表示も綺麗に整いました。

これもストークにしたら必要ないかもしれません。

4.アドセンス広告をh2見出しの前に表示する

アルバトロスの場合、記事本文を見るとサムネイル画像の下にシェアボタンが表示され、その下に広告などを表示させるためのウィジットは用意されていたのですが、僕は記事本文内にもアドセンス広告を表示させたかったんです。

行いたかったのは一つ目のh2見出しの前にアドセンスを1つ、2つ目のh2見出しの前に2つめのアドセンスといった感じ。

そのカスタマイズの方法です。以下のコードをfunction.phpに記述します。※function.phpは適当にいじると危ないファイルなので、自己責任でやってください!

【//ここにアドセンスを挿入//】と表示されているところを自分のアドセンスコードに変更すれば、それぞれのh2の見出しの前にアドセンス広告が表示されるようになります。

アドセンスの前には【スポンサーリンク】を表示させないといけないのと、広告表示が左寄せではなく中央表示にしたかったので、アドセンス挿入のところは以下のように書きました。

これで広告前に【スポンサーリンク】も表示されるし、中央に広告が表示されるようになっています。

そもそも記事本文内や、h2見出しの前に広告が何個も出てくるのは読む人によってはうっとうしく思われる場合があるので、そのあたりも注意して判断する必要があると思います。

僕の場合はさすがに3つめのh2見出し前にまで広告を表示するのはうざいかなと思ったので、3つめには何もコードを入れてません。

このコードは以下の記事を参考にさせてもらっています。

参考⇒本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法 / 寝ログ

5.ショートコード一発でアドセンスを呼び出す

これはおそらくほとんど使うことがないままになるかもしれませんが、直接記事内にアドセンスを表示させたい場合などにショートコードを書くだけでアドセンスが表示されるためのCSSです。

これもどこかの誰かの記事を参考にしたはずなのに、はてブやブックマークせずに素通りしてしまったので、引用元がどこかわからなくなってしまいました。

判明したら追記することにしますが、コードは以下です。

【ここにアドセンスコードを貼り付け】と書かれているところをアドセンスに変えるだけです。

後は記事本文に[adsense]と書けば、そこにアドセンス広告が表示されます。

[]←これは全角なので、利用する時は半角で書くようにしてください。

僕もこのCSSを記述しているため半角で書くとホントにアドセンスが表示されてしまうので、ここでは全角で表示させています。

6.アイキャッチ画像にキャプションを表示させる

このカスタマイズはアルバトロステーマを提供しているOpen Cageのページでも書かれています。

参考⇒投稿ページにてアイキャッチにキャプションを表示する方法 / Open Cage

キャプションって何やねんという人は下記の画像を。画像の下に文字が表示されています。

このサイトで一番読まれている記事です⇒こちらから

このサイトで一番読まれている南京町の食べ歩きの記事です⇒こちらから

画像のしたに表示されている文字がキャプションと呼ばれるものです。

写真と一緒に説明文も付け加えられるので、有効に利用できる場合がありますね。

自分が実際に撮影した写真を本文のトップに表示させるだけなら必要ないかもしれません。

でももし、引用リンクを表示すれば画像利用OKの写真を使用する場合、画像の下にキャプションでリンク元を表示させたいですよね。

アルバトロスではアイキャッチ画像にはキャプションを書いても表示されない仕様になっていたので、アイキャッチ画像に引用画像は使いにくかったんです。

それを表示できるようにするカスタマイズの方法です。

single.phpを子テーマに移動させる

コードを書き換えるファイルが【single.php】というファイルになりますが、これが親テーマにしかないのでまずはファイルを子テーマにコピーします。

親テーマのままでもカスタマイズは出来ますが、できるならば子テーマにした方がいいです。

ロリポップを使用している場合の、ファイルのコピー方法や理由は以下のページを参考にして下さい。

親テーマから子テーマへ、カスタマイズしたいページをコピーする方法【ロリポップサーバーの場合】

2016.05.19

移動させたらsingle.phpを開き、以下のコードを見つけます。わりかし上部にあるはずです。

上記のコードをそっくりそのまま以下のコードに書き換えます。

カスタマイズはこれだけ。と言ってもOpen Cageで書かれているコードをコピーしただけですが…。w

問題なければこれでアイキャッチ画像にもキャプションが表示されるようになるはずです。

アイキャッチ画像を探す時、こちらのページ(Photo Pin)なんかで使いたい画像が見つかったりしますが、利用するには引用元の表示が必須だったりします。

今まではアイキャッチ画像には使えませんでしたが、これで利用できるようになるというわけですね。

7.最終更新日を表示させる

これはテーマをストークにした場合、機能としてはデフォルトで表示させられるように最初から設定が可能のようですね。

なので、もはや最終更新日を表示させるためのカスタマイズの必要はなくなりそうですが、アルバトロスで行う方は以下の記事を参考にしてもらえればと思います。

公開日だけじゃなく最終更新日の日付も入れたい!wordpressテーマ「アルバトロス」で最終更新日の日付を入れる方法!

2016.02.15

と言いながら、こちらのサイト(リンカジmac)もアルバトロスをテーマにしていらっしゃるようですが、この最終更新日の表示のされ方が格好良いなぁと前々から思ってて、どうやってカスタマイズしたんだろうと気になったりならなかったり。

自分がストークにしたらあんまり関係なくなりますが、。

8.トップページに表示する固定ページのタイトルを非表示にする

固定ページをトップページに設定する場合(このサイトもそうです)、タイトルを表示させるとトップページなのに何となく違和感があったりします。

じゃあタイトルを書かなければいいんじゃないかという話しになりそうですが、そうするとアルバトロスの仕様なのか、タイトルが表示されるであろう場所にうっすら線が表示されたままになってるんです。

それがどうしても嫌だったので、トップページに表示させる予定の固定ページのタイトルだけ一切非表示にするカスタマイズです。

ここで行うのは【page.php】というファイルです。

これも親テーマにしかないので、頑張って子ページにコピーしてきた方がいいですね。

で、そのファイルを開いて大体20行目ぐらいに以下のコードがあります。

上記のコードが見つかったら、これをそっくりそのまま以下のコードに書き換えてしまいます。

これでトップページに設定した場合の固定ページのタイトルは表示されません。(他の固定ページのタイトルはちゃんと表示されたままです。)

記事を書くときには構造上の観点からタイトルは記載しておいた方が良いみたいです。

僕の場合で言えば、トップぺージに設定している固定ページのタイトルは【LoveWifeLife】と付けてます。

でも、上記のコードを入れているおかげでトップページにタイトルが表示されることはありません。

これもストークにしたら不要になるカスタマイズなのかもしれませんね。

自分で行ったカスタマイズ / まとめ

思ったら大してカスタマイズはしてない方かもしれません。

今だからサラッと書けますが、このカスタマイズを行うまでに何日ぐらい要したのかは覚えていないし、とにかく時間がかかりまくったことだけは確かです。

そうやってカスタマイズしていくうちに、自然と知識になっているんですね。

ちゃんと知っている人と比べるとまだまだ足元にも及びませんが…。

WordPressのテーマを変更した時に、今まで行ってきたコードが全て消えたー!みたいになっては困るので一応まとめてみました。

テーマによってはうまくカスタマイズ出来ない場合があるかもしれませんが、ぜひ参考にしてもらえればと思います。

※くれぐれもファイルを変更やカスタマイズする時は、バックアップを取るなり、慎重に行うことをおすすめします!

スポンサーリンク

3 件のコメント

  • 色々と探していたらこのページにたどり着きました。
    とても参考になったのですが、アルバトロスでフォントの形式を変更するのはどうやっているのでしょうか?
    font-familyで設定をしても中々変更されません・・・。

    • ゆうさん
      テーマの編集のスタイルシートのページを開いて、ctrl+Fで検索窓を出して【GENERAL STYLES】を検索してみてください。
      すると、【GENERAL STYLES】の下に【body{】があり、その中に【font-family:】が続いていると思います。
      そこに自分の希望のフォントファミリーを記述すれば、本文内の文字が変更できます。
      これだけだと本文のみが変更になり、ブログのタイトル含め、h1~h5の文字は変更になっていないはずです。
      なので、そこからさらに60行ぐらい下がったところ、【h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {】の中にも【font-family:】があると思います。
      そこも希望のフォントファミリーの記述に変えてあげれば変更出来るはずです。
      これはあくまで記事内のフォント形式を変更する時に使えますが、ヘッダーのカテゴリーの表示だけ変わらないみたいです。
      僕も調べてみたものの、そこだけが分からず…。
      また、これや親テーマでの記述の場所を書いてます。
      本来なら子テーマでやりたいところですが、なぜか【!important】を入れてもうまく反応してくれませんでしたので…。
      僕もプロではないのでわかるのはこれぐらいですが、上記の場所に記述をしてみたところフォントの形式は変わったので、一応変更は出来るみたいです。
      あまり参考にもならないかもしれませんが…ご参考までに。

  • ご丁寧にありがとうございます。

    子テーマで!importantをつけて設定していましたが、親テーマで変更ができるのですね。
    とても参考になりました。わざわざ調べていただきありがとうございました!

  • コメントを残す

    メールアドレスが公開されることはありません。