mysticdiary

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

新作はCSS3をちょこっと使ってみた

やっとこさ風邪が治った管理人。
以前からちょこちょこと作りためてたテンプレートを最終調整して、
また共有申請してみますか・・・。

peacock.jpg

実は、今回のテンプレートから管理人にしては大幅改良が!!(爆)
・・・ってほどでもないんだけど、コメント欄がぐっと使いやすくなりました~パチパチ。

いや、使いやすくなったっていうか、本来あった機能を全部くっつけてみましたってことなんだけど。
管理人はコメント欄にいろいろな機能がついてるのが気に入らなくて、わざと削除しちゃって
たんだけど、FC2BLOGってコメント欄のいろんな機能を期待して使っている人も
多いみたいなんだよね・・。
なので、考え方を変えて共有にする場合は、機能を全部つけたろう!と・・。(遅いか)
ついでに、このテンプレートはタイトル部分にちょこっとテキストシャドウを使ってあるので、
opera chrome safariなどのモダンブラウザでは少し立体的に見えます。
でもIEは駄目(爆)。
IEは全滅だね。壊滅的だね。(すごい言い様・・)
だからCSS3を使用するのは少々ためらってしまうのだが、それにしてもなんでIEって
こうなの?やる気あんのかな?シェアがいまだにナンバー1なんだからさ、責任とんなよって
感じ。
jqueryとかでIEでもCSS3が使えるように工夫する方法とかあるみたいだけど、
ちょっとまだそこまでする気にならないなあ・・。

・・・まあ、文句はこのくらいにしといて、上部の写真はスライドショーになってるから、
サイズさえピタッとトリミングすれば、自分の好きなお写真が入れられます。
楽しんでくださいな。

4月20日追記:
いつのまにか公開されてた・・(爆)最近申請してから公開まで早いなあ・・以前は1~2週間ぐらい
かかったのに?なんでだろう?

それはさておき、少々カスタマイズの仕方など。

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

html編集画面で上部の方にある、

<div id="menu">
<ul class="lavaLamp">
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>

というソースを探します。
この部分をお好きなように編集します。例えば、

<li><a href="http://mysticdiary.blog99.fc2.com/">私のブログ</a></li>
このようにリンクさせたいurlとブログ上に表示させたい文字を自由に変更することができます。
好きなだけリンクの数は増やしたり、減らしたりできます。(スペースの限界はありますが・・)

●写真を変更する

写真のサイズは870px×260pxです。
ぴったりトリミングするとうまくいきます。
写真のサイズを変更したい場合は、


<style type="text/css"> 
  #test2 {
    margin:0;
    width: 870px;
    height: 260px;
  }
</style> 

この部分の数値を変更します。
背景に画像がはってあるので、はみださないように大きくできるのは
900px×290pxぐらいまでです。

好きな写真に変更するには、


<script type="text/javascript"> 
  $(function() {
    $('#test2').crossSlide({
      sleep: 5,
      fade: 1
    }, [
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/peacockhead.jpg' },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/peacocblue2.jpg'   },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/midoriback1.jpg'  },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/purplelight1.jpg' },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/money.jpg' },
      { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/poacocblue1.jpg' }
    ]);
  });
</script> 

この部分の


 { src: 'http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/peacockhead.jpg' },

画像のアドレスを変更します。
お好きなだけ減らしたり増やしたりできます。
関連記事
baorin

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

25 Comments

かずを says...""
初めまして、突然のコメント失礼いたします。
peacockのテンプレートが気に入りダウンロードさせて
いただきました。
そこで少し質問があります。
お暇な時でよろしいので、お答えいただけると嬉しいです。

この関係は初心者なのですが、
カラム(?プラグインが表示されるところです)は
もう少し右に設定する事は可能なのでしょうか?
自分のブログでは700*467程度の写真にて日記を書くことが多いので、
見切れてしまいます。
もしHTMLなどスタイルシートで変更できるなら是非ご教授いただきたいのです。
よろしくお願いします。
2010.04.26 18:49 | URL | #- [edit]
管理人 says...""
かずをさんへ。

サイドバーの位置を変更したいとのことですが、
テンプレート全体の幅は900pxに設定してあるので、
メインカラムを700pxに設定すると、サイドバーは必然的に200px以下
に設定することになります。
それにあわせて、背景の縦線(メインカラムとサイドバーの間にある)
の位置を変更したりと全体的に数値を変更しなければなりません。

少しだけヒントを書きますと、

メインカラム
#left {
width:530px;
overflow: hidden;
margin: 0;
padding:0;
float:left;
}

サイドバー
#rmenu {
width: 260px;
float: right;
padding:0;
overflow: hidden;
font-size:12px;
color:#333333;
}

背景の縦線の位置
#maincontents2{
width:900px;
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/home99mainnaka2.png);
background-repeat:repeat-y;
background-position:center top;
}

この辺の数値の調整は必須で、その他記事タイトルの数値や、
コメント欄の数値、サイドバーコンテンツの位置の数値などは
お好みで画面を見ながら調整してください。

