mysticdiary

更新はLittleDreamでしています→

photogalleryのリメイク!

ずっと前に作成したホームページ風テンプレートでいまだに人気があるのが
photogalleryです。だいぶ昔のなのでレスポンシブでもないし、テンプレート一覧にも載せてないので
ダウンロードなんてされないだろうと思っていたら、これがまた今でもけっこうダウンロード
されているんですね〜。
というわけで今回はレスポンシブに対応してリメイクしてみました!

photogallerysample.jpg トップページ以外では大きい画像はないのですが、一応それぞれの画面のスクリーンショットです。

ギャラリー
photogallery1.jpg

ビデオ
galleryvideo.jpg

ブログ
galleryblog.jpg

アバウトミー
galleryabout.jpg

それと今回は背景がビデオの場合のも作成してみました。
photogalleryvideo.jpg

基本的な導入の仕方は変わりませんが、ギャラリーやビデオの記事のソースが少し変わってます。
以前の記事を少し変更して新たに掲載してみます。

/*****導入の仕方******/

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

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

このテンプレートを使うには、管理画面での設定や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を編集する

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

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

#cat3 section#maincontents,#cat7 section#maincontents,#cat9 section#maincontents{
width:100%;
float:none;
margin:0;
padding:0;
}

#cat3 section#maincontents .blogpost,#cat7 section#maincontents .blogpost,#cat9 section#maincontents .blogpost{
padding:30px 30px 0 30px;
margin:0;
border:none;
}

/* gallary */

#cat7 section#maincontents ul{
margin:0;
}

#cat7 .gallary li{
float:left;
width:22.75%;
height:auto;
overflow:hidden;
margin:0 3% 20px 0;
padding:0;
display:block;
}

#cat7 .gallary2 li{
float:left;
width:31.3333%;
height:auto;
overflow:hidden;
margin:0 3% 20px 0;
padding:0;
display:block;
}

#cat7 section#maincontents .gallary .right,#cat7 section#maincontents .gallary2 .right{
margin:0 0 40px 0;
}

#cat7 .gallary li a,#cat7 .gallary2 li a{
display:block;
}

#cat7 .gallary img,#cat7 .gallary2 img{
width:100%;
vertical-align:bottom;
display:block;
}

figure {
position: relative;
overflow: hidden;
width:100%;
}

figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.6);
-webkit-transition: .3s;
transition: .3s;
opacity: 0;
text-align:center;
}

figure:hover figcaption {
opacity: 1;
}

figcaption p{
padding:43% 20px 0 20px;
color:#ffffff;
font-size:13px;
}

#cat7 .gallary2 figcaption p{
padding:30% 20px 0 20px;
}


/* 固定ページ カテゴリーナンバーの編集をします */

#cat7 section#maincontents .gallary li,#cat7 section#maincontents .gallary2 li{
float:left;
width:47.5%;
margin:0 5% 40px 0;
background-image:none;
list-style:none;
padding:0;
}

#cat7 section#maincontents .gallary .right,#cat7 section#maincontents .gallary2 .right{
margin:0 5% 40px 0;
}

#cat7 section#maincontents .gallary .second,#cat7 section#maincontents .gallary2 .second{
margin:0 0 40px 0;
}


/* 固定ページ カテゴリーナンバーの編集をします */

#cat7 section#maincontents .gallary li,#cat7 section#maincontents .gallary2 li{
float:none;
width:100%;
margin:0 0 40px 0;
}

#cat7 section#maincontents .gallary .right,#cat7 section#maincontents .gallary2 .right{
margin:0 0 40px 0;
}


これが固定ページの見栄えを調整するCSSです。よく見ると#cat3とか#cat7とか #cat9とか最初についてますが、これがカテゴリー番号をあてはめたID名となっています。デフォルトでは7がギャラリー/ビデオ、3、9が固定ページのカテゴリーになっているので、ID名は#cat3、#cat7、#cat9となるわけす。このID名の数字の部分を各自で設定したカテゴリー番号に変更します。

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

