mysticdiary

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

ホームページ風テンプレート第3弾

アクセス解析などをみると、意外にホームページ風テンプレートのダウンロードが多いのに
気づきます。
通常のブログよりダウンロード数が多いんですよね。
なんでなんでしょうか、FC2ブログをホームページ風に改造するのって面倒だなあ
などと思ってしまうのですが、ブログでありながらホームページみたいに見せられるって
けっこう便利なのかも知れませんね。ワードプレスとかだと固定ページを簡単に作れたり
するけど、初心者には敷居がなんとなく高いからFC2ブログのままで・・とか思うのかも知れません。

というわけで、今回作成したのはホームページ風テンプレート第3弾ということで、
タイトルは、「silhouette」です。

silhouettesample.jpg



デモを見るにはパスワード「mysticdemo」と入れてください。

基本的な適用の仕方は、まずはこちらの記事こちらの記事を参考にしてください。

あとは、このテンプレート個別のカスタマイズ方法ですね。

まずはナビゲーションからですね。HTML編集画面で該当する箇所を
がんばって探してください。

<nav id="navigation">
<ul id="nav">
<!-- ここからリンク編集してください -->
<li><a href="http://mysticdemo.blog.fc2.com/" onfocus="this.blur();" class="nonborder" title="Home">Home</a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-2.html" onfocus="this.blur();" class="nonborder" title="写真">Gallery</a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-4.html" onfocus="this.blur();" class="nonborder" title="自分のこと">About me</a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-3.html" onfocus="this.blur();" class="nonborder" title="fullwidth">Fullwidth</a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-category-1.html" onfocus="this.blur();" class="nonborder" title="ブログ">Blog</a></li>
<!-- リンク編集ここまで -->
</ul>
</nav><!--navigationここまで-->


リンクアドレスをお好きなアドレスにとリンク名をお好きな名前に変更します。

次なnivo-sliderの編集ですね。以下のHTMLを探して

<!--index_area-->
<div id="sliderback">
<div id="slider" class="nivoSlider">
<!-- ここから画像・title編集してください -->
<img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/silhouettephotoq1.jpg" alt="" title="ここに画像の説明文を入れます。お好きな文章を入れてください。ここに画像の説明文を入れます。お好きな文章を入れてください。ここに画像の説明文を入れます。お好きな文章を入れてください。">
<img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/silhouettephoto3.jpg" alt="" title="ここに画像の説明文を入れます。お好きな文章を入れてください。ここに画像の説明文を入れます。お好きな文章を入れてください。ここに画像の説明文を入れます。お好きな文章を入れてください。">
<img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/silhouettephoto2.jpg" alt="" title="ここに画像の説明文を入れます。お好きな文章を入れてください。ここに画像の説明文を入れます。お好きな文章を入れてください。ここに画像の説明文を入れます。お好きな文章を入れてください。">
<!-- 画像・title編集ここまで -->
</div>
</div><!--sliderbackここまで-->
<!--/index_area-->

画像のリンクと、titleに入っている文章をお好きな言葉に置き換えます。

画像のサイズは960px×400pxです。

その次は特集記事みたいなものでしょうか。
ブログ記事にリンクさせます。

リンクは個別記事にリンクさせ、画像リンクはご自分のサーバーにアップロードした画像に
置き換えます。文章もご自分のものに書き換えてください。
特集記事は3つになりますので、見栄えをそろえるにはなるべく文章の量は同じぐらいに
してくださいね。

<!-- ここからリンク・画像・内容を編集してください -->
<div id="featurewaku">
<div class="feature">
<a href="http://mysticdemo.blog.fc2.com/blog-entry-9.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/silhouettephotoq1sum.jpg"></a>
<h5><a href="http://mysticdemo.blog.fc2.com/blog-entry-9.html">お好きなタイトル</a></h5>
<p>私は今日初めてこの学習院というものの中に這入(はい)りました。もっとも以前から学習院は多分この見当だろうぐらいに考えていたには相違(そうい)ありませんが、はっきりとは存じませんでした。中へ這入ったのは無論今日が初めてでございます。さきほど岡田さんが紹介(しょうかい)かたがたちょっとお話になった通りこの春何か講演をというご注文でありましたが、その当時は何か差支(さしつかえ)があって</p>
<a href="http://mysticdemo.blog.fc2.com/blog-entry-9.html" onfocus="this.blur();" class="nonborder" id="readmore">readmore</a>
</div>
<div class="feature">
<a href="http://mysticdemo.blog.fc2.com/blog-entry-8.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/silhouettephoto3sum.jpg"></a>
<h5><a href="http://mysticdemo.blog.fc2.com/blog-entry-8.html">お好きなタイトル</a></h5>
<p>しかしただお断りを致すのもあまり失礼と存じまして、この次には参りますからという条件をつけ加えておきました。その時念のためこの次はいつごろになりますかと岡田さんに伺(うかが)いましたら、此年(ことし)の十月だというお返事であったので、心のうちに春から十月までの日数を大体繰(く)ってみて、それだけの時間があればそのうちにどうにかできるだろうと思ったものですから</p><a href="http://mysticdemo.blog.fc2.com/blog-entry-8.html" onfocus="this.blur();" class="nonborder" id="readmore">readmore</a>
</div>
<div class="feature2">
<a href="http://mysticdemo.blog.fc2.com/blog-entry-7.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/silhouettephoto2sum.jpg"></a>
<h5><a href="http://mysticdemo.blog.fc2.com/blog-entry-7.html">お好きなタイトル</a></h5>
<p>しかしお約束を忘れてはならないのですから、腹の中では、今に何か云(い)って来られるだろう来られるだろうと思って、内々(ないない)は怖(こわ)がっていました。そのうちひょろひょろもついに癒(なお)ってしまったけれども、こちらからは十月末まで何のご沙汰(さた)もなく打ち過ぎました。私は無論病気の事をご通知はしておきませんでしたが、二三の新聞にちょっと出たという話ですから</p>
<a href="http://mysticdemo.blog.fc2.com/blog-entry-7.html"onfocus="this.blur();" class="nonborder" id="readmore">readmore</a>
</div>
</div>
<!-- リンク・画像・内容を編集ここまで -->

