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

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

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

関連記事

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

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

記事を読む

【同一レンタルサーバー間でのWordPress引越し】DNSとプロパゲーションによる「サイト非表示」問題

実は先日、初めてWordPressの引っ越しを経験しました。 それも「エックスサーバー」か

記事を読む

【SEOやキーワード調査に超便利「特殊Google検索コマンド8選」】競合調査の上級テクニック!

スマホがかなり普及し、インターネット検索が「あって当たり前」の時代になっています。 私

記事を読む

【飲食店集客戦略!ブロガーが教えるネット集客術7選】個人でもできるホームページ運営SEOテク

こんにちは。 最近… 雨続きでひきこもり気味の 香川県在住のブロガーです。

記事を読む

【WordPress運営者が最初に導入すべきプラグイン8個+α】後々ありがたみが出るプラグインの導入・設定方法

WordPressにてブログを作成する一番のメリット! これこそ「プラグイン」によるサイト

記事を読む

【1日1万PV目標のブログSEO対策12選!文章の書き方編】キーワード選定と記事構成のテクニック

先日、ブログのアクセス数などを公開したところ なかなか嬉しい反応を頂きました。ありがとうご

記事を読む

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

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

記事を読む

【ブログ・アクセスアップ術】SEO効果の高いタグ4選と活用法-WEB文章の正しい書き方

久しぶりにブログ運営に関する記事を書くよ。 今回は内部SEOに関するお話。 正しいタ

記事を読む

【レビュー好きブロガー推奨!オススメのブログ用カメラ選び】明るいレンズのコンデジを推す理由

カメラは色々あるけれど 何を基準に選べばよいか… 高いのを買うのは怖い 安すぎ

記事を読む

【激ヤバ!中国ネット事情】検索エンジンbaiduのSEO考察!中国政府の言論規制が想像以上

※できたら普通の人にも読んでもらいたい記事です 「中国人向けにサイトを作りたい」という

記事を読む

コメントを残す

PAGE TOP ↑