まとめてわかりやすく言うと、デフォルトでは
ギャラリー、ビデオ→#cat7
固定ページ→#cat3、#cat9

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

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

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

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

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

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

*ギャラリー

<ul class="gallary">
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/red.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/redsum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/vienna.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/viennasum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/benchi.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/benchisum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/boushi.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/boushisum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/cupcake.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/cupcakesum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/fish.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/fishsum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/tori5.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/tori5sum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/hana11.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/hana11sum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/hana12.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/hana12sum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/hana.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/hanasum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/sunset6.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/sunset6sum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/pant.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/pantsum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li>
</ul>
<br clear="all">


*ビデオのページ

<ul class="gallary2">
<li>
<a href="https://dl.dropboxusercontent.com/u/34682655/Bubble%20H264.mp4.mp4" data-lightbox-gallery="gallery2">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/bubblesum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a href="http://www.youtube.com/watch?v=REYROAp5YL4&feature=share&list=PLido8eCUHMoxB68ZV0QZc-9NZeYldf9yF&index=4" data-lightbox-gallery="gallery2">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/shikasum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a href="http://www.youtube.com/watch?v=oC5qQC1_3Ho&list=PLido8eCUHMoyYT4IEKgjcerY8LEKthDyx&feature=share&index=6" data-lightbox-gallery="gallery2">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/camera_2014062813502093f.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a href="http://www.youtube.com/watch?v=G6nnLybwKmI&list=PLido8eCUHMoxB68ZV0QZc-9NZeYldf9yF&feature=share&index=3" data-lightbox-gallery="gallery2">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/wintersum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a href="http://www.youtube.com/watch?v=6rn17IM5t_o&feature=share&list=PLido8eCUHMoyYT4IEKgjcerY8LEKthDyx&index=8" data-lightbox-gallery="gallery2">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/light_20140628135019fc6.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li><!--
--><li>
<a href="http://www.youtube.com/watch?v=JCLAEHcIUic&list=PLido8eCUHMowaYixbQ_R-ZmwWprSWl5Yl&feature=share&index=6" data-lightbox-gallery="gallery2">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/building_20140628135022118.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li>
</ul>
<br clear="all">


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

<div class="aboutimage"><img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/face.jpg"></div><div class="abouttext">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. ギャラリー用の写真を画像編集ソフトなどで加工し、サムネイルを作成しておく。

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

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

ビデオのサムネイルのサイズ
600px×400px

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

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

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

ギャラリーの場合
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/red.jpg" data-lightbox-gallery="gallery1">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/redsum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li>


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


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


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

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

<li>
<a href="https://dl.dropboxusercontent.com/u/34682655/Bubble%20H264.mp4.mp4" data-lightbox-gallery="gallery2">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/bubblesum.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li>


上のソースの場合、ビデオのアドレスは
href="https://dl.dropboxusercontent.com/u/34682655/Bubble%20H264.mp4.mp4


サムネイルのアドレスは
src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/bubblesum.jpg


アバウトミーの画像は
<div class="aboutimage"><img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/face.jpg"></div>


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

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

<nav class="topnav2">
<a href="#" id="menu-icon"><i class="fa fa-bars"></i></a>
<ul>
<li><a href="#" onfocus="this.blur();" class="nonborder" title="ギャラリー">GALLERY</a></li><!--
--><li><a href="#" onfocus="this.blur();" class="nonborder" title="ビデオ">VIDEO</a></li><!--
--><li><a href="#" onfocus="this.blur();" class="nonborder" title="ブログ">BLOG</a></li><!--
--><li><a href="#" onfocus="this.blur();" class="nonborder" title="私について">ABOUT ME</a></li>
</ul>
</nav>


上の#の部分を、それぞれ自分のブログで作成したページへのリンクへ差しかえます。
ブログへのリンクは1で作成したブログのカテゴリーナンバーを入れたアドレスになります。
ex:http://mysticdiary.blog99.fc2.com/blog-category-1.html


