ワードプレス無料テーマ「Business Press」カスタマイズ①【ヘッダー部分のカスタマイズ】

ワードプレスには、数多くの無料・有料のテーマがあり、そのテーマ・テンプレートをインストールすることによって、簡単にホームページ全体のデザインやレイアウトを変えることができます。

そのなかでも無料テーマ「Business Press」がシンプルで使いやすいと以前紹介させていただきました。

無料テーマ「Business Press」について

Business Pressの公式サイト

https://businesspress.jp/theme/

今回は、その無料テーマ「Business Press」のヘッダー部分のカスタマイズ方法のご案内です。

「Business Press」のヘッダー部分は、オーソドックスな左側にロゴ、右側にグローバルメニューが並ぶスタイルで、ある程度画面幅が狭くなると、グローバルメニューの代わりに、よくある三本線のハンバーガーメニューが表示されます。

ヘッダー部分の基本設定

「Business Press」でロゴを変更するには、「外観」>「カスタマイズ」>「サイト基本情報」で、ロゴの変更をクリックし、ロゴ画像を指定・アップロードしてください。

その際にテキストのサイトタイトルやキャッチフレーズを非表示にする機能やロゴの幅を指定する機能があります。

グローバルメニューの設定は、「外観」>「メニュー」から、メニューを新規作成、固定ページなどを選択して、メニューに位置、メインナビゲーションにチェックを入れて「メニューを保存」してください。

ここまでは基本設定で、ここからがカスタマイズになります。

ヘッダー部分の高さをスリムにする

好みの問題かもしれませんが、もう少しメニュー部分の高さをスリムにしたいというときもあると思います。

その場合、以下の追加CSSを「外観」>「カスタマイズ」>「追加CSS」に記述してください。

.main-header{
 	padding-top:15px;
	padding-bottom:15px;
}

padding-topでロゴ部分より上のスペース、padding-bottomでロゴ部分より下のスペースをpixelで指定しています。

ヘッダー部分の背景色を変える

ヘッダー部分の背景色を変えたい場合は、先ほどの追加CSSにbackground-colorを追加します。

.main-header{
        background-color:#f00;
	padding-top:15px;
	padding-bottom:15px;
}

ついでに、メニューの文字色を変更したい場合は以下になります。

.main-navigation a{
	color: #fff !important;
}

ヘッダー部分の背景色を半透明にする

今度は、ヘッダー部分が透けるように半透明に変えてみたいと思います。

.main-header-original{
	top:0;
        left:0;
	position: absolute;
	z-index:1;
	width: 100%;
}
.main-header{
        background-color: rgba(255,255,255,0.5);
	padding-top:15px;
	padding-bottom:15px;
}

position:absoluteで、ヘッダー部分が浮いたような状態になるため、下の背景部分が詰められて、重なった状態になります。

「Business Press」では、画面をスクロールさせたときに、少し遅れて固定のヘッダーが表示される仕様になっております。

ですので、

最初に表示されるページトップのヘッダー・・・.main-header-original
画面をスクロールしたときに表示されるヘッダー・・・.main-header-clone

を編集すれば良いです。

まとめ

WordPressでテーマを選ぶ際に、ヘッダー部分のデザインやレイアウトって重要だと思いますが、なかなか思うようなものが見つからなかったりします。

「Business Press」では、もともとがシンプルでスタンダードなヘッダーだけに、少しのカスタマイズで理想のものにアレンジしやすいので、大変お勧めです。

子テーマを作るプラグイン「Child Theme Configurator」のご紹介

WordPress初心者には敷居の高い、子テーマを簡単に作成してくれるプラグイン「Child Theme Configurator」のご紹介です。

子テーマとは

WordPressでは、有料・無料のテーマを導入することによって、ホームページのデザインやレイアウトを簡単に変えることができます。

ただし、WoredPressのアップデートや不具合の修正などで、テーマの更新をするようにお知らせが来ることがあります。

そのままの状態(親テーマのまま)で更新してしまうと、そのテーマに加えた追加CSSやfunctions.phpなどを書き換えている場合、すべて上書きされてしまい、カスタマイズした部分が消えてしまいます。

テーマの更新をしてもカスタマイズ部分を残すためには、子テーマというものを作る必要があります。

通常、子テーマ用のファイルを作り、FTPソフトなどを使ってアップロードするという作業が必要なのですが、初心者の方やファイル操作に慣れていない人にとっては、なかなかハードルが高いですよね。

「Child Theme Configurator」というプラグインを使えば、初心者でも簡単に子テーマを作れますので、大変お勧めです。

