プチ・シニアの明るいひきこもり生活

ソーシャルレスで無職のオヤジが Stinger5 のカスタマイズに挑戦

      2015/08/30

SPONSORED LINK

 急に寒くなってきたので、ブログの衣替え。Stinger5 というテーマに変えてみた。

 これまで使っていた Iconic One というのテーマはデザイン的に好みで、しかもレスポンシブなので気に入っていたのだけれど、「構造化エラー」がガンガン出たり(どんな影響があるのかはよくわからない)、それより、「パンくずリスト」とか基本的なことまでプラグインで対処しなくてはならなくて、それでなくてもサーバーが遅い(気がする)ので、そういう機能は最初からテーマに含まれていればいいなぁ、と思っていた。

 そんな折、Stinger5 というテーマがリリースされた。レスポンシブルだし、ちょっとローカル環境で試してみたら、なんとなく好みにカスタマイズできそうだったので、思い切って変えてみることにした。まぁ、カスタマイズと言っても、CSS も php もサッパリなのでほとんど先人のものをパクっているわけなんだけど・・・。

SPONSORED LINK

 以前から、モノクロームな外観にしたかったので、結構いい感じになった(と思っている)。とりあえず、これでしばらく行こうと思う。ただ、全部検証し切れていないので(iPhone持ってないし)、まだおかしなところがあるかもしれない。

 ちなみに、Stinger って<b>「SEO的に優れている」と言われているんだけど、その辺のことは私にはよくわからない。もしかして、グーグル検索から見に来てくれる人が増えるかもしれない、というくらいの理解でいる。なにせ、「ソーシャルレス」な人間なので、そこからしか来訪者を期待できないのだ。

Link: Stinger5

 一応、どんなカスタマイズを行ったかを、備忘録的にメモしておきます。

画像の白黒化、マウスオーバーでカラー

 モノクロームが目標なので、アイキャッチ画像も白黒にしてみた。一応、マウス・オーバーすると、色がつく。
このページを参考にしました(というか、そのままパクりました)。このページを見つけなかったら、たぶんテーマを変えていなかったと思う。感謝。

Link:「JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる」
 
Stinger では、style.css の中の、topnews とkanrenのイメージのところを以下のように変えました。


img{
-webkit-filter: grayscale(100%);
}
img:hover{
-webkit-filter: grayscale(0%);
}


引用のデザイン変更

 いぜん、使っていた Contango というテーマのデザインに換えました。気に入っていたんだけど、レシポンシブでないので、短期で替えてしまった。でも、この引用デザインが気に入っているので、その後も使い続けている。


.post blockquote {
background: #FAFAFA;
border-left: 4px solid #D6D6D6;
border-right: 4px solid #D6D6D6;
border-radius:14px;
margin-bottom: 24px;
padding: 24px;
font-style: italic;
}


 どういうデザインかは、下の方で実際に使っているので見て下さい。

サイドバーの New Post をカード化

 Link: STINGER5のサイドバーとスタイルシートをカスタマイズ

 ほぼこの通りに換えましたが、数値的にはマージンなどいくつかの数値は調整しました。

サイドバーにプロフィールを追加

Link:【STINGER5カスタマイズ】サイドバーにプロフィール設置

 例によって、ほぼそのまま利用させてもらいました。

その他の細かい変更。

リンクの色変更、下線消去

 下線を消して、リンクの色も黒だと、リンクと思われないかもしれないので、微妙に色がついていて、スクロールする時にちょっと青っぽく見える、っていう風にした。
 それでも、やっぱり分かりづらいので、今どうするか考え中。


/* リンクの色 */
a {
color: #191970;
text-decoration: none;
}


ファビコン変更

Link:「header.php を子テーマに作ってファビコンをオリジナル画像に設定する」

 一応変えたんだけど、なんだか分からないので、そのうち新たに作るつもり。

ロゴの変更

 これは、Stinger 標準のカスタマイズでできる。

タイトルのフォントを細く

 ほとんどの場所で、フォントを細くした。どうも、タイトルの太字が苦手だったので。

font-weight: ligher;

としただけです。

失敗談

 実は、いろいろ失敗して、わけがわからなくなって。何度もゼロからやり直した。

小テーマ

 最初、小テーマを使っていたんだけど、予期せぬところまで変ってしまって悩んだ。結局、スマホ用、タブレット用、PC用と領域が分かれていて、その全てに影響してしまうことがわかった。

Link: Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!

 カスタマイズは子テーマでするよ!という方は、はじめに子テーマのcssにも「@media…」のコードを書いて領域分けしておくといいかもしれません。
 領域分けせずにcssを書くとすべて領域①の扱いになってどのデバイスにも反映されてしまいます。
想定外の結果を防ぐためにも領域分けはしておきましょう。

 私の知識では、「この領域分けでコードを書く」のは無理と思って、直接編集に換えました。

プロフィールの画像消える

 PCでは表示されているのに、タブレットでは消えているという問題が発生。全然理由が思いつかなかったんだけど、そういえばこのプロフィール画像は最初から「白黒」化していたので、そのせいかなと気付き、カラーに戻してアップしたら表示された。たぶんマウスオーバーの処理のためと思うのだけど、正確には未だにわからない。でも、結果オーケー。

以上です。

 最後に、Stinger5 を作った Enji 様を始め、上でリンクを紹介させていただいた方々に感謝申し上げます。彼らのサイトが無ければ、この50過ぎのオヤジには到底カスタマイズなどできなかったでしょう。


追伸:

 結局、グレースケールはなしにしました。
 さらに、New Post などのカード化を無効にしました。


SPONSORED LINK

 - プチ・シニアの明るいひきこもり生活日記 , ,

Message

  関連記事