初心者がSimplicity2からSTORKへの変更でやったこと


スポンサーリンク


スポンサーリンク



 

ブログをWordPressで作成している場合は、テーマも重要だと思います。

こんにちは。あだじょぱです。

先日の記事で、WordPressのテーマを無料のSimplicity2から有料のSTORKへ変更した事を書きました。

初心者がWordPressテーマを有料のSTORKに変更してみた話

2017.08.09

 

テーマを変更しても、以前のままの設定だと、デザインもイマイチな感じで、表示されないものがあったりと、不便なので、必要と感じた部分を、初心者でも出来るくらいの最低限の労力で試みてみました。

基本は、WordPressの管理画面から設定できるので難しい事はありません。

ですが、STORKのテーマでは出来ない事もあるので、そちらはプラグインを利用するなどして、対応しています。

今回は、テーマ変更に伴い、実際に行なった設定について書きます。

 

 

STORKで設定したこと

 

テーマを変更する事で、リセットされる項目については、再設定が必須でした。

それ以外にもSimplicity2で対応できていたものについては、なるべく同じように対応させたいというところで、色々と設定をしています。

  • 外観のカスタマイズから各種設定
  • 各ウィジェットの再設定
  • SP(モバイル用)の設定
  • プラグインの追加と設定
  • AMP対応

 

この項目について、初心者ながら四苦八苦しながら設定してみました。

 

 

外観のカスタマイズから各種設定

 

まずは、STORKで1番の魅力であるデザインに関する設定をしました。

設定の基本は、Simplicity2の時と変わらず、WordPressの管理画面から外観→カスタマイズを選択し、表示される各項目について設定を行います。

 

 

カスタマイズの項目は、沢山あります。

項目の1番上にあるサイト基本情報は、以前のままで問題ありませんでした。

2段目サイトカラー設定は、他のSTORKを使用しているサイトとの差別化に影響する項目ですので、お好みで色を変更するのが良いみたいです。

3段目サイトロゴ・アイコンですが、Simplicity2で設定していたサイトロゴとファビコンが、リセットされて、解除になっていたので再度登録しました。

そして4段目グローバル設定は、simplicity2には無い設定で、トップページのヘッダー部分についてとトップページのレイアウトを調整できるカスタマイズです。

レイアウトは、パソコン用(PC)モバイル用(SP)の2つの項目があり、個別で設定できます。

このグローバル設定で、トップページにお知らせテキストとリンクを設定し、トップページのレイアウトは、以前のSimplicity2と同様にPCもSPもカード型に設定しました。

次の5段目トップページ設定というのは、主にヘッダーの設定です。

ヘッダー画像や文字の表示や色の設定項目があるので、好みに合わせて設定が可能です。

この項目にある英語表示のテキストと日本語表示のテキストですが、入力しないとヘッダー画像が表示されず、どちらか一方だけの入力だと画像のサイズが小さくなります。

当あだじょぱこたんで説明すると、トップページのヘッダー画像上に表示される白色の文字の部分です。

6段目投稿・固定ページの設定は、主にページデザインについての設定ですので、見出しの表示デザインや投稿日の表示を好みで設定します。

7段目アクセス解析コードですが、テーマを変更した時にリセットされていました。

アナリティクスで確認するまで気がつかなかったので、注意が必要です。

Simplicity2で設定した時のようにコードとタグを取得し、入力しなければなりません。

他のアクセス解析を利用している場合も、headタグのBOXにコードを記載する事で反映されます。

8段目以降は、Simplicity2の時と変わらないので、ウィジェット以外は同じように使えます。

ウィジェットについては、次の項目で説明します。

注意点として、Simplicity2を使用している時に作成したカテゴリには、わかりやすく説明を記載していたのですが、STORKでメニュー設定をした際に、その説明まで表示されてしまう現象がありました。

対処としては、メニュー設定の方で説明を削除すれば、説明が表示される現象は解消できました。

カテゴリの方では説明が残ります。

 

 

各ウィジェットの再設定

 

 

テーマの変更後、ウィジェットの一部がリセットされていました。

主に広告関連のようで、Simplicity2では便利な広告用のウィジェットがあり、そこに入力する事で記事下、記事中、サイドバーの選択した位置へ、自動で表示してくれましたが、STORKでは個別に設定する必要があります。

ウィジェットを設置できる位置は殆ど変わりませんが、STORKの場合はモバイル用とパソコン用で細かく項目が分かれているので、作業は手間が掛かりますが思い通りに近い設定が出来ます。

各項目でPCとSPがあり、それぞれに設定が出来るようになっています。

 

広告は、デフォルトで記事タイトル下記事コンテンツ下に設置する事が出来るようになっていて、それぞれPCとSPがあるので、コードを貼り付けます。

