ARTICLE突然ですが、このブログをやめることにしました。Extension」をカスタマイズした話【1】2018.10.20WordPressあれこれAdvertisementここ数ヵ月、自分のブログをほったらかして会社関係のブログリニューアルに追われていました。8月はアフィリエイトサイトのリニューアル。HTMLサイトからWordPressに切り替えて運用することにしました。9月は会社サイトのリニューアル。WordPressの自作テーマを使用していたのですが、作成者の退職に伴って更新に少し手間が掛かるようになっていました。その現状をどうにかするため、無料テーマを使用して誰でも管理画面上で更新できるように修正しました。Extension」を使用しています。カスタマイズしたことを忘備録的にまとめておきます。「Xeory」はバズ部が提供するWordPressテーマ。Base」の2種類があります。usersXeory-無料WordPressテーマ-Xeoryはコンテンツマーケティングに特化した無料のWordPressテーマです。今回のリニューアルでは、ブログとして記事を積み重ねていけるようにするのが目的のひとつでした。コーポレートサイトという側面がある以上、ブログ中心のサイトにしてしまうのはちょっと違います。事業の紹介といった固定ページをきちんと見せなければなりません。Extension」がベストでした。必要なコンテンツが揃っているいいなと思った最初のポイントが、特徴、サービス紹介、会社紹介、お問い合わせ、といった、コーポレートサイトにあって欲しい定番がすでにTOPページに配置されていること。事業説明や価格表といったすでに存在している重要な固定ページをブログの投稿記事にしてしまうと、埋もれてしまって大切な情報がお客さまに届きません。Extension」ならTOPページのどこにはめ込むかを考えるだけでいいんです。素敵!画像がふんだんに使われて見やすい業務上、画像は多めに使いたいところでした。Extension」の画像の使い方がとても気に入りました。ちなみに、早い段階でテキスト表示だけのメインビジュアルは画像に変えてやろうと思っていました。Extension」をインストールしてみました。実際に運用する場合、どこを変えたらどうなって、こういったことはできるのかといった諸々の確認のためです。今回はすでに稼働しているサイトを変更するため、自由自在にテーマをインストールして確認してみるということができません。そのため、ダミーサイトを使ってある程度「こんな形になる」を試してから導入するかどうかを決めることにしました。実際にテストすると、ここは変更できるんだろうか?と思った部分も変更可能で、イメージしていたサイトデザインが実現できそうだったので導入決定です。実際に行ったカスタマイズいろいろとカスタマイズはしましたが「完璧!」というところまでは、まだ至っておりません。表示されていればいいや~と、誤魔化しているところもたくさんあります。段階を踏んでカスタマイズしていったので、実際にやったことを思い出しながら順番に記していきます。カスタマイズ前に子テーマを作成メインビジュアルを画像に変更ここまでは、実際のサイトにインストールする前に、ダミーサイトで試してみた部分です。カスタマイズ前に子テーマを作成まずはカスタマイズ用に子テーマを作成します。子テーマを作る理由としては、ダウンロードした親テーマを直接編集してしまうと、テーマの更新があった際にカスタマイズ箇所が上書きされてしまうからです。自分の行ったカスタマイズを保存するためにも、テーマをいじる場合には子テーマを作っておいた方がいいでしょう。子テーマの作り方WordPressのテーマは、WordPressをインストールしたフォルダの中「/wp-content/themes」で確認できます。親テーマの名前にわかりやすく「-child」をプラスして子テーマ用のフォルダを作成します。続いて、cssファイルを作成して子テーマフォルダに保存します。新しく作成した「style.css」には下記のように記載しましょう。Extension」の子テーマですよーということが書いてあります。url('../xeory_extension/style.css');一連の流れについては、下記記事を参考にさせていただきました。ファイルの中身についてもそのままコピーさせていただいています。Extension」を使用しています。子テーマのフォルダとcssファイルができたら、FTPソフトで「/wp-content/themes」にアップロードします。アップロードが完了したら、管理画面の外観>テーマに子テーマが表示されます。最初にカスタマイズしたのは、やっぱりメインビジュアル。Extension」を選んだと言っても過言ではありません。メインビジュアルの参考に関しては、下記記事を参考にさせていただいています。分かりやすくまとめてあったのでとても助かりました。Extension】トップの画像とサイズの変更カスタマイズ最近、バズ部のXeoryという無料テーマが好きではまってます。Baseというブログ...高さを変更するメインビジュアルがちょっと大きすぎかなと思ったので、まずは高さを縮めることにしました。参考記事と同じように、まずは500pxに設定。作成した子テーマのstyle.cssに下記を追記します。#main_visual」がメインビジュアルの部分を示しています。あとは、画像に変えてから高さを微調整していくことにします。画像に変更するまずは、表示させたい画像をアップロードします。アップロードすることで画像のURLができます。#main_visual」への指示に、表示させたい画像のURLを追記します。cover;先ほどの高さを変更する指示と合わせると、下記のような形となります。!important;}これで、メインビジュアルの部分を画像に変更できました。cssは記述順に優先されますが、「!important」をつけるとその指示が最優先されます。わたしの場合、画像の指定のところにも「!important」をつけないと反映されませんでした。レスポンシブにならない無事に画像に変更できた......と思いきや、何故かスマホのメインビジュアル画像がレスポンシブになっていませんでした。大きなサイズのまま表示されているんです。試してみましたが、どうにも解消されないままです。保留にしたまま、次にどうするかを考えていきます。リニューアル作業はなかなか大変ここまでの作業は、ダミーサイトでのチェックなのでどこにも影響はありません。稼働サイトに反映させるとお客さまに影響が出るため、いろいろとタイミングを見計らる必要があります。ダミーサイトでいろいろ確認して、本格的に稼働サイトに反映させるのは影響が少なさそうな夜中から明け方でやることに決めました。ここから完成形までまだいろいろカスタマイズしていったので、その続きはまた別の記事でまとめていきます。リニューアル後に「やっぱりこうしよう!」と変えた部分もありますし、稼働後にエラーになった部分もあります。なんだかんだでこれからも改善していくのでしょうが、それもまた楽しい時間です。得意ではないけれど、サイトをいろいろいじるのは好きです。思い通りにいかないこともありますが、うまくいったときの達成感は幸せですよね。2018.04.25ブログを作り始める際に、まずはテーマを決める必要があります。WordPressのテーマは、無料で様々な種類から選べます。Extension」カスタマイズ忘備録第2弾です。Extension」カスタマイズ忘備録第4弾です。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。Extension」をカスタマイズした話【1】WordPressあれこれサグープラチナの良い点とプラチナテストについてライティングで稼ぐプロフィール1億貯める.com運営者:cotoco高卒アラフォーのwebライター。貯金1億&物書きとして生きるという夢に向かって奮闘中。このブログをやめることにしました。WordPress.。