Home > FC2ブログ > basic_white > basic_white テンプレート 基本的なデザインのカスタマイズ・変更

basic_white テンプレート 基本的なデザインのカスタマイズ・変更

  • FC2公式テンプレート
  • 名前 : basic_white
  • 作者 : FC2
  • 最終更新日 : 2013/10/31
  • ★★★★☆

 トップページなどの記事一覧ページのレイアウトを変更できるシンプルなテンプレート。文字サイズや横幅が大きいので小さい字が好みな人はCSSで変更しよう。読み込む際に記事部分がフェードイン表示される。


文字サイズの変更

 変更する場所はスタイルシートの最初の方にある == Element == 部分です。

body{
 width:100%;
 text-align:center;
 font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
 line-height: 1.4;
 font-size: small !important; /* IE7 */
 font-size: 82%; /* IE6 */

 word-break:break-all;
}
/* Modern browser */
html>/**/body {font-size:13px;}

 上記を以下に変更します。Modern browserは削除。

body{
 width:100%;
 text-align:center;
 font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
 line-height: 1.4;
 font-size: 82%;
 word-break:break-all;
}

 これで全体の文字サイズを変更したい時は「82%」の数字を一つ変えるだけで済みます。

●文字を小さくする
 font-size: 74%;

●文字を大きくする
 font-size: 90%;

 ブログタイトルなどの見出しの文字サイズは == Headline == 部分で変更できます。

●ブログのタイトル
h1{font-size:276%; font-weight: normal;} /* 36px */

●記事のタイトル
h2,
h3{font-size:124%; font-weight: normal;} /* 16px */

●「コメントの投稿」コメントタイトルなどのサブタイトル
h4{font-size:108%; font-weight: normal;} /* 14px */

●未使用(変更の必要なし)
h5,
h6{font-size:100%; font-weight: normal;} /* 13px */

●変更例
h1{font-size:200%; font-weight: normal;} /* 36px */
h2,
h3{font-size:115%; font-weight: normal;} /* 16px */
h4{font-size:100%; font-weight: normal;} /* 14px */
h5,
h6{font-size:100%; font-weight: normal;} /* 13px */

 その他の文字サイズは == Font Size == 部分で変更できます。

#header p /* ブログ紹介文 */ { font-size: 158%; /* 21px */ }
#headermenu /* 「記事一覧」の文字 */ { font-size: 139%; /* 18px */ }
#main_contents /* 記事本文等 */ { font-size:124%; /* 16px */ }
#main_contents .entry_date /* 記事日付 */ ,
#main_contents .entry_state /* CM数,TB数,カテゴリ等 */ { font-size: 85%; /* 14px */ }
#main_contents .entry_body .entry_more /* 「続きを読む」の文字 */ { font-size: 108%; /* 17px */ }
#main_contents .sub_content .sub_footer /* CM,TBのフッタ */ { font-size: 85%; /* 14px */ }
#sidemenu /* サイドメニュー(プラグイン) */ { font-size:116%; /* 15px */ }
#sidemenu h3 /* サイドメニュー(プラグイン)タイトル */ { font-size: 131%; /* 20px */ }
#footer /* フッター */ { font-size:124%; /* 16px */ }

 とりあえずブログタイトルの直後にあるブログ紹介文は大きすぎるので小さくしておくといいでしょう。

#header p /* ブログ紹介文 */ { font-size: 120%; /* 21px */ }

行間の変更

 変更する場所はスタイルシートの最初の方にある == Element == 部分です。

body{
 width:100%;
 text-align:center;
 font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
 line-height: 1.4;
 font-size: small !important; /* IE7 */
 font-size: 82%; /* IE6 */
 word-break:break-all;
}

 line-height の数値を増やせば行間が広がり、減らせば狭まります。

●行間を広くする
 line-height: 1.8;

 個別に行間を指定する時は以下をスタイルシートに追加します。

.entry_body { /* 記事本文の行間 */
 line-height: 1.6;
}
.plg_body { /* サイドバー本文の行間 */
 line-height: 1.6;
}

フォントの変更

 変更する場所はスタイルシートの最初の方にある == Element == 部分です。

body{
 width:100%;
 text-align:center;
 font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
 line-height: 1.4;
 font-size: small !important; /* IE7 */
 font-size: 82%; /* IE6 */
 word-break:break-all;
}

 font-family に使いたいフォントを指定します。左端の指定が優先されます。

メイリオフォントを使いたくない

 「"メイリオ", Meiryo,」を削除します。

font-family: Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;

 さらに英数字のアンチエイリアンス(ぼやけたなめらかな字)が気に入らない時は「Verdana, Helvetica,」を後ろに移動させます。

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", Verdana, Helvetica, sans-serif;


コメントなどの入力フォームのテキストにもメイリオフォントを使う

 スタイルシートに以下を追加します。

input, textarea, select {
 font-family: "メイリオ", Meiryo,Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
}

 フォームにメイリオを指定すると横幅が広くなるのでHTMLにあるinput要素のsizeやtextarea要素のcolsを小さくするといいでしょう。

<input id="name" type="text" name="comment[name]" size="15" value="<%cookie_name>" />

<textarea id="comment" cols="30" rows="5" name="comment[body]"></textarea>

文字色の変更

 変更する場所はスタイルシートの最初の方にある == Font Color == 部分です。

