MysticDiary

ホームページ風テンプレ

Posted by baorin   3   1

久しぶりにホームページ風テンプレをつくりました。
今度はモノクロのシンプルな感じでレスポンシブになってます。

blackandwhitesample.jpg







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

あとはこのテンプレ独自のカスタマイズ方法ですね。

<nav class="topnav">
<ul>
<li class="twitter"><a href="#" 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="mail"><a href="mailto:#?subject=hello!&amp;body=message" onfocus="this.blur();" class="nonborder" title="メール">mail</a></li>
</ul>
</nav>

これはトップ右サイドのナビゲーションですね。
ツイッターやフェイスブックのリンク先を#のところに入れてください。

次は左サイドのナビゲーションですね。
<nav class="nav">
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="http://yaomin727.blog.fc2.com/blog-entry-7.html" onfocus="this.blur();" class="nonborder" title="お仕事">WORKS</a></li>
<li><a href="http://yaomin727.blog.fc2.com/blog-entry-5.html" onfocus="this.blur();" class="nonborder" title="私について">ABOUT ME</a></li>
<li><a href="http://yaomin727.blog.fc2.com/blog-category-0.html" onfocus="this.blur();" class="nonborder" title="ブログ">BLOG</a></li>
</ul>
</nav>

これもリンク先を固定ページのアドレスに変更します。

次はインデックスページ(トップページ)の編集ですね。
<!--index_area-->
<h2 class="indexh2">Welcome to "If I had a broomstick,"</h2>
<p align="center" style="margin:0 0 40px 0;"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo223.jpg" width="100%"></p>
<p style="margin:0 0 10px 0;">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 style="margin:10px 0;" >lorem ipsum(ロレム・イプサム、略してリプサム lipsum ともいう)とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体(フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。
「lorem ipsum」は様々なバリエーションがあるが、もっとも一般的なテキストは以下の通りである。</p>
<!--/index_area-->

htmlの上の部分がトップページです。
<!--index_area-->〜<!--/index_area-->
の間に入って
いれば何を書いてもオッケーです。自由に編集してください。

あとは固定ページの編集ですね。
cssから以下の箇所を探してください。

/* 固定ページ */

/* about me */
#cat5 section#maincontents{
width:100% !important;
padding:0 !important;
margin:0 !important;
}

#cat5 .blogpost{
width:100% !important;
padding:0 !important;
margin:0 !important;
}

#cat5 .blogpost h2{
margin:0 0 20px 0;
padding:0 0 10px 0;
}

/* works */
#cat6 section#maincontents{
width:100% !important;
padding:0 !important;
margin:0 !important;
overflow:hidden;
}

#cat6 .blogpost{
width:100% !important;
margin:0 !important;
}

#cat6 .blogpost h2{
margin:0 0 20px 0;
padding:0 0 10px 0;
}

#cat6 .photo1{
float: left;
margin: 0 3.317535545023696682% 1.5em 0 !important;
width: 31.121642969984202211%;
background-image:none;
}

#cat6 .photo3{
float: left;
margin: 0 0 1.5em 0;
width: 31.121642969984202211% !important;
background-image:none;
}

#cat6 .photo1 img,#cat6 .photo3 img{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
display: block;
margin: 0 auto 2em;
}

/* description */
#cat7 section#maincontents{
width:100% !important;
padding:0 !important;
margin:0 !important;
}

#cat7 .blogpost{
width:100% !important;
padding:0 !important;
margin:0 !important;
}

#cat7 .blogpost h2{
margin:0 0 20px 0;
padding:0 0 10px 0;
}


今回のデモでは、カテゴリー5が「about me」のページ、カテゴリー6が「works」のページ、カテゴリー7
が「description」のページとなっています。
カテゴリーナンバーをご自分で作ったカテゴリーナンバーに差し替えてください。

固定ページのhtmlは以下の通りです。
同じ風にしたい場合は、記事の編集画面でコピペで貼付けてください。

●works
<p style="margin:0 0 40px 0;">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="photo1"><a href="http://yaomin727.blog.fc2.com/blog-entry-10.html" target="_blank"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo2221.jpg" border="0"></a></div>
<div class="photo1"><a href="http://yaomin727.blog.fc2.com/blog-entry-11.html" target="_blank"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo2223.jpg" border="0"></a></div>
<div class="photo3"><a href="http://yaomin727.blog.fc2.com/blog-entry-12.html" target="_blank"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo2222.jpg" border="0"></a></div>
<div class="photo1"><a href="http://yaomin727.blog.fc2.com/blog-entry-13.html" target="_blank"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo3333.jpg" border="0"></a></div>
<div class="photo1"><a href="http://yaomin727.blog.fc2.com/blog-entry-14.html" target="_blank"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo2231.jpg" border="0"></a></div>
<div class="photo3"><a href="http://yaomin727.blog.fc2.com/blog-entry-15.html" target="_blank"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo2230.jpg" border="0"></a></div>

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

●about me
<a href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/myface2.jpg" target="_blank"><img style="float:left;margin:0 30px 30px 0;" src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/myface2.jpg" border="0"></a><span 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.</span>


●description
<span style="float:left;margin:0 30px 30px 0px;"><a href="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo4410.jpg" target="_blank"><img src="https://blog-imgs-50.fc2.com/m/y/s/mysticdiary/photo4410.jpg" border="0" ></a></span><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>


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

blackandwhite
blackandwhite2.html
blackandwhite.html

blackandwhite2.css
blackandwhite.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.

3 Comments

管理人 says..."おかゆさんへ"
こんにちは。
固定ページにする場合は、記事の編集画面で
コメント・トラックバックは切っておいてください。
切っておかないとサイドバーが表示されます。
2013.05.20 16:07 | URL | #i4E9Nobc [edit]
shalona says...""
はじめまして。
テンプレートをお借りしました。
ありがとうございます。
画像を変えたので、ご了承いただければと思います。
2013.05.20 21:37 | URL | #- [edit]
管理人 says..."shalonaさんへ"
こんにちは。
カスタマイズはご自由になさってください。
よろしくお願いします。
2013.05.22 12:46 | URL | #i4E9Nobc [edit]

Leave a reply






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