フッター部分のツイッターなどへのリンクも変更します。
<nav class="footernav">
<ul>
<li class="twitter"><a href="#" onfocus="this.blur();" class="nonborder" title="twitter"><i class="fa fa-twitter-square fa-lg"></i></a></li><!--
--><li class="facebook"><a href="#" onfocus="this.blur();" class="nonborder" title="facebook"><i class="fa fa-facebook-square fa-lg"></i></a></li><!--
--><li class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder" title="Rss"><i class="fa fa-rss-square fa-lg"></i></a></li><!--
--><li class="admin"><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面"><i class="fa fa-unlock-alt fa-lg"></i></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-->


上のhtmlをコピーして、公式プラグインのカテゴリーの中身を差し替えるか、
フリーエリアのプラグインの中身にコピペしてください。

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

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

公式プラグインの月別アーカイブを導入すると、固定ページへのリンクまで表示されてしまうので、固定ページへのリンクをjqueryで削除します。</body>タグの直前あたりに挿入します。

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


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

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

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

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

<!--bgmaximageここから-->
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/load.gif" class="loader" />
<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" />
<!--bgmaximageここまで-->


この画像アドレスの部分を変更します。

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


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

背景がビデオの場合は、以下のhtmlのリンクを差し替えます。
<div class="background-hack"></div>
<video autoplay loop>
<source src="https://dl.dropboxusercontent.com/u/34682655/Bubble%20H264.mp4.mp4">
<source src="https://dl.dropboxusercontent.com/u/34682655/Bubble%20H264.mp4.webmhd.webm">
<source src="https://dl.dropboxusercontent.com/u/34682655/Bubble%20H264.mp4.oggtheora.ogv">
</video>


背景をビデオにする方法はいろいろありますが、今回はhtml5のvideoタグを使ってみました。
いろんなブラウザに対応するために、ビデオのファイルはmp4、webm、ogvの三種類を用意しています。
fc2blogではこれらのファイルはアップロードできないため、Dropboxなどにアップロードしたものを
使っています。
ただoperaではどうしても動画が途中で止まってしまうため、代替画像を用意しています。
.background-hack {
z-index:-1;
background-color:#cccccc;
background-image:url('http://blog-imgs-69.fc2.com/m/y/s/mysticdiary/Bubble.jpg');
background-repeat:no-repeat;
background-size:cover;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}

お好みで上記のbackground-imageのurlを変更してください。

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

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

photogalleryr.zip
DOWNLOAD

photogalleryvideo.zip
DOWNLOAD
関連記事
baorin

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

25 Comments

kino says..."リメイクされたんですね!"
管理人様のサイトをのぞくのが習慣になってしまいました(*^_^*)
いつもながら、おしゃれなテンプレートで模様替えをしたくなってしまいます。
これからも、すてきなテンプレートを世に出し続けてくださいませ<(_ _)>
2014.07.02 05:00 | URL | #- [edit]
管理人 says..."kinoさんへ"
こんにちは。

テンプレート使っていただきありがとうございます。
これからもがんばって更新しますね。
よろしくお願いします。
2014.07.02 16:16 | URL | #i4E9Nobc [edit]
blossom says..."blogの一覧のところについて。"
初めまして!
blossomと申します。
初めてfc2ブログを開設することになりましてシンプル&かっこいいテンプレートを探してるうちに
mysticdiary様のテンプレートを発見しお借りする事になりました。
ホームページみたいなブログを作りたくて悩んでいたので本当に感謝しております。
今回、こちらのホームページ風テンプレートのリメイクバージョンをお借りしています。
今現在、適用しているところですが質問があってコメントさせて頂きました。
http://blog-imgs-65.fc2.com/t/i/m/timetoblossom11/blog_ichiran.png
こちらが私が今制作中のブログのスクショになります。