しかも、通常子テーマというと、function.php と style.css だけですが、「Child Theme Configurator」プラグインを使えば、header.php や footer.php など、その他のテンプレートファイルも親テーマからコピーして子テーマ化することができます。

「Child Theme Configurator」のインストール

Child Theme Configurator

ダッシュボード「プラグイン」>「新規追加」から、「Child Theme Configurator」を検索して、「今すぐインストール」、有効化してください。

子テーマの作成

ダッシュボード「ツール」>「Child Themes」をクリックして、「Child Theme Configurator」の設定画面に移行します。

1項目め「Select an action:」で、「CREATE a new Child Theme」がチェックされていることを確認して、2項目めの「Select a Child Theme:」で、作成したい親テーマを選択して、「Analyze」をクリックしてください。

そのまま下の方に画面をスクロールさせて一番下、9項目め「Click to run the Configurator:」の「Create New Child Theme」をクリックすると子テーマが作成されます。

子テーマの有効化

作成した子テーマを使うためには、子テーマを有効化する必要があります。

ダッシュボード「外観」>「テーマ」から、作成した子テーマ「(親テーマ名) Child」の「有効化」をクリックしてください。これで、親テーマの更新をしても、子テーマに施したカスタマイズは消えずに残ります。

親テーマのカスタマイズを引き継ぎたい場合

ホームページを作り始めの最初から子テーマを作成していればいいですが、子テーマを作らずにホームページを制作・カスタマイズを進めて行って、後からしまった!と思うことがあります。

そんな時でも、「Child Theme Configurator」を使えば、親テーマで施したカスタマイズを引き継いで子テーマを作成することができます。

子テーマの作成の際に設定項目の8項目め「Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme:」にチェックを入れて、子テーマを作成すれば、親テーマのカスタマイズが引き継がれます。

header.phpやfooter.phpなどの子テーマを作成する

子テーマを作成すると、「style.css」と「functions.php」が作成され、ダッシュボード「外観」>「テーマエディター」から、ファイルの追記・修正をすることができます。

ただ、カスタマイズによっては、header.phpやfooter.phpなども編集したい場合があります。これも親テーマに直接変更を記述したものは、テーマの更新の際に消えてしまいます。

これらの親テーマのphpファイルも「Child Theme Configurator」を使えば、簡単に子テーマにコピーすることができます。

「Child Theme Configurator」の設定画面の上部「Files」タブをクリック、子テーマに追加したいファイルにチェックを入れて、「Copy Selected to Child Theme」をクリックしてください。

まとめ

簡単に子テーマを作成できるプラグイン「Child Theme Configurator」を使えば、FTP情報がわからなくても、子テーマの作成、子テーマに親テーマのテンプレートファイルをコピーすることができ、大変重宝します。子テーマを作成するプラグインは他にもありますが、親テーマのカスタマイズ情報を引き継げたり、「functions.php」以外のファイルも子テーマ化出来たり、機能的にも「Child Theme Configurator」が自分が使った中では一番のおススメです。

ページ内リンク【スムーズスクロール】プラグインーEasy Smooth Scroll Linksのご紹介

よくページ内のリンクをクリックするとスルスルッとスクロールするホームページがあると思います。

リンクをクリックして、パッと切り替わるより、スクロールした方がそのページ内のリンクだということがわかりやすく親切ですよね。

テーマによっては、もともとスクロールしてくれるものもありますが、基本WordPressの標準ではこの機能はありません。

今回ご紹介する、WordPressのプラグイン「Easy Smooth Scroll Links」をインストールすることによって、簡単にスクロール機能を使うことができます。

Easy Smooth Scroll Links のインストール

ダッシュボードから「プラグイン → 新規追加」をクリックし、検索で「Easy Smooth Scroll Links」と検索しましょう。

検索後、「Easy Smooth Scroll Links」 の今すぐインストールをクリック、有効化をクリックしてください。

Easy Smooth Scroll Linksの設定

ダッシュボード左側「設定」>「Easy Smooth Scroll Links」をクリックしてください。

設定画面になりますので、

Scroll Speed ・・・ スクロールスピード(規定値900)小さい方が速い

Offset    ・・・ オフセット、スクロール完了した時の表示場所の調整(規定値20)

Scrolling Animation Effects ・・・ スクロールアニメーションの選択(規定EaseInQuint)

を設定して「Save Setting」で保存してください。

オフセットは、例えばヘッダーを上部に固定していて、アンカーリンクした先の見出しが隠れてしまうときなどに役に立ちます。ここの数値を150とか200に変えると固定ヘッダーでも丁度良いところで止まってくれます!

