ブログテーマ変えてみました！

この記事を読むのに必要な時間は約 10 分 26 秒です。

どうも、花組公演終わったら一気に時間が出来た感のある怜香@Ray_mnzkです。

ただ、空いた時間で何かやり出したかというとそうでもなくて、パソコンに向かって何かやろうとした矢先に寝落ちるという例の事象を繰り返している（しかも最近寝落ちた自覚すらない）ので全然ダメです。うーん睡眠足りてないのはわかってるんだけど布団入ると寝付けなくなるんだもん……orz

とりあえず明日は久々に（花組公演中は実質無休なのでw）何もない一日になりそうなので、気が済むまで寝てみようかな……

さてさて、私この度久々にブログテーマ変えてみました。

今日はそのお話をしてみようと思います。

偶然出会ったテーマ「STINGER」に一目惚れ！

今回ブログテーマ変更のきっかけとなったのは、「STINGER」というテーマに出会ったことでした。

どういう流れでこのテーマに出会ったのかははっきりとは覚えてなくて……多分ブログのことで何か検索してた時に引っかかってきたように思います。

STINGER3

最初に見つけたのは、「STINGER3」でした。

WordPressテーマのSTINGER3公式サイト

シンプルでとても見やすく、それでいて集客の良い構成になっているとのこと。

何より最近ブログに広告をつけるようになった私にとって、ウィジェットに広告コードを設置するだけで最適な位置に自動配置してくれるのは本当に有難い機能です。どこにどのサイズを置くのが適切なのか、調べながら見様見真似でやってましたから……。

また、このテーマは数多くのカスタマイズ用子テーマが公表されていておりまして。私はその中の「Yukiguni」という白基調のテーマに惹きつけられたのです。

銀箔の世界へようこそ！STINGER3カスタマイズ用子テーマ「Yukiguni」をリリースしました

「これはいい！さらに少しいじったら私のブログにぴったりな感じになるかも！」と、早速導入しようとしたところで、STINGERには更に最新作があることを知りまして。

STINGER5

STINGER5 – WordPressのはじめ方や使い方

この最新作「STINGER5」はレスポンシブデザインとのことで、スマホ用のデザイン調整方法とか全然分かってない私にはほぼ必須の機能。

カスタマイズ用子テーマは数少ないようでしたが、そこは前のテーマでもほぼ自力でカスタマイズしたし何とかなるだろうということで、この「STINGER5」を使うことに致しました。

作者の方有難うございます！

今までのデザインを踏襲しつつ、白基調に。

今まではかなりデザイン重視で、メインカラーは水色でした。記事本文の背景色に透過を入れてみたり等、結構凝ったことをしていました。

……が、どうも若干読みづらくないか、と最近思うようになりまして。

やっぱり白基調が一番見やすいかなと。ただ、単純に真っ白に黒字では味気ないので、ほんのりと青を入れてみました。

背景画像

背景画像は出来るだけ文字を邪魔しないデザインのものを。白基調だと意外とくっきりした模様が入ってる素材が多くて、ちょうどいいのを探すのには少々苦労しました。が、いいのが見つかって満足！

一方でサイトタイトルロゴ画像とヘッダー画像は以前と同じです。ここを同じにしておくと雰囲気が以前のものと似通いますね。

ちなみに使用した画像は、前回のテーマでも活用させて頂いてました【フリー素材幻想的】幻想素材館Dream Fantasyさんの壁紙素材です。ありがとうございます！

文字・リンク色

文字関係は全て青系で統一しました（多分統一されてると思うw）。やっぱりこの方が前のデザインからもかけ離れなくていい。

色味はPalette / Blue Calm :: COLOURloversのカラーパレットを主軸に、ちょこちょここれに近い別の色味もプラスしています。

カラーパレットは初めて使ってみたのですが、確かに統一感ある色遣いになりました。これはいい！今までは背景画像から色を抽出して使っていたんですけど、白基調だとそもそも背景画像の色数も少ないし、カラーパレットの方がお手軽で良いかもです。

見出し

今までのテーマでは記事中の見出しはh3で統一していたのですが、今回のテーマは中見出しとしてh2が使えるので、これからはh2とh3併用でやっていこうと思っています。

そうなると、h2の見出しデザインを考える必要が出てきます。デフォルトでは吹き出し風のデザインなのですが、ちょっとイメージには合わないので変えることに。

最初は見出しの下線をグラデーションにしようとしていたのですが、色々ググりながらやっても結局思い通りの形にならなかったのでやめました。

結局以前のテーマでの記事タイトル表示デザインと似たような感じになりました。慣れないうちから凝ったことしようとしてもうまくいきませんねw

