Twenty Fourteenのカスタマイズ

css

Twenty Fourteen

WordPressの標準テーマであるTwenty Fourteenは、レスポンシブルデザインだし、
とてもシンプルで使いやすい構成をしています。
AMBでは、このテーマをカスタマイズして利用しました。

子テーマ

作成にあたってはTwenty Fourteenの子テーマを作成しています。
子テーマの作り方はMushikago Apps Memoさんの記事を参考にしました。

Fourteen Extended プラグイン

Twenty Fourteenを簡単にカスタマイズするためのプラグインです。
Fourteen Extended

特にチェックボックスにチェックを入れるだけでブログ全体をセンタリング
してくれる機能はとても楽で良いです。

style.css

style.cssは以下の様にしました。

body {
}

h1 {
	font-size: 26px;
	line-height: 1.3846153846;
}

h2 {
	font-size: 24px;
	line-height: 1;
	border-left:7px solid #339966;  
	border-bottom:2px dashed  #339966;  
	padding:.4em .8em;
}

h3 {
	font-size: 22px;
	line-height: 1.0909090909;
	border-left:7px solid #00cc66;  
	padding:.4em .8em;
}

h4 {
	font-size: 20px;
	line-height: 1.2;
	border-bottom:1px dashed #ccc;  
	padding:.6em .8em;
}

h5 {
	font-size: 18px;
	line-height: 1.3333333333;
}

h6 {
	font-size: 16px;
	line-height: 1.5;
}

.site-content .entry-title {
	position:relative;
	margin:0 0 20px 0px;
	padding:10px 20px;
	font:bold 26px/1.6 Arial, Helvetica, sans-serif;
	color:#333;
	border:#333 solid 3px;
	border-radius:18px;
	background:#fff;
	box-shadow:
		-7px -5px 0 0 #e8e8e8 inset,
		2px 3px 0 0 #000;
}
.site-content .entry-meta {
	margin: 0 0 0 20px;
}

.entry-thumbnail {
	display: block;
	position:relative;
	margin: 0 auto;
	text-align:center;
	max-width:600px;
}
.entry-excerpt {
	display: block;
	position:relative;
	vertical-align:top;
	margin: 10px 15px;
}

/**
* indexトップに表示されるキャッチ画像を非表示にする
*/
.post-thumbnail {
	display: none;
}

/**
*	続きを読む部分のcss
*/
.entry-summary .more-link{
	display: block;
	color: #FFF;
	padding: 10px 0;
	text-decoration: none;
	line-height: 1;
	font-weight: bold;
	width: 200px;
	border: 1px solid #DDD;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}
.readmore{
	display: block;
	position:absolute;
	margin: 0 10px 0 auto;
	text-align:center;
	vertical-align:middle;
	width: 200px;
}

.more-link .meta-nav{
   display: none;
}
.entry-summary .more-link{
    background: #24890d;
}
.entry-summary a:hover.more-link{
    background: #41a62a;
 }

/**
 * 11.0 Media Queries
 * -----------------------------------------------------------------------------
 */

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

@media screen and (max-width: 400px) {
	.list-view .site-content .entry-summary {
		display: block;
	}
	.readmore{
		margin: 0 auto;
	}
}

@media screen and (min-width: 401px) {
}

@media screen and (min-width: 594px) {
}

@media screen and (min-width: 673px) {
}

@media screen and (min-width: 783px) {
}

@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) {
}

/**
 * 12.0 Print
 * -----------------------------------------------------------------------------
 */

@media print {
}

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です