先日、このブログのテーマをStinger5に変更したことを書いたのですが、その後ゴニョゴニョとカスタマイズいたしました。
カスタマイズ内容は最小限に留めて、シンプルながらインパクトあるサイトを目指しました。
細かいところでやりたいことはまだまだ沢山あるのですが、ここでひとまず区切りをつけようかと思います。
施した内容の詳細はそれぞれ後日記事に書いていくとして、変更した点を列挙しておこうかと思います。
子テーマを作る
wordpressのテーマのソースファイルを直接カスタマイズをすると、アップデートの際にせっかくカスタマイズしたファイルが上書きされ、カスタマイズした内容が消えてしまいます。それを避ける方法として、子テーマという仕組みがあります。詳しく書かれたサイトが沢山ありますので、僕もそれらを参考に子テーマを作成してカスタマイズにとりかかりました。
表示サイズの変更
stinger5は最大表示幅が980pxとなってます。ちょっと狭い印象です。後に書きますが今回のサイトのデザイン変更をするにあたり、アドセンスを導入したこともあり、もう少し幅を広げてサイト全体にゆとりを持たせたいというわけで、最大で1366pxまで表示できるように子テーマに作成したstyle.cssに下記を追記しました。
max-width: 1366px;
}
文字表示の調整
せっかく表示幅が広くなったので、記事タイトルや文書の文字サイズや少し大きくして、行間も広げました。ごちゃごちゃもせずに読みやすくなったんじゃないかと思います。
ブログタイトルのフォント変更
ブログタイトルはウェブフォントを採用しました。ロゴを作成してもいいのですが、いまのところコレというアイデアがないので、しばらくはgoogle fontsでチョコチョコいろんなフォントを楽しもうかと思っています。それにしてもこのgoogle fontsは選択肢が無限大にあるので、決めるのが大変です。笑
google fontsの使い方はこちらのページを参考にしました。
あと、まだ未着手なのですが、googleは日本語のwebフォントも用意していますので、ブログタイトルだけじゃなく、サイト全体のフォントもwebフォントにするのもありかなぁと思ったりしてます。ただ、日本語のwebフォントを使うと環境によって表示がかなり遅くなる可能性があるので、様子見にしています。
ヘッダー画像の削除と各記事のアイキャッチ画像の配置
さて、ここからが今回のカスタマイズのハイライトです。上述した内容はあくまで微調整でした。この後書く内容はstinger5が持っているイメージを多少なりとも変えてしまうと思います。
まずは、ヘッダーの画像をなくし、各記事のアイキャッチ画像をドーンと大きく表示させました。更にそのアイキャッチ画像にブログタイトルを重ねあわせることで、記事ページが表示された際に強い印象を与えられるようにしてみました。
更にヌルっと記事本文に誘導できる↓ボタンを設置し記事を読む流れのようなものを作りました。
このカスタマイズ内容はズバリ、新しいwebデザインの要素を積極的に採用してい(るつもりでおり)ます。僕はwebデザイナーじゃないので「何を見当違いなことを」と指摘される可能性もありますが、それを恐れず書きますと、最新のwebデザインでは「大きな写真とテキストの重ねあわせ」で印象効果を高める手法をとっているように思います。
例えば、appleのこんなページやgoogleのこんなページ。実は我がCafeJintaのページでもその手法を採用しています。
このjinmas.chipsでも、その手法を”効果的に”採用しようというわけです。
あえて”効果的に”と書いたのは理由があって、どんなブログでも固定のヘッダー画像を大きく表示しサイトタイトルを重ねあわせて、それっぽい雰囲気を作ることは簡単にできるのですが、それではどの記事でも同じ写真と同じタイトルが表示されるばかりで、見た目にかっこ良くなっても、記事の内容に引き込む力は弱まります。
アイキャッチ画像をしっかり活用してそこから記事内容に引き込むこと、それこそが”効果的な”画像の扱い方なのではないかと考えたわけです。
ブログという形で運用されていて、記事ごとに画像を効果的に使用するという点で、こちらのサイトは大いに参考になりました。
では肝心のカスタマイズ方法なのですが、この変更内容詳細については、細かい変更が多くてサラサラっとは書けないのでまた後日アップの宿題とさせていただこうかと思います。
なんて言っているうちに「Stinger6」なんてのが出ちゃったり、あるいはそれが可能なwordpressテーマが出てきて、だれもがその手法を使えるようになるかもしれませんが…。笑