スクロールアニメーションの選択肢は沢山ありますが、これはイージング関数と呼ばれているもので、動きはじめがゆっくりで終わりが速いとか、動きに変化を付けられます。

こちらにイージング関数に関して詳しい情報がありましたのでご参考にしてください。

https://easings.net/ja(イージング関数チートシート)

規定値のEaseInQuintだと、最後にびゅっと速くなるので、好みの問題ですが、個人的にはeaseInOutSineあたりが良いのではないかと思います。間違っても、選択肢の最初にあるeaseInBounceはやめた方が良いかと思います…。

まとめ

ページ内リンクからアンカーまでスムーズにスクロールしてくれるプラグイン「Easy Smooth Scroll Links」のご紹介でした。

これがあると無いとでは、ユーザーに与える印象も変わってくると思うので、ページ内リンクを多用しているホームページで、テーマにこの機能が付いていない場合には、こちらのプラグイン「Easy Smooth Scroll Links」は大変おススメです。

こちらのリンクでお確かめ下さい→ ページ上部に戻る

【WordPress】全画面動画ヘッダーの作り方(カスタムHTMLと追加CSSで作る)

企業やお店のホームページでは、特にトップページのヘッダーにインパクトのある画像やスライドショーなどでユーザーの目を引き興味を持ってもらうことは大変重要です。

とくに最近、動画を使ったヘッダーが多いように思います。ホームページにアクセスしていきなり全画面の動画が流れたらインパクト大ですよね!

そんな全画面の動画ヘッダーをWordPressで、有料テーマもプラグインも使わずに実現したいと思います。

有料のものにすれば、トップページヘッダーを目立つ全画面の動画を使えるテーマが結構あるのですが、無料のものとなるとなかなか見つからなかったのと、プラグインを使って実現できるかと思ったのですが、理想のものがやはり見つからなかったので自作することにしました。

全画面動画ヘッダーの企業サンプルサイト

今回、IT企業風のサンプルサイトを制作してみました。

https://em-webcreate.com/sample01

HTMLとCSS

現在、ほとんどのメジャーなブラウザでは、HTML5という規格に対応しており、HTML5では、videoタグを使って簡単に動画を埋め込んで再生することができます。

今回、WordPressの無料テーマ「Business Press」を使って、全画面動画ヘッダーのサンプルサイトを作りたいと思います。

まずは、フロントページ用に固定ページを作って、「設定」>「表示設定」でホームページに設定し、固定ページの編集画面でカスタムHTMLで以下のコードを記述、「外観」>「追加CSS」で以下のCSSを記述します。

カスタムHTML

<div class="header_wrap">
  <div class="header_movie">
    <video autoplay="" loop="" playsinline="" muted="" src="(動画ファイル名).mp4"></video>
  </div>
</div>

(動画ファイル名).mp4は、「メディア」>「新規追加」でアップロードした動画ファイルが入ります。

<video …></video>がvideoタグで、autoplay(自動再生)、loop(繰り返し)、playsinline(インライン再生)、muted(ミュート)になります。

追加CSS

.header_wrap{
	position: relative;
	width: 100vw;
	height: 100vh;
	margin: 0 calc(50% - 50vw);
}
.header_movie{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
        overflow: hidden;
	z-index: 1;
}
.header_movie video {
        display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}

ヘッダー画像やヘッダーメニューが邪魔なので、以下の追加CSSで調整します。

.home-header, .home .jumbotron{
	display: none;
}
.home .site-header{
	position:absolute;
	top:0;
	left:0;
	background-color: rgba(255,255,255,0.5);
	width: 100vw;
	z-index:2;
}

ヘッダー画像やホームページヘッダーを非表示にして、メニューは透過で動画の上に表示されるようにしました。

さらに動画の上にタイトルやメッセージを載せ、下の方に下向きの矢印を表示させてみます。

最終的なHTMLと追加CSSは以下のようになります。

カスタムHTML

<div class="header_wrap">
  <div class="header_movie">
    <video autoplay="" loop="" playsinline="" src="(動画ファイル名).mp4"></video>
  </div>
  <div class="header_text">
    <h2>EM Tech Company</h2>
    <h3>時代をリードするテクノロジーカンパニー</h3>
  </div>
  <div class="arrow_wrap">
    <div class="down">Page Down</div>
    <div class="arrow"></div>
  </div>
</div>

追加CSS