1.
こちらのブログでblogのところをクリックしたときに
カテゴリーの全ての記事が一括に表示されています。
私の場合は各記事ごとにbgmを入れたいと思っていて記事を作成しましたが
一括に表示されるとすべてのbgmが同時に再生されて”わっ!!”って感じになってしまうな..と思って悩んでいます。
仕方なくbgmを消すしかないのかな..と悩んでるうちにリメイクされる前のバージョンの
http://mysticdiarydemo.blog59.fc2.com/blog-category-2.html
こちらのページでは一括で全ての記事が表示されるのではなく「read more」のボタンでクリックすると
本記事に飛ぶってことに気付きました。
私のブログでもbogのカテゴリーで
各カテゴリーの中の記事がこうやってサムネイル?の記事のページでread moreをクリックすると本記事で飛ぶようにさせたいのですが
html,cssに関しては初心者で、今現在のところまでくるのにも背一杯でして自分ではできない気がして
失礼ですが質問させていただくようになりました。
どうしたらいいのでしょうか。

2.ホームページ風のテンプレートで一番すてきだと思ったのが動画のページとかを入れられることでした。
なんとか無事にvideoのページは作れたのですがこちらのスクショのように複数の動画のサムネイルが列に合わせて表示されるのではなく
なんか下に並ばれています。
http://blog-imgs-65.fc2.com/t/i/m/timetoblossom11/blog_video.png
これはサムネイルのサイズを変えるのでしょうか。
mysticdiary様のスクショのようにかっこよくできないのがとても恥ずかしく悲しいです。

最後にもしコメントをお読みになってから”こいつの日本語がおかしい”と思ってらっしゃるかもしれません(..)
実は韓国人でございまして日本にきてあまり時間が立っていなく
日本語がとても未熟です。
未熟な日本語で質問させて頂き申し訳ありません。
私の文章が理解できないかとても心配です..
なんとか理解して頂けたら幸いです。

変な日本語でとても未熟な質問で恥ずかしいですが
宜しくお願い致します!
2014.07.12 22:58 | URL | #CeIfeFHM [edit]
管理人 says..."blossomさんへ"
こんにちは。

日本語全然おかしくないですよ!よくわかりました。
お悩みの2点ですが、
1点目の、blog(上部のナビゲーションの所ですよね?)をクリックすると記事が一括表示されるということですが、
これは何か設定がおかしいような気がします。
リンクアドレスはあっていますでしょうか?
blogへのリンクは最初に設定するカテゴリーナンバーを当てはめた
アドレスになります。
例:http://mysticdiary.blog99.fc2.com/blog-category-1.htmlなど
灰色の部分は自分のブログのアドレス、水色の部分はカテゴリーナンバーを入れます。

リメイク前のはreadmoreをクリックすると、記事が全部読めるように
なっているとのことですが、それはリメイクバージョンも同じです。
そこの所は変更していません。
ただ、readmoreを表示させるには、記事の編集画面で追記の編集のところに
記事を書いた時だけです。本文の編集のところだけだと、アーカイブの画面でも
記事が全部表示されます。

2点目のビデオのサムネイルがうまく並ばないとのことですが、これは
上の説明の「2・作成したカテゴリーの番号にあわせてCSSを編集する」
ここがうまくいっていないからだと思います。
.gallary2と書いてあるのがvideoのcssに当たるので、ここのカテゴリーナンバーが
合っていないとcssがうまく適用されません。
もう一度チェックしてみてください。

またわからなかったら質問してください。
よろしくお願いします。


2014.07.13 15:59 | URL | #i4E9Nobc [edit]
blossom says..."ご返信ありがとうございます。"
mysticdiaryさん
こんにちは。
ご返信ありがとうございます。
mysticdiaryさんのデザインが素敵すぎて
本当に感謝しております。
早速、修正してみます。

そして質問というか、まぁ質問ですが
mysticdiaryさんに個人的にテンプレートの制作依頼をすることは可能でしょうか。
できなかったら申し訳ありません。
ただメールで相談で...と思います..(..)

