WordPressテーマTwenty Twelveで投稿記事のタイトルにボーダーラインを入れる方法

Pocket
LINEで送る

本ブログをTwenty ElevenからTwenty Twelveへ移行するため、Twenty Twelveで同じ動作をさせるための変更方法について調べることにしました。Twenty Elevenの時と同じ動作が出来て、プラグインも問題なければ移行するつもりです。

なお、本記事の内容は、「WordPress3.4」テーマ「Twenty Twelve1.1」で確認しました。
※2013/01/07追記 テーマ「Twenty Eleven」の場合については「WordPressテーマTwenty Elevenで投稿記事のタイトル部にボーダーラインを入れる方法」を参考にして下さい。

今回は投稿記事のタイトルにボーダーラインを入れる方法です。

「/wp-content/themes/twentytwelve/style.css」
の下記の箇所が投稿記事のタイトルについて処理しているところです。この部分を変更すれば可能です。それから、小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。


/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {
	font-size: 20px;
	font-size: 1.428571429rem;
	line-height: 1.2;
	font-weight: normal;
}
.entry-header .entry-title a {
	text-decoration: none;
}
.entry-header .entry-format {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-weight: normal;
}
.entry-header .comments-link {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}

例)
左側に太さ「4px」 色「#5f7e3f」で、下側に太さ「1px」 色「#5f7e3f」でボーダーラインを引き、上側と左側に余白を「5px」追加する場合


/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {
	font-size: 20px;
	font-size: 1.428571429rem;
	line-height: 1.2;
	font-weight: normal;
	border-left: 4px solid #5f7e3f;	/*	投稿記事のタイトルの左側にボーダーラインを引く	*/
	border-bottom: 1px solid #5f7e3f;	/*	投稿記事のタイトルの下側にボーダーラインを引く	*/
	padding-top: 5px;	/*	投稿記事のタイトルの上側に余白を追加	*/
	padding-left: 5px;	/*	投稿記事のタイトルの左側に余白を追加	*/
}
.entry-header .entry-title a {
	text-decoration: none;
}
.entry-header .entry-format {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-weight: normal;
}
.entry-header .comments-link {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}

コメントの箇所で設定を変えています。ボーダーラインの太さを変えるなり、「border-top」「border-right」プロパティを追加してボーダーライン追加するなりしてカスタマイズして下さい。

変更前

変更後
(左側に太さ「4px」 色「#5f7e3f」で、下側に太さ「1px」 色「#5f7e3f」でボーダーラインを引き、上側と左側に余白を「5px」追加)

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



スポンサーリンク