07≪ 2017/08 ≫09
12345678910111213141516171819202122232425262728293031
個別記事の管理2009-08-22 (Sat)
昨日の記事でメニューカラムを右から左へ変更するカスタマイズを掲載しましたが、IE6等でカラム落ちしてしまう不具合が有りましたので修正しました。
「私も~~」というユーザー様は昨日の記事を修正しましたのでご覧下さいませ。m(__)m

今日は、以前コメントにて要望頂いた lace-d2c の記事カラムを大きい写真用に幅広にするカスタマイズです。
テンプレートのサイズは lace-d3c(3カラム)の幅で2カラムです。
方法は簡単。オンマウスで画像を通常サイズで表示するには大き過ぎて見栄えが悪い・オンマウスで表示したくない、という方は是非この方法をご利用下さい。

続きはコチラ↓

先ず、lace-d2c をDLして下さい。
次にテンプレート管理画面の下段枠「スタイルシート編集」を1/5程スクロールした所に
/*レイアウト設定*/という部分が有りますので、その下

#back-w {
background:url(http://blog-imgs-32.fc2.com/s/o/r/sorauta1/border-8.gif);
background-repeat:repeat-y;
background-position: center top;
text-align:center;
margin:0 auto;
}

#container {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top:0px;
margin-bottom:0px;
text-align: left;
}

#main {
float : left;
width:575px;
margin-right:5px;
overflow:hidden;
}

という部分を下記のように変更して下さい。

#back-w {
background:url(http://blog-imgs-32.fc2.com/s/o/r/sorauta1/border-10.gif);
background-repeat:repeat-y;
background-position: center top;
text-align:center;
margin:0 auto;
}

#container {
width: 920px;
margin-left: auto;
margin-right: auto;
margin-top:0px;
margin-bottom:0px;
text-align: left;
}

#main {
float : left;
width:695px;
margin-right:5px;
overflow:hidden;
}


次に、それより少し下へスクロールすると /* ヘッダー部分 */ という箇所が有りますので、その下

#header {
background:#ffffff url(http://blog-imgs-32.fc2.com/s/o/r/sorauta1/re-fu1.jpg) no-repeat center top;
width:560px;
height:270px;
margin-top: 15px;
margin-left: 10px;
text-align: left;
position:relative;
}

という部分を下記のように変更して下さい。

#header {
background:#ffffff url(http://blog-imgs-32.fc2.com/s/o/r/sorauta1/re-fu.jpg) no-repeat center top;
width:690px;
height:270px;
margin-top: 15px;
margin-left:5px;
text-align: left;
position:relative;
}


後は更新ボタンを押せばOKです。
カスタマイズする際には元の複製を作ってバックアップを取っておくと安心です。
Theme : FC2ブログ共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (2) * Trackback : (0) * |

sayu様へ * by aki
sayu様、早速のご利用誠に有難うございます。

ご質問の件ですが、先ずメニュー部分の文字サイズについて。
スタイルシート編集枠を1/3程スクロールさせた所に/*メニュー*/という部分が有ります。
この十数段下に
.menu_body {
margin:5px 0;
padding: 0 5px;
overflow:hidden;
}

という箇所が有りますので、ここを
.menu_body {
margin:5px 0;
padding: 0 5px;
overflow:hidden;
font-size: 10px;
}

のように変更して下さい。続いてその十数段下に
.menu3_body {
margin: 0px;
padding:10px 15px;
overflow:hidden;
}

という箇所が有りますので、ここを
.menu3_body {
margin: 0px;
padding:10px 15px;
overflow:hidden;
font-size: 10px;
}

のように変更して下さい。このスタイルシートで加えているのはfont-size: 10px;という部分です。
この数値を変える事で文字サイズを大きくしたり小さくしたり出来ます。
(この一文が無い場合は全体の基本文字サイズ12pxになります)

次に文字の種類ですが、これは全体という事でしょうか?それともメニューカラム?記事カラム?
文字についてはカラム毎に設定していますので、必要な部分を探して変更して下さい。

(全体の基本文字及びテーブル内)
body, td {
font-family: "MS UI Gothic", Sans-serif;
font-size: 12px;
line-height: 1.7;
color: #4d4d4d;
}

変更後↓
body, td {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 1.7;
color: #4d4d4d;
}


(メニューや記事のタイトル)
.menu_title, .menu3_title, h2 {
font-family:"Georgia" , "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",serif;
font-size: 12px;
font-weight: bold;
}

