Paroday

Paroday：ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか？　yes

コメント返信

　検索ワード「」は、Ctrlキー+Fキー（command+Fキー）で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください。

pazo-menue : ヘッダに画像

　[A][B][C]いずれかを選択。

[A] コンテンツと同じ横幅の背景画像を入れる

プレビュー

変更場所 ▼ HTMLの編集-検索ワード「header」

　下記部分に id="hdimg" を追加します。

<div id="header">
<div class="outhead"><div class="inhead" id="hdimg">

変更場所 ▼ スタイルシートの編集

　以下を追加します。

#hdimg{
 background-color: #d9d1ba;
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: repeat-y;
 margin: 0 6px;
}

　url( )内に画像のアドレスを入れます。
　用意する画像の横幅は(全体幅-12px)。916pxなら904pxの画像を入れます。
　margin: 0 5px; にする場合は(全体幅-10px)。916pxなら906pxの画像を入れます。

[B] 端から端までに背景画像を入れる

プレビュー

変更場所 ▼ スタイルシートの編集-検索ワード「footer --」

#header,#footer{
 background: #dbd4b8;
 text-align: center;
}
.outhead{

（1）上記を丸ごと以下に変更します。

#header{
 background-color: #d9d1ba;
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: repeat;
 text-align: center;
}
#footer{
 background: #dbd4b8;
 text-align: center;
}
.outhead{
 margin: 0 auto;
}
#footer .outhead{

　url( )内に画像のアドレスを入れます。
　画像の位置を中央にする場合は、「left」→「center」。
　画像を縦に繰り返す→「repeat-y」。
　横に繰り返す→「repeat-x」。
　繰り返さない→「no-repeat」。

（2）各サイズ幅の outhead , inhead の前に「#footer 」をつける。

変更場所 ▼ 検索ワード「size-m --- */」

#footer .inhead{

.side-l #footer .inhead{

　「size-ss」「size-s」「size-l」など他のサイズも同様に変更。
※使用するサイドバーの幅だけでも構いません。ただし、初期値である「size-m --- */」は必ず変更してください。

【size-ss】

.size-ss #footer .inhead{

.side-l .size-ss #footer .inhead{

【size-s】

.size-s #footer .inhead{

.side-l .size-s #footer .inhead{

【size-l】

.size-l #footer .inhead{

.side-l .size-l #footer .inhead{

【size-ll】

.size-ll #footer .inhead{

.side-l .size-ll #footer .inhead{

【size-w】

.size-w #footer .inhead{

.side-l .size-w #footer .inhead{
[C] ブログタイトルを画像にする

変更場所 ▼ HTMLの編集-検索ワード「h1」

　<%blog_name> を画像に変更します。

<h1 class="title"><img src="画像のアドレス" alt="<%blog_name>" /></h1>

pazw-haengen : 右下にページトップのボタン

　とりあえずテキスト版です。背景や幅・高さは適当に調整してください。あとで追記するかもしれません。

変更場所 ▼ スタイルシートの編集

　スタイルシートの一番下に以下を追加。

/* PAGETOP */
#pagetopNavi {
	position: fixed;
	z-index: 9999;
	right: 10px;		/* 右端からの位置 */
	bottom: 0px;		/* 下からの位置 */
	width: 95px;		/* 横幅 */
	height: 1.6em;		/* 高さ */
	font-size: 12px;
	font-family: verdana,arial;
	text-align: center;
}
#pagetopNavi a {
	display:block;
	width: 95px;		/* 横幅 */
	height: 1.6em;		/* 高さ */
	line-height: 1.6;	/* 高さ */
	overflow: hidden;
	color: #ffffff;		/* 文字色 */
	background: #0099cc;	/* 背景色 */
	text-decoration: none;
	outline: none;
}
#pagetopNavi a:hover {
	background: #ffaa00;	/* 背景色 */
}
* html #pagetopNavi {display: none;}

body {margin-bottom: 0; padding-bottom: 15px;}

変更場所 ▼ HTMLの編集-検索ワード「</body>」

　HTML、最下部の </body> の手前などに以下のコードを追加。文字を変更するときは「PAGETOP」を「ページトップ」などに。

