MysticDiary

mysticな日常

ホームページ風テンプレート

Posted by baorin on   21  0

FCブログにはwordpressのように固定ページを作成する機能は基本的
にありません。
なので、どうしてもブログページと固定ページを別に作りたい!という
場合はむりくりな(笑)やり方でなんとかします(爆)
管理人のこのブログも、もちろん同じやり方で改造しています。

いろいろ考えられる方法はありますが、簡単な方法として、
記事のカテゴリーや、コメント・トラックバックのある・なしによって
見栄えを変更するという方法があります。
その方法で作成したのがこのテンプレートです。
今回は写真が趣味の人を想定して、ギャラリーを主にして作ってみました。

mysticdiary1997.jpg


(デモサイトを見るには、パスワード「mysticdemobb」と入力してください)

このテンプレートを使うには、管理画面での設定やhtml・cssの編集が
必須となります。できればHTMLとCSSの基本的な知識があったほ
うがいいとは思いますが、説明通りにやれば、なんとか適用できるよう
な気もするので(笑)必須でもありません。
もちろん自由にカスタマイズしたい方は知識は必須となります。

下の説明を読んで、なんとかできそう・・という方は自由にご利用ください。

やること

1. 管理画面でカテゴリーを編集する

2. 作成したカテゴリーの番号にあわせてCSSを編集する

3.ギャラリーなどの固定記事を新たに作成する
(この記事下部のソースを記事編集画面にコピペしてください)

4. ギャラリー用の写真を画像編集ソフトなどで加工し、サムネイルを作成しておく

5. 写真やサムネイルをアップロードし、記事の画像アドレスを変更する

6. 上部のナビゲーションを自分のブログのアドレスに差し替える

7. 関連記事の設定は「テンプレート変数のみ」にしておく

8. ブログページで固定ページへのリンクを表示させないようにする

9. ブログページで固定ページへの月別アーカイブを表示させないようにする

10. 背景画像をお好みで変更する




1・カテゴリーを編集する

kategory.jpg


カテゴリーによって違う見栄えを適用させるために、
固定ページ用のカテゴリーと、ブログページ用のカテゴリーを作成します。適当にすきなカテゴリー名を付けてだいたい最終的に上の図のようになるようにします。カテゴリー番号は作成した順番に自動的につけられているので上から1~になっている必要はありませんが、カテゴリー名はブログページ用、固定ページ用と上から順番にまとめておきます。

まず最初にブログページ用(通常のブログのトップページになる)のカテゴリーを作ります。「Blog」とでも名前をつけて作成してください。これでブログのトップページができました。その下に、ブログの記事のカテゴリーを適当に好きなだけ作ります。(もちろん既存のカテゴリー名はそのまま利用できます)最後に一つ余分に捨てカテゴリー(実際には使用しないカテゴリー)を作成します。(デモの場合は、カテゴリー4が捨てカテゴリー)

そしてブログ記事のカテゴリーにはチェックを入れて「Blog」の子カテゴリーとしておきます。

次に固定ページ(ギャラリーとか、自己紹介用のページ)用のカテゴリーを作ります。作りたい固定ページにあわせて適当に名前をつけて作成します。「gallery」「aboutme」などにしておくと分かりやすいです。「固定ページ」としてももちろんかまいませんし、既存のカテゴリー名もそのまま使えます。

2・作成したカテゴリーの番号にあわせてCSSを編集する

管理人のデモの場合、2・3・4・5・8がブログ、1・7・6が固定ページのカテゴリー番号になっています。この番号を使ってCSSを編集します。

CSSの編集画面で、下の方までずーっと見ていくと以下の記述があります。

/*固定ページ*/
#cat6 #maincontents{
width:900px;
padding:0px 30px 30px 30px;
}

/*ギャラリー1*/
#cat1 #maincontents{
width:920px;
padding:0px 30px 30px 30px;
}

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

#cat1 .photo1 img{
width:162px !important;
height:162px !important;
padding:0px;
border:1px #cccccc solid;
margin:0 20px 20px 0 !important;
float:left;
}

#cat1 .photo1 a:hover img{
width:162px;
height:162px;
padding:0;
border:1px gray solid;
overflow:hidden;
filter:alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}

/*ギャラリー2*/
#cat1 .photo2 {
width:286px;
height:286px;
text-align:center;
margin:0 20px 20px 0 !important;
float:left;
}

