mysticdiary

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

今年初のホームページ風テンプレ

またまたひさびさにホームページ風テンプレを作成しました!
相変わらず黒とかグレーとか好きなんでこんな配色ですけど、
気に入った方はご自由にお使いください。

dream.png


トップページは、ブログ記事のタイトルをニュースティッカー風に表示するようになっています。

blog
dblog.jpg



fullwidth
dfullwidth.jpg



aboutme
dabout.jpg



gallary
dgallary.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:100%;
float:none;
margin:0;
padding:0;
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
zoom: 1;
}

#cat3 section#maincontents .blogpost,#cat7 section#maincontents .blogpost,#cat9 section#maincontents .blogpost{
padding:30px;
margin-bottom:40px;
}


上の例ではカテゴリー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:背景画像の編集をする

背景画像の編集します。
背景画像はbackstretchというjqueryライブラリを使用しています。
htmlの一番下の方にある以下のソースをみつけ、画像リンクをおすきなアドレスに
差し替えます。

<script>
$.backstretch("http://blog-imgs-69.fc2.com/m/y/s/mysticdiary/girl61.jpg");
</script>

写真の大きさは例では1920px×1440pxです。

6:リンクを設定する。

<nav class="topnav2">
<a href="#" id="menu-icon">&#x61;</a>
<ul>
<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など)

.topnav2は2カ所あるので両方設定します。

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

<nav class="topnav">
<ul>
<li class="twitter"><a href="#" onfocus="this.blur();" class="nonborder" title="twitter"><img src="https://blog-imgs-42.fc2.com/m/y/s/mysticdiary/twitter_20131214144337e0a.png" width="30" height="30"></a></li><!--
--><li class="facebook"><a href="#" onfocus="this.blur();" class="nonborder" title="facebook"><img src="https://blog-imgs-42.fc2.com/m/y/s/mysticdiary/facebook_20131214144306ac9.png" width="30" height="30"></a></li><!--
--><li class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder" title="Rss"><img src="https://blog-imgs-42.fc2.com/m/y/s/mysticdiary/rss_201312141443367b7.png" width="30" height="30"></a></li>
</ul>
</nav>


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

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

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

dream.zip
DOWNLOAD
関連記事
baorin

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

8 Comments

plateau says..."使わせていただきました"
はじめまして

plateauともうします。

写真のブログでこちらのテンプレートを使わせていただきました。
とても素晴らしいテンプレートで気に入っています。
幾つかわからない所があって教えていただければ嬉しいです。

背景の写真を薄い色調の海の写真を使ったのですが
トップページのタイトルが背景の色と重なってしまい
読みづらくなりました。
この色を変えたいのと、ブログを選択した時に
一瞬背景が黒くなるのを何とかしたいと(表示されないように)
背景はもし面倒なようなら諦めます

自分なりにいじったのですがうまく生きませんでした。
お忙しい中、恐縮ですがよろしくお願い致します。

2014.05.19 08:14 | URL | #- [edit]
管理人 says..."plateauさんへ"
こんにちは。

背景の色を変更するのは、CSSの
body {
font-size:15px;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
text-align:left;
color:#dddddd;
line-height:1.8em;
position:relative;
-webkit-text-size-adjust: none;
background-color:#181818;
}
このbackground-colorの色を変更します。#ffffffとかにすれば白くなると思います。
あと、トップの文字の色を変更したい場合は、CSSに

.ticker h2 a{
color:#666666;
}
とでも書き加えてください。
色はおすきに調整してください。

よろしくお願いします。
2014.05.20 10:59 | URL | #i4E9Nobc [edit]
plateau says..."ありがとうございました"
文字の色も背景の色も変えることが出来ました。
ありがとうございます。

大切に使わせていただきます^^
2014.05.20 23:43 | URL | #- [edit]
risimiru says...""
こんにちわ
いつも素敵なテンプレートで
お世話になってます。

お聞きしたいのですが
ブログの記事背景の黒い半透明の横幅というのは
変えれないでしょうか?

変えれるとすればどこでしょうか
教えて頂けたら嬉しいです。

よろしくお願いします。
2014.07.03 08:59 | URL | #M942z9m. [edit]
risimiru says...""
朝に質問させて頂いた者です!
ブラウザの幅を変えると自然に
ブログ幅も変わるんですね><

気づくの遅すぎました。
申し訳けありません。

これからよろしくお願いします♪
2014.07.03 10:18 | URL | #- [edit]
くんたっしゅ says...""
はじめまして

「くんたっしゅ」です。

ブログでテンプレートを使わせていただきました。
デザインが素敵です。

どうしてもわからない所があって教えていただければ嬉しいです。

gallaryのページのGALLARYの文字が出てこなくて、画像が並んでいる一段目が横一列ではなく右下がりに崩れてしまいます。二段目以降はキレイに並んでいるのですが…。
自分なりに考えてみたのですがうまくいきませんでした。
どのようにしたら、見本のように仕上がるのでしょうか。
よろしくお願いいたします。
2014.08.28 01:19 | URL | #- [edit]
管理人 says..."くんたっしゅさんへ"
こんにちは。

galleryの文字が出てこないというのは
記事のタイトルにgalleryと入れてないと出てこないです。
あと画像が右下がりになるというのは、
cssの設定がどこか間違っているからだと思います。
記事のカテゴリーナンバーとcssのカテゴリーナンバーは
一致してますでしょうか?
書き換えが全部できていないとレイアウトがくずれると思います。
2014.09.03 13:00 | URL | #i4E9Nobc [edit]
くんたっしゅ says...""
ご回答を頂きありがとうございます。

>記事のカテゴリーナンバーとcssのカテゴリーナンバーは
一致してますでしょうか?
↑この部分に関しましては全て書き換えできていると思いますが、再度チェックしてみます。

galleryの文字に関しましては理解いたしました。
ありがとうございます。
2014.09.04 23:23 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/461-9be4689e
← 春ですねえ・・・ → 超ひさびさに共有申請しました