WordPress 新テーマ Twenty Fourteen が WordPressのバージョン 3.8 でリリースされました。http://twentyfourteendemo.wordpress.com/

wordpress2014
では早速チェックしていきたいと思います。もちろんレスポンシブで、サイドメニューの文字が小さいかなと思ってたらスマホ表示ではちゃんと大きくなってます。
ウィジェットエリアは 全体左サイド(Primary Sidebar)、トップ右サイドとコンテンツ右サイド(Content Sidebar)、フッター(Footer Widget Area)の3か所です。フッターは自動で最大4列に並びます。
また IE7/8 は正常に表示されませんでした。対策はMedia Queriesのあれ なのですが、それでもIE7はだめでした。

※Twenty Fourteen 不動産プラグインデモサイト http://nendeb.jp/demo2/


カスタムヘッダー
幅は 1260pxです。 一番上に表示されるだけのようです。
header-image


メニュー
header-menu-2
ナビゲーションメニューは2か所設定できます。
メニューを2つ作ってそれぞれ割り当てます。
 ① Top primary menu (右上部分)
 ② Secondary menu in left sidebar (左サイドバー内)



スポンサードリンク



Featured Content
2014-custom01
トップページの上部に「Featured Content」として記事を表示する事ができます。「Featured Content」は「グリッド」又は「スライド」として表示する事ができます。

「Featured Contentとして表示させたい場合は記事に関連づける「タグ」をつけてテーマカスタマイズの所で指定します。
例えば「featured」というタグを投稿ごとに設定すると表示されます。( 最大15記事 )
下のチェックをいれるとその「タグ」は見えなくする事もできるようです。

画像はそれぞれの投稿の「アイキャッチ画像」に登録します。スライドの場合は 1038x576px それ以外の場合は672x372px以上の画像を登録する必要があります。





フォント
組込みWEBフォントも Twenty Thirteen 同様についています。
2014-fonticon
http://genericons.com/
表示例
<span class="f100">f100</span>
<style type="text/css">
.f100:before {
     font:16px/1 Genericons;
     content: "\f100";
     margin-right: 5px; 
}
</style>


Media Queries
Media Queriesも「width=device-width」にあわせるように細かく設定しています。
モバイルファーストになっていますのでわかりやすいです。
/**
 * 11.0 Media Queries
 * ----------------------------------------------------------------------------- */
@media screen and (max-width: 400px) {}
@media screen and (min-width: 401px) {}
@media screen and (min-width: 594px) {}
@media screen and (min-width: 673px) {}
@media screen and (min-width: 782px) {}
@media screen and (min-width: 810px) {}
@media screen and (min-width: 846px) {}
@media screen and (min-width: 1008px) {}
@media screen and (min-width: 1040px) {}
@media screen and (min-width: 1080px) {}
@media screen and (min-width: 1110px) {}
@media screen and (min-width: 1218px) {}
@media screen and (min-width: 1260px) {}



タイトルが大文字
タイトルがCSSで大文字になるようになっています。
.entry-title {
    font-size: 33px;
    font-weight: 300;
    line-height: 1.09091;
    margin: 0 0 12px;
    text-transform: uppercase;
}
いやな場合は text-transformを none にしてください。



サイトカラー
ヘッダー、サイドバー、フッターが黒色なのでどこかで一括で色変更できるかな?と探しましたがありませんでした。そこでCSSを追加する事で色を変更できます。
/* サイトカラー  変更したい部分に色コードを設定してください。
---------------------------------------------------------------------- */
	/* 背景色 */
	.site:before,
	.site-header,
	.primary-navigation,
	.grid .featured-content .entry-header,
	.featured-content .entry-header,
	#secondary,
	.site-footer,
	#supplementary,
	#nendebcopy
	{
		background: #ff0000 !important;
	}

	.grid .featured-content .entry-header{
		border-color: transparent !important;
	}

	/* 文字色 */
	.site-title a,
	.primary-navigation a,
	.site-description,
	.featured-content a,
	#secondary,
	.secondary-navigation a,
	.widget-area .widget-title,
	.widget-area .widget-title a,
	.widget-area a,
	.site-footer, 
	.site-footer a,
	.site-info, 
	.site-info a,
	#nendebcopy a
	{
		color: #000 !important;
	}

	/* ボックス色 */
	.widget-area input[type="text"], 
	.widget-area input[type="email"], 
	.widget-area input[type="url"], 
	.widget-area input[type="search"], 
	.widget-area input[type="password"], 
	.widget-area textarea
	{
		background: #fff !important;
		border: 1px solid #ccc;
		color: #000;
	}



やはり・・Fontかな
イケてる Twenty Fourteenでも 日本語表示すると やはり文字が見ずらくなったり にじんだ感じになりましたので不動産プラグイン用としては文字の大きさや太字関連を変更しました。
しかし 流行りの細い線の「日本語WEBフォント」を使うとそのままでもかっこよくなるかもしれません。

【参考】
 Twenty Fourteen 不動産プラグインデモサイト http://nendeb.jp/demo2/






スポンサードリンク

Posted by on 2016/07/08



不動産プラグインポータル