<div id="pagetopNavi"><a title="PAGETOP" href="#pagetop" onclick="scrollTo(0,0);return false" onkeypress="this.onclick()">PAGETOP</a></div>

</body>

pazw-linie : 文字サイズの変更、広告位置不具合

変更場所 ▼ スタイルシートの編集

　一番下の作者表記・FC2テキスト広告の文字サイズについては、以下をスタイルシートに追加します。11pxの部分を適当に変更します。

#footer ul {
 font-size: 11px;
}

変更場所 ▼ HTMLの編集-検索ワード「more_link」

　検索ページの記事下広告については、直接スタイルを変更することが共有テンプレートの登録条件では禁止されているため、文字サイズの継承（検索ページの広告崩れなど）の説明になります。

　HTML、上から3分の1くらいのところにある次の箇所を変更します。

<!--/more_link-->
</div>

<!--more-->
<div class="eBody" id="more<%topentry_no>">
<%topentry_more>

</div>
<!--/more-->

　強調部分が追加箇所です。念のため、more変数は入れるようにしています。

<!--/more_link-->
<!--not_permanent_area--><!--more--><!--/more--><!--/not_permanent_area-->
</div>

<!--permanent_area--><!--more-->
<div class="eBody" id="more<%topentry_no>">
<%topentry_more>

</div>
<!--/more--><!--/permanent_area-->

　以上で、記事本文と同じ文字サイズになります。

einfach : 本文の未訪問リンクと訪問済みリンクの色をわける

変更場所 ▼ スタイルシートの編集-検索ワード「リンク色」

　[ 記事リンク色 ] にある .eBack a:visited が記事部分の訪問済みリンクになります。
　ここの値を color:#880088; などに変更します。

/* ----------------------------------------------------[ 記事リンク色 ]
*/
.eBack a:link{
 color: #3461b0; /* 未訪問 */
 text-decoration: underline;
}
.eBack a:visited{
 color: #2049a0; /* 訪問済み */
 text-decoration: underline;
}

　[ サイドリンク色 ] にある .sBody a:visited がサイドバーの訪問済みリンクになります。

/* ----------------------------------------------------[ サイドリンク色 ]
*/
.sBody a:link{
 color: #44619b; /* 未訪問 */
 text-decoration: underline;
}
.sBody a:visited{
 color: #28448b;> /* 訪問済み */
}
.sBody a:hover{
 color: #e34538;
}
.sBody li a:link{
 color: #000000;		/* List未訪問 */
 text-decoration: none;
}
.sBody li a:visited{
 color: #444444; /* List訪問済み */
}

　/List訪問済み/はプラグインの最新記事などのリンク色になります。色を揃える場合は、/訪問済み/と同じ色を指定します。

　プラグイン3のリンク色は、[ 記事リンク色 ] にある次の箇所を変更します（二つに分ける）。

変更箇所

.pThird li a:link,.pThird li a:visited{  /* Plugin3 List */
 color: #000000;
 text-decoration: underline;
}

変更後

.pThird li a:link{  /* Plugin3 List */
 color: #000000;
 text-decoration: underline;
}
.pThird li a:visited{  /*  訪問済み */
 color: #000000;
 text-decoration: underline;
}

padb-linie : 表紙を入れる

» サンプル

　index_area（トップページ）を表紙とし、page-0.htmlページをHomeページとします。

[1] 変更場所 ▼ HTMLの編集-検索ワード「<body」

　最初の方。以下の変更を行います。body要素にすでに何らかのクラスがある場合は、
<body class="hoge<!--index_area--> cover<!--/index_area-->"> のようにします。

<body<!--index_area--> class="cover"<!--/index_area-->>

<!--index_area--><!--表紙ここから-->
<div id="cvWrap">

 <h1><%blog_name></h1>

 <p id="cvEnter"><a href="page-0.html">Enter</a></p>

 <div id="cvContent">

ここに紹介文など。

 </div>
</div>
<div id="cvFCad"><%ad> <%ad2></div>

<!--表紙ここまで--><!--/index_area-->

<!--not_index_area-->

<div id="pagetop">

