INTEREST

↓テンプレート「basic_white」のカスタマイズ用に作ったブログです。（そのまんまのタイトル...ｗ）
「 FC2ブログのテンプレート「basic_white」をカスタマイズ 」

---

【「basic_white」のカスタマイズ】

1. 1.「basic_white」のグリッド表示をカスタマイズ
   • 1-1.グリッド表示で記事本文を表示する
   • 1-2.グリッド表示で一番上の記事以外を横４列にする
2. 2.「basic_white」のリスト表示をカスタマイズ
   • 2-1.リスト表示でのサムネイルのサイズを変更

---

1.「basic_white」のグリッド表示をカスタマイズ

グリッド表示では、一番上の記事だけサムネイルと本文の一部を表示して、それ以外はサムネイルだけの表示で横4列に並べてみました。（１ページに沢山の記事を並べてみてもいいかなーって...ｗ）
１ページに表示する記事の件数は「環境設定」で行い、今回は１ページに13件表示するようにしてます。

1-1.グリッド表示で記事本文を表示する

初期状態では、記事の内容（文章部分）をFC2ブログの変数「<%topentry_description>」を使って表示しており、文章の装飾や改行等は無視されて、最大で200文字の文章が表示される仕様になってます。（右の画像は初期状態での表示 →）
もちろん、このままでも良いのですが文字の装飾や改行等が反映された方が、見た目が良いと思い本文の一部を表示するようにしました。

※今回はグリッド表示で一番上に表示される記事以外は、本文を非表示にして画像だけ表示されるようにしています。

まずHTMLの変更箇所は「テンプレートの設定」の「basic_white のHTML編集」内に記述されてる以下の部分です。 ※「Ctrl」+「F」で「 <%topentry_description><%topentry_desc> 」を検索すればOK

<!--body_img-->
<div class="entry_image"><%topentry_image></div>
<div class="entry_description"><%topentry_description><%topentry_desc></div>
<!--/body_img-->
<!--body_img_none-->
<%topentry_description><%topentry_desc>
<!--/body_img_none-->

<!--body_img-->
<div class="entry_image"><%topentry_image></div>
<div class="entry_description"><%topentry_body></div>
<!--/body_img-->
<!--body_img_none-->
<div class="entry_image">
<img src="http://blog-imgs-66.fc2.com/b/a/s/basicwhite/no-image200.gif" 
alt="NO IMAGE" /></div>
<div class="entry_description"><%topentry_body></div>
<!--/body_img_none-->

※「<%topentry_description><%topentry_desc>」の部分を、「<%topentry_body>」に書き換えて、記事本文の中に画像が無い場合は7行目で記述した「NO IMAGE」の画像が表示されます。

次に、スタイルシートの編集も行います。
変更箇所は「テンプレートの設定」の「basic_white スタイルシート編集」内に記述されてる以下の部分です。 ※「Ctrl」+「F」で「 /* grid_content 」を検索すればOK

/* grid_content
-------------------------------------------------- */
#main_contents .grid_content {
	float: left;
	margin-left: -1px;
	margin-right: -1px;
	width: 50%;
	height: 310px; /* グリッド表示の時の記事の高さ */
	border-left: 1px dotted #B5B5B6;
	border-right: 1px dotted #B5B5B6;
}
#main_contents .grid_content .fc2blomaga_buy_area {
	display:none;
}
#main_contents .grid_content .entry_body {
	overflow: hidden;
	height: 5.8em;
}
#main_contents #e,#main_contents #e .entry_body { height: auto; }

#main_contents .p_area,#main_contents .p_area .entry_body {
	height: auto;
}

#main_contents .grid_content .entry_body .entry_image img {
	max-width: 150px; /* グリッド表示の時のサムネイルの幅の上限 */
	max-height: 210px;
}

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
	margin-left: 178px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
}

#main_contents .grid_content:first-child, #main_contents .p_area {
	float: none;
	width: 100%;
	min-height: 110px;
	margin-left: 0;
	margin-right: 0;
	border-left: none;
	border-right: none;
}

#main_contents .no_br:first-child br { display: none; }

#main_contents .p_area .entry_body {
	height: auto;
	padding-bottom: 15px;
}
#main_contents .p_area .entry_body .fc2blomaga_buy_area {
	display:block;
}

