レンタルサーバー Staff Blog

レンタルサーバー(共用サーバー・仮想専用サーバー)と独自ドメイン、ホームページ制作、Office365とWEB会議システムなどのサービスを運営する中で得た知識やサービス比較を中心に、WordPressやPlesk、マーケティングに関する情報を発信しています。

*

スピーバーのサーバーにSTINGER5をインストールしてからやった7つのカスタマイズ

  最終更新日:2014/11/17

こんにちは。

WEBサービスを担当している藤田です。

 

当Staff Blog(すたっふ ぶろぐ)をスタートするにあたって、

スピーバーの仮想専用サーバー(VPS)にWordPressをインストールして、無料テーマの『STINGER5』をインストールして運営しています。

無料テーマ『STINGER(すてぃんがー)』は国内でたくさんのひとが利用しているので、どうしても似通ったデザインになってしまいます。

そこで、とりあえず7つのカスタマイズを行ったので、その内容について紹介いたします。

これからブログを始める方、参考にしてみてください。

 

ファビコンの変更

まずは、ファビコンの変更です。

ファビコンとは、サイトの小さいアイコン画像です。

favicon-img

ブラウザでサイトを開いているときにタブの頭に表示されるアイコン画像であったり

サイトをブックマークした時に頭に表示されるアイコン画像です。

favorite icon(お気に入りのアイコン)の略称というか、短縮されて使用されるようになった名称です。

 

それでは無料WordPressテーマ『STINGER5』に限った話ではありませんが、ファビコンの変更方法を説明します

まずFTPでサーバーに接続します。

接続後、以下のディレクトリを開きます。

/var/www/vhosts/(ドメイン名)/wp-content/themes/stinger5/images/

このディレクトリにファビコンのファイルをアップロードします。

 

次に、WordPressのダッシュボード(管理画面)にログインします。

外観 > テーマ編集

ヘッダー(header.php)を選択します。

 

下記のような記述を探します。

<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/logo.ico” />

 

記述の中の”logo.ico”の部分をアップロードしたファビコンのファイル名に変更してファイルを更新すれば完了です。

 

ファビコンの作り方に関しては、画像をファビコンに変換してくれるサイトがあるので

ググってみてください。

 

 

トップ画像の変更

トップ画像の変更は簡単です。

WordPressのダッシュボード(管理画面)で変更できます。

外観 > ヘッダー

ヘッダー画像の変更

『ファイルを選択』から、自分のPCから画像をアップロードします。

STINGER5のトップ画像は980×250ピクセルが推奨なので、横幅が980ピクセル以上の画像を用意するようにしてください。

また、トップ画像を設定する時に、アップロードした画像から980×250ピクセルを切り抜けるようになっているので、980×250ピクセルピッタリの画像を用意する必要はありません。

 

とりあえず綺麗な風景画像が欲しい人は、以下のサイトで無料で綺麗な風景画像がアップロードされているのでチェックしてみてください。

http://jaymantri.com/

自分もお世話になっています。

 

 

見出しのデザインの変更

見出しデザインの変更は、HTMLとCSSの知識が必要だったりしますが、『コピペでOK!』を合言葉に、サンプルを掲載したいと思います。

※うまくいかなかったら教えてください。

 

こちらもWordPressのダッシュボード(管理画面)で変更できます。

外観 > テーマ編集

スタイルシート(style.css)を選択します。

 

とりあえず、当ブログの見出しデザインです。

これをコピペで最終行の “}” の前に貼り付けてみてください。

サイドバーの見出しに緑色の丸のデザインが追加されます。

side-bar-title

 

 

最近よく目にする見出しは、横に縦棒があるタイプです。

コピペでOKな見出しタイトルの記事を更新するので、そちらを参考にしてみてください。

 

 

カテゴリーに装飾を追加

記事に設定したカテゴリーの表示文字が味気なかったので、装飾を加えました。

こちらもWordPressのダッシュボード(管理画面)で変更できます。

外観 > テーマ編集