#cat1 .photo2 img{
width:284px !important;
height:200px !important;
border:1px #cccccc solid;
}

#cat1 .photo2 a:hover img{
width:284px;
height:200px;
padding:0;
border:1px gray solid;
overflow:hidden;
filter:alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}

/*マイビデオのページ*/

#cat7 #maincontents{
width:930px;
padding:0px 30px 30px 30px;
}

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

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

#cat7 .video img{
width:284px !important;
height:200px !important;
border:1px #cccccc solid;
}

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


これが固定ページの見栄えを調整するCSSです。よく見ると#cat6とか#cat1とか #cat7とか必ず最初についてますが、これがカテゴリー番号をあてはめたID名となっています。このデモでは1がギャラリー、6が自己紹介のページ、7がビデオのページのカテゴリーになっているので、ID名は#cat1、#cat6、#cat7となるわけす。このID名の数字の部分を各自で設定したカテゴリー番号に変更します。

たとえば、さきほど1で作成したギャラリーのカテゴリー番号が仮に5だったとします。その場合は、#cat1の1の部分を全部5に置き換えます。

ビデオのカテゴリー番号が仮に8だった場合は、#cat7の7の部分を全部8に置き換えます。
同様に固定ページの番号が仮に9だった場合は、#cat6の6の部分を全部9に置き換えます。

まとめてわかりやすく言うと、このデモでは
ギャラリー→#cat1
固定ページ→#cat6
ビデオ→#cat7

と設定されているので、数字の部分を自分で作成したカテゴリー番号に置き換えてくださいということです。

3.ギャラリーなどの固定記事を新たに作成する

下にあるギャラリーなどの記事のソースをコピーし、記事の編集画面に貼り付けます。記事を保存する場合は、もちろんカテゴリーは1で作成した、galleryなどのカテゴリーを適用し、コメント・トラックバックはオフにし、日付を遠い過去の日付(2000年1月など)にしてまとめます。(ブログページに表示させないため)

  注意1・ブログページの記事にしたい場合は、コメント・トラックバックはオンにする

  注意2・固定ページにする記事でコメント・トラックバックの設定をオンにしたままだと、うまく見栄えが統一できませんのでご注意ください。また、同じカテゴリーでブログ記事と固定ページを混在させることはできません。必ず別のものにしてください。

(ソースを記事編集画面にコピペしてください)

*ギャラリー1

<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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto1.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto1sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto2.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto2sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto3.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto3sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto4.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphotosum4.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto5.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto5sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto6.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto6sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto7.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto7sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto8.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto8sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto9.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto9sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto10.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto10sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto12.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto12sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto13.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto13sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto14.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto14sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto15.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto15sum.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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto16.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto16sum.jpg" /></a></div>
<br clear="all">



*ギャラリー2

<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto1.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto1sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto2.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto2sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto3.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto3sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto4.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphotosum4.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto5.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto5sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto6.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto6sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto7.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto7sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto8.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto8sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto9.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto9sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto10.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto10sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto12.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto12sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto13.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto13sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto14.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto14sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto15.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto15sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<div class="photo2"><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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto16.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto16sum.jpg" /></a>
Cras neque mi, semper at interdum id
</div>
<br clear="all">


*ビデオのページ

<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>
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>
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>
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>
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>
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>
Cras neque mi, semper at interdum id
</div>
<br clear="all">


*自己紹介など通常の固定ページ

<a class="fancy" href="https://blog-imgs-46.fc2.com/m/y/s/mysticdiarydemo/myprofile.jpg" target="_blank"><img src="https://blog-imgs-46.fc2.com/m/y/s/mysticdiarydemo/myprofile.jpg" alt="myprofile.jpg" border="0" width="300" height="392" style="float:left;margin:0 30px 30px 0;"/></a><div class="text" style="overflow:hidden;">こんにちは。
自己紹介します。

私の名前は●●です。
●●県在住の●●才、●性です。
趣味で写真を撮ってます。
このサイトは自慢の作品を皆さんに見ていただこうと作成しました。
どうぞ、よろしくお願いします。

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.
</div>


4. ギャラリー用の写真を画像編集ソフトなどで加工し、サムネイルを作成しておく。

(これは後からでもゆっくりできるので、今は飛ばしてもかまいません。)

ギャラリー1のサムネイルのサイズ
162px×162px

ギャラリー2のサムネイルのサイズ
284px×200px

マイビデオのサムネイルのサイズ
284px×200px

