ブログをリニューアルしました。

このエントリーをはてなブックマークに追加


このブログを始めてから丸2年が経ちましたが、年明けにサイトデザインをリニューアルしました。昨年11月にWordPress公式ディレクトリにリリースしたテーマ「tsumugi」をベースにしていますが、元々このブログに使いたいと思っていたものなので、当初の目的がようやく叶った形になります。
今回カテゴリーやタグ、アーカイブなどのリンクも追加して、少しはブログらしい体裁になったので、過去の記事も探しやすくなったのではないでしょうか?テーマのカスタマイズ方法なども、備忘録として残しておいたので、何かの参考にしてもらえたら幸いです。

リニューアル before&after

左:リニューアル前のトップページ、右:リニューアル後のトップページ

さて、今回のリニューアル前後でサイトデザインはこんな風に変わりました。ロゴやカラーテーマは新しくなりましたが、基本的な構造自体はあまり変わっていませんね。

このブログを立ち上げた時に「littlebird-theme」という名前でテーマを作りましたが、その際『もっとこうしておけば良かった』という宿題を盛り込んで完成させたのが、バージョン2とも言えるテーマ「tsumugi」なのです。

立ち上げ当初は、月に1〜2回しか更新しないブログなので、カテゴリーやアーカイブも必要ないし、シンプルに各投稿記事が1ページで完結するようなデザインでいいだろうと思っていました。

なので、自分が使っていないコメントやウィジェットなどのパーツは、テーマとしても全くスタイリングされていない状態でした。これをいつか、きちんとしたWordPressのテーマとして完成させたいと思い、作り始めたのが「tsumugi」だったのです。

リニューアル前のフッター部分はかなりシンプルでしたが、リニューアル後は最新の投稿や月別のアーカイブなどのウィジェットが加わりました。

子テーマを使った「tsumugi」のカスタマイズ

どうせ完全なテーマを作るのであれば、勉強がてら公式ディレクトリに申請してしまおう、という事で途中から別プロジェクトとして一人歩きしていたので、いざ自分のブログで使うとなると、細々した点をカスタマイズする必要が発生しました。

例えば、このブログでは投稿ページにSNSボタンを設置したり、TwitterやFacebookへのシェア用にMETAタグを埋め込んでいますが、そういったテーマそのものに必要ない機能は、なるべく組み込まないのが基本ポリシーです。(必要な機能はプラグインによってユーザー自身で拡張できるため)

そこで、「tsumugi」を利用している多くの一般のユーザーと同じように、テーマ自体は触らずに更新したいと思い、「子テーマ」を使ってカスタマイズすることにしました。

例えば「投稿サムネールの有効化」など、簡単なカスタマイズであれば、子テーマのfunctions.phpに必要な関数だけ追記するだけでOK。

functions.phpなどに独自に実装していた機能だけを抜き出し、子テーマ側のファイルに記述すればいいので、親テーマをフレッシュな状態に保ちつつ、自由なカスタマイズが可能です。

付け焼き刃なので、あまり良い例ではないかもしれませんが、今回作成した子テーマもGitHubに上げてあるので、よかったら参考にしてみてください。

littlebirdjp/tsumugi-littlebird: A child WordPress theme of tsumugi for http://littlebird.mobi

プラグイン「Floating Top Link」との連携

このブログには、その他に「トップへ戻るボタン」も設置されていましたが、こちらはこの時に備えてあらかじめ「Floating Top Link」というプラグインとして、公式ディレクトリに公開しておいたので一安心です。

すでにプラグインを利用していただいている皆さんと同じように、WordPressの管理画面からインストールするだけで、テーマへの組み込みが完了しました。

どのサイトでもよく使いそうな、再利用可能な機能は、プラグインとして切り分けておけば、リニューアル時の移行も簡単。

Floating Top Link」は、元々「tsumugi」の一部として制作していたパーツを、プラグインとして切り出したものです。今回、子テーマ側に記述した他の機能も、プラグインで代替できるものがあれば、その方がスッキリするので、いずれ乗り換えてしまいたいですね・・。

以前、ショートコード化したYoutube等のレスポンシブ対応なども、リニューアルする度にテーマに移植するのが面倒なので、そのうちプラグイン化してしまおうかな、と思っています。

新しくなった「リトルバード」のロゴ

ブログ開設から3年目にして、個人ブランドである「リトルバード」のロゴデザインも一新しました。

今回、サイトデザインと合わせて、リトルバードのブランドロゴも刷新しました。こちらは『飛ぶ鳥』から、飛び去った後の『鳥の羽根』になっていますが、鳥つながりということで、一応イメージは引き継がれているのではないでしょうか?

新しいロゴは、元々「tsumugi」のロゴとして考案していたものですが、気に入ったので途中から自分の屋号「リトルバード」のロゴと兼用してしまおう、という方向性に変わりました。

初音さんの楽曲「紡ぎ〜あまねく想い〜」の世界観から、イメージを広げてデザインしましたが、大空に願いをかける壮大なこの歌を聴いていたら、なんとなく空から舞い降りる羽根が浮かんできたんですよね・・。

初音さんが地元・大阪の空を見上げながら作曲したという「紡ぎ〜あまねく想い〜」には、雄大な空のイメージが情景豊かに描かれています。

そんなこんなで、ブログもブランドロゴもリニューアルし、気持も新たに臨む本年は、個人的に『飛翔』の年になればいいなと思っています。更新頻度は相変わらずマイペースなままの気がしますが、今後ともよろしくお願いしますm(_ _)m

関連記事