body { color: #444444; }

#header h1 a /* ブログタイトル */ { color: #333333; }

#headermenu .archives a /* 「記事一覧」のリンク */ ,
#main_contents h2 a /* 記事タイトル */ ,
#main_contents .entry_body .entry_more a /* 「続きを読む」のリンク */
{ color: #333333; }

#main_contents blockquote /* 引用部分 */ ,
#main_contents .entry_date /* 記事の日付 */ ,
#main_contents .content .entry_state li /* カテゴリ等 */ ,
#main_contents .content .entry_state li a /* CM数,TB数等 */ ,
#main_contents .sub_content .sub_footer /* CM,TBのフッタ */ ,
#main_contents .page_navi a /* ページナビ */
{ color: #999999; }

#main_contents .list_body li /* 記事一覧ページ */ ,
{ color: #666666; }

 記事本文の文字色は最初の body で指定できますが、サイドバーの本文の色も一緒に変わります。

body { color: #000000; }

 記事本文、サイドバー本文などの色を個別に変更する場合はスタイルシートに以下を追加します。

.entry_body { color: #000000; } /* 記事本文 */
.sidemenu_content { color: #000000; } /* サイドバー本文 */
.sidemenu_content .plg_header { color: #000000; } /* サイドバー見出し */
.footer_content { color: #000000; } /* フッター本文 */
.footer_content .plg_header { color: #000000; } /* フッター見出し */

 個別記事の前後の記事タイトルリンク色を変更する時は次のコードを追加・変更します。場所はCtrl+Fキーで『page_navi a:hover』を検索。「:hover」の色はカーソルを重ねた時の色です。

#main_contents .page_navi a {
  display: block;
  overflow: hidden;
  height: 18px;
  width: 123px;
  padding-top: 45px;
  padding-bottom: 60px;
  background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/page_navi.png) no-repeat 0 0;
  color: #3399cc;
}
#main_contents .page_navi a:hover { color: #8ADAE6; }

 色が変わらない時は「;」の前に「 !important」をつけてください。

color: #3399cc !important;


リンクの色を変更

 変更する場所はスタイルシートの最初の方にある == Hyper text == 部分です。

a:link,
a:visited {
 color: #5DA7D1; /* リンク、訪問済みリンクの文字色 */
}
a:focus,
a:hover,
a:active {
 color: #8ADAE6; /* リンクにポインタをのせた時の文字色 */
}

 値を変更するとすべてのリンク色が変わります。

color: #0033ff;

 記事本文、サイドバー本文などのリンク色を個別に変更する場合はスタイルシートに以下を追加します。

.entry_body a:link,
.entry_body a:visited {
 color: #5DA7D1; /* 記事本文リンク色 */
}
.entry_body a:focus,
.entry_body a:hover,
.entry_body a:active {
 color: #8ADAE6; /* 記事本文リンク色ポインタのせた時 */
}
.sidemenu_content a:link,
.sidemenu_content a:visited {
 color: #5DA7D1; /* サイドバー本文リンク色 */
}
.sidemenu_content a:focus,
.sidemenu_content a:hover,
.sidemenu_content a:active {
 color: #8ADAE6; /* サイドバー本文リンク色ポインタのせた時 */
}
.footer_content a:link,
.footer_content a:visited {
 color: #5DA7D1; /* フッター本文リンク色 */
}
.footer_content a:focus,
.footer_content a:hover,
.footer_content a:active {
 color: #8ADAE6; /* フッター本文リンク色ポインタのせた時 */
}

記事タイトル背景色の変更

記事タイトル全体

 以下をスタイルシートに追加します。「#f3f3f3」の部分を「#ddeeff」「#eeeeee」などに変更すると色が変わります。

/* 記事タイトル背景色 */
#main #main_contents .entry_header {
  background-color: #f3f3f3;
}
/* END*/

 タイトル左の印も消す時は以下。

/* 記事タイトル背景色 */
#main #main_contents .entry_header {
  background: #f3f3f3;
  padding-left: 17px;
}
/* END*/


テキストの背景のみ

 以下をスタイルシートに追加します。

/* 記事タイトル背景色 */
#main #main_contents .entry_header a {
  background-color: #f3f3f3;
  width: auto;
  margin-right: 7px;
  padding: 1px 2px;
}
#main #main_contents .entry_header {
  padding: 5px 0 5px 32px;
  background-position: 20px 5px;
}
#main #main_contents .p_area .entry_header {height: auto; white-space: normal;}
/* END*/

 タイトル左の印も消す時は以下。

/* 記事タイトル背景色 */
#main #main_contents .entry_header a {
  background-color: #f3f3f3;
  width: auto;
  padding: 1px 10px;
}
#main #main_contents .entry_header {
  padding: 5px 5px 5px 5px;
  background: none;
}
#main #main_contents .p_area .entry_header {height: auto; white-space: normal;}
/* END*/

 テキストの背景のみの場合はHTMLのentry_header内にある「<!--not_permanent_area-->」と「<!--/not_permanent_area-->」を削除します。

<h2 class="entry_header"><!--not_permanent_area--><a href="<%topentry_link>" title="<%template_abs_link>"><!--/not_permanent_area--><%topentry_title><!--not_permanent_area--></a><!--/not_permanent_area--></h2>
↓削除
<h2 class="entry_header"><a href="<%topentry_link>" title="<%template_abs_link>"><%topentry_title></a></h2>

メインカラムと右サイドバーの間隔を調整する

 変更場所はスタイルシートです。Ctrl+Fキーで検索フォームに「番目の数字」や「サイドメニューの幅」を入れると見つかります。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -340px;
  text-align: left;
}
#main_contents {
  margin: -36px 340px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}
#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 320px; /* サイドメニューの幅 */
  padding-top: 35px;
}

 この「340」の数値を「330」に減らすと間隔が「10px」狭まります。逆に増やせば広がります。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 35px;
  margin-right: -330px;
  text-align: left;
}
#main_contents {
  margin: -36px 330px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 35px;
}

 数値を小さくするほど間隔は狭くなりますが、数値には必ずサイドメニューの幅よりも大きな値を指定してください。(デフォルトでは「320」より大きな値を入れる)

 サイドメニューの幅を「300」に減らせば、数値に「310」を入れることが可能です。

横幅の変更

 変更する場所はスタイルシートの最初の方にある「 == Content Width == 」と「 == Layout == 」「 == Header == 」部分です。

 まず2ヶ所あるwidth:expressionの行を「_width: 860px;」に変更します。expressionはIE6以下の古いブラウザのための指定ですが、負荷が大きいので削除して幅を固定にします。古いブラウザ=低スペックPCであることがほとんどです。元々このテンプレートはIE6をサポートしていないようなので、あってもなくても崩れて表示されます。

width:expression(document.body.clientWidth < 802? "800px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
↓変更
_width: 860px;


 スタイルシートにある次の強調された数値を増減させると幅が変わります。見つからない場合はCtrl+Fキーで「800px」「340px」などを検索してみてください。
 以下のボタンを押すとサンプルの値に切り替わります。

もっと狭く 狭く 初期

#container { min-width: 800px; }
#headermenu , #wrap ,
#footer_plg , #footer_inner {
 min-width: 800px; /* 最小の横幅A */
 max-width: 1200px; /* 最大の横幅A */
 width: 1100px;
 _width: 860px;
}

#main {
 float: left;
 position: relative;
 width: 100%;
 margin-top: 35px;
 margin-right: -340px; /* サイドメニューの幅+20のマイナス */
 text-align: left;
}
#main_contents {
 margin: -36px 340px 0 0; /* サイドメニューの幅+20 */
 padding-top: 35px;
}
#sidemenu {
 float: right;
 position:relative;
 overflow: hidden;
 width: 320px; /* サイドメニューの幅 */
 padding-top: 35px;
}

#header h1,
#header p {
 min-width: 800px; /* 最小の横幅A */
 max-width: 1200px; /* 最大の横幅A */
 width: 1100px;
 _width: 860px;
 margin: 0 auto;
}

 幅を固定にする時はmin-widthとmax-widthを削除して「width:○○px;」を指定します。

