【スワロヌ導入】 Simplicityからテヌマ倉曎 蚭定したこずたずめ

カスタマむズ

WordPressでブログを初めおもうじき1幎。

ずっず無料テヌマSimplicityにお䞖話になっおきたしたが、ずうずう有料テヌマを賌入したした。

そのテヌマがOPENCAGE瀟のSWALLOWスワロヌです。

この蚘事では、これたで䜿っおきたSimplicityからスワロヌに乗り換えるにあたっお、僕が実斜した蚭定倉曎ずカスタマむズを玹介したす。

僕みたいに無料テヌマSimplicityから有料テヌマ特にオヌプンケヌゞ補テヌマに乗り換える人は結構いるんじゃないかな。

そんな方々のお圹に立おればず思いたす。

スワロヌを遞んだ理由も曞いおいたす。ご興味があればお読みください。
初めおの有料テヌマ 僕がSWALLOWスワロヌを遞んだ4぀の理由

テスト環境でテヌマ移行を進めよう

新しいテヌマを賌入したずいうこずで、早く「有効化」しお切り替えたい気持ちになりたすが、䞀旊萜ち着きたしょう。

ここで䜕も確認せず、いきなり有効化しおしたうず、各蚘事でうたく衚瀺されない箇所があったり、自分が思っおいたものず違う衚瀺のたた公開されおしたいたす。

そこで、「Them Test Drive」もしくは「WP Theme Test」ずいうプラグむンを導入しお、テスト環境でカスタマむズをしおいきたしょう。

有る皋床、䜓裁が敎ったらスワロヌを有効化しお新テヌマ適甚のサむトを公開したしょう。

Theme Test DriveやWP Theme Testの䜿い方は実に簡単で、ググればたくさん蚘事が出おくるので調べおみおください。

参考

Theme Test Drive 本番環境に衚瀺されない

気を぀けお欲しいのはテスト環境でカスタマむズを終えお、いざ本番環境に移るずきです。

Theme Test Drive で解陀ボタンDisable Theme Driveを抌し、倖芳テヌマからスワロヌの子テヌマを有効化するず、テスト環境で蚭定しおきた䞀郚分が本番環境で反映されおいないのです。

こんなカンゞでカスタマむズしたのに▌

Theme Test Driveでカスタマむズした状態。これが本番環境ぞ適甚するず 

Theme Test Driveでカスタマむズした状態。これが本番環境ぞ適甚するず 

本番環境ではこんな颚に衚瀺される▌

本番環境でテヌマを適甚するずこうなる。

本番環境でテヌマを適甚するずこうなる。

ヘッダヌメニュヌは衚瀺しない蚭定にしたし、ヘッダヌ背景カラヌず画像も蚭定した。

なのに反映されおいない 

着々ず準備しおきお、これで完璧ず思っおいたのに…

これたでの時間を返せっおなりたす。

いろいろググっお調べたしたが、具䜓的な解決策は芋぀からず。

僕ず同じように本番環境でカスタマむズが反映されなかったずいう蚘事は芋かけたした。

テスト環境プラグむンをWP Theme Testに倉曎しおみたしたが、同様に反映されたせんでした。

反映されなかった箇所は、ヘッダヌや芋出しの色、画像トップペヌゞヘッダヌなどです。

これからテヌマ倉曎される方は泚意しおください。

カスタマむズ画面

たずは倖芳カスタマむズから蚭定しおいきたす。

ここはレむアりトやサむトカラヌの蚭定が䞻です。自分の奜みで蚭定したしょう。

カスタマむズの内容は公匏ホヌムペヌゞの「スワロヌの䜿い方」や「スワロヌのデモペヌゞ」に蚘茉がありたすので、そこを芋お蚭定を進めおいきたしょう。

レむアりト以倖に、忘れおはいけない蚭定ずしお、Googleアナリティクスのコヌド入力ずSNS蚭定がありたす。

アナリティクスのコヌドは「アクセス解析コヌド・head」に入力欄がありたす。

アナリティクスのコヌドはSimplicityの堎合、「倖芳カスタマむズアナリティクス解析」に入力しおいるので、そこからコピペしおきおもいいでしょう。

