mysticdiary

〜vintage romantic web design〜

れいんぼー

ひまじん、ひまじん言っている管理人です。
実は、去年の7、8月ごろ、持病のパニック障害が悪化して会社を休職していたのですが、
なんとまた、今回もまたパニックが悪化して休職するはめになりました。
てか、もうそろそろいまの会社も限界かもしれない。。。(笑)
会社で仕事してたら、急に吐き気がして、トイレでリバースしちゃった。
原因は仕事のストレスつーか、パワハラなんだけど、表面上は仲良くしてるふりしているから
すごいつらい。上司にも相談したけど、いまいちわかってくれないぽい。
救いなのは、心療内科の先生だけは理解してくれることだなあ。。。
まあ、また経過は後日書くかもしれないんで、とりあえずひまなんでまたテンプレート作って、申請しました。

hana_20190709093655c42.jpg

カスタマイズの方法は、追記に書きます。



1.トップのナビゲーションの編集
<nav class="menu">
<ul>
<li><a href="<%url>archives.html" title="記事リスト">Articles List</a></li><span class="vignette">&#x2726;</span>
<li><a href="#" title="Lorem ipsum">Lorem ipsum</a></li></li><span class="vignette">&#x2726;</span>
<li><a href="#"><form action="./" method="get"><input class="input" type="text" name="q" value="" placeholder="SEARCH" autocomplete="off"/></form></a></li></li><span class="vignette">&#x2726;</span>
<li><a href="<%server_url>control.php" title="管理画面">Log in</a></li>
</ul>
</nav><!--menuここまで -->

これはいつもと同じで2番目のLoremipsumのところをお好きな文字列に変更し、#にリンクアドレスを
入れてください。

2.ヘッダー付近のソーシャルメディアへのリンクの編集
<nav class="social">
<ul>
<li class="instagram"><a href="https://www.instagram.com/#/?hl=ja?ref=badge" title="instagramでシェア" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li><!--
--><li class="twitter"><a href="http://twitter.com/share?url=<%topentry_link>&text=<%topentry_title>" title="twitterでつぶやく" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li><!--
--><li class="facebook"><a href="http://www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>" title="facebookでシェア" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li><!--
--><li class="pinterest"><a href="https://www.pinterest.jp/#/pins/" title="Pin it on Pinterest" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
</ul>
</nav><!--socialここまで -->

これは一番上のインスタと一番下のピンタレストのリンクの#の部分にご自分のIDを入れて変更してください。

3.個別記事の下の説明文
<div class="authortext">
<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 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

これもLoremipsum~の部分をお好きな文章に変更してください。

4.記事の下のソーシャルメディアへのリンクの編集
<nav class="bottomnav">
<ul>
<li class="instagram"><a href="https://www.instagram.com/#/?hl=ja?ref=badge" title="instagramでシェア" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i> <span>share</span></a></li><!--
--><li class="twitter"><a href="http://twitter.com/share?url=<%topentry_link>&text=<%topentry_title>" title="twitterでつぶやく" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> <span>tweet</span></a></li><!--
--><li class="facebook"><a href="http://www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>" title="facebookでシェア" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> <span>share</span></a></li><!--
--><li class="pinterest"><a href="https://www.pinterest.jp/#/pins/" title="Pin it on Pinterest" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i> <span>pin it</span></a></li>
</ul>
</nav>

これは一番上のインスタと一番下のピンタレストのリンクの#の部分にご自分のIDを入れて変更してください。

5.ブログフッターの編集
<div class="footer-contents">
<h3><span>&#x2726; About me</span></h3>
<span class="discription"><p class="img"><img src="<%image>"></p><p class="aboutme">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></span>
</div>

<div class="footer-contents">
<nav class="plugmenu">
<ul>
<li><a href="<%url>archives.html" title="記事リスト"><span class="number">01.</span> Articles List</a></li>
<li><a href="#" title="Lorem ipsum"><span class="number">02.</span> Lorem ipsum</a></li>
<li><span class="number">03.</span><form action="./" method="get"><input class="input2" type="text" name="q" value="" placeholder="SEARCH" autocomplete="off"/></form></li>
<li><a href="<%server_url>control.php" title="管理画面"><span class="number">04.</span> Log in</a></li>
</ul>
</nav>
</div>

フッターに自己紹介文とナビゲーションが設置されていますので、2と3を参考に変更してください。

6.トップページのスライドショーの画像の変更
/* background-image */

.crossfade > figure:nth-child(1) {
background-image: url('https://file.blog.fc2.com/mysticdiary/newspaper/girl.jpg');
animation-delay:0s;
}

.crossfade > figure:nth-child(2) {
animation-delay:6s;
background-image: url('https://file.blog.fc2.com/mysticdiary/newspaper/hana.jpg');
}

.crossfade > figure:nth-child(3) {
animation-delay:12s;
background-image: url('https://file.blog.fc2.com/mysticdiary/newspaper/yoru.jpg');
}

これはCSSで編集します。
デフォルトでは3枚画像が用意されていますので、それぞれお好みで変更してください。

7.コメント欄の背景色と画像の変更
..管理人 .ctriangle{
border:none;
}

.管理人 .comtitle:before{
width:50px;
height:50px;
background-image:url(#);
background-position:center center;
background-size:100% 100%;
content:"";
display:block;
margin:0 20px 0 0;
background-color:#eeeeee;
}

.管理人 .comtitle{
display:flex;
align-items: center;
}

管理人のところを自分のユーザー名に置き換えてください。
背景画像で#のところに、ご自分のプロフィール画像のアドレスを入力してください。
関連記事
baorin

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

2 Comments

masato^-^ says..."はじめまして。"
BAORINさん、はじめまして。
僕はヤフーブログ閉鎖からのFC2移動組で、4月に『 mystylook 』をダウンロードさせて頂き、とても気に入って愛用させて頂いている者です。本当にありがとうございます。
BAORINさんのテンプレートはどれも、その洗練されたデザインセンスとクオリティが抜きん出ていると思います。ものつくりはどんなことでも同じでしょうが、技術の高さを保持できる全体のバランスが大切なんでしょうね。BAORINさんのテンプレートデータからは、そんなことを感じます ^-^ 。

ご病気も大変ですね。人の心はデータと違い、割り切れない部分がたくさんありますから、ゆっくりと時間を掛けて取り組んだ方が良いのでしょう。
どちらにお住まいかは知りませんが、日本はこれから暑くなります。有り難いエアコンの風にも当り過ぎず、お身体を大切に。。。
2019.07.27 13:28 | URL | #- [edit]
管理人 says..."masato^-^さんへ"
こんにちは。はじめまして。
テンプレートを使っていただきありがとうございます。
yahooブログからfc2ブログに移動してきた方が本当に多いのですね。
fc2ブログはyahooブログに比べると、わかりにくいところもあるかと思いますが、
その分自由度は高いため、管理人としては気にいっています。
体調も気遣っていただきありがとうございます。
これから梅雨も明け、ますます暑くなってくると思いますので、masato^-^さんも
体調には気を付けて、ご自愛なさってください。
これからも楽しみながらテンプレート作りを続けていければと
思っています。
ではでは。

2019.07.28 14:07 | URL | #cLLqd4q6 [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/618-84324a15