#headermenu , #wrap ,
#footer_plg , #footer_inner {
 width: 1000px;
 _width: 860px;
}

#header h1,
#header p {
 width: 1000px;
 _width: 860px;
 margin: 0 auto;
}

続きを読むのテキストを変更

 変更する場所はHTMLです。Ctrl+Fキーで検索フォームに「<%template_extend>」を入れると見つかります。

<a href="<%topentry_link>" title="<%template_abs_link>"><%template_extend></a>

 この部分を「Read more」「続きを見る」など別のテキストに変更します。

<a href="<%topentry_link>" title="<%template_abs_link>">Read more</a>

時刻を消す

 変更する場所はHTMLです。Ctrl+Fキーで検索フォームに「_hour」を入れると見つかります。全部で4ヶ所あります。

●記事部分:以下を削除
<li><%topentry_hour>:<%topentry_minute></li>

●検索ページ:以下の強調部分を削除
<li><%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_hour>:<%topentry_minute>)

●コメント:以下の強調部分を削除
<li><%comment_year>/<%comment_month>/<%comment_day>(<%comment_hour>:<%comment_minute>)</li>

●トラックバック:以下の強調部分を削除
<li><%tb_year>/<%tb_month>/<%tb_day>(<%tb_hour>:<%tb_minute>)</li>

日付に曜日を入れる

 変更する場所はHTMLです。Ctrl+Fキーで検索フォームに「_day」を入れると見つかります。全部で5ヶ所あります。

●記事部分:以下の強調部分を追加
<li><%topentry_year>/<%topentry_month>/<%topentry_day> (<%topentry_youbi>)</li>

●記事一覧:以下の強調部分を追加
<li><%titlelist_year>/<%titlelist_month>/<%titlelist_day> (<%titlelist_youbi>)

●検索ページ:以下の強調部分を追加(時刻のカッコは見栄え上、削除)
<li><%topentry_year>/<%topentry_month>/<%topentry_day> (<%topentry_youbi>) <%topentry_hour>:<%topentry_minute> :

●コメント:以下の強調部分を追加(時刻のカッコは見栄え上、削除)
<li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute></li>

●トラックバック:以下の強調部分を追加(時刻のカッコは見栄え上、削除)
<li><%tb_year>/<%tb_month>/<%tb_day> (<%tb_youbi>) <%tb_hour>:<%tb_minute></li>

 日本語(月火水木金土日)で表示したい時は「youbi」の前に「wa」を付けます。例えば「<%topentry_youbi>」なら「<%topentry_wayoubi>」、「<%comment_youbi>」なら「<%comment_wayoubi>」とします。

ブログタイトルを画像に

タイトルを画像に入れ替える方法

 変更する場所はHTMLです。最初の方にあります。Ctrl+Fキーで検索フォームに「h1」を入れると見つかります。

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

 間の「<%blog_name>」を以下に変更します。画像アドレスにはタイトル画像のファイルアドレスを指定します。

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src="画像アドレス" alt="<%blog_name>" /></a></h1>

 スタイルシートに以下を追加して画像の位置などを調整します。

body #header h1 {
 background: none;
 margin-bottom: 20px;
 padding: 0px 0px 0px 0px; /* 上右下左の余白 */
}

タイトルに背景画像を入れる方法

 スタイルシートに以下を追加して余白の上下を調整します。画像アドレスには背景画像のファイルアドレスを指定します。

body #header h1 {
 background: url(画像アドレス) no-repeat;
 margin-bottom: 20px;
 padding-left: 15px 0 15px 0; /* 上右下左の余白 */
 text-indent: 15px; /* タイトル文字左の余白 */
}

今まで動いていたjQueryスクリプトが動かない時

 変更する場所はHTMLです。最初の方にあるスクプリトの「jQuery.noConflict();」が原因かもしれません。その場合は頭に「//」を追加すれば動きます。

<script type="text/javascript">

 //jQuery.noConflict();

JavaScriptオフでも本文を表示させる

 このテンプレートは閲覧する側の環境がJavaScriptオフだと記事本文は表示されません。

 変更する場所はHTMLです。Ctrl+Fキーで検索フォームに「main_contents」を入れると見つかります。

<div id="main_contents" style="display: none">

↓style="display: none"を削除

<div id="main_contents">

 これで見えるようになります。

 上記を削除した上でメイン記事部分のフェードインの演出表示(消えて段々表示される)を解除したい時は以下の部分を削除してください。HTMLの最初の方にあります。Ctrl+Fキーで検索フォームに「.show()」を入れると見つかります。二箇所あるので両方とも削除します。

jQuery( LEFT_COLUMN_ID )
  .css( "opacity", "0" )
  .show()
  .fadeTo( "slow", 1, function(){ layoutFlag = true; } );

 そして削除した部分のすぐ後にある「equalizeBoxHeight();」の直後に「 layoutFlag = true;」を追加してください。これも二箇所あるので両方に追加します。

equalizeBoxHeight(); layoutFlag = true;

 以上でフェードイン表示がされなくなります。

関連記事
スポンサー リンク
コメント
#7 : No title
右上にあるグリッドとリストの切り替えできる部分を消したい場合、
どのようにすればいいんでしょうか?
個人的にはグリッドの方を残したいと思ってます
#8 : 切り替えスイッチ削除グリッド固定
コンバンハ。
HTMLの最初の方(4分の1くらいスクロールさせた所)にあるスクリプトの記述

if ( !checkCookieValue( layout ) ) {
layout = DEFAULT_LAYOUT;
}

上記の直後に「layout = "glid";」を追加(間にスペースや改行などを無理に入れる必要はなし)

if ( !checkCookieValue( layout ) ) {
layout = DEFAULT_LAYOUT;
}
layout = "glid";

スタイルシートに次の1行を追加。
.switch {display: none;}

