ロマンチックな空

空の写真ってずっとみていてもあきないですね。 今回はきれいな空の写真を使ってテンプレート作ってみました。 空の写真はお好きな画像にも変更できますよ。 追記でカスタマイズ方法を書きますね。 1.空の写真の変更
.innerimg1{
background-image:url(https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/RomanticSky0.jpg);
background-size:cover;
background-position:center center;
}
.innerimg2{
background-image:url(https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/Sky48.jpg);
background-size:cover;
background-position:center center;
}
.innerimg3{
background-image:url(https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/Sky18.jpg);
background-size:cover;
background-position:center center;
}
これはCSSの方で設定していますので、画像のアドレスをお好きなものに変更してください。 2.上部ナビゲーションの編集
<nav id="menu">
<ul>
<li><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder" title="記事リスト">Articles List</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder" title="LoremIpsum">Lorem Ipsum</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder" title="AobutMe">About me</a></li>
<li><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面">Log in</a></li>
</ul>
</nav>
これはいつもとおんなじ。#のところにリンクをいれて、好きなタイトルに変更するだけです。 3.記事下の著作者の紹介文
<span class="authorname"><span class="name"><%author_name></span><p>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. </p>
これはお好きな文章を入れてください。 4.サイドバーのHELLO!部分
<div class="plugcontent">
<div class="topimage">
<img class="girls" src="https://blog-imgs-122.fc2.com/m/y/s/mysticdiary/girls_201808151112060f7.jpg">
<span class="hello">Hello!</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
これはimgの部分をお好きな画像アドレスに差し替えてください。 あと英字の部分はお好きな文章を入れてください。 あと今回も関連記事は3つに設定するときれいに並ぶようにしているので、 お好きな方はブログの設定で表示数を3つに設定してください。
YOU MAY ALSO LIKE
overlay

赤ずきんちゃん RedHood

overlay

newmonoch

overlay

写真メインのブログ

Administrator
littledream

個人的に収集したビンテージなパブリックドメインの画像を配布しています。好物はお寿司です。都市伝説が大好きです。パニック障害を持病に持つ自身のことなどをブログにも綴っています。

lamp lamp

3 Comments

  • SECRET: 0
    PASS: cfa8dd1465352b01c387f2b0a5d3f62a
    初めまして、御病気のところすみません。
    「ロマンチックな空」がとても素敵なので自分のブログに反映させたいのですが、
    2番目からの記事の表示が遅いので躊躇っています。
    表示させる間隔をもっと早くしたい場合は、何処をどの様に弄ればいいのでしょうか?
    自力で「スクロールでフェードイン表示する方法」等で調べて編集してみたものの、
    挙動が変わらず壁にぶち当たってしまい、問い合わせた次第です。
    どうかご教授いただければと思います。よろしくお願いいたします。

  • SECRET: 0
    PASS: 0e39c6a10a7f47650b31c72bc7b5c020
    こんにちは。テンプレート使っていただき
    ありがとうございます。
    2番目以降の記事の表示速度については、
    CSSで設定しています。
    CSS編集画面で以下の記述を見つけて、
    .fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
    500msの部分をお好きな数値に変更してください。
    500msは0.5秒という意味です。
    よろしくお願いします。

  • SECRET: 0
    PASS: cfa8dd1465352b01c387f2b0a5d3f62a
    迅速なご対応ありがとうございます。無事綺麗に表示されました!
    ずっと使ってみたかったデザインだったのですが、上手く表示されず半ば諦めてたので嬉しいです。
    ご体調が回復されるよう、僭越ながらお祈りいたします。
    この度は本当に有難うございました。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください