写真メインのブログ

写真がメインのブログテンプレート作ってみました。
ちょこちょこいろんなところにアニメーション入れたりしています。
気に入った方はご自由にお使いください。

追記でカスタマイズ方法について書きます。


<a class="pin" data-pin-do="buttonPin" data-pin-custom="true" data-pin-lang="ja" href="//www.pinterest.com/pin/create/button/?url=&media=&description=" title="Pin it on Pinterest" target="_blank">pin it

1.上部ナビゲーションの編集

<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>

#のところにリンクをいれて、好きなタイトルに変更するだけです。
ですが!今回は5カ所変更カ所があるので注意してください。すべて同じにしてくださいね。
2.記事に写真がない場合の、代替画像の設定

<!--body_img_none-->
<div class="itemimg">
<div class="time">
<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>" pubdate>
<span class="month<%topentry_month>"></span> <%topentry_day>,<%topentry_year></time>
</div>
<div class="item-no"><%topentry_no></div>
<div class="blogimage">
<a href="<%topentry_link>" onfocus="this.blur();" class="nonborder">
<img src="https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg" class="noimage">
<figcaption>NO IMAGE</figcaption></a>
</div>
</div>
<!--/body_img_none-->

上記のコードはトップ画面などで画像がない場合に表示させる代替画像を設定するところです。

https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg

の部分が初期設定の画像です。お好きな画像に変更してください。

<!--body_img-->
<div class="itemimg2" style="background-image:url(<%topentry_image_url>);background-size:cover;background-position:center center;">
</div>
<!--/body_img-->
<!--body_img_none-->
<div class="itemimg2" style="background-image:url(https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg);background-size:cover;background-position:center center;">
<figcaption>NO IMAGE</figcaption></div>
<!--/body_img_none-->

次は固定記事で画像がない場合に設定するところです。
上記の

background-image:url(https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg);

の部分をお好きな画像に変更してください。
変更箇所はあと3カ所あります!

<!--titlelist_area-->
<section id="titlelistarea">
<div class="itemimg2" style="background-image:url(https://a-littledream.com/wp-content/uploads/2018/10/becca1.jpg);background-size:cover;background-position:center center;">
</div>
<article class="titlelist">
<h4>Articles list</h4>
<!--titlelist-->
<%titlelist_eno>:&nbsp;<a href="<%titlelist_url>"><%titlelist_title></a><br />
<footer class="titlelistfooter">(<%titlelist_year>.<%titlelist_month>.<%titlelist_day>&nbsp;|&nbsp;<%titlelist_category>) </footer>
<!--/titlelist-->
<div class="permanentfadeout"></div>
</article>
</section>
<!--/titlelist_area-->

上記はタイトルリストのエリアで表示する画像を設定するコードです。

<section id="editarea">
<div class="itemimg2" style="background-image:url(https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca2.jpg);background-size:cover;background-position:center center;">
</div>

上はeditareaで表示する画像を設定するところです。

<section id="search-area">
<div class="itemimg2" style="background-image:url(https://blog-imgs-124.fc2.com/m/y/s/mysticdiary/becca.jpg);background-size:cover;background-position:center center;">
</div>

上は、検索結果の表示画面で表示する画像を設定するところです。
いずれも画像のアドレスをお好きなものに変更してください。
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>

これはお好きな文章を入れてください。
あと関連記事は3つ表示するように設定しているので、ブログの設定で表示記事を3つに設定してください。

YOU MAY ALSO LIKE
overlay

【FC2ブログテンプレート】アリスインワンダーランド【個人・商用可】

overlay

silentgreenをダウンロードされた方へ

overlay

スティッチ!Stitch!

Administrator
littledream

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

lamp lamp

3 Comments

  • SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    以前ご紹介されたmonochが好きでずっと使用していたので、BAORINさんの復活と、このテンプレートは「待ってました!」という感じです。
    有難うございます。
    2点、変更方法を教えて頂けないでしょうか。
    ①記事のページ、左の画像エリアと記事エリアの幅の調整。
    画像エリアを40%程にし、その分記事エリアを広げたい。
    ②スマホなどのサイズで適用される、ブログタイトル下に出すメニュー表示の方法を、マウスオーバーではなく、クリックで行いたい。
    お手数おかけし申し訳ございませんが、宜しくお願い致します。

  • SECRET: 0
    PASS: 0e39c6a10a7f47650b31c72bc7b5c020
    こんにちは。
    テンプレート使っていただきありがとうございます。
    まず、記事の幅の調整ですが、これはCSSを変更するだけで
    できます。
    .itemimg2{
    width:40%;
    height:100%;
    overflow:hidden;
    position:fixed;
    top:0;
    left:0;
    background-color:#dce7e9;
    -webkit-animation: zoomIn 2s;
    -moz-animation: zoomIn 2s;
    -o-animation: zoomIn 2s;
    animation: zoomIn 2s;
    }
    section#permanent,.titlelist,.ecomment,.searcharea{
    width:60%;
    height:auto;
    padding:100px 150px 50px 80px;
    margin:0 0 0 40%;
    position:relative;
    }
    /* blogpost */
    .time2{
    width:100%;
    text-align:left;
    font-family: 'Lustria', serif;
    letter-spacing:2px;
    text-transform:uppercase;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin:left top;
    position:fixed;
    bottom:0px;
    left:40%;
    animation-name:fade;
    animation-duration: 2s;
    }
    上記、3カ所のCSSをそのまま置き換えてください。
    それから、menuをクリック時に動作させたいとのご希望ですが、
    これは少々構造的に大がかりな変更となるため、
    ご容赦いただければと思います。
    よろしくお願いします。

  • SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    BAORINさん、こんばんは。
    ご回答いただき、ありがとうございました。
    記事の幅調整、早速変更させていただきました。
    もう一点のクリックへの変更の件、容赦も何も、おおがかりになるとは知らず質問してしまい、大変失礼しました。
    素敵なテンプレートで、本当にお気に入りです。
    この度は、お手数おかけし申し訳ありませんでした。

コメントを残す

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