Customize in Ninja Blog

真夜さん、こんにちわ

そうですか・・・
原因がわからずじまいですいません。

また、他に何かありましたらお気軽にどうぞ(^-^*）

真夜さん、こんばんわ。
返信、遅くなってすいません。

div.cm_text {
margin:5px 10px 5px 20px ;
padding:0;
font-size:11px;
line-height:25px;
background:#ffffff url("http://bfile.shinobi.jp/759/gray- note.gif");
}

今までのを削除して△のでやってみていただけますか？
（コピペで貼り付けていただいて大丈夫かと。）
違いはピンク色のところです。

真夜さん、こんばんわ

えーと、それであってるのですが、上のをコピペすると画像のURLのところに空白が存在してます。
gray-のあと、noteとの間の半角のスペースを消せば反映されるのではないかと(^^;)

それ以外にへんなところはないので、だめだったら･･･
すいません、もう一度お願いします。

真夜さん、こんにちわ(^-^*）

本文コメントの部分が、このブログで言う、今、ここのブログでいうこの部分のことでしたら、罫線画像は入っていないのです(^^;)

罫線にしたいとのことですと、スタイルシートを変更していただく必要があります。

で、手っ取り早いのは記事と同じスタイルにしてしまうという方法。
若干行間が広くなります。（初期のコメント本文の指定だとかなり狭くしているので）

スタイルシートから次の部分を探してください。

div.cm_text {
padding:5px 10px 5px 20px ;
font-size:11px;
line-height:150%;
}

div.cm_res_text {
padding:5px 10px 5px 40px ;
font-size:11px;
line-height:150%;
}

これを▽のように変更してください。
（上がコメントの本文、下が管理者の返信の指定です。）
div.cm_text {
margin :5px 10px 5px 20px ;
font-size:11px;
line-height:25px;
background:#ffffff url("http://bfile.shinobi.jp/759/gray-note.gif");
}

div.cm_res_text {
margin:5px 10px 5px 40px ;
font-size:11px;
line-height:25px;
background:#ffffff url("http://bfile.shinobi.jp/759/gray-note.gif");
}

こうすると割と簡単に罫線が表示されるようになります。
ただ、行間が当初より広くなってしまうのが気になるという場合は、赤くURLが表示された画像を編集して画像の高さをください。

たとえば△の設定では
line-height:25px;
とあり、これが行間の指定で、行間は25pxとなってます。
なので画像（http://bfile.shinobi.jp/759/gray-note.gif）の高さも25pxとなっています。

もし、行間を20pxにしたければ、
line-height:20px;
とした上で、画像の高さを20pxに編集し、ご自分のブログにアップした上でURLのところをアップした画像のURLに変えればOKです。

無事解決で何よりです♪

また、なにかありましたらお気軽に(^-^*）

Ryouさん、こんにちは。
お返事遅くなってすいません(*- -)(*_ _)ペコリ

記事部分を広くとのことですが、イロイロ修正するところがあります。
具体的にはスタイルシートのWidthのところを10箇所ほどですが。

このテンプレ、見た目をpx単位で制御しているところが多いので直しにくいのです。
全体の幅、左右のサイドの幅、記事の幅をどれくらいにしたいかにもよるので・・・

方法としては２通りあります。
①全体の幅を動かさずに左右のサイドの幅を狭くすることで記事部分を広くする方法
②記事部分を広くした分だけ全体の幅を広くする方法

どちらもスタイルシートの幅の指定(width)を変更することになります。
説明は①のほうで行います。
一応念のためバックアップを取っておくことをお勧めします。

各部分の初期状態(カッコ内は対応するスタイルシートでの名前)：
　全体の幅＝772px（div#container）
　左サイド＋記事部分＝585px (div#wrapper)
　記事部分＝410px (div#contents)
　左サイド＝170px (div#leftside)
　右サイド＝170px (div#rightside)

①の方法
記事部分を40px分広くしてみるという前提で行います。

1.スタイルシートの/*レイアウト*/とある部分のwidthの指定を変更します。
スペースの都合でwidthの指定以外は省きますね。

div#wrapper {width:585px+20px;}
div#contents {width:410px+40px;}
div#leftside {width:170px-20px;}
div#rightside {width:170px-20px;}
上のように数字を足したり引いたりして幅のサイズを変更してください。
広げたい分をdiv#contentsでの幅の指定に足し、そのほかの部分からは広げたい分の幅の半分を引くというのがポイントです。
ただしdiv#wrapperの値は
広げたい幅の半分(20px)＝div#wrapperの幅の値
となります
出来上がるとこうなります

div#wrapper {width:605px;}
div#contents {width:450px;}
div#leftside {width:150px;}
div#rightside {width:150px;}

次はこの/*レイアウト*/で指定した幅に従って他の部分を訂正していきます。

2./* 記事 */の部分のスタイルシートの変更。
/* 記事 */の部分で変更する部分は以下の箇所です。ここは広げたい部分なので広げたい幅の分だけ数値を増やしていきます。
div.entry {width:408px+40px;}
div.entry_date {width: 398px+40px;}
div.entry_title {width: 398px+40px;}
h2.entry_titlefont {width: 373px+40px;}
div.entry_contents {width: 398px+40px;}

変更後はこうなります
div.entry {width: 448px;}
div.entry_date {width: 438px;}
div.entry_title {width: 438px;}
h2.entry_titlefont {width: 413px;}
div.entry_contents {width: 438px;}

3./* コメント&トラバ*/の幅の変更
ここは記事と同じ幅で指定しているので、広げたい幅の分だけ数字を足してください。
div.cmtb {width:408px+40px;}
div.cmtb_title {width: 398px+40px;}

変更後は▽
div.cmtb {width: 448px;}
div.cmtb_title {width: 438px;}

以下スタイルシートの/*コメント*/部分、/*トラックバック*/部分の次の指定の幅もwidthの指定で広げたい幅の分だけ数値を足すとスタイルが整います。

40pxだけ広げた結果が次のとおりです。
/*コメント*/
div.cm_contents {width: 438px;}
div.cm_title {width: 368px;}
/*トラックバック*/
div.tb_contents {width: 438px;}

4./* サイド */部分の幅の変更。
最後に/* サイド */部分にあるプラグインの幅の変更です。

div.plugin {
width:170px-20px;
margin:0px 0px 10px 0px;
}

変更後の結果が▽
div.plugin {
width:150px;
margin:0px 0px 10px 0px;
}

②の方法
この方法は①の方法の応用です。
最初に/*レイアウト*/のところでdiv#containerの幅を変更するのがポイント。
以下のすべての値の幅を広げたい分だけ足してください。

div#container {width:772px+40px;}
div#wrapper {width:585px+40px;}
div#contents {width:410px+40px;}

変更後が▽
div#container {width:812px;}
div#wrapper {width:625px;}
div#contents {width:450px;}

この方法ではサイド部分はいじりません。

後は①の方法の2～3を行えば終わりです。

最後に長い説明ですいません(￣▽￣;)

DAISUKEさん、はじめまして^^

>まず全体のサイズが大きくなってしまい左の（お気に入りや履歴の）ウィンドウを開いたままだと右端が半分隠れてしまうので調整することは可能ですか？

全体のサイズを小さくしたいということでよいのでしょうか？
スタイルシートで、width(幅)の指定をすべて調整していただければなんとかなります。
ただ、これを直すとなると、カレンダーから何から全部修正しないといけないので、ちょっと難しいです。ごめんなさい<(_ _)>

｢蒼｣はもともと大きめにつくってあるのでお気に入りを脇に表示してると確かにきついですね。

>またプラグイン３の横幅を広げたいのですがこちらも調整可能なら教えて頂けますか？

ここだけ、直すのでしたらわりと楽に出来ます。

スタイルシートで/*トピックスを表示する部分全体の指定*/というところを探してみてください。指定が以下のようになってると思います。

#TopicsBlock {
margin:20px;
padding:0px ;
text-align:left;
}

この中の「margin:20px;」というところを小さい値にしてみてください。
たぶん、10pxに直すだけでもプラグイン３の幅が広がると思います。

>最後にＴＯＰのタイトルのところ写真を入れてみたのですが文字が重なってしまいますので写真を全面に出すことは可能でしょうか？

ちょっと状況が良くわかりません。
ブログのタイトルをロゴにした時ということなのでしょうか？
とくに文字が重なるような指定は入れてなかったと思うのですが・・・

ぷりんさん、はじめまして

記事の上の枠は画像で作成してるので、画像を編集しないと大きくはできないんです。ごめんなさい。

スクロールバーがはみ出さないようにということでしたら、スクロールバーを設置するときに
<P style="OVERFLOW: auto; WIDTH: 380px; HEIGHT: 400px"></P>
としておられるようなので、このときの幅を360pxぐらいにすると、スクロールバーが収まるんじゃないかなと思います。

解決何よりです。

何かありましたらまたお気軽に(^-^*）

良かったです♪

ちょっと安心 ε-(´▽｀) ﾎｯ
最近、PCの調子がイマイチなので合ってるかどうか不安だったのです。

また、何かありましたらお気軽に～♪

優花さん、はじめまして

十中八九「list-style: ******;」って指定のところだと思うのですが確証はないですが、一応対処法です。

スタイルシートの中に(たぶん上のほう)
ul, ol, dl, dt, dd {
margin : 0px 0px 0px 0px ;
padding : 0px 0px 0px 0px ;
list-style: disc inside;
}
という指定が初期設定だとあったはずです。
これの「list-style: disc inside;」を「list-style: none outside;」に書き換えて
ul, ol, dl, dt, dd {
margin : 0px 0px 0px 0px ;
padding : 0px 0px 0px 0px ;
list-style: none outside;
}
とすると直るかもしれません。
ちなみに最初の指定は、リストアイコンをdisc(黒丸)にして一文字下げるという指定で、後方のはリストアイコンなしでインデントなしって意味になります。

これ以上はソースがわからないのでなんともいえないです<(_ _)>

アキトさん、はじめまして

>質問なのですが、コメント欄とサイト内検索欄に枠線をつけるにはどのようにしたらいいのでしょうか？
>薄く背景色がついていますが、少し見辛いのでAlternation-緑×白やブルーチャイナの様に枠線で囲みたいのですが、やり方がわかりません。

枠線つけるんですね。
それでしたらスタイルシートで次の部分を探してください。
一番上のほうにあると思います。

input,select,textarea {
margin:0px 1px 0px 1px;
padding:1px 1px 1px 2px;
border : 1px solid #ffffff ;　
color:#656565;
font-size:12px;
background-color: #f5f5f5;
}

この中の｢border : 1px solid #ffffff ;｣の#fffffのところをお好きな色に変えてください。
実は枠線を白(#ffffff)の実線で囲んであるので、色をつけていただければよいかと。

ちなみに灰色(#c0c0c0)で囲むとするとスタイルシートは以下のようになります。

input,select,textarea {
margin:0px 1px 0px 1px;
padding:1px 1px 1px 2px;
border : 1px solid #c0c0c0 ;　
color:#656565;
font-size:12px;
background-color: #f5f5f5;
}

上を参考にしてみてください♪

高桜幸さん、質問ありがとうございます。

上のソースはPCようですね。
携帯用に説明を入れるのをすっかり忘れてました


携帯用のソースはこれになります▼

[Secret] <br>
<input type="checkbox" name="delete_flg" value="t"><br>

入れる場所は<!--if_comment_form-->～<!--/if_comment_form-->の間のところなのですが、一例として[PASSWORD]のスグ下、送信ボタンのスグ上に入れるとするとコメントフォームのソースは▼のようになります。

<form action="<!--$comment_form_link-->" method="POST"><font size="2">
[NAME]<br>
<input type="text" name="name" value="<!--$g_cookie_name-->"><br>
[TITLE]<br>
<input type="text" name="title" value=""><br>
[MAIL]<br>
<input type="text" name="mail" value="<!--$g_cookie_mail-->"><br>
[URL]<br>
<input type="text" name="url" value="<!--$g_cookie_url-->"><br>
[COMMENT]<br>
<textarea name="comment" cols="20" rows="4"></textarea><br>
[PASSWORD] <br>
<input class="CommentForms" type="password" name="pass"><br>
[Secret] <br>
<input type="checkbox" name="delete_flg" value="t"><br>
<input type="submit" value="SUBMIT"><br>
</font>
</form>

これを参考に入れる位置を決めてみてください<(_ _)>

私の環境、WinXPでFirefox使用だと、微妙に横カレンダーがタイトル枠の左端と重なってるように見えるのです。
センタリングが効いてないっていったほうがいいのかな？
むしろ、幅指定が足りないのかも？

もし問題あるようでしたら、下のスタイルを追加しておくとおそらく直ります。
table.top_calendar{
width:570px;
text-align:center;
}

原因がはっきりしてないのでちょっと良くわからないのですが･･･
あいまいな表現ですいません(*- -)(*_ _)ペコリ

無事、設置できたようでなにより、といいたいのですが･･･
私のパソコンからみると崩れてる･･･ような？

また、後ほど調べてみます。
私のPCのせいかもしれないのでちょっと微妙なので。

お待たせしてすいませんでした。

HTMLの変更とスタイルシートの追加で可能です。

ただ、出来なくはないのですが、スタイルシートの調整に手間取ってます。
いま、少々立て込んで？いまして、ちょっとすぐには･･･

遅くとも月曜までにはこのコメントの返信に追記します。
すいません

追伸：遅くなりました。
テーブルを使うとどうやらうまく出来そうです。

テンプレートのHTMLから<div class="top_calendar">～</div><!--△top_calendar-->を探してその中身を以下のものに置き換えてください。

<table class="top_calendar">
<tr>
<th>
<a href="<!--$plugin_calendar_prev_link-->" title="<!--$plugin_calendar_prev_mon-->月の記事へ">≪</a>
<a href="./" title="TOPページへ"><!--$plugin_calendar_now_year-->.<!--$plugin_calendar_now_mon--></a> │
</th>
<!--plugin_calendar_date-->
<td><!--$calendar_date_day--></td>
<!--/plugin_calendar_date-->
<th>
<a href="<!--$plugin_calendar_next_link-->" title="<!--$plugin_calendar_next_mon-->月の記事へ">≫</a>
</th>
</tr>
</table>

その後スタイルシートから
div.top_calendar {
width:580px;
font-size:11px;
text-align:center;
letter-spacing:-1px;
word-spacing:0px;
position:absolute;
top:135px;
}
という部分を探してください。
みつけたら、上のはそのままでいいのでその下に以下の指定を付け加えてください。

table.top_calendar td{
width:15px;
font-size:11px;
text-align:center;
word-spacing:0px;
}

table.top_calendar td a:link{
background:url("http://bfile.shinobi.jp/646/green-hana.gif") no-repeat center center;
display:block;
}
table.top_calendar td a:visited{
background:url("http://bfile.shinobi.jp/646/green-hana.gif") no-repeat center center;
display:block;
}
table.top_calendar td a:hover{
background:url("http://bfile.shinobi.jp/646/green-hana.gif") no-repeat center center;
display:block;
}
table.top_calendar td a:active{
background:url("http://bfile.shinobi.jp/646/green-hana.gif") no-repeat center center;
display:block;
}

ちょっと指定が長いですがこれで花のアイコンが記事を書いた日付に表示されると思います。

返答遅くなってすいません<(_ _)>

設置がんばってくださいね～

･･･と言おうと思ったのですがすでに設置はされてますね(＾-＾；)
もうひとつのコメントのご質問の方にお答えしますね～

>あるふぁさんのこちらのブログの真中に表示されています最新記事のタイトル一覧というのはどういうふうにしたらできるのでしょうか？
>記事のタイトル一覧がある方が見やすいのではないかと思いまた質問させていただきました。

EntryNavigationというプラグインのことですよね？
これは自分用にというか、このブログ用に作ってあるのでこのままでは他のブログでは使えないのです

別の方からも同様の質問を頂いているので、設置したいという人はもっといるのでしょうか･･･？
どのブログでも使えるようにしたものを作ってみようと思います。
作りましたらそのうち記事にUPしておきますのでしばらくお待ちくださいませ(*- -)(*_ _)ペコリ

追伸：
すいません。独自構文解説書とにらめっこしていて今気づきました。
このブログ用の指定なんて必要なかったです
いちいちわけ分からないことしてました(- -;)
というわけでこれから記事にしてUPしますね～(＾-＾；)

すいません。まったく気づかず、お返事遅くなりました。

無事解決してなりよりです♪

しばらくテンプレは作れそうにもないですが、やめるということはないので作りましたらまたどうぞよろしくです

はじめまして。そしてのっけからすいません<(_ _)>

訂正したときに１箇所スタイルシートの指定を抜いてしまってました
div#top {
text-align:left;
width:580px;
height:150px;
background:url("http://bfile.shinobi.jp/646/green-t-back.gif") no-repeat left top;
}
▲のスタイルシートのところ本来こうしているはずが、text-align:left;が抜けちゃってました。

IEですとこれが抜けてるとカレンダーなどの表示がかなり変なことに
テンプレの修正申請、再び出しておきますが、反映されるのは週明けだと思いますので、一箇所いれておいてくださいませ(*- -)(*_ _)ペコリ

ホントすいません<(_ _)>

無事解決してよかったです♪

返信いつも遅くなっててすいません。

こんばんわ。遅くなりました。

>ブルーチャイナで、真ん中の記事の部分（題名の部分も同じようにですが）をもう少し広くしたいのですが･･できますでしょうか？
>いろいろ、それっぽいところを変更してみたのですが、サイドのどちらかがごっそりなくなってしまったり、記事の書き込む部分は広がっても、飾り枠だけがそのままだったりで…。
たぶん、やり方はあってるんだと思います。
ただ、飾り枠の画像が幅固定で背景画像に設定してあるので画像を編集しないといかんともしがたいです。
ドット絵なので割りと簡単に編集は可能ですが。
記事の飾り枠の画像は３種類です。
div.entryにベースとして引いている画像▼
http://bfile.shinobi.jp/1076/china-b-entrycontent-base.gif
div.entry_titleの背景（飾り枠の上部分）▼
http://bfile.shinobi.jp/1076/china-b-entrytitle-base.gif
div.entry_footerの背景（飾り枠の下部分）▼
http://bfile.shinobi.jp/1076/china-b-entryfooter-base.gif
▲の３つを広げたい記事の幅に合わせて編集すればよいと思います。
あと、もうひとつ日付の部分に渦巻きのようなラインがありますがそれは必要に応じてでよいかな？と思います。

CSS的には、全体の幅(#container)を広くして、記事と左サイドを囲んでる枠(#wrapper)を広くして、さらに真ん中の部分の枠(#contents)を広くして・・・と必要な箇所をどんどん広くしていく必要があります。
サイドの幅を小さくするのなら全体の幅はいじらなくてすむこともあります。
数値が矛盾するとサイドがオチます。

あとはどのくらいの幅にしたいかによると思います～

どういたしまして(^-^*）
また、何かありましたらお気軽にどぞ(^o^)

黒雪さん、はじめまして(^-^*）

ご質問の件なのですが、おそらくスタイルシートに次のようなところがあると思います。(最初のほうです)
div, p, hr, blockquote, address, noscript {
position: static;
margin : 0px 0px 0px 0px ;
padding : 0px 0px 0px 0px ;
text-align:left;
border: none;
}
この中のtext-align:left;がよろしくないようなので削除してください。
ですが、これを消してしまうと記事やコメントの文章がセンタリングしてしますのです。
それで別のところをtext-align:left;に変えると記事部分＆コメントの文章が元に戻ります。
▼の部分を探してください。(２つの部分は結構離れてます。)
/* 記事 */
div.entry {
width:410px;
margin: 10px 0px 10px 0px ;
text-align:center;
background:url("http://bfile.shinobi.jp/1076/china-b-entrycontent-base.gif") repeat-y bottom center #ffffff;
}
/* コメント&トラバ*/
div.cmtb {
width:410px;
margin: 5px 0px 5px 0px ;
text-align:center;
}
この中にtext-align:center;という部分があります。(のあるところです。)
これをtext-align:left;に変えてください。

実はこの指定のせいでHTMLエディタもうまく使えてなかったので、訂正して申請してあります。
カスタマイズされているようなので微妙なのですが、ブルーチャイナはコメントの非公開機能を追加した際にこの辺も訂正して申請してすでに承認されているのでよろしければ参考にしてください。

分かりにくい説明ですいません<(_ _)>

>ご返答ありがとうございました。
>無事、自分の思うようにできました。

よかったです。また何かありましたら、お気軽にお尋ね下さい♪

きあさん、こんばんわ

GRAYの行間でしたら、できます。
ただ、スタイルシートをいじっていただいて、背景に使用しているノート画像と行間の高さ(幅？)の指定を変える必要はありますが。

変える箇所は▼の２箇所です。本文と追記の指定なので内容は同じ指定になってます。

div.entry_text {
margin:0px 10px 0px 10px;
font-size:11px;
line-height:25px;
background:#ffffff url("http://bfile.shinobi.jp/759/gray-note.gif");
}

div.entry_ps {
margin:0px 10px 0px 10px;
font-size:11px;
line-height:25px;
background:#ffffff url("http://bfile.shinobi.jp/759/gray-note.gif");
}

この中の『line-height』が行間の指定、画像のURLがノート風の画像です。
ノート風の画像といっても点線の画像を敷き詰めてるだけなのでドット絵で簡単にできます。
『line-height』で指定した高さと同じ高さで点線の画像を作成して画像を入れ替えれば好きなように行間は設定できます。

ちなみに▼のは、行間を20pxに指定するスタイルシートです。
これをこのまま使ってもOKですので、分からなければこれを入れ替えてみてください。
div.entry_text {
margin:0px 10px 0px 10px;
font-size:11px;
line-height:20px;
background:#ffffff url("http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/1155401921");
}

div.entry_ps {
margin:0px 10px 0px 10px;
font-size:11px;
line-height:20px;
background:#ffffff url("http://blog.cnobi.jp/v1/blog/user/71c2c20f35eebba960318cc90157cdbb/1155401921");
}

でも、画像はできたらご自分のファイルにUPしたほうが良いと思います。

こんばんわ～

>スクロールすれば見れるようになるって言うアレだと思います。
>不具合って程でもないと思いますが、お暇なときにでも確認してみてくださいー

わざわざどうもありがとうございます
幅指定が足りなかったのですね(￣▽￣;)
どーもすいません。修正しましたので、また再申請させていただきます。

注：このレスは、復元したものです。元の投稿時間は｢2006-05-27-Sat 04:09｣です。