mysticdiary

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

いや~なんとロマンチックに挑戦!

なにを血迷ったか、あれほど避けていたロマンチックテイストに挑戦。
自分でもびっくり。
暑さで頭がおかしくなってしまったのであろうか??(爆)
どっちかというと男性的なテイストが好みの管理人であるが、ノスタルジックな雰囲気に
ひかれる今日このごろ、思い切ってロマンチックにしてみました。

romanticgirlsample.jpg

写真はスライドショーになってる。
この色っぽいオネエさんの写真はパブリックドメインの写真。
なかなかこういったノスタルジックないい写真は無料素材では見つからないので 苦労するのである。

もちろん画像の変更はできるので、お好みの風景写真でも、好きな人の写真でもいいかも知れない。
セピア色に加工すれば、いい感じに溶け込むと思う。

今回は新たな挑戦も多かった(爆)。
真珠なんて描いたことないから、いろいろ試行錯誤してなんとか真珠っぽい感じに・・・、
真珠って白で塗ればいいのかと思ったが、意外と光の影で黒く見えたりするんだな~ということが わかったりした。(笑)

機能的には前回のmymemoryを継承している。
コメント欄の機能充実はもちろんのこと、全記事表示や管理画面へのリンクなど、 便利に使えるよう心がけた。
これも共有申請してみよう・・。申請は来週ぐらいを予定。

5月14日追記:

げ~申請してから1日で公表!早いなあ~どうしたんだろう?FC2(笑)
というわけで、少々カスタマイズの方法など。

●写真の変更

これは前回のテンプレートと同じで画像のアドレスを差し替えるだけです。


<div class="photo2">
<style type="text/css"> 
  #memory2 {
    margin:0;
    width: 330px;
    height: 299px;
  }
</style> 
<script type="text/javascript"> 
  $(function() {
    $('#memory2').crossSlide({
      sleep: 20,
      fade: 1
    }, [
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romanticphoto1_20100504170849.png' },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romanticphoto3.png' },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romanticphoto5.png' }     
    ]);
  });
</script> 
 
<div id="memory2">Loading…</div> 
</div>
このhtmlの

{ src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romanticphoto1_20100504170849.png' },
この部分のアドレスを変更します。
前回と同じで、最後の写真には末尾に(,)を付けないでくださいね~。

ですが・・今回はその前に少々画像の加工が必要になります。
画像の大きさをそろえるのはもちろんですが、画像が斜めに回転しているので、
フォトフレームにあわせて画像編集ソフトなどであらかじめ回転させなければなりません。
角度をあわせるのは大変なので、


フォトフレームの画像


色っぽいおねいさんの画像

このサンプル画像を画像編集ソフトで開き、新しいレイヤーに自分の好きな写真を
貼り付けて、角度と大きさがあうように調整してください。
下のおねいさんの画像にぴったり重なるように作るとCSSで位置の調整など行わなくて
すみます。

●ナビゲーションの編集

今回は文字に画像を使っているので、お好きなリンク先に変更するのは見栄えの面で
ちょっと厳しいかも知れません。


<div class="admin"><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romanticadmin.png" /></a></div>

<div class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder" title="Rss"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romanticrss.png" /></a></div>

<div class="twitter"><a href="http://twitter.com/" onfocus="this.blur();" class="nonborder" title="Twitter"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romantictwitter.png" /></a></div>

<div class="allpost"><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder" title="全ての記事"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romanticallpost.png" /></a></div>

<div class="mail"><a href="mailto:?subject=問い合わせ&body=ご記入ください" onfocus="this.blur();" class="nonborder" title="メール"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romanticmail.png" /></a></div>
このまま使用する場合は、ほとんど変更しなくて大丈夫ですが、
ツイッターのリンク先と、メールアドレスはご自分のものに変更してください。

ツイッター

<div class="twitter"><a href="http://twitter.com/" onfocus="this.blur();" class="nonborder" title="Twitter"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romantictwitter.png" /></a></div>

href="http://twitter.com/"
ここのリンク部分をご自分のアドレスと差し替えてください。

例:

href="http://twitter.com/baobaobaorin"

メール


<div class="mail"><a href="mailto:?subject=問い合わせ&body=ご記入ください" onfocus="this.blur();" class="nonborder" title="メール"><img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/romanticmail.png" /></a></div>

href="mailto:?
この部分のmailtoと?の間に自分のメールアドレスを入れておくと、クリックした場合に、
メールソフトが開きます。

例:

href="mailto:baobaobaorin@yamail.com?

●サイドバーをすべて開いた状態にする。


<script type="text/javascript" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/slidetogglesample23.js"></script>
このjqueryへのリンクを切っておきます。このソースを丸々削除するか、後々のためにファイル名の最後の.jsだけとっておけば、リンクは切れます。

●サイドバーを全部閉じた状態にする。
今回は初期設定で一番上の項目だけ開いた状態にしていますが、全部閉じた状態にします。

<script type="text/javascript" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/slidetogglesample23.js"></script>
この部分を

<script type="text/javascript" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/slidetoggle.js"></script>
こちらに差し替えます。

○5月18日追記:

●記事の上にプラグイン3を設置する

HTMLの編集画面で、記事のHTMLの上にプラグイン3のHTMLを挿入します。
plugin3
(FC2BLOGの独自関数がどうしても記事中に表示できないため、
テキストファイルにしています。ファイルを開いて見てください)

このHTMLを挿入します。
おっと、その後でも前でもかまいませんが、挿入する前に、元々のプラグイン3のソースは削除 しといてくださいね。 これだけだと、見栄えが悪いので、以下のCSSを適当な位置に挿入します。
(できれば一番下)

#plugin3{
margin-bottom:50px;
}

