WordPressの無料テーマ「Kalki」レビュー

WordPressのおすすめ無料テーマ巡りその7「Kalki」。ちょっと変わった海外の無料テーマ「Kalki」を使ってギャラリーサイトを作ってみました。

Kalkiはシンプルというよりも、デザインテーマが固まった少しクセのあるテーマです。グラフィック要素が強いので、フォントやレイアウトの幅などはカスタマイザーで設定変更が可能。最大の魅力はGoogleフォントから好きなフォントを選べることと、レイアウトのサイズを細かく設定できること。色のカスタマイズもできます（背景、テキスト、リンク、ホバー、訪問済み）。

普通のテーマに飽きた、もしくはちょっと変わったデザインのテーマが欲しい方に適しています。

Kalkiはフォントが選べる！デザインカスタマイズが楽しい
- 追加CSSを使ったカスタマイズ【覚えておくと便利なコード】
- Kalkiのカスタマイズ一覧
WordPressのテーマ関連記事

Kalkiはフォントが選べる！デザインカスタマイズが楽しい

Kalkiはわりと新しいデザインテーマらしいです。デモの段階でちょっと変わってるなと思ったので、早速使ってみることに。カスタマイザーの中身を見る限り、SEO対策的な機能は完備していないので、本格的なブログの運用などには向いていないと思います。どちらかと言えばコンセプトが決まっているオウンドメディア向けかも。「layout」項目にある「Fixed Side Content」では、最近流行りのサイドに固定するテキストも作れます。ここではaタグやFont Awesomeも入りそうなので、SNSや特設ページへの固定バーを作ることもできますね。ちょっとコードを触れる方ならいろんなカスタマイズができて面白いテーマだと思います。

元々のベースはかなりスポーティーな感じだったのですが、少し変えたらスタイリッシュ系に変身できました。フォントの影響も大きいですね。下記に追加CSSによるデザインカスタマイズを公開しますので、興味のある方はお試しください。（※いらないセレクタが混じってるかも）

使用フォントは「Abel・Regular・weight400」です。

追加CSSを使ったカスタマイズ【覚えておくと便利なコード】

外観 > カスタマイズにある追加CSSを使い、自分好みのデザインに調整していきます。私がよくやる調整は、主に色やフォントサイズ、余白などの細かい部分です。ここを整えるだけでデザインの質がグレードアップします。

どこをどう変えるべきかを調べるには「開発ツール」というものを利用しますが、多分コードがよくわからない方には難しいかもしれないので、また後日追記したいと思っております。開発ツールというのは、SafariやChromeなどでも標準で付いている、コードを見るためのツールです。

CSSカスタムする上で覚えておくと便利なコードは、背景色「background-color」、文字の色「color」、文字の大きさ「font-size」、文字の太さ「font-weight」とかですかね。余白は「margin」か「padding」で指定できます。marginとpaddingの違いは下の画像で見てもらえればわかりやすいかも。

marginは新たに追加される余白、paddingはもともとある余白を拡大するイメージです。例えば文字の背景色を拡大したいときにはpaddingを使い、要素同士を余白で離したい場合にはmarginを使います。

あと、行間の指定には「line-height」、文字間の指定には「letter-spacing」を使います。これも私は最初に設定します。

Kalkiのカスタマイズ一覧

そのままでもいいんですが、NY風にするため細かいレイアウトの調整をしています。あまりスポーティー過ぎず、ちょっとデザイン的にも綺麗な感じで仕上げたカスタマイズです。

1.ヘッダー左側の余白を固定ページの余白と合わせる

.inside-header{
padding:10px 20px;
}

2.ヘッダーの背景色を変更（背景色を白に）

.site-header{
background-color:#fff;
}

3.サイトタイトルの文字サイズと色を変更（文字を小さく、グレーに）

.main-title a, .main-title a:hover, .main-title a:visited{
color:#aaa;
font-size:20px;
}

4.固定ページのタイトルの文字サイズと色を変更（文字を小さく、グレーに）

h1{
 font-size:22px;
 color:#aaa;
 }

5.ナビゲーションメニューのフォント、文字サイズ、太さを変更（文字サイズを小さく、細く）

.navigation-effect-styled #site-navigation .main-nav ul li.menu-item a{
font-family:inherit;
font-size:15px;
font-weight:400;
}

6.ナビゲーションメニューの背景色と文字色を変更（背景を白に、文字色をグレーに）

.navigation-effect-styled #site-navigation .main-nav ul li.menu-item a{
color:#aaa;
background-color:#fff;
}

7.ナビゲーションメニューの横にある検索マークを削除

.search-item{
display:none;
}

8.フッターの背景色、文字色、文字サイズを変更（背景色を白に、文字をグレーに、小さく）

.site-info{
 background-color:#fff;
 color:#aaa;
 font-size:13px;
 }

デザイン巡り〜アイデア画像集〜にニューヨークの近代美術館「MoMA（The Museum of Modern Art, New York）」とブルックリンの画像集を追加しました。ピカソ、ダリ、シャガール、アンリ・ルソー、ゴッホといった巨匠の作品を並べています。アンディーウォーホルはキャンベルスープの缶だけ画像が残っていました。時差ボケで体調が悪かったのと時間があまりなかったことからゆっくり見ることができず、一部写真に収めて全体を回りました。かなり見ごたえのある作品数なので、お時間が許す方は朝からゆったり回ることをおすすめします。

ちなみにこちらの公式サイトで収蔵品が検索できますので面白いですよ。

MoMA公式収蔵作品検索