Simplicity2と違い普通のテキストウィジェットを使うのですが、この時にタイトルの方にラベル(スポンサーリンクなど)を記載すると、大袈裟な表示になったので、テキストのコード前にスポンサーリンクと入力する事で通常の文字で表示しています。

因みにスポンサーリンクは絶対では無いので、設置位置などで表示するかそうかを判断すれば良いと思います。もちろん自己責任ですが。

広告に関してですが、STORKのデフォルトでは、よくあるダブルレクタングル表示にはなりません。

自分でショートコードを記述する必要があります。

 

そして、フッターにサイトマップなどを広げて使っている場合、スマホで見ると凄く長いフッターになったりするのですが、STORKではスマホ向けに別のフッター表示が可能で、ウィジェットのSPフッターを設定しておけば、そちらが優先で表示されます。

PC版で3列フルで表示している場合でも、スマホ版はコンパクトにして、必要な項目だけ表示するように出来るので、ユーザビリティを考えた設置が可能です。

あと、CTAも作成出来るようにウィジェットの設定項目があります。

今のところ当あだじょぱこたんでは使用していませんが、使う日が来たら簡単に出来そうです。

メインサイドバーは、Simplicity2と同様にしつつ、STORKのデザインを崩さないように設定しました。

プラグインで追加しているウィジェットは、Simplicity2の時と同じなので、これでウィジェットの設定が完了です。

 

 

SP(モバイル用)の設定

 

Simplicity2の時とは大きく違うのが、SP(モバイル向け)の設定が細かいという点。

こちらについて、少し補足しておきます。

STORKでは、ウィジェットの設定画面にあるSPの各項目を編集する事によって、モバイルでの見た目も良い感じになります。

先に触れたSP用フッターもその1つです。

Simplicity2では、PC用のグランドメニューが、モバイル版では、スライドインかアコーディオンで表示されるタイプでしたが、STORKは見た目はそのままに横へスライドさせる事が出来ます。

地味に凄い

これは素晴らしい機能だと思います。

別枠でメニューを設置する必要が無いので、ユーザビリティーも悪く無いと思います。

モバイルでの使用感や見た目を重視するのであれば、STORKはオススメのテーマです。

有料ですけど。

個人的にはデザイン重視でSTORKを使い、足りない部分はプラグインで補うという使い方が1番安定するような気がしています。

 

 

新たに追加したプラグイン

 

STORKを導入してみると、Simplicity2には有ったSEOなどの設定項目がありません。

その為、減ってしまった機能を補う意味で、今回はプラグインを追加導入する事にしました。

  • Yoast SEO
  • AMP 

 

新たに導入したプラグインは、2つになります。

SNSなどソーシャル系は、Yoast SEOで全て設定しました。

Jetpackというプラグインも使っていますが、使い勝手が良いと思わないので、そちらでは設定していません。

Yoast SEOを導入する事で、サイトマップなど設定できる項目が増えますが、ソーシャル以外の殆どの機能はOFFにしています。

アフィリエイトなどをされるのであれば、各項目を設定する方が良いかもしれませんが、他のプラグインと競合になる設定は、OFFにしておいた方が無難です

そして、Simplicity2に搭載されていたAMPを利用していたので、今回もブログをAMP対応させたかったのですが、STORKのテーマではAMP対応の設定がありませんでした。

そこで、簡単にAMPに対応させるべくプラグインを使用しました。

プラグインをインストールし、有効化しただけでAMP対応が完了します。

但し、この方法で対応した場合は、AMPページでの広告の表示が出来ませんでした。

表示させたい場合は、下記を参考にして下さい。

初心者がSTORKでアドセンス広告をAMPページに表示させた話

2017.08.10

 

 

最後に

 

Simlicity2は、完成度が高くデフォルトで使える機能が充実していました。

STORKは、有料ですがPCとモバイルでのデザインを重視した感じがします。

プラグイン不要で最初から使える機能が多いSimplicity2か、デザインは秀逸だけど機能面ではプラグインが必要なSTORKかという感じです。

Simplicity2を使っていた時は、デザインを変更しようと、CSSを触る機会が多かったのですが、結局のところ上手く出来なくて諦める事もありました。

ちょっとミスしただけで、サイトが開かなくなって画面が真っ白になりますよね・・。

何度もサーバーに直接アクセスしてファイルを書き換えた記憶が蘇ります。

そんな事があって、STORKのデザインには満足しています。


スポンサーリンク


スポンサーリンク





コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

大阪から札幌への移住者。二度の移住でトータル15年ほど。 会社は早期退職。仕事やプライベートで北海道全域を走破。 趣味はGuitarとCamera。どちらも未熟である。  HM/HRと綺麗な素敵レデーをこよなく愛す。怪しい者ではない。