mysticdiary

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

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

今回は久々にホームページ風テンプレを作ってみました。
第何弾か忘れてしまったので?マークがついてます(笑)

top
dassample.jpg


gallary
dasgallarysample.jpg



仕様はいままでのホームページテンプレとあまり変わっていません。
変わった所といえば、ギャラリーのポップアップにnivolightboxを新たに
使っているくらいでしょうか。

あと自分がiphone5sを購入したので、スマホの表示に多少気を使った
ことくらいかなあ・・・。

blog
dasblogsample.jpg
photo by h.koppdelaney CC BY-ND 2.0



fullwidth
dasfullsample.jpg



aboutme
dasaboutsample.jpg



導入の仕方は基本的にこちらの記事を参考にしてください。
やり方は同じです。カテゴリーナンバーによってページの見栄えを調整しています。

あとはこのテンプレ独自の説明ですね。

順番はどうでもかまいませんが、やる事を大まかに書くと、

1:ダウンロードしたhtmlとcssをとりあえず編集画面で貼り付け保存する

2:管理画面でカテゴリーを編集する

3:CSSのカテゴリーナンバーを自分が設定した番号に書き換える

4:記事の編集画面で固定ページのソースを貼り付け保存する

5:トップページの編集をする

6:リンクを設定する

といったところでしょうか。ここでは1と2ははぶき、3から説明します。




3:CSSのカテゴリーナンバーを自分が設定した番号に書き換える

CSSの編集画面に貼り付けたソースの中から、以下のCSSを見つけます。


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

#cat3 section#maincontents,#cat7 section#maincontents,#cat9 section#maincontents{
width:90% !important;
padding:0 !important;
margin:0 5%;
}

#cat3 section#maincontents .blogpost,#cat7 section#maincontents .blogpost,#cat9 section#maincontents .blogpost{
padding:0;
margin:0;
position:relative;
}

#cat3 section#maincontents h2,#cat7 section#maincontents h2,#cat9 section#maincontents h2{
text-align:left;
font-size:20px;
margin:0 0 50px 0;
padding:0 0 10px 0;
border-bottom:1px #cccccc solid;
}


上の例ではカテゴリー3・7・9が固定ページということになっています。
この数字の部分をご自分の設定した固定ページのカテゴリー番号に差し替えます。
(#cat3の3の部分)

次はギャラリーにあたるカテゴリーナンバーを差し替えます。

/* gallary */

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

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

#cat7 section#maincontents .gallary img{
width:100%;
}

#cat7 section#maincontents .gallary a:hover img{
filter:alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}


上の#cat7の数字の部分を差し替えます。

次にhtmlの上部の方にあるcssも差し替えます。いろいろな画面サイズに対応させるためです。2カ所あります。

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

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

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

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


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

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

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


4:記事の編集画面で固定ページのソースを貼り付け保存する

about meのページのソースを記事の編集画面に貼り付けます。

<div class="aboutimage"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/myface.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>

貼り付けたらカテゴリーは自分で設定した固定ページのカテゴリーにして、
コメント・トラックバックは切って保存します。
以下のソースも同様にします。

fullwidth

<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.</p><div class="fullimage"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto5sum.jpg"></div><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.</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.</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.</p>

gallary

<ul class="gallary">
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto1.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto1sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto2.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto2sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto3.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto3sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto4.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto4sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto5.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto5sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto6.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto6sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto7.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto7sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto8.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto8sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto9.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto9sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto10.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto10sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto11.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto11sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto12.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto12sum.jpg"></a>
</li>

</ul>
<br clear="all">

gallaryは画像のリンクをご自分のサーバーにアップした写真のリンクと差し替えます。

aタグのリンクは元画像へのリンクで、imgタグのリンクはサムネイルです。
写真の大きさはサムネイルはそろえてください。
サンプルではサムネイルは500px×300pxで作成しています。元画像の大きさは自由です。
くわしい使い方はこちらも参照してください。


5:トップページの編集をする

トップページを編集します。
まずは写真のスライダーから。
以下のhtmlを見つけ、ご自分の写真のアドレスに差し替えます。

<!--index_area-->
<div class="photoimage">
<ul class="rslides">
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/measure.jpg" alt=""></li>
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/locked_20131012145720aee.jpg" alt=""></li>
<li><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/building_201309291558446ff.jpg" alt=""></li>
</ul>
</div>
<!--/index_area-->

写真の大きさは例では1200px×500pxです。

次に、featuredpostsの部分です。

