mysticdiary

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

なんちゃってonepage

ここ数年、すべてのコンテンツをワンページで見せるサイトが流行ってるみたいなんだけど、
いまさらな感じですが、なんちゃってワンページのテンプレート作ってみました。
個人のブログだとコンテンツがあんまりないから適当にメッセージの項目とか
無理矢理作ってみました。(笑)
でもよく考えてみたら、ワンページにすればいままでのホームページ風テンプレートみたいに
面倒な設定とかいらないから、ホームページ風テンプレートは難しくてわかりにくい!という
人にはいいかも知れないです。

campanella.jpg ブログのページはこんな感じです。

campanellablog.jpg

このテンプレートは特別な設定は必要ありませんが、
画像を変更したり、テキストを変更したりの作業は必要になりますね。
以下はその説明です。

まずは背景画像の変更です。
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-69.fc2.com/m/y/s/mysticdiary/man.jpg" />
<img class="bgmaximage" src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/r.jpg" />
<img class="bgmaximage" src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/bye.jpg" />
<!--bgmaximageここまで-->

背景画像を画面いっぱいに表示するのにmaximageを使用しています。
カスタマイズが必要な場合は、htmlの下部にある
<script type="text/javascript">
$(function(){
jQuery('img.bgmaximage').maxImage({
isBackground: true,
slideShow: true,
slideShowTitle: false,
slideDelay: 15,
overflow: 'auto',
verticalAlign:'top'
});
});
</script>
で変更します。リンク先を参照してみてくださいね。

次は、トップ部分のテキストを変更します。
<div class="headertext">
<div class="headertext2">
<h2>僕もうあんな暗の中だってこわくない。</h2>
<p>きっとみんなのほんとうのさいわいをさがしに行く</p>
</div>
<span class="scroll"><a class="floating" href="#section-1">scroll down</a></span>
</div>

この部分のテキスト部分をお好きな言葉に変更してくださいね。

次は、トピックの部分です。
<div class="box" id="section-1">
<h2>Topics</h2>
<div class="box1">
<div class="boximage">
<a href="">
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/assimilation.jpg" />
<div class="caption-wrapper">
<div class="caption">
<h2>坊ちゃん</h2>
</div>
</div>
</a>
</div>
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。<br>なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。<br>弱虫やーい。と囃したからである</p><a class="readmore" href="#">Read More</a>
</div>
<div class="box1 second">
<div class="boximage">
<a href="">
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/fog.jpg" />
<div class="caption-wrapper">
<div class="caption">
<h2>私の個人主義</h2>
</div>
</div>
</a>
</div>
<p>あなたは今つるつるこういう話らにおいて事の時を参りたです。いかに時間に通知者はむしろこの学習ななだけでして来るべからよりも使用云いべきですて、はっきりにも思っだあるうん。個性をやるませのはもっとも昔がひとまずたたませ</p><a class="readmore" href="#">Read More</a>
</div>
<div class="box1 right">
<div class="boximage">
<a href="">
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/bicycle.jpg" />
<div class="caption-wrapper">
<div class="caption">
<h2>セロ弾きのゴーシュ</h2>
</div>
</div>
</a>
</div>
<p>セロは扉のあんまばか弾が夜中に結ん孔ただ。ところがますます生意気ないたにとっておっかさんたた。ばかでましもんなはたそして子のまっ黒館のときをはどんと生意気たなが、それなど療を血走っられることたませ。弾くすぎおれは実がこわいならてはじめのパチパチパチッの音楽たちでなっ第六猫団のかっこうにだまってしまいたで。</p><a class="readmore" href="#">Read More</a>
</div>
<br clear="all">
</div>
上記のimgのリンク部分をお好きな画像アドレスに変更します。
画像の大きさは自由ですがデモでは、500px×500pxで作ってます。
デモと同じにするには正方形にしてくださいね。

テキスト部分もお好きな言葉に変更します。

あとはreadmoreの部分の#はリンクさせたい記事のアドレスに変更します。
<a href="">
の部分もリンクさせたければ
リンク先のアドレスを挿入してください。

次は、ギャラリーの部分ですね。
<li>
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/assimilation.jpg">
<figure>
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/assimilation.jpg">
<figcaption>
<p>Lorem ipsum dolor sit amet</p>
</figcaption>
</figure>
</a>
</li>
上記の部分が一つの写真のくくりになります。
<a title="Lorem ipsum dolor sit amet" href="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/assimilation.jpg">
上のtitle=の部分は写真のタイトルをいれて、href=のあとには写真の元画像のアドレスを入れます。
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/assimilation.jpg">
上の画像リンクはサムネイルのリンクです。
サムネイルの大きさはデモでは500px×500pxです。大きさは自由ですが正方形で
作ってくださいね。
<p>Lorem ipsum dolor sit amet</p>
上の部分も写真のタイトルになるのでお好きなテキストをいれてください。