#main_contents .grid_content:first-child .entry_image img, #main_contents .p_area .entry_image img {
	max-width: 200px; /* グリッド表示の時の最初の記事のサムネイルの幅の上限 */
	max-height: 220px;
}

#main_contents .grid_content:first-child .entry_description,
#main_contents .grid_content:first-child .entry_discription {
	margin-left: 238px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
	min-height: 228px;
}

/* grid_content
-------------------------------------------------- */
#main_contents .grid_content {
	float: left;
	margin-left: -1px;
	margin-right: -1px;
	width: 50%;
	height: 315px; /* グリッド表示の時の記事の高さ */
	border-left: 1px dotted #B5B5B6;
	border-right: 1px dotted #B5B5B6;
}
#main_contents .grid_content .fc2blomaga_buy_area {
	display:none;
}
#main_contents .grid_content .entry_body {
	overflow: hidden;
	height: 9.5em;
}
#main_contents #e,#main_contents #e .entry_body { height: auto; }

#main_contents .p_area,#main_contents .p_area .entry_body {
	height: auto;
}

#main_contents .grid_content .entry_body .entry_image img {
	max-width: 150px; /* グリッド表示の時のサムネイルの幅の上限 */
	max-height: 150px;
}

#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
	margin-left: 0px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
	display:none;
}

#main_contents .grid_content:first-child, #main_contents .p_area {
	float: none;
	width: 100%;
	min-height: 110px;
	margin-left: 0;
	margin-right: 0;
	border-left: none;
	border-right: none;
}

#main_contents .no_br:first-child br { display: none; }

#main_contents .p_area .entry_body {
	height: auto;
	padding-bottom: 15px;
}
#main_contents .p_area .entry_body .fc2blomaga_buy_area {
	display:block;
}

#main_contents .grid_content:first-child .entry_image img, #main_contents .p_area .entry_image img {
	max-width: 200px; /* グリッド表示の時の最初の記事のサムネイルの幅の上限 */
	max-height: 200px;
}

#main_contents .grid_content:first-child .entry_description,
#main_contents .grid_content:first-child .entry_discription {
	margin-left: 225px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
	min-height: 228px;
	display:block;
}
#main_contents .grid_content .entry_description img { display:none; }

ここまでの編集で右の画像のように、一番上の記事はサムネイルと本文の一部が表示され、それ以外の記事はサムネイルのみ表示で横2列になってる状態です。
（本文が表示されてると分かり易いように文字に装飾を付けてます。）
また、本文中に画像が設定されてない記事に関しては、代替画像として「NO IMAGE」と書かれた画像が表示されるようになってます。

---

1-2.グリッド表示で一番上の記事以外を横４列にする

次は、一番上の記事以外を横4列にする方法です。
設定次第で3列でも5列でも可能で、スタイルシートの編集だけで出来ちゃうので案外簡単です
今回は横4列にするのに合わせて、記事タイトルの文字を小さくし全文表示に変更、そして日時とコメント部分も文字サイズと幅を調整し、サムネイルも中央寄りで表示されるように設定しました。

変更箇所は上記の編集に続き「テンプレートの設定」の
「basic_white スタイルシート編集」内に記述されてる以下の部分です
※「Ctrl」+「F」で「 /* grid_content 」を検索すればOK

/* grid_content
-------------------------------------------------- */
#main_contents .grid_content {
    float: left;
    margin-left: -1px;
    margin-right: -1px;
    width: 50%;
    height: 315px; /* グリッド表示の時の記事の高さ */
    border-left: 1px dotted #B5B5B6;
    border-right: 1px dotted #B5B5B6;
}
#main_contents .grid_content .fc2blomaga_buy_area {
    display:none;
}
#main_contents .grid_content .entry_body {
    overflow: hidden;
    height: 9.5em;
}
#main_contents #e,#main_contents #e .entry_body { height: auto; }
 
#main_contents .p_area,#main_contents .p_area .entry_body {
    height: auto;
}
 
#main_contents .grid_content .entry_body .entry_image img {
    max-width: 150px; /* グリッド表示の時のサムネイルの幅の上限 */
    max-height: 150px;
}
 
#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
    margin-left: 0px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
    display:none;
}
 
