stinger5のカスタマイズ。導入したらすべき3つのこと



stinger

WordPressの無料テンプレートでSEO対策が強いとして、
人気となっているのがstingerです。

この記事でstinger3の改良版である最新のstinger5について
その使い方をまとめていきたいと思います。

Stinger5をWordPressにアップロードする

まずはこちらのサイトからStinger5をダウンロードしましょう。
Stinger5のダウンロードはこちらから

ダウンロードしたら、WordPressのダッシュボードから、
外観⇒テーマ⇒新規追加⇒テーマをアップロードから
先ほどダウンロードしたStinger5をアップロードします。

Stinger5のカスタマイズ

1.カスタマイズで編集

外観⇒カスタマイズをクリックします。

まずはロゴ画像を入れます。(ロゴ画像がヘッダーの部分になります。)
ロゴ画像をクリックして、自分の入れたいヘッダーをアップロードします。
stinger2

アップロードするとこのようになります。
画像が小さく表示されますので、大きくする操作をのちにして修正していきます。(後述参照)
stinger3

基本色、色をお好みの色に変えたら、中央にあるヘッダー画像を削除します。
ヘッダー画像をクリックし、画像を非表示とすると、中央のイメージ画像がなくなります。
stinger4

保存して公開をクリックします。

2.コードを修正する

stinger5ではデフォルトの状態の多くの設定が施されていますので、
コードを修正して思い通りのカスタマイズしていきましょう。

a.ヘッダー画像を大きく表示させる

外観⇒CSS編集から次のコードを加えます。

スタイルシートを保存を押すと、先ほどのロゴ画像が、
大きく表示されるようになります。
stinger6

b.ヘッダーの説明文を消す

外観⇒テーマ編集⇒header.php からコードを変更します。

header.php の以下の部分を修正していきます。

変更前

変更後

stinger7

c.サイドバーをカスタマイズする。

stinger5ではデフォルトの状態で、サイドバーに
広告が入ったり、RSS購読の表示がされてしまいます。

ウィジェットだけにしたい場合は
外観⇒テーマ編集⇒sidebar.php からコードを変更します。

sidebar.php の以下の部分を編集していきます。

変更前

変更後

d.記事下の部分をカスタマイズする

stinger5ではデフォルトの場合、記事下に
コメント⇒関連記事となっています。

ただ、関連記事はコメントよりも先の方がいいので、
その部分の順番を逆にします。

外観⇒テーマ編集⇒single.php からコードを変更します。

single.php の以下の部分を編集していきます。

変更前

変更後

これにより、すっきりとした状態になります。

 3.ファビコンの設定

ファビコンとはタブの所にあるアイコンマークのことです。
stinger5を入れるとファビコンはこのようになっています。
stinger9

独自のファビコンにしておきましょう。

ファビコンを作成する

簡単なファビコンはこちらのサイトで作成できます。
http://favicon-generator.org/editor/ stinger11

ファビコンをアップロードする

メディア⇒新規追加から、画像をアップロードします。
stinger10

画像のURLをコピーします。

header.phpを編集する

外観⇒テーマ編集⇒header.php からコードを変更します。

header.php の以下の部分を編集していきます。

変更前

変更後

Stinger5を導入したら、 上記の部分をカスタマイズすれば
基本的には十分かと思います。

※画像表示にはアイキャッチ画像を設定

また、記事のタイトルや関連記事に画像を表示させる場合は、
記事の投稿ごとにアイキャッチ画像を設定する必要があります。

stinger8

☆受講者5000人超☆ 東大生の無料メール講座 ~会社に依存しない方法~

レベル別ネットビジネス講座



One Response to “stinger5のカスタマイズ。導入したらすべき3つのこと”

  1. […] 私は「Stinger5」というWordPressのテーマを使っているので、「stinger5のカスタマイズ。導入したらすべき3つのこと」という記事を参考にさせていただきました。 […]

コメントを残す

サブコンテンツ

このページの先頭へ