【Stinger6】初導入で戸惑ったけど情報多く乗り越えられた

2015.12.172016.07.16

この記事は約4分で読めます。

Stingerを初導入したのは良かったが、最初は戸惑った。

SEOに強いという評判を信じ、勧められるままに私が導入したのは最新版のStinger6。リリース直後ということもあってかStinger6についての情報はあまりなく、お手上げ状態。しかし、後には引けないので噛り付いてみた。

Stinger3、Stinger5の情報はたくさんある。それらに準じて扱えば何とかなるのではないか？そう考えてトライしたところ、案外すんなりといった。

この記事の目次

Stinger6のカスタマイズは意外に簡単
画像への文字の回り込みはCSSで設定
関連記事をYARPPプラグインで連携

Stinger6のカスタマイズは意外に簡単

Stinger6の導入・カスタマイズは意外に楽だった！というのが私の感想だ。Stingerは日本生まれのテーマ。コードには随所に日本語でコメントがある。なので、横文字に弱い初心者でもカスタマイズが必要な箇所を探しやすい！これは助かる！！！

私が行った主なカスタマイズは以下の4点。

画像に対する文字の表示位置（回り込み）の調整
ヘッダー画像の縦サイズを400➡120
ヘッダー画像へのリンク挿入
関連記事の位置をコメントの前に変更
NEW POSTの位置変更とトップページへの非表示

カスタマイズは他にもいくつかあるが、今回最初に一番困ったのは画像と文字の関係。なので、ここでは文字の回り込みについて。

画像への文字の回り込みはCSSで設定

以前採用していたテーマでは、カスタマイズの必要なく画像に対する文字の回り込みは、左右にきちんと処理されていたのに対し、Stinger6を当てたとたん崩れてしまい、非常に困った。

Stinger6では、おそらく何らかの意図があって、もしかしたらSEOの関係で画像への文字の回り込みはしないようにしてあるのかもしれない。そうは思ってもこれまでに作成したページは400超もあるので、一つ一つ修正するわけにもいかない。

一括して処理できる方法はないものか？ネットで探してみると、「文字の回り込みはCSSで対応できる」とのこと。そしてコードもあったので、そのコードをStinger6Childのスタイルシートに記述したら、見事に体裁は整った。

/* ------ 画像に対する文字の表示位置*/
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 2px 7px 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 2px 7px 2px 7px;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}

コードをこんな風に格好良く載せるのはどうしたらできるのだろうか？と思って調べてみたら、WordPressではこれを可能にするプラグインがあった。何種類かヒットしたが私が採用したのはCrayon Syntax Highlighter。Crayon Syntax Highlighterは使い方も割と簡単だった。

プラグインのなせる業とは言え、自分のページにコードを格好良く掲載できたとなると、ランクが上がったような気分になる。嬉しいなぁ。

Crayon Syntax Highlighterの導入と使い方はまた次の機会に！