.home-header, .home .jumbotron{
	display: none;
}
.home .site-header{
	position:absolute;
	top:0;
	left:0;
	background-color: rgba(255,255,255,0.5);
	width: 100vw;
	z-index:2;
}

.header_wrap{
	position: relative;
	width: 100vw;
	height: 100vh;
	margin: 0 calc(50% - 50vw);
}
.header_movie{
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	z-index: 1;
}
.header_movie video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}
.header_text{
	position:absolute;
	z-index:2;
	left:50%;
	top:40%;
	transform: translate(-50%, -50%);
	text-align:center;
}
.header_text h2{
	font-size:60px;
	color: #fff;
	font-weight: bold;
	text-shadow: 2px 2px 8px #000;
	margin-bottom:0;
}
.header_text h3{
	font-size: 20px;
	color: #fff;
	text-shadow:2px 2px 8px #000;
	margin-top:10px;
}
.arrow{
	position: absolute;
	top:85%;
	left:50%;
	width: 30px;
        height: 30px;
        border: 2px solid;
        border-color:  transparent transparent #fff #fff;
        transform: rotate(-45deg) translatex(-30px);
	z-index:2;
}
.down{
        position:absolute;
	top:80%;
	left:50%;
	transform:translatex(-50px);
	color: #fff;
	z-index:2;
}

少し長くなりましたが、こんな感じで、全画面の動画ヘッダーを使えば、かなり印象的なホームページになるのではないかと思います。

デモサイト

EM Web Createでは、上記のサンプルサイトのようなWordPressを使った格安ホームページ制作をスキルマーケット・ココナラで承っております。

LINE公式アカウントのボタンをホームページに貼り付ける方法

LINE公式アカウントとは

LINE公式アカウントとは、以前はLINE@と言われていたサービスで、個人のLINEアカウントと違って、お店や企業など、ビジネス向けのサービスになります。

LINE公式アカウントでは、お客様に友だち登録してもらってメッセージを一斉送信したり、個別の問い合わせに対応したり、ショップカードやクーポンの発行など、便利な機能を無料で使用できます。

詳しくはこちらから
https://www.linebiz.com/jp/service/line-official-account/

LINE公式アカウントの友だち追加ボタンHTMLタグの取得

そんな便利なLINE公式アカウントですが、友だち追加のQRコード画像を直接貼り付けているホームページもたまに見かけます。
パソコンから閲覧している場合は、そのQRコードをスマホで読み取って、という流れはOKですが、スマホで閲覧しているときにQRコードが表示されても困りますよね…。

そんなとき、LINE公式アカウントの公式サイトで作成した友だち追加ボタンのHTMLタグをホームページ内に貼り付ければ、パソコンから閲覧しているときは、クリックするとQRコードが表示され、スマホで閲覧しているときにタップすると、LINEアプリが起動するので大変便利です。

まずはLINE for Businessにログイン
https://www.linebiz.com/jp/login/

アカウントを選んで、管理画面左下の「友だちを増やす」をクリックしてください。

「Webサイトにボタンを設置する」の”<a href=…”から始まるHTMLタグをコピーします。

LINE公式アカウントの友だち追加ボタンの設置

ホームページの好きなところにこのHTMLタグを貼り付ければ完了です(WordPressの場合はブロックの追加で「カスタムHTML」を選んでその中にペーストしていただければ大丈夫です)。

貼り付けてみて、ボタンをもう少し小さくしたいというときには、
imgタグ内にwidth=”横幅”を追加してください。

<a href=”…”><img src=”…” alt=”友だち追加” heght=”36″ width=”150px” border=”0″></a>

これでボタンの大きさを変えられると思います。

このように簡単にLINE公式アカウントの友だち追加ボタンをホームページ内に設置できます。無料で利用できますので、お店や企業の集客に活用していただければと思います。

ホームページをhttpからhttpsに変える方法【SSL化(暗号化)設定】

ホームページを閲覧したときにブラウザのURLが表示されるところに「保護されていない通信」と書かれているのを見たことがあると思います。

このように表示されていても、ホームページ自体は問題なく見られるのですが、何となく心配になってしまいますよね。

この「保護されていない通信」となってしまうのは、サイトがSSL化されていないからです。

SSL(暗号化)とは

SSLとはサーバーとユーザーとの間のインターネット上の通信を暗号化する技術です。
インターネット上のデータ通信は、そのままだと何者かによって盗み見られたり、改ざんされる危険性があります。

ホームページをSSL化(暗号化)することによって、データ通信が暗号化され、より安全にやり取りすることができるようになります。

最近では、SSL対応の有無が検索順位にも影響してくるため、以前よりも増してサイトのSSL化は重要になってきております。

