mysticdiary

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

お蔵だし2

お蔵だしの第二弾です。

この2点はhtml5で記述しています。
html5はutf-8推奨なのですが、fc2ブログのテンプレートでは、
euc-jpしか使えません。(多言語用を除く)
おそらく通常の利用には問題ないと思われますが、トラブルがあった場合は、
コメントしてください。

あと、共有テンプレートと違う点としては、googlewebfontを
タイトル部分などに使っていることと、fancyboxがあらかじめ導入されています。
トップ画像はお好みで変更できます。
プラグイン3は下部フッターに表示するようになっています。
数に制限はありませんが、3つぐらいまでが一番きれいに見れるとおもいます。

1960sample.jpg
1960

1960.html
1960.html

1960.css
1960.css



inorisample.jpg
inori

inori.html
inori.html

inori.css
inori.css



画像の変更方法など詳しくは後日アップします。
*ダウンロードしたhtmlが文字化けする場合は、ブラウザなどで開き、文字コードをutf-8
にして見てください。そのまま中身を編集画面にコピペします。


*トップ画像の変更方法

1.1960の場合

これはcoin-sliderを使用してます。

<div id='coin-slider'>
<a href="#" target="_blank">
<img src='https://blog-imgs-15.fc2.com/m/y/s/mysticdiarytemplate/girl.jpg'>
<span>キャプションをここに入れる~</span>
</a>
<a href="#" target="_blank">
<img src='https://blog-imgs-15.fc2.com/m/y/s/mysticdiarytemplate/tampopo.jpg'>
<span>キャプションをここに入れて~</span>
</a>
<a href="#" target="_blank">
<img src='https://blog-imgs-15.fc2.com/m/y/s/mysticdiarytemplate/babyretro.jpg'>
<span>キャプションをここに入れて~</span>
</a>
<a href="#" target="_blank">
<img src='https://blog-imgs-15.fc2.com/m/y/s/mysticdiarytemplate/catretro.jpg'>
<span>キャプションをここに入れて~</span>
</a>
<a href="#" target="_blank">
<img src='https://blog-imgs-15.fc2.com/m/y/s/mysticdiarytemplate/shop.jpg'>
<span>キャプションをここに入れる~</span>
</a>
</div><!--coin-sliderここまで-->


上のソースの画像リンクを差し替えます。数に制限はありません。
画像のサイズは590px×300pxです。
キャプションを何も入れない場合は、

<span>キャプションをここに入れて~</span>


上のソースを削除します。

2.inoriの画像の変更方法

これはなじみのあるnivo-sliderです。

<div id="slider" class="nivoSlider">
<img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/inoriphoto11.jpg" alt="" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend rhoncus fermentum. Phasellus pretium massa dolor. Donec arcu nunc consectetur nec fringilla vitae, placerat in libero. Curabitur a justo ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend rhoncus fermentum. Phasellus pretium massa dolor. Donec arcu nunc consectetur nec fringilla vitae, placerat in libero. Curabitur a justo ligula.">
<img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/inoriphoto13.jpg" alt="">
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/inoriphoto12.jpg" alt="" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend rhoncus fermentum. Phasellus pretium massa dolor. Donec arcu nunc consectetur nec fringilla vitae, placerat in libero. Curabitur a justo ligula.">
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/inoriphoto15.jpg" alt="">
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/inoriphoto16.jpg" alt="" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend rhoncus fermentum. Phasellus pretium massa dolor.">
</div>


上のソースの画像リンクを差し替えます。
画像の大きさは、960px×450pxです。枚数に制限はありません。
今回はキャプションというか、絵の説明文を入れられるようにしたので、
titleの部分(ダミーテキストの部分)を差し替えてください。

*fancyboxについて

これは元ネタのページもあわせてご覧ください。
サンプルのスクリプトを導入してありますが、IDなどは自分の好みで変更してください。
設定したID名を画像につけると、fancyboxが動作します。
関連記事
baorin

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

2 Comments

DARK says..."いつ見ても 素晴らしいですね"
ブログを始めてから、graynightをずっとお借りしております
とても毎回素適なテンプレートにいつも感動してます
今回【inori】のテンプレートを使わせて頂こうとHTMLと
CSSを試してみたところ

自身のブログですが記事内で、Fc2のテーブルを多用して
まして、テーブルが移動され、変形してしまうのと
テーブルのセルに背景色いれているんですがセルの背景色が
消えてしまいます
つまり文字のみ表示されてる状態です
(今現在は、graynightの状態にしてます)
自身で色々調べてみたのですが・・・・あまり知識がなく・・
分からずじまいでした・・・
ご相談させて頂こうとコメさせて頂きました
2011.05.05 00:40 | URL | #- [edit]
管理人 says..."DARKさんへ"
こんにちは。

おそらくFC2のテーブルがまだHTML5に対応してないと思います。
テーブルにスタイルを指定するのに、HTML5では使えない
タグを使用しているので、背景色が出なかったり、形がくずれたり
するのだと思います。例えばbgcolor、cellspacingなどは廃止されて
います。(http://www.htmq.com/html5/table.shtml
このページに廃止されたタグなどが載っています)

そのままFC2のテーブルでスタイルを指定しても、
このテンプレートでは使えないので、cssで一括して
テーブルのスタイルを指定するか、一個一個違う場合は、
直接記事の編集画面でテーブルにスタイルを指定するしか
ないと思います。
例:
<table style="background-color:#cccccc;padding:20px;">
こんな感じに指定すると表示されると思います。
2011.05.07 11:58 | URL | #i4E9Nobc [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/368-481d91c1
← ああ癒されたい・・・ → お蔵だし