次はメッセージの部分です。
<div class="box" id="section-3" >
<div class="para">
<p>われわれは現在だけを耐え忍べばよい。 過去にも未来にも苦しむ必要はない。 過去はもう存在しないし、 未来はまだ存在していないのだから。 アインシュタイン</p>
</div>
</div>
これはテキストの部分を書き換えるだけですね。文字数はデモとだいたい同じぐらいにすると
上手くおさまります(笑)。
背景の画像を変更するには、cssの
.para{
width:100%;
height:400px;
background-image:url(http://blog-imgs-69.fc2.com/m/y/s/mysticdiary/bye.jpg);
background-position:center bottom;
background-size:cover;
background-repeat:no-repeat;
}
この部分の画像リンクを変更します。
画像の大きさはデモでは1920px×1000pxで作っています。

次は、最後のアバウトミーの部分ですね。
<div class="box"  id="section-4">
<h2>About me</h2>
<div class="face">
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/kao_20140628114142f7b.png">
</div>
<div class="text">
<p>こんにちは!私の名前は太郎花子です。趣味で写真を撮っています。写真歴は10年ぐらいです。最初は高校生の時、
母のポートレートを撮影しようと思ったのがきっかけです。高校、大学と写真部に所属しました。
このウェブサイトは自分の作品を発表するために作成しました。どうぞごゆっくりご覧ください。作品についてご質問やお問い合わせがある方は下記のアドレスまで連絡してください。よろしくお願いします。</p>
<h3>Get in touch</h3>
<div class="social">
<a href="#"><i class="fa fa-facebook-square"></i></a>
<a href="#"><i class="fa fa-twitter-square"></i></a>
<a href="#"><i class="fa fa-pinterest-square"></i></a>
<a href="#"><i class="fa fa-google-plus-square"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
</div>
<div class="mail"><adress> ******@gmail.com</adress></div>
</div>
</div>
顔写真を変更するには、
<img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/kao_20140628114142f7b.png">
この部分のアドレスを変更します。
画像の大きさはデモでは、254px×254pxの円形で作っています。

自己紹介の文はテキストの部分を変更してください。

あとは以下の部分でソーシャルメディアへのリンクを挿入したり、メールのアドレスを変更します。
<div class="social">
<a href="#"><i class="fa fa-facebook-square"></i></a>
<a href="#"><i class="fa fa-twitter-square"></i></a>
<a href="#"><i class="fa fa-pinterest-square"></i></a>
<a href="#"><i class="fa fa-google-plus-square"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
</div>
<div class="mail"><adress> ******@gmail.com</adress></div>

ここまで変更すれば、自分だけのワンページウェブサイトが完成です!
おつかれ様でした。

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

Campanella.zip
DOWNLOAD
関連記事
baorin

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

3 Comments

よっちゃん says..."はじめまして"
こんにちは、素敵なテンプレートの数々に見惚れております。
このワンページのテンプレートが特に気に入り、使わせていただきたいのですが、
2点カスタマイズでアドバイスいただけないかと思い、コメントさせていただきます。

①最新のブログ記事を、TOPICSと同じような形で、サムネイル付きでスクロールダウンの下に並べたいです。
どのようにHTMLに追記したらよいでしょうか?
(記事を更新したらここに表示されるようにしたいのです)

②トップページはそのままで、各記事のみの背景を淡色にして、テキストカラーを黒にしたいです。
(過去に、「黒」指定で書いてしまった記事があるため)
CSSをどのようにしたらいいでしょうか?


なんとか自力で頑張っていますが、
変なところを触ってしまいそうで怖くもあります。
アドバイスいただければ幸いです。

いつもありがとうございます!
2014.07.19 19:07 | URL | #- [edit]
管理人 says..."よっちゃんさんへ"
こんにちは。

すいませんが、利用規約にも書いてありますが、カスタマイズに関する質問には答えられません。
一人一人答えていたら際限がなくなるからです。


カスタマイズは自己責任でお願いします。

よろしくお願いします。
2014.07.22 11:29 | URL | #i4E9Nobc [edit]
よっちゃん says..."お返事ありがとうございました"
ご迷惑おかけしすみませんでした!
大事に使わせていただきます
2014.07.22 17:03 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/469-2594425e
← 要約のさらに要約 → photogalleryのリメイク!