wordpress LIONMEDIAにテーマ変更した時の初期設定と初期カスタマイズ

wordpress LIONMEDIAにテーマ変更した時の初期設定と初期カスタマイズ

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

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

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

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

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

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

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

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

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

(´-`).。o(思いすぎやでしかし

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でしか確認していないので、他にもデバイスごとに修正箇所があるかもしれません。

今後が楽しみなLIONMEDIA

まだまだ歴史は浅いLIONMEDIA。
その分どういう方向に進んで行くのか、これからが楽しみですね。

テーマを使用するうえでまた気になることがあればお伝えしていこうかと思います。
それではまた!

こちらの記事も読まれています

wordpressのファイルアップロード上限を変更して大きいサイズのファイルを投稿する... こんばんわ、ttaisonです。 最近この名前も飽きてきたから変えようかな、、、読みづらいし。 さて、今日はWordpressの投稿にまつわる問題。 Wordpressで作ったホームページやブログで、大きな容量のファイルをアップロードしたい時があるとします。 例えばお店のチラシ画像・...
WordPressのアップロード画像サイズを自動調整してくれるプラグインImsanity... こんばんわ、taisonです。 wordpressでサイトを制作して納品完了したあと、お客様からよくいただく言葉があります。 「画像アップロードに時間がかかるんだけど」 「画像がアップロードできない」 「管理画面が重たくなってきた」 制作側からすると意外と盲点なんですが、画像をアッ...
2018年はサンクスページなし!?contact form7でサンクスページを作らずアナリティクスで... こんばんはtaisonです。 最近仕事で「wordpressのお問い合わせフォームでコンバージョンの計測をしたいからサンクスページを作って」と久しぶりに言われたので、それについて応用も兼ね、ご紹介したいと思います。 コンバージョン計測に必要になる作業 まずContact Form 7でコンバー...
WordPressでjQueryが動かない!問題なく動作させるために設定する対策方法... こんばんわ。taisonです。 唐突ですが、 「WordpressでjQueryのライブラリを追加したい!」てこと、 結構ありませんか? スライダー機能がしょぼいから後入れのライブラリで対応したい、 トップへ戻るボタンを追加したい、、などなど。 結構jQueryのコード・ライ...

wordpressカテゴリの最新記事