SSL対応にはお金がかかる?

有料のSSL証明書を発行してもらうという方法もありますが、メジャーなレンタルサーバーなら、ほとんどのところで、無料でSSL設定できるサービスを行っています。

もちろん、有料の方がより信頼度が高いかもしれませんが、手続きが面倒だったり、毎年コストがかかってきますので、大企業やネットショップ以外の中小企業や個人のお店のホームページでは、無料のSSLで十分かと思います。

無料SSL設定の方法

WordPressサイトの無料SSL設定のながれとして、

  1. サーバー会社のコントロールパネルで「無料SSL設定」をしてSSL証明書を取得
  2. 設定が反映されるまで待つ
  3. WordPressの管理画面から、URLをhttpからhttpsに書き換えるか、「Really Simple SSL」プラグインなどをインストールする

まず、1のサーバー側で設定をして無料SSLが使える状態にする必要があります。
これをやらないで3の書き換えをやってしまうと、ホームページにアクセスすらできない状態になってしまうので要注意です!

サーバー側のSSL設定

サーバー側の無料SSL設定の方法は、レンタルサーバー会社によってそれぞれやり方が違うので、詳しくはご使用のサーバー会社のマニュアルなど検索し参考にしてください。
ここでは、エックスサーバーの無料SSL設定の方法についてご案内します。

エックスサーバーの場合、サーバーパネルにログインし、「ドメイン」の「SSL設定」をクリック、

「独自SSL設定追加」に設定したいドメインを追加すればOKです。(エックスサーバーの場合、ドメインの登録時に無料SSL設定を同時に申し込むこともできます)

あとは1時間ほど待って設定が反映されているのを確認して、WordPress側の設定に進んでください。

WordPress側のSSL設定

WordPressの管理画面にログインし、「設定」>「一般」から、WordPressアドレス(URL)、サイトアドレス(URL)を「http://(ドメイン)」から「https://(ドメイン)」に書き換えて「変更を保存」をクリックします。

次に内部リンクや画像URLが、http://から始まっていたものをすべてhttps://に書き換える必要があります。これをすべて抜かりなく書き換えたら、http://でアクセスされたものをhttps://にリダイレクトする設定をします。これには、.htaccessというファイルを書き換える方法やプラグインを使う方法があります。

なんだか難しそうですよね、そんな人のために簡単にSSL設定できるプラグインもあります。

「Really Simple SSL」プラグインを使ってSSL化する方法

「Really Simple SSL」プラグインを使えば、煩わしい作業を省略してSSL設定ができます。

WordPress管理画面左側「プラグイン」>「新規追加」から、「Really Simple SSL」を検索し、インストール、有効化してください。

あとは設定で、301 .htaccess転送を有効化にチェックし、保存すればOKです。

あとは、ブラウザでホームページを表示させてみて、すべてのページで上部のURLに鍵マークがついていればOKです。

もし、鍵マークがついていないページがあったら、一部でhttp://のファイルが含まれているはずなので、手動で内部リンクや画像URLがhttp://のままになっているものをhttps://に書き換えてください。

SSL設定まとめ

以上、SEO対策とユーザーに安心感を与えるためにも、少しの手間と無料でSSL設定できますので、まだhttp://のままの方は是非やった方が良いかと思います。

また、サーバー選びでしたら、簡単に無料で独自SSL設定できるエックスサーバーがお勧めです。

【SEO対策】実店舗のある会社・お店のための対策

格安ホームページ制作のEM Web Createと申します。
WordPressを使った、個人事業や中小企業、お店などのホームページ制作を承っております。

折角ホームページを作るのだったら、GoogleやYahoo!の検索結果が出来るだけ上位に出てきてほしいですよね。

そのためのSEO対策というと、何か難しいことをやらなければならないと思われるかもしれませんが、実店舗のある会社やお店がホームページを作る際に、最低限やるべき対策についてご案内したいと思います。

地域キーワードの必要性

たとえば、あなたが近くの整体院などを調べるときどうしますか?昔でしたら、電話帳などを開いて調べたかと思いますが、今ならきっとスマホで、「地域名 整体院」や「地域名 整体」などで検索すると思います。それが「地域キーワード」です。

実店舗のある会社やお店の場合、その周辺の地域が集客の対象になりますので、その地域からホームページをアクセスしてもらう必要があります。

多くの人が「地域名 ○○(業種)」と検索してお店やその地域のビジネスを調べていますので、営業エリアの地域キーワードを対策して、上位表示させることが必要です。