元画像の大きさはお好みです。


5. 写真やサムネイルをアップロードし、記事の画像アドレスを変更する

(これも後からゆっくりできるので、今は飛ばしてもかまいません。)3で作成したギャラリーの記事の画像アドレスを自分のサーバーにアップロードしたものと差し替えます。

ギャラリー1の場合
<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-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto1.jpg"><img src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto1sum.jpg" /></a></div>


上のソースの場合、元画像のアドレスは
href="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto1.jpg


サムネイルのアドレスは
src="http://blog-imgs-47.fc2.com/m/y/s/mysticdiarytemplate/wphoto1sum.jpg


となります。それぞれそ自分の画像アドレスに差し替えます。

ギャラリー2も同様です。

マイビデオの場合も基本的に同じです。

<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>Cras neque mi, semper at interdum id</div>


上のソースの場合、ユーチューブのアドレスは
href="http://www.youtube.com/watch?v=58twbJ6Kp5Q


サムネイルのアドレスは
src="https://blog-imgs-47.fc2.com/m/y/s/mysticdiarydemo/pandav.png


となりますので、それぞれ差し替えてください。

6. 上部のナビゲーションを自分のブログのアドレスに差し替える

<nav class="topnav">
<ul>
<li><a href="http://mysticdiarydemo.blog59.fc2.com/blog-entry-1.html" onfocus="this.blur();" class="nonborder" title="ギャラリー1">Gallery1</a></li>
<li><a href="http://mysticdiarydemo.blog59.fc2.com/blog-entry-2.html" onfocus="this.blur();" class="nonborder" title="ギャラリー2">Gallery2</a></li>
<li><a href="http://mysticdiarydemo.blog59.fc2.com/blog-entry-3.html" onfocus="this.blur();" class="nonborder" title="ビデオ">Video</a></li>
<li><a href="http://mysticdiarydemo.blog59.fc2.com/blog-entry-4.html" onfocus="this.blur();" class="nonborder" title="aboutme">About</a></li>
<li><a href="http://mysticdiarydemo.blog59.fc2.com/blog-category-2.html" onfocus="this.blur();" class="nonborder" title="blog">Blog</a></li>
</ul>
</nav>


デモサイトのアドレスになっているので、それぞれ自分のブログで作成したページへのリンクへ差しかえます。


7. 関連記事の設定は「テンプレート変数のみ」にしておく

固定ページに関連記事を出さないようにするため、管理画面で関連記事の設定を「テンプレート変数のみ」にします。


8. ブログページで固定ページへのリンクを表示させないようにする

公式プラグインのカテゴリーを使うと、固定ページのカテゴリーまで全部表示されてしまいますので、都合が悪かったりします(笑)そこで子カテゴリーのみ表示させる変数を利用して、固定ページのカテゴリーは表示させないようにします。

<!--category-->
<!--category_sub_hasnext-->
<ul class="sub_menu">
<li class="sub_list" &align>
<a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>
</li>
</ul>
<!--/category_sub_hasnext-->
<!--/category-->


注意点としてはこの変数は子カテゴリーの一番最後のカテゴリーを表示しないことになっているので、カテゴリーを作成するときに、一番最後に捨てカテゴリーをひとつ余分に作成しておく必要があります。画面上では捨てカテゴリーが削除されて、通常の子カテゴリーが表示されます。デモではカテゴリー4が捨てカテゴリーです。

9. ブログページで固定ページへの月別アーカイブを表示させないようにする

公式プラグインの月別アーカイブを導入すると、固定ページへのリンクまで表示されてしまうので、固定ページへのリンクをjqueryで削除します。

<script type="text/javascript">
$(function() {
$('.plugcontent li').remove(":contains('2000/01')");
});
</script>


上の記述だと、プラグインのリストで(2000/01)という文字列が含まれるものを削除するということになります。これは、固定ページを2000/01の日付でまとめておいた場合に利用できます。日付は自由に設定できますが、このように固定ページの日付はまとめておくほうが削除する場合に楽になります。

10. 背景画像をお好みで変更する

背景画像はお好みの画像に変更できます。
maximageというjqueryのライブラリを利用しています。
背景画像はモニターの幅にあわせて自動的に拡大したり縮小したりします。
なので、どんな環境でも画面一杯に画像が表示されます。
また、一定の時間でスライドするようになっています。

HTMLのソースの上の方に以下のようなソースがあります。
これが背景画像のソースです。