.plugcontentleft h3{
margin-bottom:20px;
}

.plugcontentleft h3 img{
vertical-align:middle;
margin-right:10px;
}

.plugconleft{
margin-bottom:30px;
}
CSSは必ずしもこの通りでなくてかまいません。
あくまで個人の好みなので、マージンの数値などは適当に変更してください。
あと、メニュータイトルの横の真珠のイメージがいらないときは、
HTMLの

<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/pearl22.png" />
この部分を削除してください。

●一番上の真珠の画像や写真の横のバラの画像を削除する

バラの画像の場合

<div class="rose"></div>
真珠の画像の場合

<div class="pearl"></div>
上のHTMLを削除してください。
関連記事
baorin

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

19 Comments

Smile☆ says..."はじめまして。"
はじめまして。Smile☆と申します。
現在のブログは新しいのですが(隠れ家)、FC2歴は3年を過ぎました。
サムネイル600pxに合わせ、アバウトながらカスタマイズをしています。

画像が横幅600pxだとカットされますが、こちらも素敵なデザインですね。
これまでブラック背景は苦手で、気に入った共有テンプレートは殆ど無い。
でも過去に熱中したチェス等・・・何点かDLさせて頂きました。
過去を回想させるような、力強く温かい作品が多くとても好みです。

デザイン的に美しくないのかもしれませんが(素人の想像です)、
カットなしで600px全景が入るテンプレが「増えたら」嬉しいです。
2010.05.08 14:47 | URL | #- [edit]
管理人 says...""
Smile☆さんへ。

そうですね~。今のところ幅900pxのテンプレートばかりなので、
メインカラムは600px以下になってしまうことが多いですね。
横長のディスプレイが主流になりつつあるので、今後950から1000px
ぐらいまでは幅を増やすかもしれません。
可変幅にするなど、今後の課題として考えてみます。

2010.05.09 16:03 | URL | #- [edit]
Sara says..."「Plugin3」の固定表示について"
初めまして、Saraと申します (*^_^*)
とても素敵な、デザインだと思います。
実はつい最近私も、ノスタルジックに目覚めてしまいました。

このテンプレートを使用させていただきたいのですが、現在は「Plugin3」を、記事のいちばん上に、固定表示できるテンプを使用しております。

このテンプで「Plugin3」を、記事のいちばん上に固定表示するHTMLの記述を、教えていただけないでしょうか。
2010.05.16 01:47 | URL | #qbIq4rIg [edit]
すみれ says...""
こんにちは☆すみれと申します。
こちらのテンプレート、とっても素敵で早速使わせて頂きたいのですが、
プレビューでブログを見てみると、
上のレースと真珠、それからスライドショーの写真の手前にあるバラの画像や左のメニューの水玉などが背景に透過せずに表示されてしまうのです。
なので、タイトルの文字の一部分と、写真の一部が隠れてしまったり、水玉の周りだけ白くなって見えるのです。
試しに他のパソコンでも見てみたのですが、やはり同じでした。
カスタマイズもした事がなく、何が悪いのかが全然分からず・・
パソコンの環境のせいなのでしょうか・・?
もしも分かりましたら教えて頂きたく、コメントさせて頂きました。
どうぞ宜しくお願いいたします!