　<!--index_area--> から <!--/index_area--> までのHTMLはサンプルです。最低限、<%blog_name> と <a href="page-0.html">Enter</a> のリンク、<%ad> <%ad2>（FC2広告） があれば、表紙として機能するのではないかと思われます。

[2] 変更場所 ▼ HTMLの編集-検索ワード「/body」

　最下部。赤字部分を追加します。

<!--/not_index_area-->

</body>

[3] 変更場所 ▼ HTMLの編集-検索ワード「Home」

　Homeのリンクが <a href="<%url>">Home</a> のままだと表紙に戻ってしまうので、ブログタイトルと一番右上のHome以外のリンク先を page-0.html に変更します。8箇所あります。リンク先が表紙のままでいい場合は変更の必要はありません。

<!--category_area--><a href="page-0.html">Home</a>

<!--date_area--><a href="page-0.html">Home</a>

<!--search_area--><a href="page-0.html">Home</a>

<!--tag_area--><a href="page-0.html">Home</a>

<!--edit_area--><a href="page-0.html">Home</a>

<!--permanent_area--><!--topentry--><a href="page-0.html">Home</a>


<li><a href="page-0.html">Home</a></li><!--not_titlelist_area-->

<li class="homNavi"><a href="page-0.html">Home</a></li>

　一番右上のHomeリンクを表紙にしないときは、最初の方にあるHomeも変更します。

<ul id="head"><li><a href="page-0.html">Home</a></li>

変更場所 ▼ スタイルシートの編集

　表紙のスタイルを追加します。[1]のHTMLをそのまま利用する場合は次のスタイルを追加します。

　タイトルを画像にするときは次のようにします。

変更場所 ▼ HTMLの編集

 <h1><img src="画像のアドレス" alt="<%blog_name>" /></h1>

変更場所 ▼ スタイルシートの編集

#cvWrap h1 {
 margin: 0 auto 10px;
 padding: 0px 0 0;   /* 上部余白（画像高さ） */
 font-size: 100%;
 text-align: center;
}

　タイトルの上部に画像を入れるときは次のようにします。300pxは画像の高さにあわせて調整します。

変更場所 ▼ スタイルシートの編集

#cvWrap {
 margin: 30px auto 20px;
 width: 600px;   /* 全体横幅 */
 color: #ffffff;   /* 文字色 */
 background: url(画像アドレス) center top no-repeat;
}

#cvWrap h1 {
 margin: 0 auto 10px;
 padding: 300px 0 0;   /* 上部余白（画像高さ） */
 font-size: 100%;
 text-align: center;
}

　表紙の背景全体に画像を入れるときは次のようにします。

変更場所 ▼ スタイルシートの編集

body.cover {
 background: #000000 url(画像アドレス) center top no-repeat;
}

　プラグイン3をpage-0.htmlやpage-1.htmlなどのトップページからの送りページでのみ表示させるには次の変更を行います。

変更場所 ▼ HTMLの編集 - 検索ワード「Plugin3」

<!--page_area--><!--Plugin3[1]-->
<!--plugin-->
<!--plugin_third-->
...
<!--/plugin_third-->
<!--/plugin-->
<!--Plugin3[1]--><!--/page_area-->

pado-menue : Prev , Next を逆にする

　変更箇所は上部ナビと下部ナビの2箇所です。

変更場所1 ▼ HTMLの編集-検索ワード「m-main」

　<div class="m-main"> 直後にある次の箇所を変更。prevpage・nextpage、preventry・nextentryの順番を入替え、title属性も入替えます。

<!--not_index_area--><!--not_permanent_area--><!--not_titlelist_area-->
<ul class="navi">
<!--prevpage--><li><a href="<%prevpage_url>">Prev</a></li><!--/prevpage-->
<!--nextpage--><li><a href="<%nextpage_url>">Next</a></li><!--/nextpage-->
<!--edit_area--><li><a href="blog-entry-<%edit_entry_no>.html#comment<%eno>">Back</a></li><!--/edit_area-->
</ul>
<!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_index_area-->

