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

Pocket
LINEで送る

本投稿記事の内容は、「WordPress3.3.2」のテーマ「Twenty Eleven1.3」での話であり、バージョンが大きく異なると動作しない場合があります。
※2012/06/20追記 「WordPress3.4」テーマ「Twenty Eleven1.4」での動作を確認しました。
※2013/01/07追記 テーマ「Twenty Twelve」の場合については「WordPressテーマTwenty Twelveで投稿記事のタイトルにボーダーラインを入れる方法」を参考にして下さい。

投稿記事のタイトルがあまり目立たないのが気になっていました。前回、説明した投稿記事のタイトル部の背景色を変える方法の他に、投稿記事のタイトル部にボーダーラインを入れる方法もあります。その方法を説明します。

投稿記事のタイトル部にボーダーラインを入れる方法

/wp-content/themes/twentyeleven内にある
「style.css」の「=Content」の「.entry-title」の箇所で「border-位置: 太さ 形状 色;」
を追加すればボーダーラインを入れることが出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

例)「style.css」
位置を左、太さを4ピクセル、形状を一重線、色を#808080にする場合


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Content
----------------------------------------------- */

#main {
	clear: both;
	padding: 1.625em 0 0;
}
.page-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 0 0 2.6em;
	text-transform: uppercase;
}
.page-title a {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}
.hentry,
.no-results {
	border-bottom: 1px solid #ddd;
	margin: 0 0 1.625em;
	padding: 0 0 1.625em;
	position: relative;
}
.hentry:last-child,
.no-results {
	border-bottom: none;
}
.blog .sticky .entry-header .entry-meta {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.entry-title,
.entry-header .entry-meta {
	padding-right: 76px;
}
.entry-title {
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


|「border-left: 4px solid #808080;」を追加


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Content
----------------------------------------------- */

#main {
	clear: both;
	padding: 1.625em 0 0;
}
.page-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 0 0 2.6em;
	text-transform: uppercase;
}
.page-title a {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}
.hentry,
.no-results {
	border-bottom: 1px solid #ddd;
	margin: 0 0 1.625em;
	padding: 0 0 1.625em;
	position: relative;
}
.hentry:last-child,
.no-results {
	border-bottom: none;
}
.blog .sticky .entry-header .entry-meta {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.entry-title,
.entry-header .entry-meta {
	padding-right: 76px;
}
.entry-title {
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
	border-left: 4px solid #808080;	/*	追加	*/
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これで投稿記事のタイトル部にボーダーラインが入るはずです。

好みによりボーダーラインの位置、太さ、形状、色を変えて下さい。

「border-left」の「left」の部分を下記の様に変えることにより、ボーダーラインが入る位置を変えられます。

  • 「top」:上
  • 「right」:右
  • 「bottom」:下
  • 「left」:左(今回の例)

「solid」の部分を下記の様に変えることにより、ボーダーラインの形状を変えられます。

  • 「dotted」:点線
  • 「dashed」:破線
  • 「solid」:一重線(今回の例)
  • 「double」:二重線

他にも「groove」「ridge」「inset」「outset」がありますが、これは実際に目で確かめて下さい。

ボーダーライン関係のプロパティには、「border-left」の他にも下記があります。必要ならば調べてみて下さい。

  • 「border-top-width」
  • 「border-bottom-width」
  • 「border-left-width」
  • 「border-right-width」
  • 「border-width」
  • 「border-top-style」
  • 「border-bottom-style」
  • 「border-left-style」
  • 「border-right-style」
  • 「border-style」
  • 「border-top-color」
  • 「border-bottom-color」
  • 「border-left-color」
  • 「border-right-color」
  • 「border-color」
  • 「border-top」
  • 「border-bottom」
  • 「border-left」(今回の例)
  • 「border-right」
  • 「border」
Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

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



スポンサーリンク