宜しくお願い致します!
2014.07.13 17:35 | URL | #CeIfeFHM [edit]
管理人 says..."blossomさんへ"
こんにちは。

残念ですがテンプレート作りは趣味でやっているので、
今は制作依頼とかは受けていないんですよ〜。
昔は有償でやってたんですけど、なかなか時間が取れないので・・。

よろしくお願いします。
2014.07.14 18:52 | URL | #i4E9Nobc [edit]
くんたっしゅ says...""
こんにちは。
お身体大丈夫ですか?どうか大事になさって下さい。

私は以前、DREAMのテンプレートでレクチャーをお願いしていた者ですが、上手くいかないので、違うテンプレート(説明付き)で作成してみようと思い、やってみたのですが、わからない点がありましたので、質問お願いいたします。

以下の説明の部分なのですが、htmlのどの部分になるのでしょうか?
また、下記のhtmlを挿入させなければならないのでしたら、どの部分に挿入したらよいのでしょうか?

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が捨てカテゴリーです。


それから…
固定ページのカテゴリーが表示されてしまうことにより、レイアウトが崩れてしまいます。
どのようにしたら、galleryやvideo、about me などの固定ページでカテゴリーを消すことができるのでしょうか?
htmlの記述箇所や挿入箇所のもう少し詳しい説明をお願いいたします。
2014.09.03 12:21 | URL | #- [edit]
管理人 says..."くんたっしゅさんへ"
こんにちは。

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

これは管理画面でプラグインの設定で行ってください。
公式のカテゴリーのプラグインの中身を上記の中身に差し替えてもいいですし、
フリーのプラグインの中身を上記にして使ってもいいです。

それと、
>固定ページのカテゴリーが表示されてしまうことにより、レイアウトが崩れてしまいます
とのことですが、固定ページにサイドバーが出ているということですか?
2014.09.03 14:04 | URL | #i4E9Nobc [edit]
くんたっしゅ says...""
早々のご回答ありがとうございます。
もしよろしければ、私のブログをご覧下さい。
http://museo2013countach.blog.fc2.com/

ブログのページにはプロフや月間アーカイブやその他、PCプラグインで選択した項目が表示されますが、ギャラリー等の固定ページにはそれらは表示されないはずなのですよね?
でも出てしまいます。
管理人様のような画面のスクリーンショットにならないのです。


FC2の「プラグインの設定」のそれぞれのカテゴリー内の「詳細」の中の
プラグインの改造【HTMLの編集】を行います。(上級者向け)
↑ここに記述(コピペ)するのでしょうか?

>公式のカテゴリーのプラグインの中身を上記の中身に差し替えてもいいですし、
フリーのプラグインの中身を上記にして使ってもいいです。
(↑ここの部分が少し難しいです。)

よろしくお願いいたします。

2014.09.04 23:08 | URL | #- [edit]
管理人 says..."くんたっしゅさんへ"
こんにちは。

固定ページにサイドバーが出てしまうのは、記事を編集するときにコメント・トラックバック
を切っていないからだと思います。
このテンプレートは固定ページとブログ記事をコメントのある・なしによって
見栄えを変えていますので、説明の3.の項目をよく読んでもう一度やってみてください。

>FC2の「プラグインの設定」のそれぞれのカテゴリー内の「詳細」の中の
>プラグインの改造【HTMLの編集】を行います。(上級者向け)
>↑ここに記述(コピペ)するのでしょうか?

そうです。

>公式のカテゴリーのプラグインの中身を上記の中身に差し替えてもいいですし、
>フリーのプラグインの中身を上記にして使ってもいいです。
>(↑ここの部分が少し難しいです。)

たしか公式のプラグインにフリーエリアというのがあったはずです。
それを追加して、中身にコピペするだけです。