個別カスタマイズについては、際限がなくなってしまうので、
あまり詳しくお答えしないようにしています。(すみません)
もしやってみてわからないようであれば、再度コメントくださるよう
お願い申し上げます。
2010.04.27 10:45 | URL | #- [edit]
かずを says...""
ご回答ありがとうございます。
色々がんばって試してみます!
2010.04.27 13:08 | URL | #- [edit]
yanoe says...""
はじめまして!
スライドショーに惹かれてお借りしました。

私もかずをさん同様にカスタマイズしたいと思って、
上記ヒントを手掛かりに色々と数値の調整をしているのですが、
右のメニュー欄と縦罫線がうまく調整できません。
メニュー欄の幅調整は出来ました。
縦罫線と右のメニュー欄との間隔をもう少し狭くしたいのですが、
どうしていいものか分かりません。

初歩の初歩の様な質問でお恥ずかしいのですが、よろしくお願いします。
2010.04.27 21:44 | URL | #- [edit]
管理人 says...""
yanoeさん、こんにちは。

縦罫線は幅900pxの背景画像を縦に繰り返して表示しています。
なので、横にずらすには、背景画像の表示開始位置を変更します。

背景縦線の位置のCSS
background-position:center top;

このCSSの数値をお好みで変更します。
background-positionについては、詳しく解説しているサイトが
インターネット上にたくさんありますので、
そちらを参考になさってください。


2010.04.28 12:47 | URL | #- [edit]
yanoe says...""
ありがとうございました。
がんばってみます!
2010.04.29 22:27 | URL | #- [edit]
flowrelax says..."引用タグ"
はじめましてbaorinさん。

こちらのテンプレート使用させてもらっています。とてもスタイリッシュで気に入っています。

ひとつ質問です。<blockquote></blockquote>で引用文を書こうとしたのですが、ブログに反映されません。

引用タグは設定されていないのでしょうか?

ご回答よろしくお願いします。
2010.05.04 19:00 | URL | #- [edit]
管理人 says...""
flowrelaxさん。こんにちは。

引用タグの設定は特にしてないです。
もしよろしければ、

.kizi_body blockquote{
padding:10px;
border:1px #333333 dotted;
background-color:#dddddd;
margin:10px;
}

これをcssのどこかに貼付けてください。
.kizi_bodyのcss周辺がわかりやすいかと思います。
数値や色などはお好みで設定してください。
2010.05.05 08:40 | URL | #- [edit]
flowrelax says...""
baorinさん、回答誠にありがとうございます。

さっそくCSSを変更しました。

ところが、テンプレートの編集でプレビューを押すと変更が反映されているのに、確定してブログを開いてみると、変更が反映されません。

何か操作上のミスでもあるのでしょうか。

たびたびすいませんが、ご回答お願いいたします。
2010.05.05 17:42 | URL | #- [edit]
flowrelax says...""
baorinさん、何度もすいません。

なぜだか不具合が解消されました。

何度か更新ボタンを繰り返し押していたら、ブログに反映されるようになりました。

どういうことなのかわからないのですが、引用タグが使えるようになってよかったです。

ありがとうございました。
2010.05.05 17:57 | URL | #- [edit]
管理人 says...""
flowrelaxさん。

そうですか~、うまくいったなら良かったです。
fc2ってちょいと謎な所がありますね。
おそらくキャッシュが更新されるのにタイムラグがあるンじゃないかと
思ってますけど・・・。
画像なんかも同じファイル名だと更新されるのに5分ぐらいかかりますしね。
しょっちゅうメンテナンスやってますしね・・・。(爆)
2010.05.06 16:09 | URL | #- [edit]
ごはん says..."教えてください。"
初めまして。
スライドショーがお気に入りでテンプレート使わせて頂いてます。
そこで、質問なんですが

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

「リンクさせたいurlとブログ上に表示させたい文字を自由に変更することができます」

これは、例えば、プロフィール記事を更新したurlの事でしょうか?
それとも、webページとかが別に作成できるのでしょうか?

上手く説明できなくて申し訳ないです。

お時間のある時に教えてください。m(--)m
2010.05.07 23:53 | URL | #- [edit]
flowrelax says...""
baorinさん、たびたびすいません。

<ul><li>や<ol><li>などのリストを使いたいのですが、ブログに反映されません。

どのようにテンプレートを編集したらいいでしょうか?

申し訳ありませんが、教えていただけると助かります。よろしくお願いします。
2010.05.08 18:36 | URL | #- [edit]
管理人 says...""
flowrelaxさんへ。

リスト要素は他にリスト表示をなしに設定している箇所があると、
継承されてしまい、うまく効かないことが多いです。

なので、cssの一番したの所に、

.kizi_body ul {
margin-left: 20px;
}

.kizi_body ul li {
padding: 3px 0px 0px 0px;
list-style: disc inside;
}

.kizi_body ol{
margin-left:20px;
}

.kizi_body ol li {
padding: 3px 0px 0px 0px;
list-style: lower-latin inside !important ;
}

こんな感じに挿入してください。
リストマークはお好きに変更してください。