<!--permanent_area-->
<ul class="navi">
<!--preventry--><li><a href="<%preventry_url>" title="Prev"><%preventry_title></a></li><!--/preventry-->
<!--nextentry--><li><a href="<%nextentry_url>" title="Next"><%nextentry_title></a></li><!--/nextentry-->
</ul>
<!--/permanent_area-->

変更場所2 ▼ HTMLの編集-検索ワード「n-bottom」

　<!--/titlelist_area--> 直後にある次の箇所を変更。prevpage・nextpage、preventry・nextentryの順番を入替え、title属性も入替えます。

<!--not_edit_area--><!--not_permanent_area-->
<ul class="navi" id="n-bottom">
<li><a href="<%url>">Home</a></li><!--prevpage--><li><a href="<%prevpage_url>">Prev</a></li><!--/prevpage-->
<!--nextpage--><li><a href="<%nextpage_url>">Next</a></li><!--/nextpage-->
</ul>
<!--/not_permanent_area--><!--/not_edit_area-->

<!--permanent_area-->
<ul class="navi" id="n-bottom">
<!--preventry--><li><a href="<%preventry_url>" title="Prev"><%preventry_title></a></li><!--/preventry-->
<!--nextentry--><li><a href="<%nextentry_url>" title="Next"><%nextentry_title></a></li><!--/nextentry-->
<li class="navi-c"><a href="<%url>" title="Home">Home</a></li>
</ul>
<!--/permanent_area-->

pazw-haengen : IE8（標準モード）でプルダウンメニューに隙間ができる

　[A]～[C]いずれかの方法でなくなりそうです。[A]推奨です。他にも気になる点があれば、応急措置として[C]を加えます。

[A]メニューリンクの行の高さを変更

変更場所 ▼ スタイルシートの編集-検索ワード「メニュー ---」

　スタイルシート「メニュー --- */」の次の箇所を変更。 1.1 → normal

#menunavi li li a {
  padding: 6px 5px;
  height: auto;
  letter-spacing: 0px;
  line-height: normal;
  background: #3989ac;		/* 背景色2 */
  border-top: 1px #4091b1 solid; /* リンク上線色 */
}

[B]IEだけ透過しないようにする

変更場所 ▼ スタイルシートの編集-検索ワード「alpha」

　スタイルシート「bottom --- */」の次の1行を削除。

#menunavi li li > a,li > #urtag {
  min-height: 1px;
  filter: alpha(opacity=90); /* 削除 */
}

[C]IE8を強制的にIE7互換にする

変更場所 ▼ HTMLの編集

　次のコードをhead要素内に入れます。

<head>
...
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
...
</head>

pado-menue : リンクメニューの崩れ

変更場所 ▼ スタイルシートの編集-検索ワード「メニューリンク」

　最初の「--- 幅変更 ---」部分。

　初期状態では、『.hdsize』がメニュー全体の横幅を決めています。

#pagetop,.outhead,.hdsize{ width: サイズpx ; }

　これがない（メニュー全体の横幅が指定されていない）ため、ウインドウのサイズにあわせて各リンクが下に回ってしまいます。

　メニューの全体幅は、（メニューリンクの横幅×リンクの個数）によって算出します。

　メニューリンクの横幅は /* 全体幅 */ の下にある 164px の箇所です。

#menunavi li{ width: 164px; }   /* メニューリンク */

　現在のリンクの数は 6個（Home,About,News,Gallery,Thanks,for）なので
164 x 6 = 984 がメニュー全体幅になります。

　コンテンツの全体幅（954px）より大きくなるので、全体幅とは別に指定する必要があります。なので次の一行を全体幅の下などに追加します。

#pagetop{ width: 954px ; }   /* 全体幅 */
.hdsize{ width: 984px; }   /* メニュー全体幅 */
#menunavi li{ width: 164px; }   /* メニューリンク */

　計算が面倒なときは .hdsize に崩れないサイズのpxを適当に指定します。

　FirefoxなどのブラウザでもメニューやCopyrightを中央寄せにする場合は次のコードをスタイルシートに加えます。必要なくなったときは削除します。

div#menunavi,address.hdsize {
   margin: 0 auto;
}

　現在の全体幅（954px）にあわせるのであれば、次のようになります。