よろしくお願いします。
2014.09.05 09:34 | URL | #i4E9Nobc [edit]
くんたっしゅ says...""
丁寧な説明ありがとうございます。
もう一度見直しと設定を試みます。
2014.09.05 20:41 | URL | #- [edit]
ナリ says..."ご教授お願いします。"
こんにちは。これからブログをはじめようとしているド素人です。
質問です。
8番の説明ですが、これはどこに挿入すればよいのでしょうか?
よろしくお願いします。
2014.09.07 15:56 | URL | #hhfrrYBU [edit]
管理人 says..."ナリさんへ"
こんにちは。

8番は、上の方への返事でも書きましたが、
プラグインの中身をこれに差し替えてくださいという意味です。

公式のカテゴリーの中身を差し替えてもいいですし、
フリーエリアのプラグインを使ってもいいです。

よろしくお願いします。
2014.09.08 15:33 | URL | #i4E9Nobc [edit]
くんたっしゅ says...""
お世話になっております。

頂いたアドバイスに従って、見直しと修正を行い
8. ブログページで固定ページへのリンクを表示させないようにする
↑出来ました!とても親切でわかりやすい説明のおかげです。ありがとうございます。

しかし、ギャラリーだけが、どうしても上手くいきません。
[記事の管理]の内の、コメント・トラバの受付状態を両方×にして、<タイトル>の文字をクリックしたらプレビュー画面が出ますが、そこでは「サイドバー」は消えました。
でも、実際のブログ画面や[ブログの確認]でブログから、ギャラリーを開くと「サイドバー」が出てきてしまいます。
この点は、どのように修正したらよいでしょうか?

あと、ギャラリーは横に4枚ずつ、少しずつ隙間があって画像が並んでいるのが正解だと思うのですが、左から3枚目と4枚目の画像の隙間が無く、ぴったりくっついてしまっています。
そのせいなのか、2段目の画像は右端に1枚だけ、3段目は4枚画像が出ていますが、右から2枚目と3枚目の隙間が無く(真ん中の2枚)ぴったりくっついています。
そして、4段目は3枚目と4枚目の2画像のみ。5段目は1枚目だけ(左端)の画像になっています。
この部分の修正方法もぜひ教えてください。
よろしくお願いいたします。
2014.09.10 02:03 | URL | #- [edit]
ナリ says...""
遅くなりました、無事8は解決したのですが、9の
<script type="text/javascript">
$(function() {
$('.plugcontent li').remove(":contains('2000/01')");
});
</script>
をHTMLの末の方の</body>
前に挿入したのですが、月別アーカイブの2000/01月が消えてくれません。
どのような問題が考えられるでしょうか?

どうぞよろしくお願いいたします!
2014.09.15 02:02 | URL | #- [edit]
ナリ says...""
追記させていただきます。
ひとつ上の方のようにギャラリー、ビデオの配置がずれてしまいます。
ずれ方はどうやら一緒のようです。どうぞよろしくお願いいたします!
2014.09.16 02:11 | URL | #- [edit]
管理人 says..."くんたっしゅさんへ"
お返事遅れてすみません。

ギャラリーがずれるのであれば、
記事を保存するときに、詳細設定の改良の扱いをHTMLタグのみ
にしてみてください。

よろしくお願いします。
2014.09.20 09:31 | URL | #i4E9Nobc [edit]
管理人 says..."ナリさんへ"
こんにちは。

上の方へも書きましたが、ギャラリーなどの配置がずれる場合は、
記事を保存する時に改行をHTMLタグのみにして保存してください。

月別アーカイブが消えない件については、ちょっとよくわかりませんでした。
公式プラグインのアーカイブなら消えると思うのですが・・。
2014.09.20 14:15 | URL | #i4E9Nobc [edit]
ナリ says...""
無事ギャラリー、ビデオの配置は改善できました!ありがとうございます!

月別の方は未だに直せず、

----------------------------------------------------------------

</div><!--containerここまで-->

<nav id="page-top"><a href="#">PAGE TOP</a></nav>