SNSボタンを一新しました！

今回のテーマ変更に併せて、ひとつ大きくカスタマイズした部分があります。

それは、SNSボタン。

今までは忍者おまとめボタンを使っていたのですが、実はもっとお洒落なものに出来ないかなぁと思っていたのです。

そこで色々調べてみると、このような記事が。

stinger5 SNSボタンが不揃いなのでカスタマイズしてサイドバーにも設置した | 日本の最新ニュースや話題を届ける情報ステーション

このカスタマイズのどこに心惹かれたかって、SNSボタンのデザインがオリジナリティある上にカラフルで目を引くところです！

SNSボタンといえば各サービスが公式で提供しているアイコンがあって、それを使うのが普通。というかそれしかないと思っていました。だからこのデザインは本当に目から鱗。

とても気に入ったので、拝借することに致しました。ありがとうございます！

そういえば子テーマ作っていたのでした。

今回は上の記事で取り扱われているカスタマイズのうち、記事下のカスタマイズのみ行いました。

コードもSNSアカウント部分だけ修正すればあとはそのままで使えるとのことでしたので、そこだけ直して設置しようとして……

今回から私、子テーマ使うことにしてたのを思い出したのでした。

子テーマを使うと、テーマのアップデートがあった場合にもカスタマイズ内容が失われずに済むという利点があります（直接テーマ編集した場合はテーマのアップデートがあるとカスタマイズ内容が失われる）。

以前のテーマは直接編集していたせいでテーマのアップデートをするわけにいかなくなっていて。

今度はそんなことにならないように！と子テーマ作ることにしたのです。

ちなみに私は以下の記事を参考にして子テーマ作りました。

STINGER5 で CSS をカスタマイズ可能にする子テーマの作成 | キャリコ

子テーマの扱いに慣れなくて苦労するなど

基本的にはカスタマイズしたいテーマファイルを子テーマのフォルダにコピーしてきて、そちらを編集していくという形なのですが……ブログカスタマイズにおいて最も編集度合いが高い「style.css」は、親テーマの同名ファイルを読み込んで、変えたい部分だけを追記していく形でやるのだそうです。

そのおかげで何に困ったかというと……

「○○という記述の前にコードを設置する」という場合にどこにコード追記したらいいのかわからない！

なにせ子テーマのCSSファイルには変更部分の追記しかしていないのです。上記における「○○という記述」は、あくまでコード設置のための目印でしかない。直接編集する部分にはあたらないから、子テーマにその「○○という記述」は無いのです。

目印がないのにどうやって的確な位置に設置できるというんだ！

しばらく悩んだのですが、結局適当な位置に書き込むことにしました。目印部分を作ろうとしたらそれこそカスタマイズ関係ない部分までがっつりコピペしなきゃいけなくなるし……。

肝心なとこで適当に済ませてる感が否めませんが、とりあえずちゃんと動いてはいるようなので、このままで使ってみようと思います。

それにしても、SNSボタンをこのデザインにしてみてから、白基調の中に華やかさが生まれたような気がします。

ちょっと苦労したけど、いい感じに仕上がって満足です！

先人たちの知恵を拝借してのカスタマイズでした

そんなわけで、今回はかなりがっつりカスタマイズしたわけですが……実を言うとデザインこそ自力でいじってみたけれど、それ以外のカスタマイズはほぼ全て様々な記事に載っている情報ややり方を拝借してのものでした。

ここまでに挙げたもの以外にも、こっそりこんなカスタマイズをしていたりね……

STINGER5 の新着記事をトップページだけ非表示にする方法 | キャリコ

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

カスタマイズは一度手をつけるとあれもこれもといじりたくなって、気づけばとんでもなく時間使ってたりするんですけどもw今回もどうにか満足いく仕上がりになりました！

とても有難い記事を書いて下さっているブロガーの皆様に感謝しつつ……私ももっと自力でカスタマイズできるようになりたいなと思います。勉強しなきゃ！

今日のあとがき

実はこの「Stinger5」を見つけたのは花組公演終わる数日前で、まあ色々と忙しくて、公演終わったらカスタマイズやるぞ！と意気込んでたんですよね。そして公演終わるや否や作業に取り掛かってましたw

なかなか自力で全てのカスタマイズは出来ないんですけども、自分のやりたい作業について調べてやっていくのはなかなかに楽しかったですし、勉強にもなっていいですね。

そんなこんなでブログも新デザインとなり、心機一転ブログ更新頑張らなきゃなと思っている次第です。

最近数日おきの更新になってますけど、少しでも皆さんに興味を持って頂けるような記事を書けるように頑張りたいです……！