#pagetop{ width: 954px ; }   /* 全体幅 */
.hdsize{ width: 954px; }   /* メニュー全体幅 */
#menunavi li{ width: 158px; }   /* メニューリンク */
div#menunavi,address.hdsize {
   margin: 0 auto;
}

padb-linie : 右上メニューのRSSリンクなどを削除する

変更場所 ▼ HTMLの編集-検索ワード「id="head"」

　上の方、<div id="pagetop"> の後にある <li><a href="<%url>?xml">RSS</a></li> を削除します。

<ul id="head"><li><a href="<%url>">Home</a></li><li><a href="<%url>archives.html">Archives</a></li><li><a href="<%server_url>control.php">Log in</a></li><li><a href="<%url>?xml">RSS</a></li></ul>

menue メニュー下カレンダーの表示年月リンク、冒頭文一覧表示

< 20XX.XX > の年月の部分をクリックでその月の記事を表示

変更場所 ▼ HTMLの編集-検索ワード「Calendar」

追加したカレンダーのコードに以下（a要素）を加えます。

<div class="hdCalendar"> <ul class="hdsize" id="menuCalendar"> <li class="prvm"><a href="<%prev_month_link>" title="<%prev_year>.<%prev_month>">&lt;</a></li> <li class="nowyear"><a href="blog-date-<%now_year><%now_month>.html"><%now_year>.<%now_month></a></li> <li class="nxtm"><!--index_area-->&gt;<!--/index_area--><!--not_index_area--><a href="<%next_month_link>" title="<%next_year>.<%next_month>">&gt;</a><!--/not_index_area--></li> <!--calendar2--><li><%days></li><!--/calendar2--></ul></div>

月別ページでその月の記事をすべて表示

　単純に、1ページに表示する記事の件数を増やすのであれば、[環境設定][ブログの設定][記事の設定]の記事(月別)表示件数を30件とします。この30件はFC2ブログで1ページに表示できる記事の最大件数です。例えば、ひと月に31件以上記事があれば、31件目からはページ送りになります。タイトルのみの一覧にしたとしてもそれは変わりません。

　ただし、[環境設定][ブログの設定][拡張表示設定]にある表示単位を『日付単位』に変更にすると、最大で30日分の記事をすべて表示することが可能になります。
※31日ある月で毎日書くと31日になるので、1日分はページ送りになります。毎日更新しないのであれば、問題ありません。

　日付単位にはいくつか注意事項があります。初期状態のmenueは <%total_pages> を使用していないので、以下の2点を考慮したうえで日付単位にするかどうかを判断します。

  1. トップページからの送りページ（/page-no.html）で表示される1ページの記事件数が不定になる。
  2. 1日にたくさんの記事を投稿していると1ページの表示が重くなる（タイトル一覧表示などで対応）

　実際に『記事単位』に設定して、以下のページに問題がないかを確認するのが手っ取り早いです。

  • トップページからのページ送り（/page-1.htmlなど）
  • 月別ページ（/blog-date-201003.htmlなど）
  • カテゴリページ（/blog-category-0.htmlなど）

「次のページ」「前のページ」などのページ送りもそれぞれ確認します。

月日ページのみ各記事の冒頭文を一覧表示

>> プレビュー

　冒頭文では、記事内に書かれたHTMLは無視されます。

変更場所 ▼ HTMLの編集-検索ワード「!--topentry--」

<!--topentry--> の前に <!--not_date_area--> を加えて、<!--/topentry--> の後に以下を追記。

<!--not_date_area-->
<!--topentry-->
（略）
<!--/topentry-->
<!--/not_date_area-->

<!--date_area-->
<!--topentry-->
<!--not_permanent_area--><div class="entry-m" id="title<%topentry_no>"><!--/not_permanent_area-->
<!--permanent_area--><div class="entry-p" id="title<%topentry_no>"><!--/permanent_area-->