画像の大きさは300px×100pxです。

以下はサムネイルを並べていますが、リンクさせる場所は自由です。
お好きなリンク先を入れ、画像を差し替えてください。
画像の大きさは210px×150pxです。

<!-- ここからリンク・画像を編集してください -->
<div id="index">
<ul id="indeximage">
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-9.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" width="210" height="150" alt=""></a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-8.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum2.jpg" width="210" height="150" alt=""></a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-7.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouiettephotosum3.jpg" width="210" height="150" alt=""></a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-6.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" width="210" height="150" alt=""></a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-5.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum2.jpg" width="210" height="150" alt=""></a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-4.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouiettephotosum3.jpg" width="210" height="150" alt=""></a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-3.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" width="210" height="150" alt=""></a></li>
<li><a href="http://mysticdemo.blog.fc2.com/blog-entry-2.html"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum2.jpg" width="210" height="150" alt=""></a></li>
</ul>
</div>
<!-- リンク・画像編集ここまで -->


次は、フッターのナビゲーションの編集ですね。
これは管理人のテンプレートにはいつもついてるのと同じになります。

<nav class="footernav">
<ul>
<li class="allpost"><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder" title="全ての記事">allpost</a></li>
<li class="twitter"><a href="http://twitter.com/" onfocus="this.blur();" class="nonborder" title="twitter">twitter</a></li>
<li class="facebook"><a href="#" onfocus="this.blur();" class="nonborder" title="facebook">facebook</a></li>
<li class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder" title="Rss">rss</a></li>
<li class="contact"><a href="mailto:?subject=hello!&body=message" onfocus="this.blur();" class="nonborder" title="メール">contact</a></li>
<li class="admin"><a href="http://control.blog.fc2.com/control.php" onfocus="this.blur();" class="nonborder" title="管理画面">admin</a></li>
</ul>
</nav>


ツイッターやフェイスブックのアドレスを入れます。
メールアドレスを入れる場合はmailto:の後に入れます。


次はCSSの編集です。
これはこのテンプレートで一番大事な箇所になります。
がんばって変更してください。サンプルは「aboutme」「gallery」「fullwidth」の
3ページを固定ページとして作っていますが、特にページ数に
制限なく作ることができます。作成したらその記事に対するカテゴリーは
必ず作っておくことが重要なポイントです。カテゴリーナンバーがわかったら、
CSSで適用させます。この辺は基本となるこちらの記事をよく読んでみてください。


/* ここからカテゴリーの番号を編集します */

/* 固定ページ(aboutme) */

#cat8 #maincontents{
width:960px;
padding:0 0 30px 0;
}

#cat8 #maincontents:after{
display: block;
clear: both;
content: "";
}

#cat8 h2{
padding:0 0 10px 10px;
border-left:10px #181818 solid;
border-bottom:1px #181818 dashed;
margin-bottom:40px;
}

/* Galleryのページ */

#cat6 section#maincontents{
width:960px;
padding:0 0 30px 0;
overflow:hidden;
}

#cat6 #maincontents .blogpost{
padding:0;
margin:0 -40px 30px 0px;
/zoom: 1;/* for IE6,7 */
}

#cat6 h2{
width:940px;
padding:0 0 10px 10px;
border-left:10px #181818 solid;
border-bottom:1px #181818 dashed;
margin-bottom:40px;
}

#cat6 .photo1 img{
width:210px !important;
height:150px !important;
padding:0;
margin:0 40px 40px 0 !important;
float:left;
}

#cat6 .photo1 a:hover img{
width:210px;
height:150px;
padding:0;
overflow:hidden;
filter:alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}

/* fullwidth(video)のページ */