極端ですが、ものすごくSEO対策して、検索ワード「○○(業種)」で100位を取るよりも、「地域名 ○○(業種)」で1ページ目に表示される方が、はるかに集客に効果的だと思います。

タイトルタグ、ディスクリプション、コンテンツに地域名・業種を含ませる

「検索してほしいキーワードはこれなので、このキーワードで検索されるように設定してください。」と言われることがありますが、メタキーワードと言われるキーワードを設定する項目は、最近の検索エンジンでは、無視され効果が無いといわれています。

ですので、キーワードとなる地域名や業種は、ホームページの文章などの中に自然に見えるように含ませる必要があります。

特にホームページのタイトルタグやディスクリプション(説明文)に含ませるのは重要です。
整体院のホームページであれば、「○○市の整体院△△(店名)」など、地域キーワードを含ませたタイトルタグにすることによって、検索エンジンに、このホームページは○○市の整体に関係するサイトであると認識してもらえます。また、ディスクリプションタグも同様に、地域キーワードを含ませ記述しましょう。

見出しタグやテキストの中にも、自然な流れで、詰め込みすぎないように地域名・業種を含ませるようにしましょう。

とは言え、地域名・業種を入れれば必ず検索結果が上位に来るというわけではありません。あくまでも、ホームページの内容が充実していて、ユーザーにとって有益だと検索エンジンが判断したときに順位が上がってくると言われています。

Googleマイビジネスに登録する

ホームページの施策とは別にGoogleマイビジネスというものがあります。
Googleマイビジネスとは、Googleが提供している無料のローカルビジネス登録サービスです。

Googleで「地域名 業種」などで検索された際に検索結果の上部にGoogleマップが表示され、その地域の関連する店舗が表示されます。

Googleマイビジネスへの登録がなくても店舗情報が検索結果に出ることはありますが、これは一般ユーザーからの情報提供によるもので正確なデータではないこともありますので、自店舗がすでに登録されていて不正確な情報があったら修正しましょう。

Googleマイビジネスは、検索結果で上位に表示される割に、登録してるライバルが少ないので、実店舗のあるお店や会社には、集客が期待でき、大変お勧めです。

Googleマイビジネスの登録はこちら

https://www.google.com/intl/ja_jp/business/

【EM Web Create】ホームページのリニューアルをお考えの方へ

格安ホームページ制作のEM Web Createと申します。
スキルマーケット・ココナラでWordPressサイトの既存テーマをベースにカスタマイズを施してのホームページ制作を承っております。

おかげさまで多くの方々からご依頼をいただいておりますが、まったくの新規でホームページを作りたいという方は半数くらいで、現在ホームページを持っていて、それをリニューアルしたいというかたも半数くらい、いらっしゃいます。

もちろん、新規だけでなくホームページのリニューアルも受け付けておりますが、現在のホームページがどういったものかによって、リニューアルの仕方が変わってきたりします。

【リニューアルその①】WordPressサイト→WordPressサイト

今までのホームページもWordPressでリニューアル後もWordPressサイトの場合です。

現在のホームページが製作途中の場合などは、そのまま現在お使いのWordPressを使って、テーマの変更やデザイン、レイアウトの変更、コンテンツの制作をさせていただきます。ただしこの場合、作業期間中は一般ユーザーが見れないようにメンテナンスモードにさせていただきますので、ある程度ホームページが閲覧できない期間ができてしまいます。

もう一つのパターンが、現在のホームページのサブディレクトリにもう一つWordPressをインストールさせていただき、そこで新しいホームページを制作し、完成したのちに、WordPressのサイトアドレス変更とFTPでのファイル操作とファイルの書き換え作業を行い、今までのドメインで新しいホームページが表示されるようにします。
この場合、FTPでのファイル操作・書き換えが必要になってきますので、WordPressのID、パスワードとは別に、FTPで接続するための情報または、レンタルサーバーのID、パスワードなどを教えていただく必要があります。

FTP情報やサーバーの情報を教えていただけない場合、ご依頼をお断りする場合がございますのでご了承ください。

【リニューアルその②】静的HTMLサイト→WordPressサイト

HTML/CSS、JavaScriptなどで書かれた静的なホームページからのリニューアルです。

こちらも基本的にレンタルサーバーのID、パスワードを教えていただき、現在のホームページのサブディレクトリにWordPressをインストールして、新しいホームページを制作し、完成したのちに、FTPでファイル操作・書き換え作業を行い、今までのドメインで新しいホームページが表示されるようにします。