2010.05.17 15:29 | URL | #- [edit]
管理人 says...""
すみれさん、こんにちは。

早速ですが、ご使用のブラウザは何でしょうか?
ご指摘の画像は全てPNG形式の画像なため、ブラウザによっては
透過しないことがあります。
といっても、最近のブラウザならほとんど見れると思うのですが、
IE6なんかですとPNG形式の画像はうまく見れません。
あとネットスケープなんかでも見られないことがあるみたいです。

ブラウザ以外に原因があるとすれば、モニターの解像度などが
関係するのかも知れませんが、そこまではちょっとよくわかりません。

パソコンを変えて見たときは、ブラウザは違うものだったのでしょうか?
一度ブラウザを何か別のものに変更して確認してみてください。

それとOSの種類も教えていただけると助かります。
2010.05.17 17:13 | URL | #- [edit]
すみれ says...""
こんばんは。早速のご丁寧なご回答ありがとうございました!
ブラウザは、インターネットエクスプローラー7のSP2です。
OSは、XPになります。
私はこのパソコンをメインに使っているのですが、
だいぶ古いのではと思います。
ちなみに他のパソコンとは、仕事先のパソコンで、こちらも古く、
ブラウザは同じだと思われます。(OSも同じです。)
その後、友人のパソコンで拝見したところ、
きちんとキレイに見る事ができました!
何も分からないとはいえ、お騒がせして申し訳ありません・・

それから、上に掛かっている真珠と、スライドショーの手前のバラのhtmlは
どの部分になるのでしょうか・・?
とても気に入ったデザインでしたので、
このまま使用させて頂きたいのは山々なのですが、
自分のパソコンで見ると透過していないため、
この2つの外枠にできる白い部分がどうしても気になってしまい、
この2つだけを外して使用させて頂けたらと思い、
わがままな質問で大変申し訳ありませんが、
どうぞ宜しくお願い申し上げます。

2010.05.18 01:07 | URL | #- [edit]
管理人 says...""
Saraさん、こんにちは。

プラグイン3を記事の上にいれる方法を上の記事に追記してみましたので、
そちらを参考になさってください。
2010.05.18 11:01 | URL | #- [edit]
管理人 says...""
すみれさんへ。

そうですか~、IE7でも見れないことがあるのですね!
ちなみに管理人の主な環境はマックですが、一応ウィンドウズXPの
IE7でも確認しています。
管理人のパソコンでは透過していたので、やはりモニターなのも
関係してくるのでしょうかね?ここら辺は管理人も未知なので、
研究してみます。

画像の削除については上の記事に追記してみたので参考に
なさってください。
2010.05.18 11:04 | URL | #- [edit]
チョロQP says...""
はじめまして  

素敵なテンプレートをダウンロードさせていただきました。

写真を入れ替えることが できるとゆう事ですが

PC歴が まだ浅く どのように したらいいかわからず

尋ねにきました。

お時間が 空いた時にでも 教えていただけたら

うれしいです。

よろしく お願いします。

2010.05.29 18:28 | URL | #- [edit]
管理人 says...""
チョロQPさん、こんにちは。

写真の入れ替えがよくわからないとのことですが、
上記の記事の説明でわからない場合は、
具体的にどうわからないか書いていただけると非常に助かります。

fc2の基本的な操作(画像のアップロードの方法など)でしたら、
ユーザーフォーラムなどでも質問できます。
また、同じような質問も見つかる場合がありますので、
よかったらそちらも参考になさってみてください。
2010.05.31 07:37 | URL | #- [edit]
きるる says...""
はじめまして。
とってもステキなテンプレートなのでダウンロードさせていただきましたが、サイドバーを全て開いた状態にしようと、記載されている通りにしてみましたが、ページでエラーが発生しましたとなってしまって、閉じたままです。
よろしくお願い致します。
2010.06.27 13:26 | URL | #- [edit]
管理人 says...""
きるるさんへ。

サイドバーは通常jqueryへのリンクを削除すれば、
閉じている状態にしていることが
不可能なため、必然的に開いてしまいます。
エラーが出るのは、どこかに余計なソースがまじっているか、
必要のないところまで削除しているか、いろんな原因が考えられます。
もう一度ダウンロードしなおして、設定するか、
それでも直らない場合は、プラグインや記事に挿入したタグが
閉じられていないなどの可能性もあるかも知れません。
あるいはFC2側の問題で、時間がたつと直るかも知れません。


