STINGER3(WordPressテンプレート)をカスタマイズしてみた-備忘録其の1

公開日: : 最終更新日:2015/07/28 WEBマーケティング, WordPress

stinger3

さて、サイトを立ち上げてまだ二日目ですが、
今回はSEOに強い無料テンプレートとして有名な
「STINGER3」というテンプレートを使ってみました。

本日までに行ったカスタマイズについてメモ紹介する。
(書きためておかないと、後で戻せなくなりそうなので(笑))

まずは2014年2月4日時点でのお姿。
クリックで拡大表示されます。

himazine-20140204

SPONSORED LINK

STINGER3とは

さて、STINGER3とはそもそも何かと言うと…
ENJILOGを運営するENJIさんという方が作成された
WordPress用のSEOに強いと噂される無料テンプレート。

僕自身、SEOに強いテンプレートを探していたわけでは無く、
カスタマイズしやすそうな割とシンプルなテンプレートを探していました。
(SEOについてはプラグインで済ませるか・・・って感じでした。)

そんな時にたまたま見つけたのが「STINGER3」ですね。
カスタマイズしやすそうな見た目で、おまけにSEOに強いとか。

ということで、しばらく試して見るつもりです。

SEOとは

始めて聞く人の為にSEOについて少し説明すると、
ブログやサイトというのは見てもらいたくて作りますよね?
(中には違うよ・・・って人もいるんかもしれんが)

では、その「見てもらいたい」ですが、
どのように実現させていくかというと…

  • 記事を書く
  • 検索エンジンからアクセスを呼び込む

という流れになります。
その「検索エンジンからアクセスを呼び込む」上で
重要になってくるのがSEOと呼ばれる知識・技術になります。

正式名称はSearch Engine Optimization/検索エンジン最適化と言います。
簡単に言うと「アクセスを呼び込みやすくしてあげる行為」といった感じでしょうか。

概念は色々ありますが、その一つに「内部SEO」という考え方があります。
言葉そのまんまで、サイトの内部(コンテンツやHTML)の最適化です。

要はSTINGER3のHTML的なデザインが、
内部SEOという観点で見た時に優れており、
結果的にSEOに強い…というわけですね。

SEOに強い理由としては見やすさの面もあるでしょうし、
基本的な見出し(h1~h3辺りまで)の設計などが優れているのでしょう。

で、結局「SEOに強い=上位表示しやすい」事になります。
上位表示というのは検索結果の上の方に出やすい…って感じですね。

ということで、SEOのお話は今回はオマケでした。では。。。
今日までに行ったSTINGER3の当サイトカスタマイズを備忘録としてメモ!

導入したWordPressプラグイン

普段入れている「head cleaner」というプラグインがあるのですが、
どうやらSTINGER3には不要ということらしいので入れていません。
あとはスマホ用のデザイン系プラグインも不要とのことです。

All In One SEO Pack

タイトル・メタ説明文・キーワードなどを別途カスタマイズ可能。
ということで、入れてないと気持ち悪いので入れています。

Google XML Sitemaps

サイトマップ作成用。
出力されたサイトマップはGoogleウェブマスターツールにて使用。

TinyMCE Advanced

普段から僕が愛用しているWordPress用エディタ。

wp-jquery-lightbox

これも趣味で入れているプラグイン。
画像をクリックするとふわっと画像が拡大表示される。

WP-PostViews

記事のView数をカウントしてくれており、数値として出せるプラグイン。
将来的に人気記事ランキングを作りたい為。
また、アクセスが来ているのかをすぐに知りたかったために導入。

Table of Contents Plus

実は始めて使ったプラグイン。
自動で目次を挿入してくれます。

綺麗に見出し(h1~h6タグ)を付ける事を意識して記事を書いていた自分的には、
目次が記事にはいることで分かりやすくなるし、なんだか嬉しい・・・(:3_)= GOOD

 ヘッダー画像の作成

まずはサイトの顔となるヘッダー画像の作成。
作成にはEDGEというドット絵用エディターを使用。

EDGEを使った理由は、使いなれていることもありますが、
画像をpng形式で出力した場合、背景を透明にして保存できるところですね。
EDGEはこちら

▼作成したヘッダー画像

header-logo2

▼試しに作ったヘッダー画像

header-himazines

サイト全体のカラー統一

STINGER3は全体的に白系統のテンプレート。
ですが、現段階では黒系統に統一しています。