もしくは、当方の作業用のサーバー・ドメインでホームページを制作し、完成したのちに移設する場合もあります。

【リニューアルその③】WixやJimdoなど→WordPressサイト

WixやJimdoなどのホームページ作成サービスからのリニューアルです。

無料プランなどで独自ドメインを使っていない場合、そもそも同じドメインを継続できないので、ドメインから新規に取得して作り直しになります。

独自ドメインを使用していて継続利用した場合、WixやJimdoを解約する前に、ドメイン移管の手続きをする必要があります。

新たにドメインの移管先となるドメイン管理会社と契約をして、移管の手続きをする。
レンタルサーバー会社と契約する。
ドメインとサーバーを紐づける(ネームサーバーの設定)。
あらかじめ制作しておいたホームページを移設する。

と言った作業が必要で、ドメイン移管自体に時間がかかるので、かなり手間と時間がかかります。

ホームページのリニューアルをお考えの方は、EM Web Createにご相談いただければと思います。

お勧めのWordPress無料テーマ「Business Press」の使い方とカスタマイズ

格安ホームページ制作のEM Web Createと申します。
スキルマーケット・ココナラで既存のテーマをベースにカスタマイズしてWordPressサイトの制作を承っております。

自分でもよく使うお勧めのWordPress無料テーマ「Business Press」の使い方と簡単なカスタマイズのご案内をさせていただきます。

WordPress無料テーマ「Business Press」とは

「Business Press」の特徴として、

  • コーポレート(ビジネスサイト)向け、店舗向けテーマ。
  • 日本語が美しく表示されるようにレイアウト・タイポグラフィーがデザインされている。
  • ブロックエディター(Gutenberg)に完全対応。
  • レスポンシブデザイン。
  • ヘッダートップバーに電話番号・お問い合わせ・アクセスなどを表示できる。
  • プログ一覧表示で2カラム、3カラムのグリッドレイアウト表示ができる。
  • スマホ表示時のハンバーガー(ドロワー)メニューのデザインがシンプル、スタイリッシュ。
  • GPLライセンス・無料・商用利用可・カスタマイズ自由。

国産の無料テーマでコーポレートサイト、ビジネスやお店向けのものが意外と少なく、メジャーな国産テーマだと、使っている人が多いので、見る人が見ると「このサイトはこのテーマを使ってるな」と思われてしまいがちです。そうかといって、海外のテーマは素敵なデザインなものが多いのですが、日本語のサイトにするとフォントや行間が合わず調整に苦労したりします。

その点こちらの「Business Press」は、シンプル、スタイリッシュなデザインなので、中小企業や個人事業、店舗のホームページに大変使いやすいテーマだと思います。

ダウンロード&インストール

「Business Press」は、WordPressの管理画面から直接ダウンロードはできないので、Business Pressの公式サイトからダウンロードしてから、WordPressにアップロードする必要があります。

こちらのサイトからダウンロードできます。https://businesspress.jp/theme/

次にWordPress管理画面「外観」>「テーマ」から、「新規追加」>「テーマのアップロード」を選び、「ファイルを選択」で、先ほどダウンロードしたテーマファイルを.zipのまま選択して「今すぐインストール」をクリックします。「有効化」すればテーマが反映されます。後々のとこを考えると子テーマを作成した方がいいですが、ここでは割愛させていただきます。

ホームページの作成

基本的なページの作成方法は、こちらの記事をご参考にしてください。

管理画面「外観」>「カスタマイズ」から、

  • ヘッダーロゴやサイトアイコンの設定
  • リンクカラーやトップバー、フッターの色の設定
  • トップバーに電話番号、お問い合わせ、アクセスのリンク設定
  • ヘッダー画像の設定
  • ホームページヘッダー(トップページのヘッダー画像とメッセージ)の設定
  • その他、ブログやウィジェットなどの設定

ができます。

PC表示の時にテキスト幅が狭いので調整

このままでも十分使えるホームページが作れると思いますが、Business Pressでは1カラムのPC表示の時、段落などテキストの表示幅が標準で、720pxと狭めに設定されています。

ホームページによってはこれでもいいかもしれませんが、もっと幅広く表示したい、例えば最大幅を1000pxにしたいというときは、「外観」>「カスタマイズ」から、「追加CSS」を選択し、以下のコードを追加してください。

.site-content{
 max-width:1000px;
 margin:0 auto;
}

これによって、最大表示幅が1000pxになります。必要に応じてこの数値を変えてみてください。

Business Press使用のサンプルサイト

Business Pressをベースにいろいろとカスタマイズを加えたサンプルサイトはこちらになります。