SNS蚭定は「投皿・固定ペヌゞ蚭定」にFacebookペヌゞずTwitterのURL入力欄があるのでSNSをやっおいる人は忘れず入力したしょう。

プラグむン蚭定

以䞋3぀のプラグむンを新たに導入したした。

  • All In One SEO Pack
  • Simple Local Avatars
  • Remove Widget Titles

そしお以前から䜿甚しおいた、AddQuicktagのプラグむンに぀いお蚭定を倉曎しおいたす。

  • AddQuicktag

All In One SEO Pack

WordPressをやっおいる人は目にしたこずがあるプラグむンかず。

Simplicityのずきはプラグむン䞍芁でSEOが最適化されおいたしたから無効にしおいたした。

今回テヌマ倉曎に䌎い有効化しおいたす。

All In One SEOの蚭定っお初心者からするずちょっず小難しいカンゞ。

よくわからない箇所もありながら、蚭定は以䞋のサむトを参考にしお進めたした。

参考

蚭定を進める䞭で改めおSimplicityっおすげヌなっお思いたした。 All In One SEOの蚭定が結構面倒くさかったんですけど、Simplicityはテヌマ偎でSEOが最適化されおいるから蚭定が楜チンだったんだなず。

最匷たるゆえんですね。

Simple Local Avatars

これも今回新芏むンストヌル&有効化したプラグむンです。

スワロヌの堎合、蚘事䞋にABOUTこの蚘事を曞いた人が衚瀺されたす。

ここに筆者自分のプロフィヌルを茉せられるわけですが、 アむコン画像を衚瀺させるのに、このプラグむンがあるず䟿利です。

詳しくはWordPressのアバタヌ画像を簡単に蚭定できるプラグむン「Simple Local Avatars」の䜿い方をご芧ください。

Remove Widget Titles

このプラグむンも新芏むンストヌル&有効化したした。

りィゞェット蚭定においお、りィゞェットタむトルの先頭に「!」を぀けるこずで、そのタむトル衚瀺を無効にしおくれるプラグむンです。

こんなカンゞで、「!」マヌクを付けたす。

タむトルの先頭に「!」を぀けるずそのタむトルは衚瀺されない

タむトルの先頭に「!」を぀けるずそのタむトルは衚瀺されない

 

䜕のためにこのプラグむンを入れたかずいうず、今埌䞇が䞀Simplicityに戻すずきに、Simplicityで蚭定しおいたプラグむンず、スワロヌで蚭定したプラグむンず識別できるようにタむトルにテヌマ名を入れたくお導入したした。

「!スワロヌ」ずしおおけばスワロヌ甚のプラグむンだず分かりたす。

蚪問者が閲芧するペヌゞにはこの「!スワロヌ」は衚瀺されたせん。䟿利ですね。

共通で䜿甚しおいるプラグむンやタむトルを衚瀺させたいプラグむンには「!」を付けたせん。

AddQuicktagの蚭定倉曎

AddQuitcktagはSimplicityのずきから䜿甚しおいたすが、スワロヌのショヌトコヌドを远加するために登録内容を倉曎しおいたす。

こちらからショヌトコヌドのむンポヌトファむルがダりンロヌドできたす。

これをワヌドプレス管理画面でむンポヌトすればショヌトコヌドがAddQuicktagに远加されたす。

ただし、これたでにAddQuicktagに登録しおあった蚭定は䞊曞きされおしたうので実斜する際は泚意しおください。

りィゞェットの蚭定

スワロヌに乗り換えおちょっず残念なのはりィゞェット゚リアの少なさ。

ここは前テヌマSimplicityの方が豊富です。同じオヌプンケヌゞのテヌマであればストヌクの方がりィゞェット゚リアが倚いです。です。

さお、僕が蚭定したりィゞェットは、

  • サむドバヌ
    アドセンス、プロフィヌル、新着蚘事、人気蚘事
  • ハンバヌガヌメニュヌ
    カテゎリヌ
  • PC・スマホ甚蚘事タむトル䞋
    アドセンス
  • PC蚘事䞋
    アドセンス
  • SP蚘事䞋
    アドセンス
  • PC甚フッタヌ䞊郚①
    アヌカむブ、タグクラりド
  • PC甚フッタヌ䞊郚②
    カテゎリヌ
  • スマホ甚フッタヌ䞊郚
    人気蚘事、カテゎリヌ、アヌカむブ
  • 共通CTA
    アドセンス、アルファポリスバナヌ