変更後↓
.menu_title, .menu3_title, h2 {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}


(ブログのタイトル)
h1 {
margin: 30px 30px 0px 30px;
font-weight: bold;
font-size: 24px;
font-family:"Georgia" , "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",serif;
position:relative;
}
h1 a, h1 a:visited, h1 a:hover {
font-weight: bold;
font-size: 24px;
font-family:"Georgia" , "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",serif;
text-decoration: none;
color: #ac6837;
}

変更後↓
h1 {
margin: 30px 30px 0px 30px;
font-weight: bold;
font-size: 24px;
font-family: Verdana, Arial, sans-serif;
position:relative;
}
h1 a, h1 a:visited, h1 a:hover {
font-weight: bold;
font-size: 24px;
font-family: Verdana, Arial, sans-serif;
text-decoration: none;
color: #ac6837;
}


(全記事一覧表示時)
/* 全記事表示 */
.entry_all {
margin: 10px 5px 10px 3px;
padding: 10px 15px 5px 15px;
font: 12px 'MS UI Gothic', sans-serif;
line-height: 1.5;
color: #4d4d4d;
border: 1px dotted #cccccc;
}

変更後↓
/* 全記事表示 */
.entry_all {
margin: 10px 5px 10px 3px;
padding: 10px 15px 5px 15px;
font-family: Verdana, Arial, sans-serif;
font-size:12px;
line-height: 1.5;
color: #4d4d4d;
border: 1px dotted #cccccc;
}


以上、文字を変更する箇所にコピペして下さい。(全部の場合は全部です^^;)
補足ですが、全てを適用すると投稿日が多いと横カレンダーがサイズ一杯になってしまい表示できなくなる事が有ります。
その場合は
/* YokoCalender */
.yoko_calender {
text-align:center;
font-size:12px;
color:#4d4d4d;
padding: 0px 0;
margin:10px auto; /* 左右マージンを自動算出して中央に配置 */
}

という部分の font-size:12px;font-size:10px;にして下さい。


次に、記事タイトル欄と日付を一緒にするカスタマイズです。
HTML編集枠を1/3程スクロールさせた所に
<!--エントリー-->
<!--topentry-->
<div class="contents">
<div class="contents_title">
<h2><a id="<%topentry_no>" name="<%topentry_no>" href="<%topentry_link>"><%topentry_title></a></h2>
</div>

<div class="entry_state"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>) </div>


という箇所が有るので、ここを

<!--エントリー-->
<!--topentry-->
<div class="contents">
<div class="contents_title">
<TABLE class="table1">
<TBODY>
<TR>
<TD class="td1"><h2><a id="<%topentry_no>" name="<%topentry_no>" href="<%topentry_link>"><%topentry_title></a></h2></TD>
<TD class="td2"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>) </TD>
</TR>
</TBODY>
</TABLE>
</div>


というように変更し、次にスタイルシート編集枠内の一番下にでも下記を追加して下さい。

.table1{
width:100%;
}
.td1{
font-family: Verdana, Arial, sans-serif;
text-align:left;
vertical-align : top;
}
.td2{
width:150px;
font-family: Verdana, Arial, sans-serif;
font-weight: normal;
text-align:right;
vertical-align : top;
}


取り急ぎ色々掲載しましたが、ご不明な点が有りましたらまたご連絡下さい。
テンプレートのカスタマイズはバックアップを取ってから行って下さいね。

* by sayu
以前コメントにて質問させて頂いたsayuです。

詳しく教えて頂いたおかげで、私でも簡単にカスタマイズ出来ました。
お忙しい中ありがとうございます。


ところで、また何点か質問があるのですが・・・。

まず文字について。
プラグイン部分(メニュー部分?)のタイトル以外の文字を小さくすることは可能でしょうか?
色々試してみたのですが、記事の文字も小さくなってしまいました。
また、文字の種類を変えることは可能なのでしょうか。
こちらも書き換えてみたのですが、いまいち変更できませんでした。
ちなみに、「Verdana」という文字に変更したいです。

あと、記事タイトルの欄について。(これは出来ればで構いません)
記事のタイトルと日付の行を揃えたいと思うのですが、可能なのでしょうか。
背景を白に近い色に変えたので、少し広さが気になっています。

それでは用件のみになりますが、この辺で失礼させて頂きます。

コメント







管理者にだけ表示を許可する