#main_contents .grid_content:first-child, #main_contents .p_area {
    float: none;
    width: 100%;
    min-height: 110px;
    margin-left: 0;
    margin-right: 0;
    border-left: none;
    border-right: none;
}
 
#main_contents .no_br:first-child br { display: none; }
 
#main_contents .p_area .entry_body {
    height: auto;
    padding-bottom: 15px;
}
#main_contents .p_area .entry_body .fc2blomaga_buy_area {
    display:block;
}
 
#main_contents .grid_content:first-child .entry_image img, #main_contents .p_area .entry_image img {
    max-width: 200px; /* グリッド表示の時の最初の記事のサムネイルの幅の上限 */
    max-height: 200px;
}
 
#main_contents .grid_content:first-child .entry_description,
#main_contents .grid_content:first-child .entry_discription {
    margin-left: 225px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
    min-height: 228px;
    display:block;
}
#main_contents .grid_content .entry_description img { display:none; }

/* grid_content
-------------------------------------------------- */
#main_contents .grid_content {
    float: left;
    margin-left: -1px;
    margin-right: -1px;
    width: 25%;
    height: 315px; /* グリッド表示の時の記事の高さ */
    border-left: 1px dotted #B5B5B6;
    border-right: 1px dotted #B5B5B6;
}

#main #main_contents .grid_content .entry_header {/* 記事タイトル前のアイコン */
	margin: 0 0 0px;
	padding: 5px 5px 5px 23px;
	background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 9px 2px; 
}

#main #main_contents .grid_content .entry_header a {
	display: block;
	font-size: 63%; /* 記事タイトルサイズ */
	height: auto;
	line-height: 1.2;
	overflow: hidden;
	white-space: normal;
}

#main #main_contents .grid_content:first-child .entry_header {/* 一番上の記事タイトル前のアイコン */
	margin: 0 0 10px;
	padding: 0px 0 0px 35px;
	background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 20px 5px; 
}

#main #main_contents .grid_content:first-child .entry_header a {
	font-size: 100%; /* 一番上の記事タイトルサイズ */
	display: block;
	width: 100%;
	line-height: 1.5;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#main_contents .grid_content .entry_date,
#main_contents .grid_content .entry_state { width: auto; font-size: 72%; }

#main_contents .grid_content .fc2blomaga_buy_area {
    display:none;
}
#main_contents .grid_content .entry_body {
    overflow: hidden;
    height: 9.5em;
}
#main_contents #e,#main_contents #e .entry_body { height: auto; }
 
#main_contents .p_area,#main_contents .p_area .entry_body {
    height: auto;
}
 
#main_contents .grid_content .entry_body .entry_image img {
    max-width: 150px; /* グリッド表示の時のサムネイルの幅の上限 */
    max-height: 150px;
}

#main_contents .grid_content .entry_body .entry_image {
	position: static;
	left: 0;
	text-align: center;
}
#main_contents .grid_content:first-child .entry_image {
	position: absolute;
	left: 20px;
}
 
#main_contents .grid_content .entry_body .entry_description,
#main_contents .grid_content .entry_body .entry_discription {
    margin-left: 0px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
    display:none;
}
 
#main_contents .grid_content:first-child, #main_contents .p_area {
    float: none;
    width: 100%;
    min-height: 110px;
    margin-left: 0;
    margin-right: 0;
    border-left: none;
    border-right: none;
}
 
#main_contents .no_br:first-child br { display: none; }
 
#main_contents .p_area .entry_body {
    height: auto;
    padding-bottom: 15px;
}
#main_contents .p_area .entry_body .fc2blomaga_buy_area {
    display:block;
}
 
#main_contents .grid_content:first-child .entry_image img, #main_contents .p_area .entry_image img {
    max-width: 200px; /* グリッド表示の時の最初の記事のサムネイルの幅の上限 */
    max-height: 200px;
}
 
#main_contents .grid_content:first-child .entry_description,
#main_contents .grid_content:first-child .entry_discription {
    margin-left: 225px; /* ↑の.entry_image imgのmax-widthを変更した場合はこちらも調整して下さい */
    min-height: 228px;
    display:block;
}
#main_contents .grid_content .entry_description img { display:none; }