#cat7 section#maincontents{
width:960px;
padding:0 0 30px 0;
overflow:hidden;
}

#cat7 #maincontents .blogpost{
padding:0;
margin:0 -30px 0 0;
/zoom: 1;/* for IE6,7 */
}

#cat7 h2{
width:940px;
padding:0 0 10px 10px;
border-left:10px #181818 solid;
border-bottom:1px #181818 dashed;
margin-bottom:40px;
}

#cat7 .video {
width:300px;
height:286px;
text-align:center;
margin:0 30px 20px 0 !important;
float:left;
}

#cat7 .video img{
width:300px !important;
height:200px !important;
}

#cat7 .video a:hover img{
width:300px;
height:200px;
padding:0;
overflow:hidden;
filter:alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}

/* カテゴリーの番号を編集ここまで */

ギャラリーの写真の大きさは210px×150pxです。
ビデオのサムネイルの大きさは300px×200pxです。

次は固定ページのギャラリーやaboutmeのページの作り方ですね。
(これはサンプルとして提示しているもので、この通りにしなくてもかまいません)

ギャラリーのサンプル

<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001034762852b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001912826764b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum2.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/DSC01191b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouiettephotosum3.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001034762852b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" /></a></div>

<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001034762852b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001912826764b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum2.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/DSC01191b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouiettephotosum3.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001034762852b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" /></a></div>

<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001034762852b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001912826764b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum2.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/DSC01191b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouiettephotosum3.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001034762852b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" /></a></div>

<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001034762852b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001912826764b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum2.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/DSC01191b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouiettephotosum3.jpg" /></a></div>
<div class="photo1"><a class="fancy" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/file0001034762852b.jpg"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/shilhouettephotosum1.jpg" /></a></div>
<br clear="all">


これはfancyBoxで画像が拡大するようになっています。
そのために各画像にclass名fancyと付けています。
四つごとにくぎっていますが、わかりやすいようにそうしているだけで、特にHTML上で
必要ではありません。

次は、Fullwidthのページです。
これも単なるサンプルなのでこの通りにページを作る必要はありません。
これもfancyboxで各映像が拡大するようになっています。
<div class="video"><a class="mvideo" title="Cras neque mi, semper at interdum id" href="http://www.youtube.com/watch?v=58twbJ6Kp5Q"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarydemo/pandav.png" /></a><br>Cras neque mi, semper at interdum id</div>
<div class="video"><a class="mvideo" title="Cras neque mi, semper at interdum id" href="http://www.youtube.com/watch?v=awzqP5o53-s"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarydemo/pandav.png" /></a><br>Cras neque mi, semper at interdum id</div>
<div class="video"><a class="mvideo" title="Cras neque mi, semper at interdum id" href="http://www.youtube.com/watch?v=iCWoT225sVc&feature=related"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarydemo/pandav.png" /></a><br>Cras neque mi, semper at interdum id</div>
<div class="video"><a class="mvideo" title="Cras neque mi, semper at interdum id" href="http://www.youtube.com/watch?v=r3hRpolYekM&feature=related"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarydemo/pandav.png" /></a><br>Cras neque mi, semper at interdum id</div>
<div class="video"><a class="mvideo" title="Cras neque mi, semper at interdum id" href="http://www.youtube.com/watch?v=5CebKQsKN4k&NR=1"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarydemo/pandav.png" /></a><br>Cras neque mi, semper at interdum id</div>
<div class="video"><a class="mvideo" title="Cras neque mi, semper at interdum id" href="http://www.youtube.com/watch?v=NYPHXIkE3Bk&feature=related"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarydemo/pandav.png" /></a><br>Cras neque mi, semper at interdum id</div><br clear="all">


次は、aboutmeのページですね。
これもこのまんまコピペするとこうなりますよ~というサンプルです。

<a class="fancy" href="https://blog-imgs-46.fc2.com/m/y/s/mysticdiarydemo/myprofile.jpg" target="_blank"><img src="https://blog-imgs-54.fc2.com/m/y/s/mysticdemo/myprofileb.jpg" alt="myprofile.jpg" border="0" width="300" height="392" style="float:left;margin:0 60px 60px 0;"/></a><div class="text" style="overflow:hidden;"><p>こんにちは。自己紹介します。私の名前は●●です。●●県在住の●●才、●性です。趣味で写真を撮ってます。このサイトは自慢の作品を皆さんに見ていただこうと作成しました。どうぞ、よろしくお願いします。</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p></div>


最後にプラグイン3を下部に三つ表示させます。
プラグイン管理画面でプラグイン3を三つ指定してください。

ここまで終わると多分(笑)管理人のサンプルと同じような感じになるはずです。
では、ご健闘を祈ります。

ファイルは以下からダウンロードしてください。


silhouette.html
silhouette.html

silhouette.css
silhouette.css
関連記事
  • 色違い
  • moon
baorin

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

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/418-1a280ced
← 色違い → moon