dt、ddなどの定義リストを作る場合も、
要領は同じです。
必ず、.kizi_bodyと具体的に指定した上で
cssを書かないと反映されません。
2010.05.09 16:11 | URL | #- [edit]
管理人 says...""
ごはんさんへ。

上部のナビゲーションの編集をすると、自動的にWEBページが
できるとかそういうことではないです。
おっしゃるとおり、自分で作成した個別記事へリンクしたり、
外部のHPへリンクできるということです。
そのURLとリンク先の名称はご自分で変更してください、という
ことです。
2010.05.10 16:28 | URL | #- [edit]
flowrelax says...""
baolinさん、回答ありがとうございました。

さっそくCSSの一番下に貼りつけて試してみました。

ところが、なぜか相変わらずリストが表示されません。。。

なにかまずいところがあるのでしょうか。すいませんが、教えていただけると助かります。

よろしくお願いします。
2010.05.10 22:29 | URL | #- [edit]
管理人 says...""
flowrelaxさんへ。

でしたらこちらのCSSで試してみてください。
ちなみにお使いのブラウザはなんでしょうか?
IEの場合、バグがありリストが正常に表示されない場合があります。
2、3種類のブラウザで確認していただくと、バグかどうかわかります。



.kizi_body ul {
margin-left: 20px;
}

.kizi_body ul li {
padding: 3px 0px 0px 0px;
list-style-type:disc !important;
list-style-position:inside !important;
}

.kizi_body ol{
margin-left:20px !important;
}


.kizi_body ol li {
padding: 3px 0px 0px 0px;
list-style-type:decimal !important;
list-style-position:inside !important;
}
2010.05.11 12:10 | URL | #- [edit]
flowrelax says...""
baorinさん、たびたびすいませんでした。

昨日CSSの変更をしたときには、その変更が反映されなかったのですが、今日また確認してみたら変更が反映されるようになっていました。

前にも同じように、変更が時間差で反映されることがありましたが、これはFC2の問題なのでしょうかね。

次回以降はしばらく時間をおいて、もう一度確認してみることにします。

お騒がせしてすいませんでした。
2010.05.11 13:35 | URL | #- [edit]
ごはん says..."全体の背景色の変更"
ナビゲーション編集の件ありがとうございました。

ところでブログ全体の背景色を変更すること出来ますか?
2010.06.03 16:31 | URL | #- [edit]
管理人 says...""
ごはんさんへ。

背景色を変更することは可能です。
ただ、ボタンなどパーツについては、シルバーに合うように
作成してあるため、背景色を変更すると、
なんとなくかみ合わないなどの不都合が出るかも知れません。
背景色を変更したい場合は、CSSのbody部分の記述を変更してください。

body {
font-size : 13px;
font-family: Arial, Helvetica, sans-serif;
line-height : 1.5em;
color : #333333;
background-color:#ffffff;
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/home99background.png);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:center top;
}

CSSの基本的な記述方法については、
Fc2ブログのフォーラムで質問するか、
インターネットで詳しい情報を検索することをお勧めします。
2010.06.04 16:01 | URL | #- [edit]
なっと says..."テンプレートお借りします"
はじめまして。
peacockお借りしました。
ブログ初心者なので、こちらのコメントを参考にさせていただきながら
試行錯誤しております。
またおじゃまします!
2011.01.31 01:09 | URL | #- [edit]
hossybam says..."ありがとうございました。"
この度、初めてブログを開設しました。
そして、記号ばかりの世界にびっくりしている。そんな初心者です。
が、こちらのテンプレートをお借りし、なんか凄く好きです。
綺麗なシンプルでありがとうございます。

管理者さんの丁寧なコメントに、お礼を申せずにはいられませんでした。
ありがとうございます。
また、よらせていただきます。
2011.03.31 03:51 | URL | #- [edit]
ちかげ says..."ご質問"
スライドショーのテンプレートを利用させていただいています。ご質問なのですが、スライドショーの画像の変更を何度してもhttp://chikageshin.blog65.fc2.com/の様に、画像が小さくなってしまうのです。サイズは870×260にきちんとあわせています。何かアドバイスしていただけたらと思いご連絡しました。お忙しいところ申し訳ありませんがよろしくお願いいたします。
2011.06.13 14:11 | URL | #- [edit]
ちかげ says..."アドレスの間違い"
E-mailアドレスに間違いありました。正確にはchikagefujimori0718@ybb.ne.jpです。よろしくお願いいたします。
2011.06.13 14:14 | URL | #- [edit]
管理人 says..."ちかげさんへ"
こんにちは。

画像のサイズが単純に間違っていると思います。
ためしにhtmlで指定した画像アドレスをブラウザのアドレス
欄にコピーして画像を開いてみてください。
小さいサムネイル程度の画像しか出てこないと思います。
これが今の実際の画像サイズです。

87×27とかに間違えているということはないでしょうか?
もう一度確認してみてください。

2011.06.13 14:26 | URL | #i4E9Nobc [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/155-4752a700
← あしたのジョー映画化かあ~ → 入院してた。