mysticdiary

写真メインのブログ


写真がメインのブログテンプレート作ってみました。
ちょこちょこいろんなところにアニメーション入れたりしています。
気に入った方はご自由にお使いください。
becca1.jpg
追記でカスタマイズ方法について書きます。

monochphoto.jpg

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://blog-imgs-124.fc2.com/m/y/s/mysticdiary/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つに設定してください。
関連記事
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...""
以前ご紹介されたmonochが好きでずっと使用していたので、BAORINさんの復活と、このテンプレートは「待ってました!」という感じです。
有難うございます。

2点、変更方法を教えて頂けないでしょうか。
①記事のページ、左の画像エリアと記事エリアの幅の調整。
画像エリアを40%程にし、その分記事エリアを広げたい。
②スマホなどのサイズで適用される、ブログタイトル下に出すメニュー表示の方法を、マウスオーバーではなく、クリックで行いたい。

お手数おかけし申し訳ございませんが、宜しくお願い致します。
2019.02.02 15:37 | URL | #- [edit]
管理人 says..."ミクロンさんへ"
こんにちは。
テンプレート使っていただきありがとうございます。
まず、記事の幅の調整ですが、これは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をクリック時に動作させたいとのご希望ですが、
これは少々構造的に大がかりな変更となるため、
ご容赦いただければと思います。
よろしくお願いします。
2019.02.09 21:51 | URL | #cLLqd4q6 [edit]
ミクロン says..."ありがとうございます"
BAORINさん、こんばんは。
ご回答いただき、ありがとうございました。
記事の幅調整、早速変更させていただきました。
もう一点のクリックへの変更の件、容赦も何も、おおがかりになるとは知らず質問してしまい、大変失礼しました。
素敵なテンプレートで、本当にお気に入りです。
この度は、お手数おかけし申し訳ありませんでした。
2019.02.10 18:15 | URL | #- [edit]

Leave a reply







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

Trackbacks


trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/603-a842b719