※7行目の「width: 50%;」を「width: 25%;」に変更（px単位で固定の横幅を指定する事も可能です）
※13行目～45行目を新しく追加し、記事タイトルと日時・コメント部分の文字サイズ等を設定してます。
※65行目～73行目を新しく追加し、記事のサムネイルを中央寄せで表示する設定をしてます。

上記の編集で右の画像のように、一番上の記事以外は横4列に並び、
記事タイトルと日時・コメント部分も文字サイズが小さくなります。
また、サムネイルは中央寄りで表示されます。

記事タイトルを2行だけ表示したい等、高さを固定したい場合は上記スタイルシートの22行目にある「height: auto;」の部分を「height: ○○em;」や「height: ○○px;」と記述して高さを指定すればOK

今回のグリッド表示のカスタマイズはここまで。
ちょっとソースが長くなり過ぎちゃったかな...

---

2.「basic_white」のリスト表示をカスタマイズ

リスト表示では、グリッド表示とは違い記事の内容がある程度分かり易いように、全ての記事それぞれに本文の一部を表示してみました。
（１ページの表示件数はグリッド表示に合わせて13件にしてます）

また、本文の表示については上記の「グリッド表示」での変更が反映されるので、「リスト表示」では少しソースを変更するだけでOK

変更箇所は「テンプレートの設定」の「basic_white スタイルシート編集」内に記述されてる以下の部分です。
※「Ctrl」+「F」で「 /* list_content 」を検索すればOK

/* list_content 
-------------------------------------------------- */
#main_contents .list_content {
	float: none;
}

/* list_content 
-------------------------------------------------- */
#main_contents .list_content {
	float: none;
	height: 295px;
}

#main_contents .list_content .entry_body {
	overflow: hidden;
	height: 127px;
}

※リスト表示での記事の高さと、本文が表示される部分の高さを指定してます。
（リスト表示でのサムネイルの大きさや、文字サイズ等によって数字は調整が必要です）

2-1.リスト表示でのサムネイルのサイズを変更

上記の編集に続き、リスト表示でのサムネイルの大きさや文字の位置など微調整を行います。

変更箇所は「テンプレートの設定」の「basic_white スタイルシート編集」内に記述されてる以下の部分です。 ※「Ctrl」+「F」で「 リスト表示の時のサムネイルの幅の上限 」を検索すればOK

#main_contents .entry_body .entry_image img {
	max-width: 200px; /* リスト表示の時のサムネイルの幅の上限 */
	max-height: 250px;
	border: 4px solid #FFFFFF;
	-webkit-box-shadow: 0px 1px 1px 0px #999999;
	-moz-box-shadow: 0px 1px 1px 0px #999999;
	box-shadow: 0px 1px 1px 0px #999999;
}

#main_contents .entry_body .entry_discription,
#main_contents .entry_body .entry_description {
	margin-left: 238px; /* サムネイル幅を変更した場合はこちらも調整して下さい */
	min-height: 228px;
}

#main_contents .entry_body .entry_image img {
	max-width: 200px; /* リスト表示の時のサムネイルの幅の上限 */
	max-height: 200px;
	border: 4px solid #EFEFEF;
	-webkit-box-shadow: 1px 1px 2px 0px #999999;
	-moz-box-shadow: 1px 1px 2px 0px #999999;
	box-shadow: 1px 1px 2px 0px #999999;
}

#main_contents .entry_body .entry_discription,
#main_contents .entry_body .entry_description {
	margin-left: 225px; /* サムネイル幅を変更した場合はこちらも調整して下さい */
	min-height: 228px;
}
#main_contents .entry_body .entry_description img { display:none; }

※2行目と3行目でサムネイルの縦横のサイズの上限を設定しています。
※4行目でサムネイルに枠線を付けてます。（変更後では微妙に色を変えてグレーっぽくしてます）
※5行目～7行目でサムネイルに少しだけ影を付けてます。（ここも微妙に変更しました）
※12行目は本文が表示される左からの位置を指定してます。
※15行目は新しく追加した部分で、本文中の画像を非表示にしています。

以上で、上記の画像のようにリスト表示でも本文の一部が表示されます。
※調整する数字の部分は、全体の文字サイズや行間（行の高さ）次第で変わります。


それにしても、カスタマイズした内容を記事にするのって案外難しい... ｗ
って事で、今回のカスタマイズはここまで♪