<h2 class="e-title"><a href="<%topentry_link>" title="Permalink<%topentry_no>"><%topentry_title></a></h2>
<div class="e-body">
<ul class="e-category">
<li class="lday"><a href="<%url>blog-date-<%topentry_year><%topentry_month><%topentry_day>.html" title="<%topentry_year>.<%topentry_month>.<%topentry_day>"><%topentry_year>.<%topentry_month>.<%topentry_day> <%topentry_youbi></a></li><!--parent_category--><li><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a></li><!--/parent_category--><li><a href="<%topentry_category_link>"><%topentry_category></a></li>
</ul>
</div>

<div class="e-text">
<%topentry_discription>

<div class="e-more">[<a href="<%topentry_link>" title="Read - <%topentry_title>">More...</a>]</div>

</div>

<!--community-->
<ul class="tag-m">
<li>Genre :</li><li><a href="<%topentry_community_janrelink>" title="<%topentry_community_janrename>"><%topentry_community_janrename></a></li><li><a href="<%topentry_thread_link>" title="<%topentry_thread_title>"><%topentry_thread_title></a></li>
</ul>
<!--/community-->
<!--topentry_tag-->
<ul class="tag-m">
<li>Tag :</li><!--tag_list--><li><a href="./?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a></li><!--/tag_list-->
</ul>
<!--/topentry_tag-->

<ul class="e-bottom">
<li class="e-edit"><a href="<%server_url>control.php?mode=editor&amp;process=load&amp;eno=<%topentry_no>" title="Edit<%topentry_no>">Edit</a></li><li class="time"><%topentry_hour>:<%topentry_minute></li><!--allow_tb--><li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#trackback" title="Trackback - <%topentry_title>">Trackback : <%topentry_tb_num></a></li><!--/allow_tb-->
<!--allow_comment--><li><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#comment-area" title="Comment - <%topentry_title>">Comment : <%topentry_comment_num></a></li><!--/allow_comment-->
<li><a href="#header">Top</a></li>
</ul>
</div>
<!--/topentry-->
<!--/date_area-->

　同様にカテゴリページや検索ページもエリア変数で囲って、それぞれのブロックを追加すると、冒頭一覧表示になります。

menue プラグインタイトル画像差し替え(2)

変更場所 ▼ HTMLの編集-検索ワード「plugin_first」「plugin_second」

プラグイン1と2のh2要素にid属性を追加。1は first 2は second。

<!--plugin_first-->
<h2 class="s-title" id="pt<%plugin_first_no>"><%plugin_first_title></h2>

（略）

<!--plugin_second-->
<h2 class="s-title" id="pt<%plugin_second_no>"><%plugin_second_title></h2>

テンプレートのプレビューをクリックして、プレビューしたページのソースを確認。

■ソースの確認方法

プレビューしたページ内で右クリック、「（ページの）ソースを表示」。あるいは、ブラウザのメニューバー「表示」をクリック、「（ページの）ソース」で確認できます。

各プラグインが表示されている箇所を探し、 pt の後に出力されている数値をコピーします（デザインを変更したいプラグインの数値をすべて控えます）。

（例）最新記事→554050、最新コメント→554051、月別アーカイブ→554052など

ソース表示例
<h2 class="s-title" id="pt554050">最新記事</h3>
<div class="s-body">
  <ul>
   <li>エントリ3</li>
   <li>エントリ2</li>
   <li>エントリ1</li>
  </ul>
</div>

次にスタイルシートの編集で各プラグインごとのスタイルを追加します。

変更場所 ▼ スタイルシートの編集

セレクタは #pt識別番号 です。

スタイルの指定例（番号部分はサンプルです。識別番号にはソースに表示された数値を入れてください）
（例）最新記事→554050、最新コメント→554051、月別アーカイブ→554052

#pt554050 {   /* 最新記事 タイトルのスタイル */
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: no-repeat;
}
#pt554051 {   /* 最新コメント タイトルのスタイル */
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: no-repeat;
}
#pt554052 {   /* 月別アーカイブ タイトルのスタイル */
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: no-repeat;
}

背景はまとめて記述することもできます。#000000は画像が表示されないときの背景色です。

#pt554050 {   /* 最新記事 タイトルのスタイル */
 background: #000000 url(画像のアドレス) left top no-repeat;
}

すべてのプラグインタイトルの画像位置や繰り返し指定が left top , no-repeat で問題ないのであれば、positionやrepeatの指定は不要です。画像のみを指定します。

