2014年9月に公開予定の WordPress無料テーマ Gush2 が60％ほどできあがりました。

とは言っても、土台となる骨組みに大きな変更箇所はなく、Gush の細かいところをカスタマイズしている感じです。目指すは「素のままで使えて、カスタマイズもしやすい」ですが、なかなか両立が難しいところ。

あちこちの素材サイトを利用したり情報サイトを参考にしていますが、ブックマークや Pocket がごちゃごちゃになってきたので、CSSの小技といっしょにご紹介します。

初代 Gush 作成時に参考にしたサイトもあわせてご覧ください。

参考WordPressレスポンシブテーマ作成で参考にした8サイト＋α

テーマ作成・カスタマイズで覚えておきたいサイト

写真・テクスチャ・アイコン素材

画像やアイコンなどの素材を使うときは、利用規約の確認が必要です。とくに、個人利用ではなく配布したり有料販売するときは注意しましょう。

パブリックドメインであれば、そこら辺を気にせず使えます。

パブリックドメイン

知的財産権がない著作物で、誰でも自由に使うことができる。ただし、所有権や人格権が発生している場合は自由に使うことができない。

写真素材サイト Pixabay

Pixabay

すべての画像が Creative Commons CC0 になっているため、比較的自由に使えます。なかにはその他の権利で保護されているものもあるので注意。

パブリックドメインの素材が探せる Find CC

Find CC

どれが自由に使えるんだよ！というときは、こちらの検索サイトが便利。“クレジット表記したくない”など、目的別に画像を探すことができます。

継ぎ目のない背景画像を敷きたいなら Subtle Patterns

Subtle Patterns

Gush2 で採用するかまだ未定なのですが、背景に継ぎ目のないテクスチャ画像を設定したいなら、ここの画像がシンプルで気に入っています。

個人利用はフリーですが、再販はできません。

自由に色を変えられるアイコン Icons DB

Icons DB

アイコン素材サイトはたくさんありますが、ここで配布されているアイコン素材は色を自由に変えることができます。

わざわざ画像編集ツールにとりこむ必要がないので、ブログのカラーに合わせたアイコンを使いたいときは便利ですね。

豊富なカテゴリーが魅力 Iconfinder

Iconfinder

このアイコン検索サイトはカテゴリーが豊富で、シンプルなSNSアイコンから「どこで使うの？」というアイコンまで見つけることができます。

ほかのブログとはちょっと違ったオリジナリティを出したいときにどうぞ。

WordPress用ダミー（サンプル）記事でチェック

Gush は僕が使っていたテーマを改変したものだったので、あらゆるケースを想定していませんでした（悪く言えば、配布するわりに視野がせまかった…）。

そのため、「画像キャプションがおかしい」「テキストの回り込みができない」「タグを30個並べると表示が崩れる」などの不具合報告が多数あったので、その教訓を活かして Gush2 ではダミー記事を使って調整を行っています。

使用したのは、こちらで配布されているテストデータ。

WordPressテーマユニットテストデータ日本語版を更新したよ！

ダミーで表示が崩れて修正したサンプル集

上記のテストデータをダウンロードして読み込むと、いくつかの記事が表示されます。

なかでもテーマ作成やカスタマイズで見ておきたいのが、「極端な例」というカテゴリー。極端すぎてびっくりしますｗ

ものすごく長いタイトル

タイトルはどんなに長くても50文字ぐらいかな、と思っていましたが、それ以上のタイトルをつける方もいるでしょう。

個別記事ページだけではなく、トップページの記事一覧や関連記事など、記事タイトルを出力する部分で表示崩れがないかチェックが必要です。

Gush では記事下の関連記事表示ではみ出てしまう不具合が。

CSSを修正して、はみ出た部分を隠すように指定しました。

ものすごく長い英単語

雑学として知られていると思いますが、もっとも長い（実用的な）英単語は45文字です。これをそのまま記事タイトルにすると、画像のようにはみ出てしまいます。

修正方法はダミー記事内にもありますが、CSSで下記を指定します。

途中で折り返されて、メイン部分の枠内に収まりました。

ちなみにこの「pneumonoultramicroscopicsilicovolcanoniosis」を和訳すると「超微視的珪質火山塵肺疾患」になります。

たくさんのカテゴリー

ひとつの記事に複数のカテゴリーが設定されている例。

ここまで多くなるのは現実的ではありませんし、SEO でもよろしくないのですが、似たようなサンプルに「たくさんのタグ」というものもあって、これはけっこう見かけますね。

Gush2 では記事下にもカテゴリーとタグを出力していますが、今のところこのように表示されます。

単語の改行をどのように処理するか、いくつかパターンがあるのでCSSリファレンスで確認しておきましょう。サンプルのようにボーダーで囲む場合は、単語の途中で改行されないようにしたほうがスッキリ見えます。

参考word-break－CSS3リファレンス

スタイルで幅を指定された、はみ出る画像

Gush はレスポンシブデザインのため、スマホ閲覧時に画像が枠からはみ出ないよう下記を指定しています。

ところが、ダミー記事で設定されていた横幅 1200px の画像はメインコンテンツ部分から大きくはみ出ていました。

ソースを見ると、このように指定されています。

画像を囲んでいるDIVに直接 width:1210px が指定されているのが原因ですね。

あまりスマートなやり方ではありませんが、手っ取り早く記事内のDIV要素に対しても最大横幅の指定をしました。

これで一応解決。

最後にHTMLとCSSのチェックを

ひととおりチェックして修正が終わったら、HTML と CSS におかしな点がないかチェックしておきましょう。

参考HTML・CSS・WordPressテーマをチェックできる無料サービス一覧

Gush2 は今のところ75点。WordPress特有の必須タグがマイナスになっているので、たぶんこれが限界かなと思います。

まとめ

現時点で、Gush2 のヘッダーまわり（ファーストビュー）はこのような感じです。

もしかするとイメージとまったく違うものができ上がるかもしれませんが、できるだけ早く公開したいと思います。

作成過程でどうしてもこのブログもいじりたくなってしまい、並行してあちこち修正しています。実は、ここのところ毎日微妙に変わっているんですｗ

集中しなきゃ…

それでは、また。