ブログを一新。STINGER5の小テーマSIMPLESTERを導入しました。[ちょこっとカスタマイズ]

スクリーン
スクリーン

ブログを一新したよ!

こんにちは、ななです。

本ブログのテーマはエンジさんが作成されたSTINGER5を使用しているのですが、先日、その子テーマであるsimplesterを導入しました。

いやあ、ほんといい感じ。このデザイン、すごい気に入ってます。

simplesterの名の通り、見た目はすごくシンプル。かつオシャレ。

気がつくと、ニヤニヤしながら自分のブログをただ眺めています。

ということで、今回の記事では、simplesterを動員してからカスタマイズした箇所や、今後いじりたいなーと思っている所などをつらつらと書いていきます。

[adsense]

STINGER5とは?

STINGER5とはエンジさんという方が作成されたwordpressのテーマです。見た目的に言えば、もっとオシャレなテーマは他にもあります。←失礼

ではなぜ僕がSTINGER5を使っているのかというと、このテーマがSEOにめちゃくちゃ強いからです。

SEOの強さに関して実際に他のテーマと比較したことはありませんが、僕の書いた記事が軒並み検索上位を独占しているところをみるかぎり(言い過ぎ)、STINGER5がSEOに強いというのは間違いなさそうです。

しかし一方で、シンプルなデザインであるが故にカスタマイズ必須ともいえるテーマであり、HTML?とかよく分かっていない僕には少々扱いづらいというのが唯一の難点でした。

 

simplesterとは?

simplesterとは、こふすさんという方が作成されたstinger5の小テーマです。もともとシンプルだったstinger5を、シンプルさを残しつついい具合にオシャレにしてくれる、まるで僕のために作られたかのような子テーマです。

この子テーマのおかげで、わざわざ慣れないカスタマイズをしなくても、十二分におしゃれなブログに変身させることができました。

SEOに強いstinger5、そしてそれをオシャレにするsimplester。鬼に金棒とはこのことを言うのでしょう。

 

参考にしたカスタマイズ記事

simplesterは、特にいじらなくても既におしゃれです。ですが、ちょっとした色合いをかえたり、記事中に手軽にアドセンスを入れ込めるようにするために、多少のカスタマイズをしました。

ロゴの設定、全体の色の変更(カテゴリの色の変更も含む)

SIMPLESTERのカスタマイズ|SIMPLESTER

[STINGER5]ブログタイトルをロゴ画像に置き換えるテクニック|LOVE 2 LABO.COM

スマホ表示の左右のpadding、ぱんくずリストのmargin

STINGER5 の子テーマ「 SIMPLESTER 」を導入する時の注意点|キャリコ

アドセンスを記事中へ、サイドバーに別の広告を

STINGER5でアドセンスを記事内へ、サイドバーに別の広告をカテゴリ別に入れてみた|shufulife

サイドバーにプロフィール設置

【STINGER5カスタマイズ】サイドバーにプロフィール設置|ガジェニュー

 

上記カスタマイズ記事を参考に、ほぼ問題なくカスタマイズを行っていきました。

カスタマイズで困ったところ

途中一つだけ問題が生じ、それを解決するのに一晩かかりました。

その問題とは、ブログ上部のロゴがくっっっそ小さく表示されるというもの。

これには困り果てました。いつも頼りにしているgoogleさんに聞いてみても、解決案は見当たらなくて。

で、HTML(CSS?)をいじっては更新、いじっては更新を20回ほど繰り返した末、なんとかそれを解決することができました。

よくわからないですけど、ヘッダーでロゴの部分を.sitenameで指定してるのに、たしかCSSの方は.siteになっていて、CSSの記述が反映されていないことが原因のようでした。なので、そこの記述を.sitenameで統一したところ、ロゴが望んだ通り大きく表示されるようになりました。(かなりうる覚えです)

その瞬間の嬉しさたるや。「おれ、天才かも」と思いました。

PHOTOSHOPによるロゴ作成

さて、今回のデザインリニューアルで、一番気合いをいれたのはロゴの作成です。

もともとのロゴはBlack_and_white_on_transparent_background_384x75

これでした。覚えてる人います?たぶんいないでしょう。

ちなみに、このロゴは無料でロゴが作成できるサイトにて作成しました。

無料でロゴが作成できるサイト一覧|NAVERまとめ

このまとめの中の、どのサイトを使ったかは忘れました。

で、前回同様また無料でロゴをジェネレートしようと思ったのですが、logo made simpleというロゴ作成サイトでいい感じなロゴを作り、いざダウンロードしようとしたら、大きいサイズでのダウンロードには10ドル支払え、といわれました。

は?こんなんに10ドル?(失礼)

衝撃的でした。

で、こんなロゴなら自分でも作れるわと思い、photoshopを使ってロゴを作成しました。

そして完成したのが、こちら。

 

 

11NANA's ESCAPISM-logo

 

「おれ、天才かも」と思いました。(本日二回目)

今回初めてphotoshopを使ったのですが、案外いけるもんですね。

使う前までは「photoshop使いこなしてる人かっけえ」と思っていましたが、初心者の僕でも満足のいくロゴを作成することができました。

photoshopにハマりそうです。

今後カスタマイズしたい所

概ね満足している当ブログのデザインですが、まだいじりたいところが数カ所残っています。

メニューバーのカテゴリーにカーソルを合わせた時に、子カテゴリーが表示されるようにしたい

サイドバーのカテゴリーに記事数を表示し、親、子カテゴリーに階層をつけたい  SEの友達にやってもらいました。彼は天才。

feedlyなどの各種sns(?)ボタンを、記事下、サイドバーにオシャレに表示したい

メニューバーのカテゴリーをイラスト(文字込み)にしたい

人気記事一覧に、上から順に番号をつけ、もっとスマートに表示されるようにしたい

コメント欄を消したい

などなど。

だれか、僕のためにカスタマイズ記事書いてくれないかな。。

(とはいえ、このうちのいくつかは現時点でもできてしまう気もする。それくらい、stinger5に関するカスタマイズ記事は充実している。)

僕が参考にしている、デザイン・記事がステキなブログ

SiteMiru

でじねこ.com

shufulife

ワライ荘

ROOM9

和洋風KAI

OZPAの表4

こちらのブロガー様たちのデザインやシェアボタンの配置や記事内容に、大いに憧れを抱いています。

夢です。

 

まとめ

スクリーン

後半は話が大きく脱線しましたが、ようは「みてみて!ブログのデザインを一新したよ!」と言いたかったのです。

今後もぼちぼち記事を書いていきますので、どうぞよろしくお願いします。

ロリポプラン 詳細はこちら

↑wordpressでブログをはじめたい方はこちらから。本ブログのレンタルサーバーはロリポップを利用しています。

 

WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』

↑wordpressのレンタルサーバーとして最強の名を誇る、エックスサーバー。もうちょいアクセス数が増えてきたら、乗り換えようかと考えています。