ワードプレスを美しく!Stinger5とSimplester5でカスタマイズ

●Stinger(スティンガー)は、初心者でも簡単にSEO検索エンジン対策やアフィリエイトが行える。ワードプレスの無料テーマとして有名です。ホームページ作成者は、ワードプレスのカスタマイズにかかる知識や労力や時間をかけることなく。

思い通りのきれいなデザインの自分だけのホームページを作成することができます。

僕も長年ワードプレスをいじっていましたが、デフォルト標準のテンプレートでは、見栄えがそっけなくて自分なりに試行錯誤の時が流れました。それにかかった労力や時間は計り知れません。何事も極めるのは難しいですよね。言い方は悪いかもしれませんが、何事も自分にできないことは、時間をかけて習得するよりも、出来る人に任せて利用できるものは利用して、自分なりのものを作りこんでいくといったことも大切だと思います。

 

ということで、今日は、1時間程度の作業でしたが、Stinger5+Simplester5でサイトを構築してみました。SimplesterはStingerにアレンジを加えたもので、巷にStingerが出回って見飽きたなっと思った時は、インストールして見栄えの良いホームページにしてみましょう。

 

1cyoinabi

こんな感じですね。初期ページです。

■インストール手順

Stinger5とSimplester5はワードプレスで動くので、お持ちのサーバーで
ワードプレスの導入が必要です。

手順としては、

1.ワードプレスの導入
2.Stinger5をインストール
3.Simplester5をインストール
4.各種設定
となります。


 

 

■ワードプレスの導入
お持ちのサーバーにワードプレスをインストールします。
ここでは、Xserverでのインストールを図解していきます。(各サーバーと照らし合わせてください)

ワードプレスは今では、サーバー自体に簡単インストール機能がついているところがほとんどですが、
ワードプレスは、データベースで動いているのでインストール前にデータベースの作成が必要となってきます。

1.MySQL設定でMySQLを追加します。
○MySQLデータベース名:わかりやすい名前にします(何のホームページのデータベースかわかるようにしておくと便利です。)
○文字コード:UTF-8を選択します。(ワードプレスの文字コードはUTF-8が推奨されているのでこちらを選択します。)
後ほどのワードプレスインストールで使用します。メモに書いて控えておきましょう。

ワードプレスMySQL

2.MySQLユーザーを追加します。
1で作成したMySQLデータベースに接続できるユーザーを作成します。
○MySQLユーザーID:わかりやすい名前にします。(MySQLデータベース名と同じにはできませんので似たようなわかりやすい名前にしておくと便利です。)
○パスワードを設定します。
後ほどのワードプレスインストールで使用します。メモに書いて控えておきましょう。

ワードプレスMysqlユーザー設定

3.ワードプレスをインストールします。
手動でもできますが、最近では、多くのサーバーで自動インストールができるようになっています。
ここでは、Xserverの自動インストール機能を使ってワードプレスをインストールする方法を図解します。

domeinse

ワードプレスをインストールドメインを選択して、自動インストールをクリック

4.ワードプレスの設定を確認する。
○インストールURLを決める。
例:http://wordpressinst.com/
上記では、http://wordpressinst.com/がワードプレスをインストールする場所です。最後の/の後を空白にしておくと
http://wordpressinst.com/にインストールされます。

○ブログ名を記入する。(後で変更可)

○ユーザー名とパスワードを記入する。(ワードプレスにログインする為のIDとパスワード)

○メールアドレスを記入する。(問い合わせ様メールアドレスを設定します)

○作成したデータベースのデータベース名・ユーザー名・パスワードを入力してインストールをクリック。

capture-20160226-143001

capture-20160226-143025

5.設定したhttp://wordpressinst.com/wp-admin/がログインページになりますのでアクセスします。

capture-20160226-151801

■Stinger5をインストール

ワードプレスのインストールがおわったらいよいよStinger(スティンガー)のインストールです。

Stingerは、H28年3月現在 最新バージョンは、Stinger7です。

Simplesterとの組み合わせは、バージョンにあったStingerが必要ですが、

SIMPLESTER Ver5には、対応Stingerのバージョンは5の20150505b版になっています。

SIMPLESTER Ver6には、対応Stingerのバージョンは6の20151214版になっていますがSimplesterの5と6の違いについては、5は、2カラム設定、6では1カラム設定となっていて、6では、メニューやコンテンツを気にせず記事の作成に専念できるといった特徴がありますが、カテゴリーや広告枠などの設定がしたいといった方は、Simplester5の方が、見慣れた感じのホームページで使いやすいかもしれません。今回は、自分の嗜好もあってかStinger5+Simplester5での導入にしてみました。

Simplesterの対応バージョン表

 

まずは、StingerサイトからStinger5をダウンロードします。

capture-20160226-155508

 

ダウンロードしたStingerのzipファイルをワードプレス内

外観→テーマ→新規追加→テーマのアップロードからStingerのzipファイルをインストールします。

capture-20160226-155645

 

■Simplester5をインストール

続いて同様にしてSimplesterサイトからSimplester5をダウンロードインストールします。

インストール後は、Simplester5を有効かします。

capture-20160226-155413

 

capture-20160226-155821

 

■各種設定

1.横幅たて幅の修正

SimplesterはStingerよりも横幅を広く設定しています。Stingerが980pxに対しSimplesterは1116pxに設定してあるので外観→テーマ編集からstingerのfunction.phpを開きカスタムヘッダーと記載された部分を

width=980→1116へ

height=250→270へ

変更します。

2.パーマリンク設定

設定→パーマリンク設定にてパーマリンクを設定しておきます。

このままでもいいのですが、最初にやっておかないと大変ですのでこの際にやっておきます。

通常記事を書くとURLがデフォルトのままだとhttp://○○.com/?dire2などといったURLになってしまいます。検索エンジン的には、簡素でわかりやすい静的URLが好まれるのでこれをカスタム構造/%category%/%postname%/に更新して保存します。

 

pamarnk

 

以上でワードプレス、Stinger、Simplesterのインストールが完了です。

しっかりと記事を書いていきましょう♪

 

SIMPLESTERのインストールとカスタマイズ方法

 

 

 

 

Stinger5とSimplester5で作成されたサイト

choinavi