wordpress LIONMEDIAにテーマ変更した時の初期設定と初期カスタマイズ │ Triple Threat(トリプルスレッド)

いやぁ、だいぶ投稿に日が空きました。
ご無沙汰しております。taisonです。

以前、オリジナルテーマを制作してそちらにテーマ変更することを画策し、黙々と制作に励んでいたのですが、ある事に気付いてしまいました、、、

「時間がもったいねぇ、、、！」

いや、もちろん一からwordpressテーマを制作できるってことのアピールにはなるので無駄ってことはないんですけど、ふと、自分のブログコンセプトからはずれるんじゃないかなぁ。と思い始めてしまいました。

テーマに関してはもっと身近な技術で役に立てることを意識して、既存テーマを掘り当てて使ってみる。方向にシフトしていこうと思いました。

オリジナルテーマの制作はもちろん続けているのでまた別の形でご披露するとして、これからは当ブログのコンセプト

「webの事で同じように悩んでいる人の困り事を解決」

することを再度、意識していこうと思っております。

さて、前置きが長くなりましたが、本題に入りたいと思います。

（´-`）.｡o(思いすぎやでしかし

1. wordpress無料テーマ LIONMEDIAに変更してみた
2. LIONMEDIAをダウンロードしてテーマに追加する
3. LIONMEDIA初期設定
4. wordpress管理画面のカスタマイズから初期設定をする
5. LIONMEDIAにテーマ変更して思ったこと
6. 今後が楽しみなLIONMEDIA

wordpress無料テーマ LIONMEDIAに変更してみた

もともと変更予定ではあったのでどうせなら。と、自ブログのテーマ変更を試みてみました。

これなら同じテーマ使っている人との情報共有にもなるでしょうしね。

まだそれほど記事の数も多くないですし、パーマリンクにも思うところがあったので、それらもテーマ変更と共にまとめてやってまおう。という算段です。

LIONMEDIAをダウンロードしてテーマに追加する

では早速。
まずは公式サイトよりテーマをダウンロードして、wordpress上にテーマを追加します。
いつもの要領ですね。

ライオンメディアインストール画面

環境によって容量超過でテーマ.zipが入らないことがあるので、その場合は解凍したファイルをftpでthemesの部分にブチこみましょう。

入れ込んだらテーマを有効化します。

LIONMEDIA初期設定

無事テーマの追加が完了したらサイトを表示してみましょう。

ライオンメディア表示画面

スッカスカですね笑

実はこのテーマ。
公式サイトのような形にするにはwordpress管理画面上の「カスタマイズ」から初期設定をして形を整える必要があります。

それではやってみましょう。

wordpress管理画面のカスタマイズから初期設定をする

まずは管理画面のカスタマイズから設定画面を開きます。

するとLIONMEDIAのカスタマイズ項目があるはずなので、上から順に設定をしていきましょう。

項目は以下のとおり。

基本設定: 大枠のレイアウト（カラム数）やヘッダー部分の設定、コピーライトの設定
基本機能設定: 検索ピックアップキーワードやピックアップ・ランキング記事の設定
SEO設定: SEO基本設定とcssの非同期読み込み（表示速度関連）の設定
AMP設定: AMP設定（マークアップ合わせてなかったので私は使ってません）
広告設定: 広告の設定　※ウィジェットからも別の形で設定できます
投稿ページ設定: 記事のコンテンツ部分以外の表示設定
SNS・OGP設定: SNS関連の設定（フォローボタン表示とかアカウント設定）
アクセス解析設定: アナリティクスのトラッキングコードなど設定
高度な設定: ヘッダー・フッターに追加で記述したいコードがあればここに記述
デザインスキン設定: カラー設定（カテゴリーごとに色分けすることもできます　※カテゴリーにも設定が必要）

etc…

以上の設定を行ったら再びサイトを表示してみましょう。

記事が入っていれば公式サイトぽい表示になります。
簡単ですね。

LIONMEDIAにテーマ変更して思ったこと

一応設定してすこしブログ内を歩いてみたところ、、、

トップ画面の表示が早い。

また、記事画面もAMPにしてないのにサッと記事が出る。
これでAMPも組み込んだらどうなるんでしょ？
いい感じです。

最近はgoogleがランキング要素に表示速度を追加する。なんて発表もしてましたね。
これから速度の重要性は更に高まりますし、テーマ変更するメリット、あるんじゃないでしょうか？

逆にちょっと気になったところも。
デメリットというわけではないんですけど。

意図的なのかは分からないですが、

・トップページのメインビジュアルとランキング表示のスライドがiPhoneの場合動かしづらい(フリックでするっと滑らない)

・スマホ（iPhone）表示の記事内の画像が縦伸びする

など、スマホ表示の最適化ができていない部分が。

上記に対しては解決済なのでいちお対処法載せときます。

.key {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}//フリック対応(.keyはメインスライドの大枠部分のクラス名)

img{ height: auto;}//画像の縦伸び防止
@media screen and (max-width: 767px){//table要素のはみ出し防止
 .content table{
 width: 100%;
 max-width: 100%;
 table-layout: fixed;
 }
 th,td{
 display: block;//th,tdの横並びをスマホ時、縦並びに調整
 width: 100%;
 }
}

自分はpcとiPhoneでしか確認していないので、他にもデバイスごとに修正箇所があるかもしれません。