統一するために行ったのは背景の変更、
及び、文字色の黒からグレーへの変更。

背景画像

背景画像は、僕が普段から愛用させていただいてる
Subtle Patterns様」よりお借りしました。

デザイン系の背景がたっぷり用意されています。
いつもありがとー(なかちゃん風

文字色の変更

文字色についてはGoogleChromeを使うとGood!
編集したいCSSの部分がどこであるかが簡単に分かります。

  1. まずは変更したい文字をドラッグする
  2. 右クリックをして「要素を検証」を選択
  3. 対応するCSS部分を確認して編集する

イメージ的にはこんな感じかな。

▼ドラッグして要素を検証
ドラッグして要素を検証

▼対応するCSS部分を確認する
対応するCSS箇所

例えば図の例であれば、
「導入したWordPressプラグイン」という所のCSS対応箇所を調べたい
…とします。

そうして「要素を検証」してみると、
この部分は「h2」に当たることが分かりました。

  • もしここに「font-size: ~~px;」とあれば、これがフォントサイズ。
  • もしここに「color: #~~~~~~;」とあれば、これが文字色。

対応箇所を調べた上で、WordPress編集画面より、
「外観」⇒「テーマ編集」⇒「スタイルシート(style.css)」
CSSやHTMLを編集する場合は完全に自己責任で!!

ライター名の表示

当サイトは複数のHIMAZINEによって作成されています。
そのため、ライター名を表示したい…ということで、
それ用の関数を探しました。

▼実際に追加したPHPコード
【 written by <?php the_author(); ?> 】

writername

STINGER3であれば・・・
今のところは次の3つのPHPファイルの該当箇所に付けくわえています。

  • home.php
  • index.php
  • archive.php

ということで、簡単なSTINGER3のカスタマイズ方法でした。
もうしばらく使ってみて、ちょくちょく改良していく予定です!

SPONSORED LINK
  • このエントリーをはてなブックマークに追加
  • Pocket

関連記事

mynumber

【ブログ副業:初めて確定申告する人へ】マイナンバーでバレる前に「白色」で自己申告する方法

マイナンバーが配布され、副業しているけど今まで確定申告してこなかった人は『ソワソワ!?』して

記事を読む

img01

【クリックでURLが変わる「転送リンクページ」作成方法】転送によるメリットを解説してみる

たまにさぼるけど… 毎週水曜日にサイト運営に関する雑談をニコ生でやっています。その際に

記事を読む

FC2(2)

【FC2の終焉】FC2ブログは早期移転が吉!レンタルサーバー等のビジネスが縮小傾向みたいよ

違法な動画アップロードなど…無法地帯と化しているFC2サービス。企業実態が不鮮明な上、管理が

記事を読む

036-01

WEBデザイナーになるには-ホームページ制作の依頼を突然受けた時の話

たまたま私がHP制作(自分用)をしている事を知っている人から 突如ホームページを作ってくれ

記事を読む

himazines-logo

【1日1万PV目標のブログSEO対策7選!初期設定編】サイト構築と必須WordPress設定!

ブログ運営を2014年2月に開始して1年が経過。 先日ブログのアクセス数を公開しました。

記事を読む

paruru

【ドメインの付け方・選び方】サーバーとの連携方法とDNS(ドメインネームサーバー)設定について

一日前にレンタルサーバーの選び方について記事を書きました。 記事:【WordPress用レ

記事を読む

pc

【WordPressの設置方法】エックスサーバーとお名前.comによるWordPressブログ作成例

今回は用意したサーバーとドメインの関連付けを行い、 実際にWordPressを開始するとこ

記事を読む

kakuteishinkoku (3)

【ブロガー・アフィリエイターの確定申告:経費と按分】レビュー消耗品費に対する経費例と按分理由

先日、無事?に青色申告を済ませてきました。 全く仕分けして無かったのでめちゃくちゃ時間かか

記事を読む

500error (1)

【500エラー原因特定:サイトが攻撃を受けた場合のIP規制と対処法】あまり私を怒らせないほうがいい

お酒を飲みながら寝る準備をしていた午前5時すぎ。 何やらサイトが異常に重い。 こんな

記事を読む

pama

【SEOを意識したオススメのパーマリンク設定】WordPressのURL変更方法と注意点について

これからWordPressにてサイトを作る人が知っておきたいこと。 その一つに「パーマリン

記事を読む

GAME RANKING
HOBBY

コメントを残す

PAGE TOP ↑