mysticdiary

更新はLittleDreamでしています。右のバナーからどうぞ

mysticdiary2/背景色等変更の仕方

mysticdiary2をお使いいただきありがとうございます。
今の所、mysticdiary2の背景色は、ダークグレーとライトグレーの2色。
サイドバーのオーナメントは、リボンと付箋のバージョンがあります。
組み合わせは自由にできます。(といってもあまりパターンはありませんが・・・)
共有になっているのは、ダークグレー&リボンのバージョンですので、
これを基本にして変更する方法を書きます。

●背景色をライトグレーにする方法

以下のCSSをダウンロードして編集画面に貼り付けてください(全部差し替えてください)
mysticdiaryribbon.css
mysticdiaryribbon.css

●背景色をライトグレーに、サイドバーを付箋にする

以下のCSSをダウンロードして編集画面に貼り付けてください。(全部差し替えてください)
mysticdiary3.css
mysticdiary3.css ●サイドバーのオーナメントを付箋にする方法

以下のcssを

#lmenu h3 {
width:220px;
font-size: 16px;
font-weight: bold;
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/book4ribbon.png);
background-position:left center;
background-repeat:no-repeat;
font-family:'MS 明朝','Georgia',serif;
color:#eeeeee;
padding: 22px 0px 22px 50px;
}
こちらに差し替えます。

#lmenu h3 {
width:220px;
font-size: 16px;
font-weight: bold;
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/book5fusen2.png);
background-position:right center;
background-repeat:no-repeat;
font-family:'MS 明朝','Georgia',serif;
color:#20120e;
text-align:left;
padding: 40px 0px 40px 50px;
}


●上部のナビゲーションの編集

以下の記事を参考にしてください。
メタリックな感じで・・・

3月26日追記:

●コメント欄のカスタマイズ

相変わらず管理人のテンプレートにはコメント欄の機能が少ないです・・。
単なる管理人の好みの問題なのですが、色々機能を追加したい!という方は以下の方法で
カスタマイズしてみてください。

まずHTMLの編集です。 管理人のテンプレートには編集機能がついていません。編集機能をつけるには、コメント入力欄に パスワード欄も必要になります。(ちょっとわかりにくですけど、構造的な説明は コメント欄のカスタマイズについてを参照してください)

まずHTML編集欄で、

 <!--comment_area-->
<!--/comment_area-->

で囲まれた部分を探し、丸々以下のHTMLに変更します。


 < !--comment_area--> 
< h4 id="comheader"> < a id = "comment" name="comment"> < img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/book4comment.png" /> < /a> < /h4> 
    < !--comment--> 
      < div class="content"> 
< div class="combo"> 
< div class="comtitle"> 
        < a id="comment< %comment_no> "> < %comment_title> < /a> 
< /div> 
< %comment_body> 
          < div class="comfooter"> 
            < %comment_year> .< %comment_month> .< %comment_day>  
< %comment_hour> :< %comment_minute> :< %comment_second>  |
          < %comment_url+str>  | < %comment_mail+name>  #< %comment_trip> 
          [< a href="< %comment_edit_link> "> edit< /a> ] 
          < /div> 


< /div> 
      < /div> 
    < !--/comment--> 
上の続き


<h4 id="comformtitle"> <img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/book4post.png" /> </h4> 
    <form method="post" action="./"> 
      <input type="hidden" name="mode" value="regist" /> 
      <input type="hidden" name="comment[no]" value="<%pno> " /> 
      <div class="content"> 
        <ul class="comform"> 
          <li> <label for="name"> name</label> </li> 
          <li> <input id="name1" type="text" name="comment[name]" size="30" value="<%cookie_name> " /> </li> 
          <li> <label for="subject"> title</label> </li> 
          <li> <input id="title1" type="text" value = "" name="comment[title]" size="30" /> </li> 
          <li> <label for="mail"> mail</label> </li> 
          <li> <input id="mail1" type="text" name="comment[mail]" size="30" value="<%cookie_mail> " /> </li> 
          <li> URL</li> 
          <li> <input id="url1" type="text" name="comment[url]" size="30" value="<%cookie_url> " /> </li> 
          <li> comment</li> 
          <li> <textarea id="text1" cols="40" rows="8" name="comment[body]"> </textarea> </li> 
          <li> password</li> 
          <li> <input id="pass1" type="password" name="comment[pass]" size="20" /> </li> 
          <li> secret</li> 
          <li> <input type="checkbox" name="comment[himitu]"> 
  管理者にだけ表示を許可する</li> 
          <li> <input style="border=0" type="image" name="post" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/book4sumit.png" alt="送信" title="送信" /> </li> 
        </ul> 
      </div> 
    </form> 

  <!--/comment_area--> 


次に、今挿入したHTMLの直下に以下のHTMLを追加します。

 <!--edit_area-->
    <h4 id = "comformtitle"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/mysticdiary2editcome.png" /></h4>
    <form method="post" action="./">
    <div class="content">
      <input type="hidden" name="mode" value="edit" />
      <input type="hidden" name="mode2" value="edited" />
      <input type="hidden" name="edit[rno]" value="<%eno>" />
      <ul class="comform">
        <li><label for="name">name:</label></li>
        <li><input id="name2" type="text" name="edit[name]" size="30" value="<%edit_name>" /></li>
        <li><label for="subject">title:</label></li>
        <li><input id="title2" type="text" name="edit[title]" size="30" value="<%edit_title>" /></li>
        <li><label for="mail">mail:</label></li>
        <li><input id="mail2" type="text" name="edit[mail]" size="30" value="<%edit_mail>" /></li>
        <li><label for="url">URL:</label></li>
        <li><input id="url2" type="text" name="edit[url]" size="30" value="<%edit_url>" /></li>
        <li><label for="comment">comment:</label></li>
        <li><textarea id="text2" cols="40" rows="8" 
name="edit[body]"><%edit_body></textarea></li>
        <li><label for="pass">password:</label></li>
        <li><input id="pass2" type="password" name="edit[pass]" size="20" /></li>
        <li><input style="border=0" type="image" name="post" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/book4sumit.png" alt="送信" title="送信" /></li>
      </ul>
    </div>
    </form>
    <!--/edit_area-->


上記が、編集機能です。HTMLの変更は以上です。
挿入する場所さえ間違えなければオッケーです。

次にCSSで見栄えをコントロールします。
CSSの編集は単なる好みのため、4項目全部行う必要はありません。
ただ、4番目の項目だけはテンプレートの雰囲気を損なわないという意味で
強くおすすめします。
それぞれの数値はお好みで変更してください。

1:コメントのフッターの点線の位置を調整する。

.combo{
padding:20px;
border-bottom:1px #20120e dotted;
}
このCSSを以下に変更します。

.combo{
padding:20px 20px 5px 20px;
border-bottom:1px #20120e dotted;
}


2:コメントタイトルの下にマージンを挿入して見やすくする

.comtitle {
font-size:14px;
font-weight:bold;
color: #20120e;
}
このCSSを以下に変更します。

.comtitle {
font-size:14px;
font-weight:bold;
color: #20120e;
margin-bottom:10px;
}


3:コメントフッターのイタリックをノーマルに戻す

.comfooter, .tbfooter {
margin: 5px 0 ;
text-align: right;
font-size: 70%;
font-style:italic;
}
このCSSを以下に変更します。

.comfooter, .tbfooter {
margin: 5px 0 ;
text-align: right;
font-size: 70%;
}


4:コメント入力欄の見栄えをコントロール

#name1{
width:200px;
padding:5px;
border:1px #20120e dotted;
color:#20120e;
background-color:transparent;
}

#text1{
width:400px;
padding:10px;
height:150px;
border:1px #20120e dotted;
background-color:transparent;
color:#20120e;
scrollbar-base-color:#e6d8bf;
scrollbar-track-color:#e6d8bf;
}
このCSSを以下に変更します。

#name1,#name2,#title1,#title2,#mail1,#mail2,#url1,#url2{
width:60%;
padding:5px 10px;
border:1px #20120e dotted;
color:#20120e;
background-color:transparent;
font-size:13px;
}

#pass1,#pass2{
width:100px;
padding:5px;
border:1px #20120e dotted;
color:#20120e;
background-color:transparent;
}

#text1,#text2{
width:95%;
padding:10px;
height:150px;
font-size:13px;
border:1px #20120e dotted;
background-color:transparent;
color:#20120e;
scrollbar-base-color:#e6d8bf;
scrollbar-track-color:#e6d8bf;
}


以上です!おつかれさまでした~。

3月27日追記:

上の方法でうまくいかない方へ。
最後の手段でhtmlとcss全部差し替えてみてください。

mysticdiary2edit.html
note.png

mysticdiary2edit.css
note.png
関連記事
baorin

いつも超ド近眼眼鏡をかけています。ああ、視力が良くなりたい・・・。好物はおすしです。性格はずぼらで人見知りです。こわい人がきらいです。

13 Comments

ゆるポタ says...""
初めてコメントさせてもらいます。

この「mysticdiary2」、素晴らしいテンプレです。
他のテンプレが、陳腐に見えます。
私も、ワイド画面用に、新しいテンプレを探していて、
やっと巡り合えたような気がしました。

そこで早速、使わせてもらおうと思ったのですが、
コメント欄に、「タイトル」と「編集機能」が
無い事に気付き、今、とてもショックを受けてます^^;
今使っているテンプレの引き継ぎのためにも、「タイトル」欄が
必要で、「編集機能」は、とても便利だと思っています。

以前の記事を参考にさせてもらい、なんとか追加しようと
試みましたが、訳が分かりません・・・
よろしかったらで、いいのですが、コメントにタイトルと
編集機能を追加する方法を、ご教授願えないでしょうか。
上の、オーナメントを付箋にする方法は、とてもよく分かりました。
よろしくお願いします。

2010.03.25 19:47 | URL | #- [edit]
管理人 says...""
ゆるポタさん、こんにちは。

上の記事で追記したので、参考になさってください。
2010.03.26 13:00 | URL | #- [edit]
ゆるポタ says...""
こんばんは。
ありがとうございます。まさか、ここまで丁寧にご教授頂けるとは
思っておらず、大変嬉しいです。

早速、指示に従い、HTMLとCSSを、差し替え、コメント欄が、正に私の
望んだ姿になった事に、感動しつつ(笑)、いざコメントを書いて
送信しようとしたのですが、
「不正なフォームから投稿されています」と、でます。
無視して、もう一度、送信すると、今度は
「コメントが空欄です」と、出ます^^;

指示どおり、間違い無く、<!--comment_area--> <!--/comment_area-->の間に
差し替え、その下に、<!--edit_area-->を、もってきたのですが、
なんででしょ?
もう一度、見てみます^^;

2010.03.26 21:27 | URL | #- [edit]
管理人 says...""
ゆるポタさんへ。

一度ソースをみてみたいので、ブログのアドレスを教えてください。
(投稿画面のurl入力欄に記入すると、管理人の管理画面だけで確認できます)
それと、ブラウザのキャッシュをクリアするとうまくいく場合も
あるかも知れません。一度ためしてみてください。
2010.03.27 00:22 | URL | #- [edit]
ゆるポタ says...""
すいません、お世話になります。

ブラウザのキャッシュをクリアしてみましたが、ダメでした。
色々パターンを試してみましたが、
<!--comment_area--> <!--/comment_area-->を元に戻すと、
他の設定を変更していても、コメント送信出来るようになります。

ブログのアドレス、送ります。
宜しくお願いします。

タイトル欄だけでも追加したいので、
少ない知識で試してみます^^;
2010.03.27 09:33 | URL | #- [edit]
mysticdiary管理人 says...""
ゆるポタさん。
ブログ拝見しました。タイトルを追加しただけだと、
送信はできるみたいですね。
管理人も実際に自分の記事からソースをコピペして新たに作ってみましたが、
特に支障はありませんでした。

ソースを拝見させていただきましたが、htmlはうまく見れませんでした。
なので何が原因なのか正直よくわからないです・・。(スミマセン)
最後の手段として、管理人が成功しているhtmlとcssをダウンロードして
全部差し替えてみたらいかがでしょうか?
上の記事に追加しておきます。

それと、念のため、ウィンドウズかマックどちらを使用しているか、
使用しているブラウザとそのバージョンなどをおしえてください。

2010.03.27 14:43 | URL | #- [edit]
ゆるポタ says...""
ご迷惑をお掛けしています^^;

ウィンドウズ ビスタで、バージョンは、「6.0 サービスパック2」です。

わざわざ、ダウンロードまで作って頂き、申し訳ありません。
早速、ダウンロードしようと思ったのですが、
CSSの方は、メモ帳に変わるのですが、HTMLの方が、メモ帳に
切り替わらず、ダウンロード出来ません。
こちらに問題があるんですかね^^;

同様に、上の「背景色をライトグレーにする方法」を
ダウンロードすると、一部文字化けします。

どうしても使いたいと思ってますので、
なにとぞお願いします。
2010.03.27 15:42 | URL | #- [edit]
ゆるポタ says...""
たびたび、申し訳ありません。

ダメ元で、ブラウザをサファリに代えて、コピー貼り付けから
やり直したところ、なんと、正常にコメント送信できました!
訳が分かりませんが、結果オーライでも、トライしてよかったです。

管理人さんには、本当にご迷惑をお掛けしましたが、
辛抱強く、お付き合い頂き、本当にありがとうございました。
このテンプレは、ブログを止めるまで、末永く使わせてもらいます。
ありがとうございました。

何か改良が、ありましたら、また、お邪魔させてもたいます。
背景色に、もっと明るいグレーがあると、良いと思います(^^ゞ

それでは、失礼します。
2010.03.27 17:30 | URL | #- [edit]
管理人 says...""
ゆるポタさんへ。
とりあえず解決したようで良かったです。
ブラウザはインターネットエクスプローラーだったのですね?
管理人の主立った環境がマックなので、文字化けする可能性は
あるかも知れません。
その場合は、文字エンコードを変更してみるか、
ファイルをダウンロードして開く場合も、EUC-JP方式で開いてみてください。
HTMLファイルはブラウザでも見れます。
ファイルをブラウザにドロップするだけです。メニューからソースを見るを
選ぶとHTMLが見れます。
2010.03.27 20:13 | URL | #- [edit]
火夜 says..."はじめまして"
こんにちは。

mysticdiary2テンプレートをとっても気に入って使わせていただいているのですが、一点気になりまして。
月毎アーカイブで特定の月を選択すると、他のテンプレートでは、その月の記事が5ずつ一頁に表示されるのですが、こちらのテンプレートを使うと、1頁につき1ずつしか表示されないような気がします。


素敵なテンプレートなので、出来ればまとめて表示するような方法(今、こちらのサイトで使用されているテンプレートで、月毎アーカイブを選んだ時の形式)にする方法を教えていただけませんでしょうか。

2010.04.13 14:09 | URL | #- [edit]
管理人 says...""
火夜さん、こんにちは。

もう一度環境設定の月別の記事の数を確認してみてください。
もしかしたら数字が1になってるかも知れません。
時々テンプレートを変更した時などに、勝手に設定が変わることが
あるようなのですが、管理人のテンプレートのせいなのか、
fc2のせいなのか、原因がよくわかりません。
よろしくお願いします。
2010.04.13 17:14 | URL | #- [edit]
火夜 says...""
こんにちは。

たまたま、いま記事にある背景がグレイになるCSS(mysticdiaryribbon.css)を貼り付けたところ、この問題が解消しました。

原因不明のままですが、今後もこちらの素敵なテンプレートは定期的にチェックして使わせていただきたいと思います。

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

2010.04.13 18:09 | URL | #- [edit]
管理人 says...""
火夜さんへ。

CSSファイルは見栄えのコントロールなので機能的な問題とは
あまり関係ないかも知れません。
ただ、テンプレートに手を加えたら問題が解消したということは、
ブラウザのキャッシュなどが関係あるかも知れません。
管理人も気になるので、引き続きいろいろ試してみます。

2010.04.13 20:32 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/148-8832fa98
← 書評などに使えるかも・・? → mysticdiaryの改良版ができた~