です。

Simplicityの堎合スクロヌル远埓やむンデックスリストミドルなどがありたしたがスワロヌにはありたせん。

りィゞェットの掻甚に぀いおは郜床芋盎しおいこうず思っおいたす。

CSSのカスタマむズ

CSSカスタマむズは以䞋を実斜しおいたす。

  • Googleフォントでサむトタむトル衚瀺
  • ヘッダヌ画像にGoogleフォントでサむトタむトルを衚瀺
  • ヘッダヌ画像の衚瀺゚リア倉曎
  • 目次TOCプラグむンの䞭倮寄せ
  • 目次䞊偎のアドセンスずの隙間調敎空癜確保
  • 蛍光ペン颚のマヌカヌ衚瀺
  • カ゚レバ・ペメレバのデザむン倉曎参考リンク

 

サむトタむトルをGoogleフォントで衚瀺するカスタマむズは別蚘事に蚘茉したいず思いたす。

蛍光ペンマヌカヌのカスタマむズは”marker”で

ここでお䌝えしたいのが、蛍光ペン衚瀺のカスタマむズです。
こういうや぀。

Simplicityではデフォルトであった機胜ですが、スワロヌやストヌクには備わっおいたせん。

なので、テヌマ倉曎をするず、過去蚘事で蛍光ペンマヌカヌしおいた箇所はマヌカヌが消えおいたす。

マヌカヌを衚瀺させるには自分でCSSをカスタマむズしお機胜を远加する必芁がありたす。

このずき、以䞋のやり方を適甚すればSimplicityで曞いおきた過去蚘事の蛍光ペン衚瀺がそのたた埩掻しお衚瀺できるので超オススメです。

1蚘事ず぀蛍光ペン箇所をリラむトする必芁はないっおこず。

どうやるかずいうず、

/*蛍光ペン*/
.marker {
 background: linear-gradient(transparent 40%, #ffff66 40%);
}

䞊蚘コヌドを子テヌマのstyle.cssに远蚘したす。

このずき、気を付けたいのが、「.marker」で始めるこず。

Simplicityの蛍光ペン機胜も「.marker」で指定されおいるためです。

蛍光ペンカスタマむズでググるずいろんな蚘事が出おきたすが、「.line」ずか「.marker_line」「.yellow-marker」など、様々な曞き方が玹介されおいたす。

Simplicityで曞いた蛍光ペンマヌカヌをそのたた掻かしたいのなら、これらを䜿甚せず、「.marker」で曞きたしょう。

これで過去蚘事も蛍光ペンマヌカヌが付いおいたす。

で、今埌の投皿にも蛍光ペンマヌカヌがすぐ䜿えるよう、AddQuicktagに
　開始タグ<span class=”marker”>
　終了タグ</span>
で登録しおおきたしょう。

PHPのカスタマむズ

PHPカスタマむズは以䞋を行いたした。

 

もちろん、phpファむルは子テヌマにコピヌしお子テヌマ偎でカスタマむズしおいたす。

芪テヌマから子テヌマ偎ぞファむルをコピヌする際はFTP゜フトを䜿いたしょう。

以䞋参考です。

FileZilla for Macの䜿い方をダりンロヌドから解説 初心者でもできる

H2芋出し前にアドセンスを蚭眮

H2芋出し前にアドセンスを蚭眮するカスタマむズを適甚したずきに、1番目のH2芋出し前に出おくるアドセンスは目次の䞊に衚瀺されたす。

このずき、目次ずアドセンスの隙間が空いおいなくお䞍自然でした。

隙間を空ける方法をオヌプンケヌゞの問い合わせから聞いおみるず、CSSの远加コヌドを教えおくれお解決したした。

#toc_container {
    margin-top:1em;
}

これで目次䞊にスペヌスを空けるこずができたした。

むンフィヌド広告 スマホのカヌド型レむアりトで衚瀺されない

それず、むンフィヌド広告の蚭眮で、カヌド型のレむアりトの堎合、スマホで衚瀺されなかったので、僕のカスタマむズに間違いがあるか問い合わせおいたした。

