[WP自作テーマ] Naochka 初代制作テーマ

デザイン

開設当初はアートワークとかデザインといったビジュアル要素を中心にギャラリー的なサイトとして、公式テーマのKojiを使ってました。その後、テキスト記事も混在するようになり、サムネイル画像あり/なし両方のコンテンツを扱えるようにしたいとの思いから開発した初代テーマがこれです。

Naochka トップページ (PC版)

画像のタイル型レイアウト

このテーマを開発していた頃は、いろいろ試してみたくて見せ方の統一感をあまり考えていなかったのですが、いろんな見せ方のメリット・デメリットが見えてきたのは良かったと思います。

たとえば、アートワークやデザイン系のサムネイルがあるコンテンツについてはMasonry.jsを用いたタイル型レイアウトにしてみました。この見せ方は、ギャラリー的には見栄えが良くて気に入っています。

しかし、Pinterest風の無限スクロールを実装するとなると、いろいろと考えさせられることもありました。(例えばスクロールした時のWP的なページ切り替えがちょっと面倒だったり、他にもAdSense的な問題とか…)。まあ実験はできたので、今回はこれでいいかな。

Naochka アートワーク記事一覧 (PC版)

テキスト記事のグラデ表示

一方で、サムネイル画像のないテキスト記事をビジュアル的にどう見せるか模索した結果、一覧にグラデーション背景を用いてみました。投稿一覧のサブループ内で、記事ごとに値をインクリメントさせ、その値に応じたクラス名を出力するというだけの簡単な処理ですが、CSS側でどんなグラデのセットを用意するかで表現が無限大になるのが魅力です。

本当に見た目だけで機能的にあまり意味のない処理ではあるのですが、これはこれで面白い試みだったと思います。ただ、見せ方はもうちょっと改良の余地があるかもしれません。

Naochka テキスト記事一覧 (PC版)

投稿の詳細ページ

各投稿の詳細ページはいろいろ迷いつつ、PC版でも全画面表示にしてみました(PC版なら2カラム設計のほうが使いやすいかなと思いつつ)。アイキャッチ画像の有無で記事の体裁が変わってくるのですが、とりあえずこんな感じです。特に横幅の広いPC版は間延びした印象になってしまうので、もうちょっと見せ方を練ってみたいと思います。

その他のメモ

レスポンシブ対応

PC画面、タブレット、スマホの3段階のレスポンシブ対応にしました。それぞれ文字サイズや一覧表示の列の数を変えるなどの調整をしています。

☆☆☆
☆☆☆

多言語切り替え

あと、地味なところでは多言語切り替え機能が実装してあります。
テーマにKojiを使っていた頃はなんとなく日本語と英語を混ぜた記事を投稿してたんですが、なんか読みにくいし記事が無駄に長くなるので、日本語コンテンツと英語コンテンツを分割することにしました。(言語切替ボタンは画面右上にあります)

そもそも大した記事数もないのに多言語化プラグインを導入するのは大袈裟だと思い、プラグインなしで簡易的に言語を切り替える機能をつくりました。そのときのメモがこちらです:WordPressの基本機能だけで多言語サイト化

制作の感想

初代Naochkaテーマの概要はこんな感じです。グローバルナビを配置してカテゴリ別にコンテンツを整理するなど、なんだか中規模サイトを意識したような作りになっていますが、実際にはコンテンツがほとんどない状態なのであまり活かせていないのが残念。

テーマそのものは作っていて非常に楽しかったですが、いろいろ試したいのが先走って、デザイン的な汎用性があまりないというか、使い勝手もイマイチと感じるところも多いので、そのうちもっと改良した別テーマを作成したいと思っています。

コメント

この記事へのコメントはありません。

naochka

長年IT業界でWeb+デザインをやってました。いまはWordPress中心です。やや技術的な話が多いですが、なぜか世界中あちこち放浪してた関係でたまに想い出を綴ってたりもします。 Wall Street Journalを読む会の英語ナビゲーターやってました。(実は帰国子女)

最近の記事

  1. 第15回 Wall Street Journalを読む会(最終回):市場が再び短期思考に回帰する理由

  2. 第14回 Wall Street Journalを読む会:アメリカ発の技術革新が、かつてない長期のドル高トレンドを牽引

  3. 第13回 Wall Street Journalを読む会:アメリカで実体経済と株価が乖離している理由とは?

  4. UAの二重計測問題の確認方法と解決策:UAとGA4を共存運用+All in One SEOで連携してる人は注意

  5. 初めてのWordPressテーマ選び、美麗デザインを購入するときは設定の難易度に気をつけて

アーカイブ

次回のWSJ会開催@Peatix

TOP