スタイルシート(style.css)を選択します。

 

これも『コピペでOK!』ということで

以下のソースコードをコピペで最終行の “}” の前に貼り付けてみてください。

category

 

 

 

 

Google+ページのバッジを追加

次に行ったブログのカスタマイズは、デザイン変更ではなく、Google+バッジをサイドバーに追加をしました。

Google+ページを作成し、下記URLにアクセスしてバッジのソースコードを取得してください。

https://developers.google.com/+/web/badge/?hl=ja

※Google+ページの作成方法は別の機会に紹介します。

 

WordPress ダッシュボード(管理画面) > 外観 > ウィジェット

ウィジェットで、テキストをサイドバーウィジェットに追加して、取得したソースコードを貼り付けます。

Google+バッジ

すると、こんな感じにGoogle+ページにリンクするバッジの設置が完了します。

 

バッジなんか設置したってかっこよくないじゃん!

って意見があるかもしれませんが、サイトにGoogle+ページのバッジを設置するのにはわけがあります。

サイトへの入り口を増やすのと、Googleが提供しているサービスなので、SEOの効果が期待できるためです。

 

 

サイドバーの”NEW POST”の表記を”新着情報”に変更

サイドバーの一番上に表示される新着投稿一覧ですが、

デフォルトだと “NEW POST” と表示されて、なんだか日本語に変更したい気持ちが高まってくると思います。

 

これはとっても簡単です。

 

WordPress ダッシュボード(管理画面) > 外観 > テーマ編集

サイドバー(sidebar.php)を選択します。

 

<h4 class=”menu_underh2″> NEW POST</h4>

の表記を探して、”NEW POST”の部分を変更してファイルを更新するだけです。

<h4 class=”menu_underh2″> 新着記事</h4>

 

 

プラグインの導入

今回、導入したプラグインはSTINGER5の公式ページで推奨されているものも含めて8点です。

 

Broken Link Checker

外部サイトへのリンク切れをチェックしてくれるプラグインです。
サイトにリンク切れがあるとユーザビリティが低下し、Googleからの評価も下がってしまいます。

 

Default Thumbnail Plus

カテゴリーごとにデフォルトのアイキャッチ画像が設定できます。
STINGERはアイキャッチ画像が表示されるので、記事を投稿するたびに画像を設定する必要があります。
それが面倒な方はこのプラグインを使用することをオススメします。

 

EWWW Image Optimizer

アップロードした画像を自動で圧縮してくれます。
サイトの表示速度が遅いとユーザビリティが低下し、Googleからの評価も下がってしまいます。

 

Google XML Sitemaps

検索エンジン向けのサイトマップを作成してくれます。
ウェブマスターツールにサイトマップを登録する時に重宝します。
サイトに追加したページを検索エンジンにインデックスしてもらいやすくなります。

 

PubSubHubbub

ほぼリアルタイムで記事の更新をGoogle検索エンジンに通知します。

Googleへのインデックス速度が上がり、検索結果に反映されやすくなります。

 

Table of Contents Plus

ソースコードからHタグ(h1, h2, h3, h4, h5, h6)を拾って、記事に自動的に目次を付けてくれるプラグインです。

長い記事を書く場合、とても見やすくなります。

 

TinyMCE Advanced

WordPressのビジュアルエディタをカスタマイズできるプラグインです。
文字の背景色や、見出しの設定など、記事を作る時にちょっとだけ便利になります。

 

WordPress Popular Posts

ブログの人気記事を表示してくれるプラグインです。
人気を集計するほどのコンテンツがないので、現在は記事数がすくないので有効にしていません。

 

 

まとめ

STINGERに限らず、WordPressの無料のテーマは、多くの人が使用していて、デザインがかぶりがちです。

ちょっとしたカスタマイズを加えることでオリジナリティが出てきます。

特にトップ画像と見出しのデザインは、サイトのイメージを大きく左右するので

是非気に入ったデザインや画像を見つけて設定してみてください。

 - Speever, STINGER, WEBデザイン, WordPress

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事