2010.06.28 12:47 | URL | #- [edit]
きるる says...""
早々のご回答ありがとうございます<(_ _)>
FC2側の問題というのもあるかもしれませんね!
ブログを開いた時に一瞬出そうになるので、FC2側や、PCの問題かもしれません。
ありがとうございました♪
2010.06.28 20:03 | URL | #- [edit]
CHIHIRO says..."タイトル"
はじめまして、CHIHIROと申します。
テンプレートとても可愛らしいデザインですね。
ダウンロードさせていただきました。

ご相談です。
写真の横のバラの画像を、フッターの画像の右側にも入れさせていただきたいのですが、大丈夫でしょうか。
画像加工というかたちになってしまうかもしれないと思いましたので、質問させていただきました。
また可能な場合、htmlとCSSにどのようにタグを追加すれば良いのか、教えていただけますでしょうか。

初歩的な質問ではあると思いますが、よろしくお願いいたします。
2010.11.19 23:13 | URL | #yyJgX6JE [edit]
管理人 says..."CHIHIROさんへ"
こんにちは。

画像のダウンロードは禁止しているので、画像をフッターにも入れたい場合は、
同じ画像アドレスを記述してください。
カスタマイズに関する質問には基本的にお答えしていないので、
ヒントだけ出しますと、フッターの部分のHTMLに画像のタグを入れて、
それをCSSで位置をコントロールすると良いと思います。

よろしくお願いいたします。
2010.11.21 16:03 | URL | #JC3FHLh6 [edit]
かな says..."こんにちは"
最近FC2ブログにしたのですが、こちらのテンプレートに一目惚れし、利用させていただいてます。
ところで、記事の投稿時間を表示させることはできるのでしょうか?

よろしくお願いいたします。
2011.04.05 11:43 | URL | #- [edit]
管理人 says..."かなさんへ"
こんにちは。

記事の投稿時間を表示させるには、
HTMLの月や年の変数の後などに、時間の変数を挿入してください。

変数を調べる場合は、http://fc2blogmanual.blog60.fc2.com/blog-entry-160.html
を参考にしてください。

<%topentry__year> 年を表示
<%topentry__month>月を表示
<%topentry__day>日を表示
(コメント欄に変数を書くと不具合がおこるので、かっこなどは全角にしています)

この下に時間の変数があると思います。
HTML編集画面で年の変数を検索し、その後かもしくはお好みの
場所に挿入してください。
2011.04.07 07:47 | URL | #JC3FHLh6 [edit]
一葉 says..."コメント欄のパスワード"
はじめまして。一葉と申します。
こちらのテンプレが大変気に入り、今日から使わせてもらっております。

しかし、1点だけ気になる事があり、コメント致しました。

コメント欄のパスワードが、最初からブランクではなく、
自動的に●●●●●と表示されてしまいます。

消さずに、そのまま変更せずに、コメントを送信すると、
直前にコメントをした方のパスワードが残っており、記録されたまま出てきてしまいます。

決して、前の方のパスワードが何かが分かるわけではないのですが、
パスワードを入れた時に表示される英数字が、直前にコメントされた方と同じ配列でした。

そして、次に自分のパスワードを入れると、
今度は、自分のパスワードが消えずにずっと残ってしまいます。

常にコメント欄のパスワードは●●●●●と表示されたままです。
新しい画面に切り替えても、更新しても常に出てきてしまいます。

何がいけないのか分かりません。
ちなみに、今まで、最初からパスワードが表示される現象はなく、
いつもブランクでした。
今回が初めてだったので、何が原因なのでしょうか?

気に入っていて今後も使いたいので、良かったら対処方法を教えて頂けないでしょうか?
よろしくお願いいたします。
2012.05.12 01:59 | URL | #gKDD6aH. [edit]
管理人 says..."一葉さんへ"
こんにちは。
おそらくブラウザのオートコンプリート機能ではないでしょうか。
一回でもパスワードを入力すると記憶されます。
環境設定からパスワードは消去できますが、また入力すれば出てきます。
オートコンプリートをオフにするなどブラウザの設定で対処するしか
ないと思います。
ブラウザの機能なので他人の入力したパスワードが記録されることは
ないと思います。
よろしくお願いします。
2012.05.13 09:16 | URL | #i4E9Nobc [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/159-10e90e6e
← モダンに逆もどり → GWはだらだら・・・