#pt554050 {   /* 最新記事 タイトルのスタイル */
 background-image: url(画像のアドレス);
}

スタイルシートの「size-m --- */」で既に指定されています。

h2.s-title{
 background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-stitle-225.jpg);
 background-position: left top;
 background-repeat: no-repeat;
}

文字色やデフォルトの背景色、高さなどは h2.s-title で指定します。

変更場所 ▼ スタイルシートの編集-検索ワード「side --- */」

h2.s-title{
 margin: 0;
 padding: 0px 1px 0px 9px;
 text-align: left;
 font-weight: normal;
 line-height: 27px;
 height: 27px;
 letter-spacing: 1px;
 color: #ffffff;
 background-color: #4e473d;
}

各プラグインで表示する画像ごとに高さなどを変更するときは追加したスタイルにプロパティを加えます。

#pt554050 {   /* 最新記事 タイトルのスタイル */
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: no-repeat;
 height: 30px;
}
#pt554051 {   /* 最新コメント タイトルのスタイル */
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: no-repeat;
 height: 33px;
}
#pt554052 {   /* 月別アーカイブ タイトルのスタイル */
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: no-repeat;
 background-color: #9e473d;
}

画像に『Category』『Entry』などの文字を直接入れて、テキストを非表示にするときは追加したスタイルに overflow text-indent プロパティを加えます。

#pt554050 {   /* 最新記事 タイトルのスタイル */
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: no-repeat;
 overflow: hidden;
 text-indent: -800px;
}
#pt554051 {   /* 最新コメント タイトルのスタイル */
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: no-repeat;
 overflow: hidden;
 text-indent: -800px;
}
#pt554052 {   /* 月別アーカイブ タイトルのスタイル */
 background-image: url(画像のアドレス);
 background-position: left top;
 background-repeat: no-repeat;
 overflow: hidden;
 text-indent: -800px;
}

すべてのプラグインタイトルを画像文字表記に変更するときは、スタイルごとに追加せず、プラグインタイトルのセレクタに一括で指定します。そうすると同じコードをいくつも書かなくて済みます。

h2.s-title{
 margin: 0;
 padding: 0px 1px 0px 9px;
 text-align: left;
 font-weight: normal;
 line-height: 27px;
 height: 27px;
 letter-spacing: 1px;
 color: #ffffff;
 background-color: #4e473d;
 overflow: hidden;
 text-indent: -800px;
}

個別のスタイルとプラグインタイトルセレクタに同じプロパティが指定された場合は、個別のスタイルが優先されます。

その他の方法についてはプラグインごとにデザインを変更する方法を参照。

menue プラグインタイトル画像差し替え

変更場所 ▼ スタイルシートの編集-検索ワード「01-stitle」

スタイルシート編集の下部にある次の箇所（h2.s-title）を変更します。使用しているサイズ幅の「01-stitle-xxx.jpg」がプラグインタイトルの画像です。

/* --- size-m --- */
h2.s-title{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-stitle-225.jpg);
background-position: left top;
background-repeat: no-repeat;
}
/* --- size-s --- */
div.size-ss h2.s-title{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-stitle-200.jpg);
}
/* --- size-ss --- */
div.size-s h2.s-title{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-stitle-210.jpg);
}
/* --- size-l --- */
div.size-l h2.s-title{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-stitle-230.jpg);
}
/* --- size-ll --- */
div.size-ll h2.s-title{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-stitle-240.jpg);
}
/* --- size-ll --- */
div.size-ll h2.s-title{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-stitle-240.jpg);
}
/* --- size-w --- */
div.size-w h2.s-title{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-stitle-250.jpg);
}

画像の位置を変更、画像を繰り返す

/* --- size-m --- */　にある h2.stitle の position repeat を変更します。この変更は全サイズ共通です。