これでグリッド固定になります。
元に戻したい時は追加した部分を削除すればOKです。
#9 : No title
ありがとうございます!無事できましたヽ(=´▽`=)ノ
結構簡単だったんでビックリしました

あと続けて質問しちゃって恐縮なんですが、
このブログのようにセンターカラムと右サイドバーの距離を縮めたいんですが、
それもどうやったらいいのか教えてはもらえないでしょうか?
basic_whiteって間間に微妙に距離があって見づらいのが気になってて…
#10 : No title
教えていただきたいことがございます
basic_whiteの場合、どうしても記事一覧の状態で、サムネイル画像の右側に本文が表示されるのですが、その本文をサムネイル画像の下に持っていくことは可能でしょうか?

後、記事を毎度サムネイル付で紹介していこうと思っているのですが、サムネイル画像をクリックしてもブログ記事本文を開ける様にしたいです。
#12 : センターカラムと右サイドバーの距離を縮める
コンニチハ。
スタイルシートの最初の方(Layout…スクロール5分の1くらいの所)にある340の数字を330などに変更すると狭まります。
Ctrl+Fキーで検索『2番目の数字』

#main_contents {
margin: -36px 340px 0 0; /* 2番目の数字(右側)はsidemenuの~ */
padding-top: 35px;
}
↓変更後
margin: -36px 330px 0 0;

数値はその次にあるサイドメニューの幅(320)よりも大きい値を指定します。
width: 320px; /* サイドメニューの幅 */
サイドメニューを狭めた場合はその減らした数値分だけ2番目の数値も減らして調整してやります。
#13 : 画像の下に記事本文冒頭
コンバンハ。
このテンプレートは高さを固定にして左右の記事を揃えているので、画像の下に冒頭文を移動させると画像の縦横比によってははみ出ることがあります。
記事の最初の画像が横長であれば問題ないとは思いますが、はみ出る時は高さを適当に増やして調整してください。

ただ単に画像後に改行する時は以下をスタイルシートに追加。

/* 画像後に改行 */
body #main_contents .grid_content {height: 340px;} /* ブロックの高さ */
body #main_contents .list_content {height: auto !important;}
.grid_content .entry_body {
height: auto !important;
max-height: 300px; !important; /* ブロック内の高さ */
overflow: hidden;
}
.grid_content .entry_discription {
height:4.1em !important; /* 記事冒頭の高さ3行=4.1em */
overflow:hidden;
}
.grid_content .entry_image {left: 0 !important; position: static !important;}
.grid_content .entry_discription {
margin: 15px 0 0px !important;
min-height:0 !important;
}
/* --- */

リスト表示の時は右側のスペースが広いので改行しません。
画像をリンクにする時はHTMLの<%topentry_image>を以下に変更するとリンクが付きます。

<a href="<%topentry_link>"><%topentry_image></a>

変更場所の検索はCtrl+Fキーで『<%topentry_image>』 を入力
#14 : No title
「センターカラムと右サイドバーの距離を縮める」件の者ですが、
大変わかり易い説明ありがとうございましたm(_ _)m
何の戸惑いもなく変更出来ました

需要があるテンプレの割にあまり説明してくれてるブログがなかったので、
大変助かりましたです
#17 : 便乗質問
こんにちわ。いろいろと勉強にさせてもらってます。
記事を拝見して横幅のイジり方はだいたい理解できたんですが
『リスト表示』をしてる場合、記事一覧時に表示されてる記事の
縦の高さはどこをイジればいいんでしょう?
「/* グリッド表示の時の記事の高さ */」とかは見つけられたんですが…

>サムネイル  冒頭文
>サムネイル  冒頭文
>         続きを読む
通常だと大体こんな感じになってると思うんですが…

>サムネイル  冒頭文
>サムネイル  続きを読む
…みたいな感じにちょうどサムネイルの高さにほぼ収めたいんですよね。
要するにサムネイルの部分を少し大きくして
横の冒頭文の高さを少し低くして表示される文章量を少なくしたい。

「続きを読む」の左の部分がものすごく真っ白な空間ができてて
個人的にバランスの悪さを感じてて解消したいんです。
#19 : リスト表示の高さ調整
コンニチハ。

#14
解決したようで良かったです。
返信は遅れることもありますが適当に続けていこうと思います。


#17
URL先にリスト表示のレイアウト調整・変更の記事を投稿したのでそちらをご参考ください。
リスト表示の時だけ、絶対配置と最小の高さ(min-height)を解除すれば上手く配置できると思います。
崩れなどがあれば向こうの記事にてご報告ください。
#21 : 感謝感謝感謝
#19
閲覧させていただきました。
まさに自分が望んでいた通りの情報で
思わず小躍りしてしまいそうです!
しかもめちゃくちゃ便利で簡便という。
わざわざそんな風にしていただき恐縮です。
本当勇気を出してコメントしてよかったです。
もし崩れなどがあれば報告したいと思います。

あらためてありがとうございました!
#23 : 記事下部分の見切れ
#19
今日も更新お疲れ様ですm(_ _)m
mayさんのおかげで自分のブログも大分カタチになりつつあります

またさっそく相談なんですが、
個別記事の下部分にzenbackなどを表示させてたのが、
何故か見切れて全く見えなくなってるんです
おそらく取得自体はしてると思うんですが、
拍手のバナーも見えなくて…解決法などご存知でしょうか?

最近、そういえば記事下のコミュニティやカテゴリ部分をイジりました
コミュニティ部分を消して、そこにユーザータグを追加したんですが、
もしかしたらコレが原因なんでしょうか…

あとこの部分についてもお聞きしたいんですが、
タグの追加自体はできたんですが、ちょうど一行文ズレるんです
>    カテゴリ◯◯|
>  ユーザータグ△△|
新着記事に「NEW!」の追加でも、これもタイトルと一行ズレちゃって…
これも上手いキレイなやり方があれば教えていただきたいですm(_ _)m
#24 : 元匿名
遅ればせながら名前を名乗ってみます。

右カラムにプラグイン3を持ってきて、それは個別記事以外で表示、
そしてプラグイン1を個別記事にだけ表示するようにしたんですが、
何故かプラグイン1だけが下の方にどっか消えちゃうんです…

おそらく幅的なものが合ってない気がするんですが、
これも1だけ異なる動作をする理由がイマイチ分からなくて…
#25 : No title
#23のことで説明し忘れてました

昨日までは純粋な意味での記事下ではなく、
カテゴリとかの部分と記事本文の間に
zenbackとかを置いてる設定にしてました

そして今日、おそらく純粋な意味での記事下に移動させてみたら、
一応zenbackとかは表示できましたが、
今度はコメント欄が消えてしまいました
もう何がなんだかチンプンカンプンでして(T_T)
#26 : 崩れ
コンバンハ。
<!-- X:E ZenBackWidget -->の後にある</div>2つのうちのどちらかを削除。

スタイルシートに以下を追加(1行目がなくてもいい場合は2行目のみ)
body #main_contents .entry_footer {position:static;}
.entry_state div.tag_list{display:inline;}

たぶん上記で基本的なくずれは直ると思います。

こちらで紹介しているカスタマイズ以外の、例えばZenBack設置などご自身でカスタマイズした部分については確認に手間がかかるため、ご自身でカスタマイズする前にバックアップを取ってタグの閉じ忘れなどをチェックすることをオススメします。
そのチェックまでをサポートするのはさすがに切りが無いのでご了承ください。
(こちらで確認した後に修正が加えられたりすると確認の手間が随時増えていきかねないので…)
#27 : No title
#26
こんばんわ
無事なんとか解決しました
ありがとうございました!

divタグというのを閉じないと崩れてしまうんですね
勉強になりました
ものすごく基本的なミスだったようでお恥ずかしい限りです
連投+色々とお手間を取らせてすいませんでしたm(_ _)m
#28 : No title
しつこく質問すいません
新着記事タイトルの先頭に「NEW」という文字を表示するにはどうすればいいんでしょうか?
#30 : 記事タイトル先頭
コンバンハ。
記事タイトルを挟んでいる<a href=~がwidth100%のblock要素になっており
使用スクリプトはその場所に書き出す形式なので
<%topentry_title>の直前にスクリプトの記述を置くと表示されると思います。

スクリプト<%topentry_title>
#32 : No title
またまた多謝m(_ _)m
無事タイトル横にNEWを持ってくることが出来ました!
#35 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#36 : カテゴリページの表示エラー
いつもお世話になっております。

このテンプレートをずっと使用させていただいているのですが、
最近 カテゴリのページに行くと、
1番上に大きく表示される最新記事が真っ白になって表示されません。

タイトルや本文が表示されず 真っ白の状態で、
本文の欄に 「 // : 」 とだけ出てしまいます。

その下の2記事目から4記事目は、ちゃんと通常どおり表示されます。
1番上の1記事目だけがこのような表示になります。


ちなみに、1記事目の真っ白になっている
タイトル欄をクリックしてみると、トップページに行ってしまいます…


テンプレートで特に何かをいじったわけでもないのですが、
どの部分を直せば通常どおり1記事目が表示されるでしょうか?

すみませんが、よろしくお願いします。

#38 : Re: カテゴリページの表示エラー
コンニチハ。
FC2公式から同じ現象と思われる不具合が解消したとのアナウンスがなされているようです。
現在も不具合が発生している場合はカテゴリ編集ページの[修正]ボタンか環境設定のブログの設定ページにある[更新]ボタンをクリックしてサーバ側の設定を更新してみてください。
#40 : No title
mayさま

早速ご回答をいただき、ありがとうございます。

カテゴリ編集ページで修正ボタンを押してみたら、
エラーが解消されました!

ありがとうございます。本当に助かりました。
#42 : タイトルの背景全体に写真
#35
コンニチハ。
URL先にヘッダーに背景画像を表示する方法を投稿したのでそちらをご参考ください。
不具合などがございましたらあちらの記事にてご連絡くださいませ。
#115 : No title
ヘッダー下に横長のバナー画像を貼りたいんですが、
「Home > シンプル > basic_white テンプレート…」と、
ブログ記事タイトルの間にできるだけ隙間なく貼りたい場合、
どうすればいいんでしょうか?
#119 : No title
「続きを読む」のリンクを左に寄せることはできますか?
サムネイルの真下に表示させて、できれば右側に表示させてるブログ拍手と一列で表示させたいんですが、どうすればいいでしょうか?
#128 : ヘッダー下にバナー&続きを読む左寄せ
コンバンハ。

#115 : ヘッダー下に横長のバナー
「ヘッダーとメイン記事の間のスペースにバナーなどを設置」
「ヘッダーの下に横幅の広いバナーなどを設置」
の2つの記事を投稿致しましたのでご参考ください。

#119 : 「続きを読む」のリンクを左寄せ
#main_contents .entry_body .entry_more {
の「right: 20px;」を「left: 20px;」に変更すると左寄せになります。
一列表示については、右側に表示させてるブログ拍手がどのようなHTMLとCSSで配置されているかわからないため、申し訳ございませんが回答致しかねます。
#129 : No title
コンバンワ。

タイトル左の印の色を変更するにはどうしたらよいでしょうか?

「記事タイトルの背景色変更」について読ませていただきましたが、背景色ではなく、記事タイトルの左側にあるネズミ色の印?の色を変えたいと思ってます。
この印の色を赤とか青とかに変更するにはどうしたらよいでしょうか?

お手すきのときにでもご回答いただければ幸いです。
よろしくお願いいたします。
#152 : タイトル左のマーク変更
コンバンハ。
URL先にタイトル左のアイコン画像の色を変更する方法を投稿したのでそちらをご参考くださいませ。
#153 : No title
mayさんのブログのコメント投稿欄のように、
スッキリさせるにはどうしたらいいでしょうか?
具体的には本文を記入する直前のアイコンを消せたらいいなと♪
#156 : No title
こんにちは。

質問です。

IEで表示した時の話なのですが、
トップページの各記事にあるコメント投稿の部分をクリックした際に、
コメント投稿欄ではなく、その記事が頭から表示されてしまいます。

試しに、Chromeで表示した際には、直接コメント欄に飛べるのですが、
IEでも、コメント投稿欄に直接飛べる方法はないのでしょうか。


#158 : No title
テンプレートを利用させて頂いている者です、ひとつ質問が・・・。

リスト形式で固定表示にしているのですが、
記事一覧で見た時に、一番上の記事はサムネが表示されているのですが、
2つ目以降がサムネが表示されず、本文しか表示されません。
宜しければ全部の記事をサムネ表示する方法を教えていただきたいです。
#159 : No title

すいません、上の者ですがもうひとつ質問を

このブログの様に、一覧表示時にサムネイルだけを表示させ、
本文を表示しないようにするにはどうすれば良いでしょうか?

#160 : コメントフォーム&サムネイル
コンバンハ。

#153 : コメント投稿欄のカスタマイズ
コメントフォームの表示項目とデザインを変更する記事をリンク先URLに投稿したのでご参考ください。
記事に書かれている「装飾文字・絵文字アイコンを削除する」の部分のHTMLコードを削除すればアイコンは非表示になります。

#158-159 : サムネイル
FC2ブログで使用できるサムネイルを表示する変数には制限があり、表示される画像は「記事本文部分(追記部分の画像は対象外)に投稿されたFC2ブログにアップロードした画像」が対象となります。
ですので記事本文部分に画像がない場合やFC2ブログ以外にアップロードされた画像はサムネイルとしては表示されません。

スタイルシートに以下のコードを追加すれば冒頭文は非表示になります。
/* リスト固定冒頭文非表示 */
#main_contents .entry_body .entry_discription {display: none;}
#main_contents .list_content .entry_body .entry_image {position: static !important;}

あるいは以下の1行のみ追加してください。
#main_contents .entry_body .entry_discription {visibility: hidden;}
#163 : No title
御解答感謝します、上記の件は解消出来ました。

続けてで申し訳ないのですが、
LivedoorのRSSを使用しているのですが、
表示の際に文字が小さく見えにくい状態になっています。
RSS部分のフォント設定はどのようにすれば良いか教えていただきたいです。
RSS関連の記事が無かったので、この記事で質問させて頂きました。
#164 : IEのページ表示&LivedoorのRSS
コンバンハ。

#156 : IEのページ表示
記事タイトルすぐ右下にある「CM:10」のようなコメントリンクをクリックした際に「コメントの投稿」の部分までスクロールせずに記事ページの先頭が表示されてしまうということでしょうか?

IE11で「CM:●」をクリックしてジャンプしてみましたがコメントの投稿部分までページは正常にスクロールされているようです。
main_contentsのdisplay:none;を外して表示の際のフェードインもしないようにしているので移動は行われるものと思われますが、PC環境によってはページ表示の処理が追いつかず、スクロールできない場合があるのかもしれません。
現象が確認できないので動作するかはわかりませんが、以下のコードをテンプレートHTML最下部付近にある </body> の直前に貼り付けてみてください。
IE8以上でのみページ読み込み後にコメント投稿部分まで強制的にスクロールします。

<!--permanent_area--><script type="text/javascript">
function iecmscroll(){document.getElementById(location.hash.slice(1)).scrollIntoView();}
if(document.documentMode&&/^#(cm|tb)$/.test(location.hash)){setTimeout(function(){iecmscroll();},100);}
</script><!--/permanent_area-->

スクロールしない時は上記コードの最後の方にある「100」の数値を「500」や「2000」などに増やしてみてください。逆にスクロールがワンテンポ遅れる場合は減らしてください。効果が無い場合は削除してください。


#163 : LivedoorのRSS
LivedoorのRSSというのはブログパーツのことでしょうか?
申し訳ございませんが、LivedoorのRSSはFC2ブログとはサービス自体が異なるのでこちらで詳細が把握できません。
ブログパーツ側でデザイン等が設定できる場合はそちらにて文字サイズの変更を行ってくださいませ。
LivedoorのRSSというのがフレームを使わずに表示されている場合は設置したコード全体を<div>などで囲って文字サイズを指定すれば変更することが可能です。

<div style="font-size:15px;">
LivedoorのRSS設置コード
</div>

RSSがフレームで表示されている場合は基本的に外から干渉することは出来ません。
#167 : No title
解消できました!アドバイス有難う御座いました。

再三で申し訳ないのですが、
右のサイドメニューの一番下のプラグインを固定して、
スクロールに追従させる事は可能でしょうか?
記事が長くなってしまい、どうも見栄えが悪くなってしまうので。。。
#168 : No title
may様

トップページのコメント投稿欄までのジャンプですが、
教えていただいたタグを挿入したところ、
希望通り、コメント投稿欄に移動することができました。

(ちなみに、数値は500です。)


本当にありがとうございました。
#169 : No title
突然すみません。

こちらの記事をみて実践しました。
そこで1点質問させてください。

http://josei2moteru.com/blog-entry-61.html
上記ブログを運営しているのですが、TOPページでは記事タイトルの文字色が変更できたのですが、記事ページでは記事タイトルの文字色が変わっていません。

記事ページの記事タイトルを変更する方法をご教示頂けますと幸いです。
#171 : 記事タイトル文字色
コンバンハ。
最初からある記事タイトルの文字色指定部分はトップページなどの一覧ページにのみ反映されます。
両方のページで同じ色を指定する時はスタイルシートに以下を追加してください。
#main_contents .entry_header a,#main_contents .entry_header{color: #000099;} /* 記事タイトル色 */

色を別々に指定する場合は以下のコードを追加してください。個別記事だけでいい場合は2行目だけでOKです。
#main_contents .entry_header a{color: #000099;} /* 記事タイトル色 */
#main_contents .entry_header {color: #333333;} /* 記事タイトル色 個別記事 */
#172 : 御礼
記事タイトルでTOP、個別記事の文字色について質問させて頂いた者です。
お忙しい中、お答え下さりありがとうございます。

無事に個別記事タイトルの文字色もかわりました!
今後もこちらのブログを参考にさせて頂きます。
#184 : ご質問。
JavaScriptオフでも本文を表示させる
が非常に参考になりました。

有難うございます。
 

<div id="main_contents" style="display: none">

↓style="display: none"を削除

<div id="main_contents">


こちらを行い表示スピードが速くなった気がします。
しかし、一度表示されて必ず一度画面が白くなり再表示されるようになります。

こちらは何かが影響してなっているのでしょうか?

もしよろしければ改善方法教えて頂ければ嬉しいです。

宜しくお願い致します。
#190 : #184 : 白くなるフェード処理の解除
コンバンハ。
白くなるのはこのテンプレートに付いているフェードアウト・インの演出です。
jQuery( LEFT_COLUMN_ID ) .css( "opacity", "0" ) .show() .fadeTo( "slow", 1, function(){ layoutFlag = true; } );
二箇所ある上記部分を削除して二箇所ある「equalizeBoxHeight();」の直後に「 layoutFlag = true;」を追加すると白くならなくなります。
一応、JavaScriptオフでも本文を表示させるの説明にこれを解除する方法を追加致しました。
#219 : No title
ここのサイトのように上にあるグローバルナビメニューを設置したいのですが
どうすればよいのでしょうか?
#220 : #217 : サムネイル画像について
may様

関連事項と違うところでの質問コメントをしてしまい大変失礼を致しました。

記事本文中に画像があるのにサムネイルが表示されないので質問させて頂きました。

もし可能なら記事内の1枚目の画像をサムネイルさせる方法がありましたらお教え頂きたいです。
何度も申し訳ございませんがどうぞ宜しくお願い致します。
#224 : No title
質問すいません。

右カラムにあるプラグイン1(?)を、左カラムに持っていきたいんですが、テンプレートをどのようにイジればいいんでしょうか?
#226 : #217 : サムネイル画像について
may様

自力で何とか解決出来ました。
ファイル名を変更しましたら表示されるようになりました。
何度もお伺いしまして申し訳ございませんでした。

少しずつ、こちらのカスタマイズ方法を参考にこれから頑張ってみます。 ありがとうございました。
#234 : 続きを読むを消したい
いつも有難うございます。お世話になります。

basic_whiteを使用しておりますが、

「続きを読む」という表示を辞めて全文表示させたいのですが、

どうすれば良いのでしょうか?

初心者なので分からず、何日も調べています。

よろしくお願い致します。

#236 : Re: #234 続きを読むを消したい
コンバンハ。
URLリンク先の記事に「トップページなどに通常の記事本文を表示」がございますのでそちらをご参考くださいませ。
#238 : No title
お返事ありがとうございました。
もうひとつ教えていただきたいことがあります。よろしくお願いいたします。

basic_whiteのトップページが「記事一覧」となりますが、この画面が
好きではありません。
これを表示しない方法はありますか?

それから、ヘッダーは画像入りのヘッダーに変えたのですが、まだヘッダーの中に「記事一覧」という文字が左の方に表示されております。これも消したいのですが教えて頂けますか?
#239 : Re: #238 記事一覧
コンバンハ。
>トップページが「記事一覧」となりますが、この画面
これは1ページに1記事だけ表示するということでしょうか?
その場合は環境設定のブログ設定にある記事の設定で表示件数を1件に変更してください。
変更するのは記事(PCページ別)(月別)(カテゴリ別)(タグ検索結果)の4つです。
なお、個別ページでしか機能しないテンプレート変数もあるので、トップページを完全に個別ページと同じ状態にすることはできません。

ヘッダーの「記事一覧」についてはHTMLにある以下の部分を丸ごと削除すれば表示されなくなります。
<p class="archives"><a href="<%url>archives.html">記事一覧</a></p>
#262 : basic white カスタマイズについて
はじめまして、basic_whiteを使用しております。
プラグイン3をトップに表示したくて、こちらのサイト様にたどり着きました。
初心者の私にもわかりやすくて、すぐに解決できました。
ありがとうございます。
もう一つ素朴な疑問があります。
基本的に2カラムと思っておりますが、サイドバーの横の空白は何でしょうか?
そこを利用することで3カラムになるのでしょうか?
とすれば、それをメインページの右側に持って行きたいのですが
(現在、サイドバーはプロフィールなど、左側に表示させております)
その方法と、使い方をお教えいただければ幸いです。
よろしくお願いいたします。

#265 : Re262: basic white カスタマイズについて
コンバンハ。
>サイドバーの横の空白
記事の部分とサイドバーの間にある狭いスペースでしょうか?
これは窮屈に見せないためのデザイン上の余白だと思われます。
このページの「メインカラムと右サイドバーの間隔を調整」でスペースを狭めることができます(サイドバーを左に入れ変えている場合は逆の変更を行う)。

3カラムについてはURLリンク先にカスタマイズ方法を掲載しているのでご参考くださいませ。
ただしプラグイン3をもう一つのサイドバーに使用しているので、プラグイン3を記事部分の上下に配置させたい場合は、一番下にあるプラグイン2を削除して代わりに使うか、プラグイン3をテンプレートの中に直接書き込む形式「ヘッダーとメイン記事の間のスペースにバナーなどを設置」のようにするなどの対処が必要になってくるかと思います。
#268 : basic white カスタマイズについて
お返事をいただきありがとうございました。
デザイン上の余白だったのですね。
他のテンプレートには無いものだったので暫く悩んでおりましたがおかげさまで納得いたしました。
3カラムについては早速リンクURLを参考に挑戦して解決いたしました。
プラグイン2との兼ね合いもご教示を参考にガンバってみます。
初心者にもわかりやすいご回答にやる気満々、感謝しております。
#273 : No title
失礼します。
basic_whiteですが環境設定にある「ブログの説明」という部分はどのようにしたらフォントサイズや位置の変更ができるでしょうか?
#274 : Re273: 説明文
コンバンハ。
ブログの説明はこのページの「文字サイズの変更」にあるブログ紹介文の部分に該当します。以下の数値を120%などに減らすと文字が小さくなります。
#header p /* ブログ紹介文 */ { font-size: 158%; /* 21px */ }

位置を右寄せにする場合は{ }内に改行を入れて「text-align」の行を加えます。
#header p /* ブログ紹介文 */ {
font-size: 120%; /* 21px */
text-align: right;
}
中央寄せにする場合は上記の「right」を「center」に変更してください。
任意の数値だけ説明文を右に寄せる時は「padding-left: 50px;」を加えてください。
#header p /* ブログ紹介文 */ {
font-size: 120%; /* 21px */
padding-left: 50px;
}
数値を増やした分だけ説明文が右に移動します。
#277 : ブログの背景色
いつも参考にさせて頂いてます。

ブログの背景色を変更したいのですが、

#container {
background-color: #FFFFFF; /* 全体の背景色 */
}

を変えても変わりませんでした。

どこを変更したら、背景色を変更できるのでしょうか?
お手数ですが、教えて頂けますようお願い致します。
#278 : Re277: ブログの背景色
コンバンハ。
特にカスタマイズしていなければその部分でヘッダーとフッター、記事・サイドバーコンテンツを除いたブログ全体の背景色が変わると思われます。少なくとも初期状態のテンプレートで確認した限りでは変化しています。
#container {
background-color: #f3f3f3; /* 全体の背景色 */
}
別の部分で背景色を指定している可能性がある場合は色の指定の直後に「 !important」をつけると反映されるかもしれません。
background-color: #f3f3f3 !important; /* 全体の背景色 */
それでもダメな時は-colorを抜いてみてください。
background: #f3f3f3 !important; /* 全体の背景色 */
レイアウトを大きく変更している時は「,body」を「#container」の直後に追加してみてください。
#container,body {
background: #f3f3f3 !important; /* 全体の背景色 */
ブログを見ればすぐに判明するとは思いますが…、あとの原因は色の指定方法が間違っていることぐらいになります。

ヘッダーの背景色なども変えたい場合は以下の色指定部分を変更
background: #FFFFFF url(http://blog-imgs-43.fc2.com/t/e/m/templates/header_background.png) repeat-x bottom left; /* ヘッダー背景 */
background: #EFEFEF; /* フッターの背景色 */
background-color: #FFFFFF; /* メインカラムのコンテンツ背景色 */
background-color: #FFFFFF; /* サイドメニュー(プラグイン)の背景色、アイコン */
background: #F4F4F4 url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 10px 10px; /* サイドメニュー(プラグイン)のタイトルの背景色、アイコン */
#279 : No title
凄く丁寧にありがとうございます!

#container,body {
background: #f3f3f3 !important; /* 全体の背景色 */

で、変更できました!

Mayさん、本当にすごいです☆
#286 : 記事が表示されません
はじめまして。
素敵なテンプレートをありがとうございます。

昨日から、続きを読むをクリックすると、記事が全く表示されなくなりました。
テンプレートを新規にダウンロードして様子をみましたが、やはり表示されませんでした。
TOPページのみ今までどおり、ちゃんと表示されています。
他のテンプレートで試したところ、記事が表示されました。

お忙しい中恐縮ですが、対処法を教えて下さい。
#287 : 私も記事が表示されません
はじめまして。
いつも参考にさせて頂いてます。

上の方とは少し違う現象なのですが、私も急に記事が表示されなくなってしまいました。

・TOPページでは記事が全く表示されず。
・右サンドバーのカテゴリのリンクを押すと記事登録が1件のモノだけが表示され、
 2件以上あるカテゴリの記事は全く表示されず。
・個別記事はちゃんと表示される。
・ヘッダーメニューの記事一覧は表示される。

要するに1ページに1件の記事しか表示されなくなってしまったようです。

ちなみに他のテンプレート(shiroineko_01)に変更すると、
TOPページもカテゴリ別ページでも複数記事がきちんと表示されます。


お忙しいところ申し訳ありませんが、
対処法を教えて頂けるとありがたいです。
#289 : #287 自己解決しました
すみません。
記事が表示されない件、自己解決しました。

パソコンから記事投稿した後にスマホから記事を修正した事で、
なぜか記事が反映されなくなってしまったようです。
修正部分をパソコンから再修正したところ、複数記事が表示されるようになりました。
お騒がせ致しました。

これからもカスタマイズ情報、楽しみにしています。
#290 : 私も自己解決しました
記事が表示されない件、私もここあさんと同じく自己解決しました。
一昨日突然直っていました。

FC2サーバーの問題ではなく、テンプレートが原因でこのように記事が表示されなくなることがあるのでしたら、今後の為にも原因を教えて頂けましたら幸いです。
#292 : No title
分かり易い説明で重宝してます

自分では解決が出来なかったので書かせて貰います

グリッド表示のサムネイルから自サイト記事へのリンクではなく、個別で他サイトのリンクへ移動させる事は出来るのでしょうか?

お忙しい中、申し訳ありませんが御教授下さい
#294 : 個別記事の文字位置
初めまして、テンプレ使用させて頂いてるものです。


個別記事だけの文字全体の位置を右へずらすにはどうしたらいいのでしょうか。
自分でいじると、グリットとリストの文字もずれたり個別記事のデザインも崩れてしまいます。

個別記事の文字位置だけ動かすにはどうしたらいいのでしょうか。

#300 : ページナビの上下位置
こんばんは。お世話になってます。

どうしても気になってる部分があります。
page_naviの記事タイトルが3行になると、vertical-align:middle; にしても、
上下の中央揃えになりません。
細かい事で申し訳ありませんが、どうしても気になるので教えていただければ幸いです。

ttp://bongore0066.blog.fc2.com/
よろしくお願いします。
#301 : http://startistics.com/wp-content/wp-upload.html
 saw him cursing on television. You could read hislips and she told him, 'You've got three
#302 : http://revistaoronegro.com/directorioinscripcion/wp-customize.html
 apub or sort of electronic mail. But different people may have different ideas.Disfruté cada una deestas
#306 : ありがとうございます
とても参考になりました!

ありがとうございます^^
#319 : ページナビの上部余白、文字サイズについて
カスタマイズの参考にさせて頂いております。
300の方と同じですが、ページナビの文字が下の方へずれてしまい、上部の余白が出来てしまいます。この次の記事への文字タイトルを小さくする方法、中央寄せにする方法、上部の余白を狭くするにはどうしたらよいでしょうか。
また、関連記事タイトル、コメント本文の文字サイズはどこで変更すればよろしいでしょうか。
お忙しいところ恐縮ですが、お教えいただけましたら幸いです。
#320 : No title
319です。上部余白については解決しました。
お騒がせしました。
#321 : 追尾型広告の設置方法
始めて質問をさせていただきます。
このテンプレートを使用して、追尾型広告を設置する方法を教えていただけないでしょうか?

http://takkaaaaadiary.blog.fc2.com/blog-entry-85.html
上記のページを参考にしてやってみましたが、上手くいきません。

僕が行った方法は、<head></body>内に設置しました。
(<head>のすぐ下に上記リンク先の「1. 追尾させるためのjavascriptをブログのテンプレートに追記する」内にある、<script から</script>HTMLをペースト)

メインカラムIDは#main_contents
サイドバーIDは#sidemenu
広告IDは#scad1で設定をしました。

広告はプラグイン1のフリーエリアのプラグイン説明(上部)に、
<div id="#scad1">
<center><IFRAME SRC="広告" width="190" height="900"></IFRAME> </center></div>
このタグを貼り付けました。

設定は以上になりますが、上手くいきません。
もし宜しければ教えていただけましたら幸いです。
#333 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#345 : No title
2カラムと3カラムの隙間を埋める方法があれば教えてください。

よろしくお願いします。

他のカスタマイズしていくと少し隙間が広がってきてしまいます。
#346 : ヘッダー、メニューについて
参考にさせていただいてます。質問お願いいたします。「ヘッダー全体をトップページへのリンクにする」ですが。画像の両サイドの背景はリンクしないようにできますか?また、メニューバーの両サイドも通常の背景にしたいのですが背景色とラインのようなものが入ってしまいます。方法を教えていただけないでしょうか?よろしくお願いいたします。
#348 : 記事タイトルの色変更について
こんにちは、初心者です。初めての質問になりますが。

個別の記事に内部リンクで行った場合に、記事のタイトルの文字色の変更が分かりません。
薄い黒のままです。最初のページは、スタイルシートの

body { color: #444444; }
#header h1 a /* ブログタイトル */ { color: #333333; }
#main_contents h2 a /* 記事タイトル */ { color: #17BD04;}
#headermenu .archives a /* 「記事一覧」のリンク */ ,
#main_contents .entry_body .entry_more a /* 「続きを読む」のリンク */
{ color: #333333; }

h2の記事タイトルのカラーで、変更は出来るのですが、
色々調べて、やって見たけどダメでした。

方法を教えていただけないでしょうか、よろしくお願いいたします。
#356 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#366 : No title
こんにちわ。まだ初心者です。カスタマイズするのにとても良いシンプルなテンプレートで、他のものでは全然ダメなんです。
ただ、色々なブログを見ていると、日付が変わるとほかのページになってしまわずに、同じページの上の方に更新した記事が現れてきますよね。
ああいう風にはなりませんか。

記事の分量の少ない日は、見に来た方が、他のページに移るのは手間だし、今は同じページの下へ下へと書き足して、それに自分で、日付をつけたりしていますが、来てくれる方が、更新してないと思われてしまうのではと。
#367 : No title
はじめまして。

シンプルで読みやすいと気に入り、テンプレートを利用させていただいています。

画像(IMG)に枠線を表示させたくて、スタイルシートの

img,a img{border:none;}

を削除して、

<img src="画像URL" alt="aa" border="3" />

としてみたのですが、枠線が表示されませんでした。

何か原因が分かれば教えていただけないでしょうか。


#368 : No title
昨日、質問させていただきましたが、自己解決したので、報告です。

html>

となっていた二箇所を、

<html>

と変更してから、

前回のコメントの通りにすると、

枠線が表示されました。

ありがとうございました。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered