mysticdiary

vintage romantic web design

さて、やっとのことで・・

ようやく、というか最近風邪ぎみでバテバテだった管理人、mysticdiaryのグレードアップバージョンを完成させることができた。

mysticgradeup.jpg



なんとなく、机の上で本を読んでいる感じにしたかったが成功しているであろうか?(笑)

これも近々共有申請してみよう。

さて、またお知らせであるが、いままで管理人が共有申請したテンプレートの中でも、最も 人気が高いと思われるのが、starforestである。
このテンプレートに関しては、3カラムはないのか、とか左右逆のバージョンは?とか聞かれることが多いので、とりあえず3カラムに着手している。

12月4日追記:リクエストがあったので、少々カスタマイズについて説明。

●下部のナビゲーションを上部にもつける方法。

まず下のソースをhtml編集画面で探してください。
custamsetumei1.jpg

見つけたら、その部分を選択・コピーして、下の図の色付き部分以外のソースを探して(html上部の方にあります)、貼付けます。そして一行目の”shitanabi"
の部分を”uenabi"と書き換えます。すると見た目がこんな具合になります。
custamsetumei2.jpg

ここで、htmlを一旦更新して、プレビューするとナビゲーションがすでに入っていますが、上下のスペースなどが
気になる時はさらにcssを編集します。

該当のcssはこれです。検索などでがんばって探してください。
shitanabisetumei.jpg
このcssに”uenabi"のcssを追加してあげます。

uenabisetumei1.jpg
例えば、こんな具合です。このcssでは、ナビゲーションの上部のスペースは0px(なし)、下部のスペースは30pxとっていますが、これはお好みで数値を変えてください。だいたい0~30pxぐらいの間が見栄えがいいと思います。

●サイドバープラグインのタイトルのフォントサイズを変更する

これはcssの編集だけです。まず該当のcssを探し出し、
h3menukaisetu.jpg

2行目のフォントサイズが18pxになっている所の数値をお好みで変更します。
日本語のフォントだともう少し小さい方が見栄えがいいかもしれません。
あとはお好みでフォントの種類などは変えてください。背景に画像が入っているので、あまり位置の数値などは
動かさないほうがいいと思います・・。

●コメントにURLをつけたい

コメントを書く上で、ジブンのHPへのリンクを記載したい場合は、
テキスト入力欄にURLを書くと、自動的にリンクされます(FC2ブログの仕様)。以上!

・・・つ~か、これで終わっては元も子もないので(爆)、以下、
フッターの部分にリンクが記載される方法。

該当のHTML2カ所に水色の部分を追加。

その1
commenturl1.jpg

その2
postcommenturl.jpg


これを追加すると、コメント欄にURLを記載する欄と、フッターの部分にURLリンクが出てきます。
cssの編集は特に必要ありません。
関連記事
baorin

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

22 Comments

七瀬 由布 says..."テンプレートの御礼と御願い"
素敵なテンプレートを、ありがとうございます。
早速使わせて頂いておりますが、ひとつだけ、御願いがあります。
ページの下にある←newer postとolder post→を、ページの上にも入れることは出来ませんでしょうか?
そのようにカスタマイズするには、どのようにしたらよいのでしょうか。
もしお時間がありましたら、教えてください。
2009.12.04 14:34 | URL | #- [edit]
管理人 says...""
七瀬 由布さま。

少しカスタマイズについて解説してみましたので、記事を参考にしてみてください。
2009.12.04 23:48 | URL | #- [edit]
縞メノウ says...""
こんばんは。
とっても素敵なテンプレートで、昨日より使わせていただいております。
post a commmentから「絵文字が入れられない」とコメントを頂きました。font&icon を追加できますでしょうか?
お忙しい所、恐れ入りますが教えていただけるとありがたいです。よろしくお願いします。
2009.12.05 22:27 | URL | #- [edit]
管理人 says...""
縞メノウさま。

絵文字を追加する方法は、このページ(http://blog2.fc2.com/blog/blog-entry-18.html)を参考にするといいと思います。

ただ、この通りにしても、太字と斜体の文字装飾が反映されないと思いますので、css編集画面で、一番上の方にある
font-style : normal;
font-weight : normal;
を削除してください。

これで、なんとかなると思います。
2009.12.05 23:24 | URL | #- [edit]
七瀬 由布 says..."ありがとうございます。"
わざわざお応え頂き、ありがとうございます。
頑張ってやってみます。
2009.12.06 00:14 | URL | #- [edit]
七瀬 由布 says..."出来ました!!"
早速やってみました。
出来ました!!
こういう作業がとても苦手なので、とても分かり易い御説明をして頂いて、とっても助かりました。
本当に、ありがとうございました。
2009.12.06 00:28 | URL | #- [edit]
縞メノウ says...""
有難うございました。何とか(汗)なったようです。
引き続きお借りいたします。お世話になります。
2009.12.06 17:26 | URL | #- [edit]
roco* says...""
こんばんは、はじめまして!
数日前から気に入って使わせていただいてます(^^*)
色々は提案があるのですね!
上のを参考に色々チャレンジさせていただきます。
それでcommentの欄にURLの追加などできるのでしょうか?
fc2のコメント確認のページに記載しただけではコメント欄からリンクできないようなので・・・
こちらHTMLの事は全くわからないので、もしできましたら上記の説明のように教えていただけると助かります。
お忙しいとは思いますが、宜しくお願い致します。
2009.12.08 21:22 | URL | #- [edit]
管理人 says...""
roco*さま。

新たに追記したので、記事の下の方を参考にしてみてください。
2009.12.09 21:38 | URL | #- [edit]
roco* says...""
こんにちは、roco*です。
ありがとうございました。
色々勉強になることばかりです。
URLの表示は出るのですが記入欄までは出てこない状態で苦戦してます。
やはりfc2の投稿ページにて記載していただかないといけないのですね。
投稿欄で書いていただくとコメントの下のURLでジャンプする事はできました。
お世話になりありがとうございました。
2009.12.10 12:56 | URL | #- [edit]
管理人 says...""
roco*さま。

そうですか~。
ふと、今気づいたのですが、図その2の水色のHTML部分で一つスラッシュを入れるのを忘れてました!
なくても可動する場合が多いのですが、もしかしたら
そのせいかも知れません。

<%cookie_url>" /></li>

こういう感じにしてもらったら、もしかしたら・・・
それでも駄目だったらすいません。

2009.12.11 16:17 | URL | #- [edit]
ジミヘン says...""
はじめまして ジミヘンと申します。
mysticdiary というテンプレートが
とても気に入りました。

タイトルの文字色を「白」にしたいのですが、
どのようなカスタマイズをすればよいのでしょうか?
どうか、ご教示ください。

2010.01.03 09:26 | URL | #- [edit]
管理人 says...""
ジミヘンさま。

タイトルの文字色を変更するのは簡単です。
CSS編集画面で上の方にある、h1という項目を
探してください。
その項目のcolor:#20120e;というところをお好きな
色に変更します。白だったら、color:#ffffff;
にします。

同時にh1 a:link(リンク色)、 a:hover(ホバー時)の項目もお好きな色に変更してください。
2010.01.06 10:31 | URL | #- [edit]
ジミヘン says...""
どうもありがとうございます。
なにせ、無知なものでごめんなさい。
使わせていただきます。

2010.01.06 13:26 | URL | #- [edit]
kumi says...""
はじめまして。a送信がうまく行かなかったようなので
再送します。もし届いてたら重複してしまってすみません。
デザインがとてもステキで今日からお借りしてます。
「最新記事」「カテゴリ」「カレンダー」などの項目の字体をゴシックに。さらにはローマ字に変更したいのですが、変更しても大丈夫ですか?
もしいい場合、お忙しいとは思いますが、教えていただけると嬉しいです!パソコンの数式みたいなのは苦手なので、バカにもわかるようにお願いいたしますm(_ _)m
2010.01.15 06:50 | URL | #- [edit]
管理人 says...""
kumiさん。はじめまして。
サイドバーのタイトルの字体を変更したいときは、
CSS編集画面で、#lmenu h3 という項目を探します。
その項目の中の、font-family:Georgia,serif;
というところを変更します。

初期設定では字体はセリフ系になっているので、
そこをゴシックに直すには、例えば
font-family:"MS ゴシック",sans-serif; という感じに直します。
sans-serifというのはゴシック系のフォントという意味です。この表記だけでもゴシックに直ります。
ゴシック系の特定のフォントを指定したい場合は、
その前に、"MS ゴシック"という風に表記します。

また、ローマ字に直したい場合は、環境設定のプラグインの設定画面から直してください。


2010.01.15 11:43 | URL | #- [edit]
kumi says...""
管理人さま

ありがとうございます。できました^^
あと、ローマ字に直すことについて、簡単すぎる質問ですみません。長い時間パソコンとにらめっこしてたらよけいにわけがわからなくなってしまってて。

本当に丁寧にありがとうございます!
2010.01.15 19:41 | URL | #- [edit]
Dwo says...""
はじめまして、最近このテンプレートを愛用させていただいてます。
自分は小説をメインにやっているブログに使っているのですが、記事の幅が狭くてウィンドウを全体化すると少し見にくくなってしまっています。
このテンプレートをかなり気に入っているので本の部分を大きくするにはどうしたらいいか、教えてくださいお願いします!!
2010.03.02 21:54 | URL | #- [edit]
管理人 says...""
Dwoさん、こんにちは。

え~と、ご質問の件ですが、
記事の幅を広げることはできるのですが、背景の本の画像は
横幅が固定されているので、これ以上広げることはできません。

背景の本の画像からはみ出ないように記事の幅を広げることができる範囲は、
今500pxに設定してありますが、580pxぐらいまでです。
今の文字の大きさだと、一行の文字数が5文字ぐらい増える程度です。
背景よりはみ出してもかまわない!という場合は、
だいたい730pxぐらいまで広げられます。

どちらの方法でもかまわないから教えて欲しい!という場合は、
またコメントをください。
よろしくお願いします。

2010.03.04 12:11 | URL | #- [edit]
kumi says..."こんにちは"
テンプレートをお借りしている者です。
このテンプレート、机の上にノートがある感じが素敵なのですが、
ノートの部分(文字を書く背景部分)を、白地にすることはできますか?
よろしくおねがいします。
2010.08.15 17:24 | URL | #- [edit]
管理人 says..."kumiさんへ"
こんにちは。

バックを白くしたい場合は、
下のようにCSS編集画面で

.kizi_body {
margin: 0px 0px 10px 0px;
padding: 15px 20px 40px 0;
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/bookdivider.gif);
background-repeat:no-repeat;
background-position:center bottom;
background-color:#ffffff;
}

このようにbackground-color:#ffffff;
と追加してください。
2010.08.17 17:00 | URL | #- [edit]
kumi says..."こんにちは"
お返事ありがとうございます! 
できました^^
このシンプルなテンプレート、とてもとても気に入っています♪
2010.08.17 20:00 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/117-d2fc1e8e
← mysticdiaryにオーナメントを追加する方法 → マイケルの変な写真