<script src="http://blog-imgs-69.fc2.com/m/y/s/mysticdiary/pagetop.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/maximage.js
"></script>
<script type="text/javascript">
$(function(){
jQuery('img.bgmaximage').maxImage({
isBackground: true,
slideShow: true,
slideShowTitle: false,
slideDelay: 15,
overflow: 'auto',
verticalAlign:'top'
});
});
</script>
<script type="text/javascript">
$(function() {
$('.plugcontent li').remove(":contains('2000/01')");
});
</script>
</body>

</html>

----------------------------------------------------------------

で合っていますでしょうか?
よろしくお願いいたします。
2014.09.20 18:51 | URL | #- [edit]
管理人 says..."ナリさんへ"
挿入方法はそれで合ってます。
私の方でも実験してみましたが、ちゃんと消えるので
どうしてなのかよくわかりませんでした。
2014.09.21 08:29 | URL | #i4E9Nobc [edit]
くんたっしゅ says...""
お世話になっております。

ギャラリーがずれるのであれば、
記事を保存するときに、詳細設定の改良の扱いをHTMLタグのみ
にしてみてください。

↑さっそく直しました。
記事の管理→ 記事の編集→ 詳細設定→HTMLタグのみ←選択
その後、[プレビュー]クリック 
こちらのプレビュー画面では、ズレが解消されてキレイに出来上がりました。ありがとうございます。

しかし、↑を[記事を保存]をクリックし保存し、[ブログの確認]をクリックして、画面を見ると、
サイドバーが消えておらず、画像が縦一列に並んでしまっています。

※サイドバー←ブログページの一番右端に表示される「プロフ」とか「最新記事」とか「月間アーカイブ」とか「カウンター」等々

プレビュー画面通りなら、ギャラリーとアバウトミーのページにサイドバーは出てこないはずと思っています。逆をいえば、ブログのページにしかサイドバーは出ないはずと。

プレビュー画面ではキレイに出来ているのに、[ブログを確認]から見ると、プレビュー画面とは違った仕上がりになってしまうのは、何が原因なのでしょうか。
2014.09.21 21:07 | URL | #- [edit]
管理人 says..."くんたっしゅさんへ"
記事を保存するときに、カテゴリーをギャラリーとか固定ページのカテゴリーにして
保存してますか?
あるいは、CSSの書き換えがうまくいってないのかもしれません。
もう一度チェックしてみてください。

よろしくお願いします。
2014.09.22 13:40 | URL | #i4E9Nobc [edit]
くんたっしゅ says...""
お世話になっております。

ご指摘の通り確認いたしました。

その結果、トップ画面の右上のナビでギャラリーへとんだとき、いったんブログのトップ画面のような画面になります。
それで、ギャラリーの1枚目の画像のすぐ上に「gallery」の表記が出ていて、これをクリックすると、記事の管理内で作成した記事(ギャラリー)のプレビュー画面で再現された画面になります。
ワンクッションあって、ギャラリー画面にいけるという感じなのですが、トップ画面の右上のナビをクリックしたら、すぐにギャラリーの完成された画面にいくことは出来ないのでしょうか?
(すいません。文章だとわかりづらいかもしれません。うまく伝わればよいのですが…。)もしよろしければ、状態をご覧下さい。http://museo2013countach.blog.fc2.com/
よろしくお願いします。
2014.09.24 23:05 | URL | #- [edit]
管理人 says..."くんたっしゅさんへ"
これは単にリンクアドレスが間違っているだけです。
カテゴリーのアドレスじゃなくて、固定記事へのアドレスをリンクさせてください。
カテゴリーのアドレスを入れるのは、blogだけです。
2014.09.25 09:51 | URL | #i4E9Nobc [edit]
くんたっしゅ says...""
お世話になっております。

ありがとうございます!!
リンクアドレスを変更しましたら、うまくいきました!
ビデオやギャラリーは自分のものに差し替えないといけませんが、
これで、なんとか形になりました。
本当にありがとうございました。
とても勉強になりました。
2014.09.25 20:53 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/468-0e0b26a6
← なんちゃってonepage → こりだすとそればっかり