<div class="box1">
<h2>FEATURED POSTS</h2>
<ul class="featured">
<li>
<a href="#"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo1measure.jpg"></a>
<h2><a href="#">Lorem ipsum</a></h2>
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 qu..<div class="more"><a href="#">READMORE...</a></div>
</li><!--
--><li>
<a href="#"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo2locked.jpg"></a>
<h2><a href="#">Lorem ipsum</a></h2>
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 qu..<div class="more"><a href="#">READMORE...</a></div>
</li><!--
--><li>
<a href="#"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo3rouka.jpg"></a>
<h2><a href="#">Lorem ipsum</a></h2>
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 qu..<div class="more"><a href="#">READMORE...</a></div>
</li>
</ul>
</div>

上の#の部分をリンクさせたい記事のアドレスに差し替えます。
イメージ画像は、上の例では500px×300pxで作成しています。
こ自分の作成した画像に差し替えてください。

次は、gallaryの部分です。

<div class="box2">
<h2>MY GALLARY</h2>
<ul class="gallary">
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto1.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto1sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto2.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto2sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto3.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto3sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto4.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto4sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto5.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto5sum.jpg"></a>
</li>
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto6.jpg"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/kabiphoto6sum.jpg"></a>
</li>
</ul>
</div>

gallaryのページと編集方法は同じです。

リンクをご自分のサーバーにアップした写真と差し替えます。

aタグのリンクは元画像へのリンクで、imgタグのリンクはサムネイルです。
写真の大きさはサムネイルはそろえてください。
サンプルではサムネイルは500px×300pxで作成しています。元画像の大きさは自由です。
くわしい使い方はこちらも参照してください。

6:リンクを設定する。

<nav class="topnav">
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="./" onfocus="this.blur();" class="nonborder" title="ホーム">HOME</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder" title="ギャラリー">GALLARY</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder" title="フルワイド">FULL WIDTH</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>

上の#の部分に作成しておいた固定ページへのリンクやブログへのリンクを記入します。
(ブログのトップページへのリンクはカテゴリーの設定画面で設定した番号になります。
例:http://mysticdiarytemplate.blog137.fc2.com/blog-category-5.htmlなど)

ナビゲーションは下部にもあります。
ツイッターやフェイスブックへのリンクを設定しましょう。

<nav class="footernav">
<ul>
<li class="allpost"><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder" title="全ての記事">&#x64;</a></li><!--
--><li class="twitter"><a href="#" onfocus="this.blur();" class="nonborder" title="twitter">&#xe094;</a></li><!--
--><li class="facebook"><a href="#" onfocus="this.blur();" class="nonborder" title="facebook">&#xe093;</a></li><!--
--><li class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder" title="Rss">&#xe09e;</a></li><!--
--><li class="mail"><a href="mailto:#?subject=hello!&amp;body=message" onfocus="this.blur();" class="nonborder" title="メール">&#xe010;</a></li><!--
--><li class="admin"><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面">&#x7e;</a></li>
</ul>
</nav>


ここまでくると、なんとか完成です!おつかれさまでした。

その他細かな設定はこちらの記事を参考にしてください。

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

das_kabinette.zip
DOWNLOAD
関連記事
baorin

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

2 Comments

raku says..."boxの画像がずれます"
テンプレートダウンロードさせていただきました。
ありがとうございます。

お忙しいところ恐縮ですが、教えてください。

スマホや画面やノートパソコンなどの場合には画像の崩れはないのですが、デスクトップの画面で最大にすると、BOX1,BOX2が崩れてしまいます。
書かれている通りに変更したのですが、うちのデスクトップが大きいせいでしょうか・・・。

初心者なので、よくわかっていないのですが、
smaller than 980
のところで最大値を設定するとできるのでしょうか?

わかりづらい説明ですみません。
2014.10.12 23:13 | URL | #m.2.LkcQ [edit]
raku says..."直りました"
再びすみません。

なんとか自力で直りました。

最大幅は、スタイルシートのbody {の下に
background-position: 0 0;
margin: 0 auto;
padding: 0;
max-width: 1100px;
text-align: center;
を入れて、1100PXを最大値にしました。

BOXの画面のズレは、
各ボックスのwidth:90%;を
width:80%;
にしたら直りました。

参考になる方もいらっしゃるかもしれないので、残しておきます。
ありがとうございました。

2014.10.14 17:31 | URL | #m.2.LkcQ [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/451-365a2843
← 広告が出るまえに・・・ → ひさびさに共有申請しました。