nontaWordPressのテーマを変える前に、アルバトロスで行ったカスタマイズのCSSコードを忘れないようにメモしておく!ツイートシェアはてブ4LINEPocket7どうもNon太(@LoveWifeLives)です。僕はWordPressのテーマをアルバトロスにしています。CAGEから新たに新作が発表されましたね。このテーマに変更する予定ですが、良い機会なので今までに自分が行ったカスタマイズで、スタイルシート(style.css)やfunction.phpなどに記述したCSSコードを忘れないようにメモしておこうと思いました。(2016年6月、ストークに変更しました!)完全に個人的な記事になりますが、同じような設定にされたい場合は参考になる人もいるかもしれませんので書いて残しておくことにします。!1.カエレバ・ヨメレバ・トマレバのカスタマイズ+ポチレバも!Amazonや楽天のリンクを簡単に且つ、綺麗に表示させてくれる素晴らしい機能を持つカエレバ・ヨメレバ・トマレバ&ポチレバ。これをカスタマイズしたCSSが以下です。0;}}このコードでPC表示もスマホ表示もうまくまとまってます。2481-1[地図]楽天トラベルじゃらんJTBるるぶと言った感じに表示が出来るようになりました。ここではやってませんが、ポチレバのカスタマイズも以下に。テーマを変えたらコードは記述する予定をしています。15px;}これもカエレバなどと同じような背景になります。スポンサーリンク2.固定ページに新着記事を表示させる固定ページを使用している時のトップページに新着記事を表示させるカスタマイズです。以下の記事でも書いていますね。Catchを使って固定ページに新着記事(最新記事)を表示させる方法まとめ2016.04.15完璧なカスタマイズとは言い難いものでしたが、それなりに良い感じにはなってたんじゃないかと。ストークにすれば固定ページにサムネイル付きで表示させるカスタマイズが、ウィジットあたりで簡単に出来るので、このカスタマイズはリンク先を見てもらえればと思います。Mapを記事内に貼り付けても、スマホ表示の時も自動でリサイズされて表示されるはずだったのですが、いつしか表示されなくなってしまいました。(多分自分でカスタマイズしておかしくなった?のかもしれない...)なので、以下のコードをスタイルシート(style.css)に記述しておきました。Mapコード</div>こんな風に囲ってあげてました。することでPC表示もスマホ表示も綺麗に整いました。これもストークにしたら必要なくなりましたが。4.アドセンス広告をh2見出しの前に表示するアルバトロスの場合、記事本文を見るとサムネイル画像の下にシェアボタンが表示され、その下に広告などを表示させるためのウィジットは用意されていたのですが、僕は記事本文内にもアドセンス広告を表示させたかったんです。行いたかったのは一つ目のh2見出しの前にアドセンスを1つ、2つ目のh2見出しの前に2つめのアドセンスといった感じ。そのカスタマイズの方法です。以下のコードをfunction.phpに記述します。$the_content;}add_filter('the_content','add_ad_before_h2_for_3times');【//ここにアドセンスを挿入//】と表示されているところを自分のアドセンスコードに変更すれば、それぞれのh2の見出しの前にアドセンス広告が表示されるようになります。アドセンスの前に【スポンサーリンク】の文言を表示させておきたかったのと、広告表示が左寄せではなく中央表示にしたかったので、アドセンス挿入のところは以下のように書きました。align="center">アドセンスのコード</div>これで広告前に【スポンサーリンク】も表示されるし、中央に広告が表示されるようになっています。そもそも記事本文内や、h2見出しの前に広告が何個も出てくるのは読む人によってはうっとうしく思われる場合があるので、そのあたりも注意して判断する必要があると思います。僕の場合はさすがに3つめのh2見出し前にまで広告を表示するのはうざいかなと思ったので、3つめには何もコードを入れてません。このコードは以下の記事を参考にさせてもらっています。寝ログ5.ショートコード一発でアドセンスを呼び出すこれはおそらくほとんど使うことがないままになるかもしれませんが、直接記事内にアドセンスを表示させたい場合などにショートコードを書くだけでアドセンスが表示されるためのCSSです。これもどこかの誰かの記事を参考にしたはずなのに、はてブやブックマークせずに素通りしてしまったので、引用元がどこかわからなくなってしまいました。判明したら追記することにしますが、コードは以下です。'showads');【ここにアドセンスコードを貼り付け】と書かれているところをアドセンスに変えるだけです。後は記事本文に[adsense]と書けば、そこにアドセンス広告が表示されます。[]←これは全角なので、利用する時は半角で書くようにしてください。僕もこのCSSを記述しているため半角で書くとホントにアドセンスが表示されてしまうので、ここでは全角で表示させています。Cageのページでも書かれています。Cageキャプションって何やねんという人は下記の画像を。画像の下に文字が表示されています。このサイトで一番読まれている南京町の食べ歩きの記事です⇒こちらから画像のしたに表示されている文字がキャプションと呼ばれるものです。写真と一緒に説明文も付け加えられるので、有効に利用できる場合がありますね。自分が実際に撮影した写真を本文のトップに表示させるだけなら必要ないかもしれません。引用リンクを表示すれば画像利用OKの写真を使用する場合、画像の下にキャプションでリンク元を表示させたいですよね。アルバトロスではアイキャッチ画像にはキャプションを書いても表示されない仕様になっていたので、アイキャッチ画像に引用画像は使いにくかったんです。それを表示できるようにするカスタマイズの方法です。single.phpを子テーマに移動させるコードを書き換えるファイルが【single.php】というファイルになりますが、これが親テーマにしかないのでまずはファイルを子テーマにコピーします。親テーマのままでもカスタマイズは出来ますが、できるならば子テーマにした方がいいです。ロリポップを使用している場合の、ファイルのコピー方法や理由は以下のページを参考にして下さい。親テーマから子テーマへ、カスタマイズしたいページをコピーする方法【ロリポップサーバーの場合】2016.05.19移動させたらsingle.phpを開き、以下のコードを見つけます。?>上記のコードをそっくりそのまま以下のコードに書き換えます。'</div>';}?>カスタマイズはこれだけ。Cageで書かれているコードをコピーしただけですが...。w問題なければこれでアイキャッチ画像にもキャプションが表示されるようになるはずです。Pin)なんかで使いたい画像が見つかったりしますが、利用するには引用元の表示が必須だったりします。今まではアイキャッチ画像には使えませんでしたが、これで利用できるようになるというわけですね。7.最終更新日を表示させるこれはテーマをストークにした場合、機能としてはデフォルトで表示させられるように最初から設定が可能のようですね。最終更新日を表示させるためのカスタマイズの必要はなくなりそうですが、アルバトロスで行う方は以下の記事を参考にしてもらえればと思います。公開日だけじゃなく最終更新日の日付も入れたい!wordpressテーマ「アルバトロス」で最終更新日の日付を入れる方法!2016.02.15と言いながら、こちらのサイト(リンカジmac)もアルバトロスをテーマにしていらっしゃるようですが、この最終更新日の表示のされ方が格好良いなぁと前々から思ってて、どうやってカスタマイズしたんだろうと気になったりならなかったり。自分がストークにしたらあんまり関係なくなりますが、。8.トップページに表示する固定ページのタイトルを非表示にする固定ページをトップページに設定する場合(このサイトもそうです)、タイトルを表示させるとトップページなのに何となく違和感があったりします。タイトルを書かなければいいんじゃないかという話しになりそうですが、そうするとアルバトロスの仕様なのか、タイトルが表示されるであろう場所にうっすら線が表示されたままになってるんです。それがどうしても嫌だったので、トップページに表示させる予定の固定ページのタイトルだけ一切非表示にするカスタマイズです。ここで行うのは【page.php】というファイルです。これも親テーマにしかないので、頑張って子ページにコピーしてきた方がいいですね。そのファイルを開いて大体20行目ぐらいに以下のコードがあります。?></h1>上記のコードが見つかったら、これをそっくりそのまま以下のコードに書き換えてしまいます。?>これでトップページに設定した場合の固定ページのタイトルは表示されません。(他の固定ページのタイトルはちゃんと表示されたままです。)記事を書くときには構造上の観点からタイトルは記載しておいた方が良いみたいです。僕の場合で言えば、トップぺージに設定している固定ページのタイトルは【LoveWifeLife】と付けてます。上記のコードを入れているおかげでトップページにタイトルが表示されることはありません。これもストークにしたら不要になるカスタマイズなのかもしれませんね。2018年追記2018年1月現在は、上記のことをするのではなく、下記のCSSをstylesheetに追記させているだけで非表示にしています。{display:none;}*****のところは、自分の投稿IDです。このカスタマイズでタイトルは書いているのに非表示になります。手軽さでみても、こっちの方が楽だし間違いがないので良いですよね。まとめ思ったら大してカスタマイズはしてない方かもしれません。今だからサラッと書けますが、このカスタマイズを行うまでに何日ぐらい要したのかは覚えていないし、とにかく時間がかかりまくったことだけは確かです。やってカスタマイズしていくうちに、自然と知識になっているんですね。知っている人と比べるとまだまだ足元にも及びませんが...。WordPressのテーマを変更した時に、今まで行ってきたコードが全て消えたー!みたいになっては困るので一応まとめてみました。テーマによってはうまくカスタマイズ出来ない場合があるかもしれませんが、ぜひ参考にしてもらえればと思います。AM色々と探していたらこのページにたどり着きました。参考になったのですが、アルバトロスでフォントの形式を変更するのはどうやっているのでしょうか?font-familyで設定をしても中々変更されません・・・。STYLES】を検索してみてください。STYLES】の下に【body{】があり、その中に【font-family:】が続いていると思います。そこに自分の希望のフォントファミリーを記述すれば、本文内の文字が変更できます。これだけだと本文のみが変更になり、ブログのタイトル含め、h1~h5の文字は変更になっていないはずです。{】の中にも【font-family:】があると思います。そこも希望のフォントファミリーの記述に変えてあげれば変更出来るはずです。これはあくまで記事内のフォント形式を変更する時に使えますが、ヘッダーのカテゴリーの表示だけ変わらないみたいです。僕も調べてみたものの、そこだけが分からず...。これや親テーマでの記述の場所を書いてます。本来なら子テーマでやりたいところですが、なぜか【!important】を入れてもうまく反応してくれませんでしたので...。僕もプロではないのでわかるのはこれぐらいですが、上記の場所に記述をしてみたところフォントの形式は変わったので、一応変更は出来るみたいです。参考にもならないかもしれませんが...ご参考までに。AMご丁寧にありがとうございます。子テーマで!importantをつけて設定していましたが、親テーマで変更ができるのですね。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿はスルーされますのでご注意ください。おすすめの「油そば」を注文してきた!&新たなトッピングにも挑戦!大阪・福島で大人気のラーメン店「ラーメン人生JET」に行ってきた!土日限定メニューが美味しい!RECOMMENDこちらの記事も人気です。Pressテーマ『STORK/ストーク』のトップページを固定ペ...カスタマイズ2019.1.27AmazonアソシエイトのPA-APIについて。Catchを使って固定ページに新着記事(最新記事)を表示...カスタマイズ2017.12.11はてなブログで記事中の見出しの前、記事下シェアボタンの手前にアドセンスを...カスタマイズ2019.3.30エックスサーバーでサブドメインを取得し、同一サーバー内にwordpres...カスタマイズ2016.2.15公開日だけじゃなく最終更新日の日付も入れたい!wordpressテーマ「...カスタマイズ2015.11.8CSS初心者でも簡単に完成!カエレバ・ヨメレバのCSSカスタマイズ!スト...このブログを書いている人5年間ブラック企業で働き続けていましたが、このままじゃいけないと何とか抜け出しました。それまで毎日休みなく仕事に追われていた中で、妻とそして家族と過ごせる日々が本当に大切と感じ、このブログの開設を決意。プロフィール補足このブログを書いている人Non太2015年9月に5年間働いたブラック企業から抜け出しました。それまで毎日休みなく仕事に追われていた中で、妻と過ごせる日々が本当に大切と感じ、このブログの開設を決意。ブログ歴は2015年4月~。月間最高35万PVです。>>詳細のプロフィールはこちら▼このサイトで使っているテーマ▼WordPressテーマ「ストーク」を見てみるブロガー専用のWordPressテーマである「STORK(ストーク)」です。カスタマイズをしなくてもメチャクチャ綺麗に表示されます。