Luminous Tale.

過去よりも未来よりも「現在」を幸せに生きるために。今ここにある日常を輝かせるための“魔法”をお届け。旧「月光の狭間」。

*

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

      2015/05/08

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

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

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

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

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

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

Sponsored Link

偶然出会ったテーマ「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

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

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

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

 - ブログ

Sponsored Link
Sponsored Link

  関連記事

私がモブログをする理由。気負わずに、書きたい時に少しずつ書けばいい。

私がモブログを始めてから2ヶ月弱経った。今やパソコンでの執筆には戻れないと思うほど、モブログでの投稿は私にとって快適なものである。今回は「モブログ」について、思うところなどを語ってみることにする。

普段のネットサーフィンからブログ記事を生み出せる。ブロガー御用達ブラウザ「するぷろーら」アップデートで検索・共有機能が超強化!

6月20日、ブロガー御用達ブラウザ「するぷろーら」がバージョン5.0にメジャーアップデートした。検索・共有機能が大幅に強化され、さらに「ネット上からネタを拾ってブログ記事にする」力が増したと感じたので、早速ご紹介する。

モブロガー必携エディタアプリ「SLPRO X」アップデートで画像まわりと投稿設定がさらに使いやすくなったよ!

7月26日、言わずと知れたモブロガー必携エディタアプリ「SLPRO X」がバージョン1.1.2にアップデートした。今回もまたひとつ使いやすさが向上し、ますます理想的なブログエディタになっている。今回はそのアップデート内容についてご紹介する。

新ブログ始動しました!

この記事を読むのに必要な時間は約 0 分 42 秒です。 昨日ようやく新ブログへの移転を済ませました怜香@Ray_mnzkです。 ようやくデザインが確定したところから、一気に個別ページまで作って独自ド …

WordPressテーマ「Stinger5」で「続きを読む」の位置にアドセンス広告を入れる方法

Wordpressテーマ「Stinger5」使用時に「続きを読む」の位置にアドセンスを配置しようとすると、デフォルト設定のままでは1ページにアドセンスが4つ表示されることになり規約違反になってしまう。これを回避して、問題なく「続きを読む」の位置にアドセンスを配置しようというお話。

【メルマガ読者の皆さんへ】メルマガ「Luminous Piece. -思考のカケラ-」がGmailで迷惑メール扱いになった場合の対処法

2017.12.12配信分より、こちらで配信しているメルマガ「Luminous Piece. -思考のカケラ-」がGmailにて迷惑メール扱いになってしまう事象が発生しています。そこで迷惑メールにならないようにする対処法をご紹介しますので、読者の皆さんにはお手数ですが解除処理をお願い申し上げます。

記事執筆時にはプレビューが重要になる理由。読み手の視点から自分の文章を読んでみるべし!

ブログ記事を執筆する際は、最後にプレビューで自分のブログ上での見え方を確認すべし、とよく言われる。これは何故なのだろうか?先日記事を書いていた際に、この答えになるかもしれない出来事が起こったので、それを踏まえつつ「記事執筆においてプレビューが重要である理由」を考えてみることにする。

Workflowyで「誰にでもわかりやすい記事」を書く。このブログでの記事の書き方を語ってみる

このブログの記事は、WorkflowyとSLPRO Xを使って執筆している。「誰にでも分かりやすい」記事にするために具体的にどのように執筆しているかご紹介する。

ブログ記事の構成を練るのにWorkflowyが便利な理由

この記事を読むのに必要な時間は約 0 分 49 秒です。 どうも、今日は一日家でのんびりしていました怜香@Ray_mnzkです。恐らく明日以降まる1カ月以上は一日中休みの休日はなくなると思われます、だ …

Todoistでブログのネタを管理してみる!

この記事を読むのに必要な時間は約 1 分 6 秒です。 長かった一週間が終わって休日を迎えた怜香@Ray_mnzkです。 今日は久々に宝塚まで出向いてきました。といっても観劇ではなく、今日発売のポケッ …

Message

メールアドレスが公開されることはありません。

CAPTCHA