WordPressテーマを「スワロー」に変更後にやるべきカスタマイズは?

どうも!いっくんです!(@ikkun_blog

 

ワードプレスのテーマを「スワロー」に変更しましたよ!

テーマの変更直後って、色々と設定しなきゃいけないんですよね。

 

今回は私がどんな流れでカスタマイズしたのかまとめていきます!

スワローに変更しようと思ってる方は参考にしてくださいね。


ワードプレスのテーマを変更したい!

私はワードプレスでブログを作り始めて2年が経ちますけど。

 

これまで無料のワードプレステーマ「Simplicity2」を使ってましたよ。

でもブロガーとして上を目指すために、ブログレイアウトを向上させたい・・・!

 

まだまだWEB初心者な私には、ブログレイアウトを自分でいじるのに限界を感じ始めてました笑

 

そこで有料のWordPressテーマ「スワロー」に変更したんです。

いっくん
スワローは綺麗でシンプルなテーマが人気です!
公式サイト

 

テーマを「スワロー」に変更する!

これがテーマ変更直後の画面です!

上の画像がテーマを変更した直後です!

 

これからテーマ変更を検討してるみなさんに覚えておいて欲しいのが・・・

テーマを変更した直後って、必ずレイアウトは崩れます笑

 

テーマ変更には仕様上どうしてもネックな部分があって。

カスタマイズした「ウィジェット」や「Style sheet」に記入してたCSSなどが消えちゃいます!

いっくん
テーマ変更した直後は、早急にカスタマイズをやり直す必要があります笑

 

以前使ってたテーマのレイアウトを参考に!

これは以前使っていたテーマ「Simplisity2」のスクリーンショットです!

 

テーマを変更すると、ブログ全体のデザインや、サイドバーの並び順が分からなくなるのでね笑

元のレイアウトがどんな感じだったか分からなくならないように・・・

 

変更前のブログレイアウトをスクリーンショットしておきましょう!

こうやってスクショしておけば、以前のレイアウトを参考にできるのでスワローのカスタマイズも簡単に行えますよ。

 

外観の「カスタマイズ」からデザインを修正していく!

私のカスタマイズの流れを説明します

今回は、スワローに変更してからのカスタマイズのやり方を説明していきます。

まず最初に、有料テーマのスワローへ乗り換える流れを読んでもらえるとこの先の話がスムーズに分かると思います。

 

ここからはあくまで私がやった流れを書いていくので参考までに。

ワードプレスの管理画面にある「外観」⇒「カスタマイズ」と進んで設定していきますよ!

 

手を付けやすいテーマデザインから、どんどん変更していきましょう!

いっくん
ここで触れてない項目はデフォルト設定のままです。

①「サイトの基本設定・ロゴ画像を入れる」

「キャッチフレーズを非表示にする」

初期設定ではタイトル下にキャッチフレーズが記載される設定になってるので、これを非表示にしておきました!

 

「ロゴ画像をアップロード」

テーマを変更すると以前設定してたロゴも外れちゃうのでね。

 

また新たにアップロードし直しました! 

サイズが選択できるので「特大サイズ」にしてますよ。

 

「サイトアイコン」

サイトアイコンはブラウザーの「タブ」や「ブックマークバー」で表示される小さいアイコンのことです。

私はイラストで登録しましたよ!

 

②「サイトカラー設定」

ここではサイトに使われる色を自由に変更できるのでね。

デフォルト設定のままだと個性がないので、自分好みにどんどん変えていきましたよ!

 

「ヘッダー背景、ヘッダーテキスト、リンク色、記事ページ見出し(H2)背景、フッター背景」って感じでね。

 

これこそ前のブログテーマのスクショを参考にして、色を合わせました!

リピーターの方に「あれ?違うサイトになった?」って感じの印象は与えたくなかったので。

 

③「全ページの共通設定」

「ヘッダー サイト内検索ボタン」

これはヘッダー右上の「SEARCH」って書かれた検索ボタンを表示する設定です。

今まではウィジェットで検索を挿入してたけど、見た目的にこっちの方が良さそうなんで採用しました!

 

「カテゴリーラベルの表示設定」

みなさん記事ごとにアイキャッチ画像を設定してると思いますけど。

ここの設定では、画像右上にカテゴリー名のラベルを表示するかどうか決められます!

さりげない見た目が気に入ったので、設定しておきました!

 

「トップページ設定」「記事一覧ページ設定」「背景画像」

この3つは特に設定しないでデフォルトのまま使ってます。

 

④「投稿・固定ページ設定」

「記事・固定ページでアイキャッチ画像を非表示」

最初テーマを変更したら、何故か記事タイトル下に同じ画像が2つ並んでて謎だったんですよ。

原因はアイキャッチ画像の設定でした!

 

ここから設定すれば、記事画面でアイキャッチ画像がだぶつくのが防げます。

コレは絶対やっといた方がいいやつです!

 

「記事下にfeedlyボタンを表示」

Feedlyボタンを表示させたい場合はチェックを入れます!

SNSやってる人は、その上のFacebookとTwitterも設定しといたほうがいいやつですね。

 

「アクセス解析コード」

ここでは「GoogleAnalyticsのトラッキングコード」を挿入できますよ。

 

テーマが変わってトラッキングコードも外れてるので・・・

そのままにしてると読者のアクセス数がカウントされないです!

 

なのでここでしっかり設定しておきましょうね!

 

⑤「メニュー」

テーマを変更した直後は、ヘッダーがこんな感じになってました笑

 

このレイアウトを直すには「メニュー」から操作します。!

この画面から「グローバルメニュー」や「フッター」の表示を設定してスッキリさせましたよ笑

 

ウィジェットなども設定し直します!

外されたウィジェットを直していく。

テーマを変えるとウィジェットがすべて外れるから、組み直さないといけません。

スワローはPCとスマホで別々に設定できるのが便利ですよ。

 

中には「CTA」っていうのがあって・・・

何かと思ったら「コンテンツ下の位置」をさすそうで、コレはPCとスマホ両方に反映されますよ!

 

「Googleアドセンス」や「アナリティクス」の設定も忘れずに!

テーマ変更後は「Googleアドセンス」や「アナリティクス」も外れてます。

この2つの設定は超重要なので、忘れずにやりましょうね!

 

あとアナリティクスで、アクセスをチェックするための「トラッキングコード」ってありますよね?

スワローでは「カスタマイズ」の画面に、入力できる箇所がありますよ!

 

私は「Quick Adsense Setting」というプラグインを使って、アドセンスをウィジェットに挿入してたのでね。

これもウィジェットごと外れてしまったので、設置箇所を設定しないといけませんでした!

 

スワローになったことでレイアウトが変わるので、配置もビミョーに変更しましたよ。

 

CSSを必要なところだけ記述していく!

テーマ変更後は、CSSはまっさらな状態になっちゃうのでね。

 

以前のCSSの内容をメモしておいて、それをコピペしていきます!

設定後はちゃんと反映されたのか、1つずつチェックした方がいいですよ!

いっくん
バグらずに反映されるかどうか、この瞬間が一番ヒヤヒヤします笑 

わたしのケースでは、テーマ変更後に「サイトマップ」のCSSレイアウトがうまく反映されませんでした。

それでしばらくサイトマップページの修正に時間を取られることになりました!

 

プラグインの不要なモノを消していく!

プラグインのデータはちゃんと保存されてるのでね。

これは基本そのまま信用してOKだと思います。

 

ちなみに有料テーマでは、これまでプラグインで補ってた機能が初期搭載されてたりします。

その場合だと、そのまま放置してると競合してトラブルの原因になるのでね。

いっくん
必要がないと思うプラグインは早めに停止しておきましょう!

「スライダー付き記事一覧」を設定していく!

トップページの重要なレイアウトとして・・・

任意の記事のスライドショーが設定できるんですよ!

 

「管理画面→投稿→タグ」でスラッグに半角で「pickup」と入力してタグを新規作成します。

次にタグの設定ページで「新規タグを追加」します。

 

名前は管理者だけが見るモノなので、適当につけてOK。

スライドショーに含めたい記事の編集画面のタグに、さっきつけたタグ名を入力します!

 

そうすればタグ名がリンクして、その記事がトップページにスライドショーとして取り込まれます!

この機能は使わないともったいないですよ。

 

パソコン画面が最初動かないと思ったけど、たくさん入れていけば動きます笑

 

これだけカスタムすればOK!

あくまで私のやり方ですけど、とりあえずこれだけカスタムすればOKだと思いますよ。

テーマを変更後の設定に悩んだら参考にしてみてください!

 

ちなみに設定にかかった時間はザックリ2時間です!

少し手を加えてこんなに見栄えするんですからね。


私はこれから更に手を加えてより完璧を目指しますよ!

みなさんもスワローの洗練されたデザインを楽しみましょうね。

公式サイト

 

いっくんのまとめ

今回は、ワードプレスのテーマを「Simplisity2」から「スワロー」へ乗り換えた話でした。

 

テーマ変更後は色々とやることがあるので大変です。

変更直後は「このままじゃまずいかも・・・」って感じるはずです笑

 

手を付ける順番は人それぞれだと思うし、1つの参考としてください!

 

スワローはさすが有料テーマだけあって、自分のスキルじゃ再現できない綺麗なレイアウトです。

時間と労力をお金で買った感じでしたけど、これはかなり有益でしたよ!

公式サイト