<img class="bgmaximage" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/sunset.jpg" />
<img class="bgmaximage" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/sky.jpg" />
<img class="bgmaximage" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/skyyun3.jpg" />
<img class="bgmaximage" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/buildgin4.jpg" />


この画像アドレスの部分を変更します。サイズは大体このデモの場合は1020px×700pxで作成しています。

<script type="text/javascript">
$(function(){
jQuery('img.bgmaximage').maxImage({
isBackground: true,
slideShow: true,
slideShowTitle: false,
slideDelay: 15,
overflow: 'auto',
verticalAlign:'top'
});
});
</script>


上は設定するためのスクリプトです。HTMLの上部にありますので、
必要な場合は、カスタマイズしてください。


おつかれさまでした。
ここまで終了すると、大体デモサイトを同じような感じになるはずです。
がんばって作成してください。

以下のファイルをダウンロードして編集画面にコピペしてください。
エンコードはutf-8です。

photogallery
photogallery.html
photogallery.html
photogallery.css
photogallery.css


関連記事
baorin

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

21 Comments

管理人 says..."9noさんへ"
こんにちは。

画像のポップアップにはfancyboxを使っています。
fancyboxのスクリプトはhtmlの上部にあります。
探せばすぐ見つかると思います。
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/jquerymousewheel304pack.js"></script>から
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/jcarousellite.js"></script>の直前までがfancyboxです。

カスタマイズは自由なのであれはできないこれはできないという
制限はありません。その辺は自己責任でご自由に
カスタマイズしてください。
2011.05.31 20:14 | URL | #i4E9Nobc [edit]
aki says..."はじめまして"
こんばんは。
いつも素敵なテンプレートを拝見させて頂いております。

今回こちらの「ホームページ風テンプレート」を使用させて頂いているのですが…
1つ疑問点がございまして書き込ませて頂きました。

ギャラリーのサムネ表示についてなのですが。
画像を並列して表示させたいのですが、何故か縦並びになってしまいます。
設定を「自動改行なし」にしたりタグに改行を入れていないのですがなかなか上手くいかず…
かなり初心者な質問とは思うのですが、宜しければご指導いただければ大変助かります。

どうぞよろしくお願い致します。
2011.07.03 20:25 | URL | #- [edit]
管理人 says..."akiさんへ"
こんにちは。

画像が縦になるのはCSSがうまく適用されていないからだと思います。
カテゴリーはギャラリー用のを作り、記事もそのカテゴリーを適用させます。
CSSもカテゴリーの番号を適用させます。
この辺がうまくいっていないと、レイアウトが崩れる原因となります。
もう一度記事のカテゴリーが適用されているか、
CSSがカテゴリー番号に変更されているかどうかなど
確認してみてください。
2011.07.04 13:01 | URL | #i4E9Nobc [edit]
says..."承認待ちコメント"
このコメントは管理者の承認待ちです
2011.08.25 11:56 | | # [edit]
管理人 says..."TKLCさんへ"
こんにちは。
まずは上の記事の通りにやってみてください。
その上でわからないことを具体的に質問していただけると
ありがたいです。
よろしくお願いします。
2012.03.26 12:39 | URL | #i4E9Nobc [edit]
管理人 says..."むしさんへ"
こんにちは。
ブログを拝見したところ、IEだとレイアウトがかなり崩れてしまっているので、
どこかファイルが壊れているのではないでしょうか?
もう一度ファイルをダウンロードしなおして適用してみることをおすすめします。
サイドバーがうまく表示されないのは、そこの部分のHTMLのどこかタグが
抜けているとかそういうことだと思います。
よろしくお願いします。
2012.04.10 09:58 | URL | #i4E9Nobc [edit]
emily says..."html"
こんにちは。
cssの設定等頑張ってみましたが、肝心のhtmlデータが見つからないのは私だけでしょうか?
そんなわけない、と思いつつもhtmlのあるべきところをクリックしてもhtmlが見つからないのですが・・・
2012.04.23 13:53 | URL | #- [edit]
管理人 says..."emilyさんへ"
こんにちは。