https://em-wc.com/sample1/

エステサロンなどの美容系のサンプルサイトになります。

EM Web Createでは、このようなホームページ制作を承っておりますので、WordPressサイトの制作に関して何かございましたら、ご相談いただければと思います。

【SEO対策】ホームページ作成の際に見直すべき3つの事

せっかくホームページを作ったのにGoogleやYahoo!の検索になかなか出てこなかったらガッカリですよね。そんなときに見直すべき基本的なことを3つ挙げさせていただきます。

1.ページの表示(読み込み)速度が遅い
2.スマホ対応ができていない
3.SSL化(https化)されていない

1.ページ表示(読み込み)速度が遅い

ページ表示速度は、Googleの検索結果の順位に影響すると言われていて、表示速度が遅いと検索でも上位にヒットされなくなってしまいます。また、検索結果だけでなく、ユーザー側の満足度が大幅に低下し、表示に3秒以上かかるページは約半分のユーザーが離脱するとまで言われています。

画像ファイルを最適なサイズに変更しよう

ページ表示速度が悪化してしまう大きな要因として、画像ファイルのデータ容量が大きいことが挙げられます。画像データはテキストに比べてはるかにデータ容量が大きいので、そこを圧縮することによってかなり表示速度を改善することができます。

まずは、デジカメやスマホで撮影した写真をそのまま張り付けるのではなく、画像編集ソフトなどで、実際に表示するサイズに合わせて、px(ピクセル)単位でサイズ変更して、必要に応じてトリミングして貼り付けるようにしましょう。ファイル形式は、写真は.jpg、ロゴは.gifまたは.png(透過あり)というように使い分けましょう。

プラグインの入れすぎ

WordPressサイトの場合、プラグインを入れることで簡単にいろいろな機能を追加することができます。大変便利なのでついあれもこれもと追加してしまいがちですが、これもサイトを重くしてしまう原因になりますので、必要なものに絞って使わないものは、無効化して削除するようにした方がいいと思います。

レンタルサーバーの性能の問題

レンタルサーバーの性能によっても表示速度は変わってきます。サーバーによっては、表示速度が遅いだけでなく、たまに応答がなかったり不安定なこともあります。契約しているサーバーを変更するのは、手間もかかりますし、少し敷居が高いかもしれませんが、どうしても表示速度が改善されない場合は、検討の余地はあるかと思います。

2.スマホ対応ができていない

近年では、パソコンではなくスマホやタブレットでホームページを閲覧する割合が、6~7割と言われており、スマホ対応は必須となっております。Googleの検索においても、スマホ対応は検索結果の順位に影響すると言われています。

WordPressサイトの場合、多くのテーマ・テンプレートがスマホ・タブレット対応(レスポンシブWEBデザイン)で設計されており、それを利用することであまり考えなくても自動で最適なレイアウトにして表示してくれますが、出来れば、文字サイズや画像サイズなどを追加CSSで微調整してより見やすいものに出来たらいいでしょう。

3.SSL化(https化)されていない

SSL化とは、ブラウザ(ユーザー)とサーバーとの通信を暗号化することです。これによって、セキュリティを強化し、ユーザーが安心して情報などを入力できるホームページにすることができます。

このSSL化もGoogleの検索結果に反映する要素になっているようです。

また、SSL化されてないホームページは、URLの先頭が、http://から始まりますが、SSL化されたホームページは、https://になります。ブラウザのURLの表示欄に「保護されいない通信」と警告文が書かれているのは、SSL化されていないホームページです。警告文が書かれていても普通にホームページは閲覧できるのですが、ユーザー側からすると何となく不安になりますよね。

無料のSSL証明を利用しよう

SSL化にはお金がかかると思っている方もいるかと思います。もちろん有料のSSL証明もありますが、大手のレンタルサーバー会社でしたら、設定の仕方は各レンタルサーバー会社によって違いますが、大抵、無料のSSL証明が使えますので、積極的に設定した方が良いと思います。

ホームページ側の設定

サーバー側でSSL化の設定をしたら、今度はホームページ側の画像や内部リンクのURLをすべてhttpからhttpsに変更したり、WordPressサイトだったら、WordPressアドレス、サイトアドレスをhttps~に書き換えたり、SSL化のプラグインを入れたりして、常時SSL化します。

まとめ

今回、SEO対策として、ホームページ作成の際に見直すべき3つの事を挙げさせていただきましたが、いずれにしてもユーザーファーストの視点に立った、快適さや見やすさ、安心といったところがSEO的にもますます重要視されているようです。