小三ツ星インターフェイス

komitsuboshi2014

2014年制作のワードプレステーマのスクリーンショット

概要

2014年から開発に着手したテーマです。流行のデザインを容易に取り入れられるようにしました。

トップページではフラットデザインを、固定ページではパララックス効果を取り入れられるようにしました。

なお、下層ページではグローバルナビゲーションがページ上端で常に固定表示されます。

パララックス効果は、javascriptを使わず、CSS2で実現する(背景画像は動かない)ものと、jQueryで背景がゆっくり動くタイプを用意。パララックス専用のライブラリは使用していません。

機能と使い方

パララックス

固定ページで使用したいパララックス効果のテンプレートを選択し、背景にする画像をアイキャッチ画像に登録します。

固定ページのテキスト入力欄に埋め込んだ画像は背景画像よりも速く動くためパララックス効果を得ることができます。

また、パララックス効果を設定した固定ページに子ページを作ることで、複数段のパララックスページを作ることができます。(子ページのテンプレートはデフォルトを選択します)

タイル状リンクレイアウト

アーカイブページにおける個別の記事へのリンクはフラットデザインまたはマテリアルデザイン風の四角いタイルで構成しています。四角い領域全体がタップ可能で、スマートフォンでの使いやすさを実現しています。

Komitsuboshi Original

概要

最初に作ったテーマで、可能な限りユーザーでカスタマイズできること、キービジュアル付きマルチカラムレイアウトなど、複雑なレイアウトに対応できることを目指したものです。

レスポンシブデザイン採用。

作成テーマのスクリーンショット

カスタマイズ方法

ヘッダー部

グローバルナビゲーション、サブナビゲーションは管理画面の「メニュー」からカスタマイズします。

カスタムヘッダー機能はヘッダーの高さなどの調整が困難になるため使っておらず、ヘッダーのサイズと背景画像はCSSで編集します。

一昔前のブログサービスのように、タイトルとサイトの概要(キャッチフレーズなど)もヘッダー内に表示するようになっています。

パーツ部

billboard, leftsidebar, rightsidebar, mainbillboard, footer は、それぞれ固定ページで編集できるようにしています。

leftsidebar, rightsidebarは、サイドバーウィジェットの導入も可能です。