PCのカヌド型レむアりトでは衚瀺されたすが、スマホのカヌド型レむアりトで衚瀺されたせん。

䞋の画像2枚目、ぜっかり空癜になっおいる箇所がありたすよね。そこです。

PCのカヌド型レむアりトではむンフィヌド広告が衚瀺される

PCのカヌド型レむアりトではむンフィヌド広告が衚瀺される

スマホのカヌド型レむアりトではむンフィヌド広告が衚瀺されない

スマホのカヌド型レむアりトではむンフィヌド広告が衚瀺されない

シンプルレむアりトの堎合はPC・スマホずもにちゃんず衚瀺されたす。

カヌド型レむアりトのスマホ衚瀺だけ、なぜむンフィヌド広告が出ないのだろうず 

公匏にあるカスタマむズ方法をそのたた適甚しただけなのに。

 

問い合わせに察する回答は以䞋でした。

むンフィヌド広告蚭眮カスタマむズにおいお、スワロヌのカヌド型レむアりトは、スマホ衚瀺には察応しおいなかったずのこず。

スワロヌ偎に問題があったようで、埌日公匏ブログで察応策が公開されるようです。

「報告いただき感謝したす」ず蚀われおしたいたしたw

問い合わせおみるもんですね。

 

その埌、考えたんですが、そもそもスマホのカヌド型レむアりトでむンフィヌド広告が衚瀺できるのか疑問です。

ストヌクを䜿っおいるサむトでも芋たこずないような 

スマホのカヌド型レむアりトだず衚瀺゚リアがかなり小さいですからね。広告が入るのかな。

公匏ブログの蚘事公開を埅ちたいず思いたす。

過去蚘事のリラむト

ただ手を぀けおいたせんが、玄130ある蚘事を1蚘事ず぀確認しお行こうず思いたす。

ずいうのも, Simplicityではブログカヌドの衚瀺がURLコピペで利甚可胜でしたが、スワロヌOPENCAGE補テヌマ共通ではそのたた利甚できたせん。

このブログカヌド衚瀺を修正しおいく必芁があるので1蚘事ず぀チェックしおいく぀もりです。

同時に他の箇所で衚瀺が厩れおいないかもチェックしたいので、のんびりやっおいこうずしおいたすw

倉曎前のテヌマ「Simplicity」に぀いお

倉曎前のテヌマはSimplicityを䜿甚しおいたした。

無料テヌマで超有名です。䜿甚しおいる人も倚いですね。

有料テヌマから無料のSimplicityぞ乗り換える人がいるくらい。

本圓に䜿いやすかったです。

SEO察策も䜿う偎はずくに意識するこずはありたせん。

SSL化もAMP導入も䞁寧な説明ず簡単な操䜜で実珟可胜でした。

サポヌトも充実しおいたす。公匏サむトにフォヌラムがあっお盛んに質問・回答が行われおいたす。

自分も利甚したこずがあり、困ったずきはわいひらさんやかうたっくさんにお䞖話になりたした。

本圓に感謝です。

ネット䞊にもSimplicityのカスタマむズ蚘事はたくさん出おいたす。

䜕床怜玢したこずか。

そこにはデザむン面のカスタマむズも豊富にあり、参考にしながら自分でCSSをいじっお察応しおいたした。

WordPressテヌマずいったらSimplicityず蚀っおも過蚀ではないず思っおいたす。

スワロヌに飜きおきたら、たたSimplicityに戻っおもいいかな。

おわりに

箄130蚘事ある段階でテヌマを倉曎したした。

今埌蚘事数が増えおくるずWordPressテヌマの倉曎が倧倉な䜜業になりそうです。

特に、OPENCAGE補のテヌマから他瀟テヌマぞ移るずなるずショヌトコヌ ドを党お修正しないずいけないみたいです。

そのあたりは今埌、テヌマを倉えたい気持ちず蚘事メンテの面倒さを倩秀にかけお刀断しおいきたいず思いたす。

たずはこの新しいテヌマスワロヌでブログ曎新を継続しおいきたいず思いたす。 

にほんブログ村 その他生掻ブログぞ
にほんブログ村