h2.s-title{
background-image: url(http://blog-imgs-41.fc2.com/p/a/r/paro2day/01-stitle-225.jpg);
background-position: left top;
background-repeat: no-repeat;
}
/* 変更例 */
background-position: left bottom; /* 左下配置 */
background-position: 7px 5px;
background-repeat: repeat; /* 繰り返す */
background-repeat: repeat-x; /* 横に繰り返す */
background-repeat: repeat-y; /* 縦に繰り返す */

使わないサイズ「 --- size-○ --- */」の変更は必要ありません。削除しても問題ありません。

文字色、画像が表示されないときの背景色を変更

変更場所 ▼ スタイルシートの編集-検索ワード「side ---」

/* --- side --- */　にある h2.stitle の color background-color を変更します。この変更は全サイズ共通です。

h2.s-title{
	/* 略 */
	color: #ffffff;
	background-color: #4e473d;
}

dt2_pasommer 画像差し替えスペース

変更場所 ▼ スタイルシートの編集-検索ワード「.blogTitle」

「Body ---- */」 の少し下。赤字部分を変更すると上部の余白を変更できます。→204pxなど

.blogTitle{
  position: relative;
  height: 87px;
  margin-top: 304px;
}

備考 - 差し替える画像について

Entriesのシンボル画像とブログタイトル部分の画像は透過されないため、シンボル・ブログタイトル画像と重なる部分を淡い色（水色っぽく）にしないと目立ちそうです。あるいは差し替える画像にあわせて、シンボル・ブログタイトル部分の画像の色（ギザギザ周り・右上隅）を塗り替えるとよいかもしれません。画像の加工はOKです。

シンボル部分の画像変更は「Body ---- */」 の以下の箇所。

#symbol{
/* 省略 */
background: url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sosym01.gif) 0 0 no-repeat; /* 画像 */
}

ブログタイトル部分の画像変更はスタイルシート下部「size-m --- */」 の以下の箇所。「#3190b8」は画像が表示されないときの背景色です。他のサイズも同様です。

.size-m h1.title{
  width: 529px;
  background: #3190b8 url(http://blog-imgs-34.fc2.com/p/a/r/paro2day/sots529.jpg) 0 0 no-repeat;
}

テーマだから画像固定にしよう！の勢いで作られたテンプレートでした。上部のでっかい画像とシンボル・タイトルは基本的にセット扱いです。奥義「アンチエイリアス」ですね。

dt2_pasommer 広い横幅

『size-l』や『size-w』以外の幅に変更するということでしょうか？

size-l :プレビュー / size-w : プレビュー

上記の変更方法についてはdt2_pasommerの詳細ページをご覧ください。

『size-l』は初期幅『size-m』の記事部分だけを広げたものです。ただ単に広くといっても際限がないので、具体的な数値があると助かります（といっても必ずしも対応するとはかぎりません。『sommer』のように画像を使用しているテンプレートは対応を渋ります）。

  • ×広くする
  • ○全体の幅を ○○○px くらいに
  • ○記事の部分を ○○○px くらいに
  • ○初期幅（size-m）の全体の幅を 100px くらい増やす
  • ○初期幅（size-m）の記事部分を 100px くらい増やす
  • ○size-lの全体幅を 50px 大きく

幅の変更方法を掲載することは致しますが、幅ごとのテンプレートを配布または登録することは致しかねます。

理由

  • できれば直接コードを触って編集して欲しい。応用がきく（作者要らず）。
  • 必要以上の類似テンプレートは作成者のサイトで変更方法を掲載・配布すれば事足りる。
  • 登録すると修正･更新などの管理に手間がかかる。
  • 横幅だけを変更したテンプレートは、登録条件の「既存のFC2ブログ用テンプレートと類似したデザイン」「視覚上のデザインが酷似したテンプレート」に該当する。
    どなたのものかは忘れましたが、自作でも類似で却下されたとのコメントがありました。それはFC2が判断・解決すべき問題ですが、仮に登録できたとしても、登録できなかったテンプレートがでてきたときに不公平な審査を生じます。
  • リクエストでテンプレートが多すぎて検索しづらい、詳細な分類項目を増やして欲しいなどの声がある。
  • textarea要素へのコピーが苦手。

備考

返信が遅くなりましたことをお詫び申し上げます。

※メールフォームで送信されたテンプレートの質問はブラックホールに吸い込まれることがあります。

関連記事