HTMLのファイルのアイコンをクリックしてダウンロードしてください。
今管理人がやってみたところ問題なくダウンロードできましたが・・・。
2012.04.23 15:33 | URL | #i4E9Nobc [edit]
emily says..."お手数おかけします"
恐らく私の知識がついていってないだけだと思います。
アイコンところ、上段がフォトギャラリー用のもので下段はcssですよね。
タイトルは3つに対してDLできるNOTEアイコンは2つですが、合ってますか?
htmlとcssは一体になっているのでしょうか?
番号を書き換える固定ページの箇所以降がcssでその上がhtmlでしょうか?
いや、たぶん違いますよね、全部をコピーして張り付けたらわけのわからないことになってしまいました(^_^;)私はhtmlが見つけられてないと思います。
せっかくcssのほうは設定できた(つもり)なのに!(困)
2012.04.23 20:46 | URL | #- [edit]
emily says..."わかりました!"
連投すみません。
今やっとわかりました。
開いたページを自分で右クリックしてソースの表示をしないといけなかったんですね!
html見つかりました^^
2012.04.24 00:26 | URL | #- [edit]
管理人 says..."木山さんへ"
こんにちは。
まずはアイコンをクリックしてファイル(htmlとcss)を
ダウンロードしてください。中身をコピーして
それを編集画面でそれぞれ貼付けます。
よろしくお願いします。
2012.05.10 06:15 | URL | #i4E9Nobc [edit]
むし says..."ありがとうございました"
プラグイン表示不具合の原因は、ダウンロードしたファイルを適切なアプリケーションで開かずにコピー&ペーストしていたことでした。
タグ等には異常ありませんでしたが、不要なスペースが多数入っていたのだと思います。

ありがとうございました。
2012.05.14 21:09 | URL | #- [edit]
saya says..."サンプルレイアウトが"
こんにちは。
サンプルページなのですが、ギャラリーに広告が入ってしまってレイアウトが崩れている気がするのですが。以前見に来たときはブロックがもっと均等に並んでいたと思うのですが・・
2012.05.31 01:54 | URL | #- [edit]
管理人 says..."sayaさんへ"
こんにちは。
新しい記事を追加してレイアウトを修正しました。
ありがとうございます。
2012.05.31 07:37 | URL | #i4E9Nobc [edit]
Reus.k says...""
ダウンロードの仕方が良く分かりません(>_<)
普通にアイコンをクリックするだけではダメだという事は分かったので,そのページのソースを表示してみたんですが,何か文字化けしてます
ブラウザでそのソースをutf-8にエンコードしてみたんですが,また最初のアイコンをクリックしたときのページに戻ってしまいます
無知な自分にご教授くださいm(__)m
2012.08.12 21:26 | URL | #- [edit]
管理人 says..."Reus.kさんへ"
こんにちは。
まずデスクトップなどにとりあえずファイルをダウンロードしてください。
そのファイルをクリックして文字化けしてしまう場合は、一旦拡張子を.txtにしてから
ブラウザで開きます。それでも文字化けしている場合は、文字エンコードを
utf-8にします。これでだいたいうまくいくと思います。
やってみてください。
2012.08.13 12:39 | URL | #i4E9Nobc [edit]
Reus.k says...""
できました!!
ありがとうございます
2012.08.20 00:51 | URL | #- [edit]
Reus.k says..."何度もすみません"
Aboutのところ(http://mysticdiarydemo.blog59.fc2.com/blog-entry-4.html)で上に日付などを表示させず、さらに右にサイドバーを表示させないようになってますよね。
これってどうするんですか?

*自己紹介など通常の固定ページ
<a class="fan…

のところのソースをコピーしてそれで記事を作ったのですが、日付は上に表示され、サイドバーは記事が終わったところから右に表示されてしまいます。
ほんとにすみませんm(__)m
2012.08.20 01:17 | URL | #- [edit]
管理人 says..."Reus.kさんへ"
こんにちは。
もう一度上の記事をよく読みなおしてみてください。
固定ページにするには、コメント、トラックバックは切っておく。
CSSでカテゴリーナンバーを指定するなどの作業が必要になります。
上の記事で特に大事なのは、2と3です。
よく読んでみてください。
2012.08.21 11:21 | URL | #i4E9Nobc [edit]
Reus.k says...""
何度もすみませんでした
ありがとうございます(*^^)
2012.08.25 21:43 | URL | #- [edit]
shohei horiuchi says...""
こんにちは。
どうにか設定できたのですが、ブログ画面の幅を広げたいのですが、どこの数値を変えればよいのか分かりません。
教えていただけませんでしょうか?
2013.03.17 07:04 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/373-695d8ada
該当の記事は見つかりませんでした。