mysticdiary

更新はLittleDreamでしています→

共有申請しました〜

3ヶ月ぶりぐらいだけど、共有申請してみました。
今回のは左端にソーシャルメディアのアイコンが並んでいるのが特徴のテンプレートです。
ヘッダーの部分のアバターや背景画像はお好きに変更できます。

divisioncomp.jpg
ヘッダー部分の変更方法です。
背景画像はcssの
.topimage{
width:100%;
height:200px;
margin:0 0 30px 0;
background-image:url(http://blog-imgs-69.fc2.com/m/y/s/mysticdiary/lamp_20140731194230101.jpg);
background-repeat:no-repeat;
background-position:center top;
background-size:cover;
position:relative;
z-index:1;
}

上の部分のbackground-imageを変更します。
画像の大きさは自由ですが、ある程度大きく作っておいた方がいいと思います。(レスポンシブに対応するため)
サンプルでは、2000×958pxです。

次は円形の顔写真の部分です。
これは、htmlの
<div class="topimage">
<img class="avatar wobble-horizontal" src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/kao_20140628114142f7b.png">
</div>

上のimgのアドレスを変更します。
サンプルでの画像の大きさは、254×254pxです。
必ずしも円形で作る必要はありませんが、その場合は正方形で作った方がいいと思います。

最後にナビゲーションの部分ですね。
<nav class="topnav">
<ul>
<li class="twitter"><a href="#" onfocus="this.blur();" class="nonborder" title="twitter"><img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/twittericon.png" width="20" height="17"></a></li><!--
--><li class="facebook"><a href="#" onfocus="this.blur();" class="nonborder" title="facebook"><img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/facebookicon.png" width="11" height="26"></a></li><!--
--><li class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder" title="Rss"><img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/rssicon.png" width="20" height="20"></a></li><!--
--><li class="admin"><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面"><img src="https://blog-imgs-69.fc2.com/m/y/s/mysticdiary/keyicon.png" width="20" height="20"></a></li>
</ul>
</nav>

上のhtmlの#の部分を変更してください。

このテンプレートは共有申請したので、申請が無事に通れば来週かさ来週にはダウンロードできるようになると
思います。

関連記事
baorin

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

4 Comments

kino says..."ステキなテンプレート"
いつもありがとうございますm(_ _)m
トップのテンプレートも欲しいけど……
無理はもうしませんw

暑いのでお体にお気をつけてください。
2014.08.03 07:22 | URL | #- [edit]
名無しさん says...""
全体的に中央寄せにして、記事の部分をせまくしたいのですがテンプレートのどの部分をいじればできますか?
2014.09.05 07:15 | URL | #- [edit]
aki says..."スマートフォンサイトにも適用させるには?"
こんにちは。
FC2ブログからこちらの素敵なテンプレートをダウンロードさせていただいたのですが、PCでは問題なく表示されたのですがスマートフォンから確認すると今まで使っていたスマートフォン用のテンプレートが表示されます。
スマートフォンにも適用させるためにどのように設定するとよろしいでしょうか?
2014.09.25 12:03 | URL | #- [edit]
管理人 says..."akiさんへ"
こんにちは。

スマホでPCサイトを表示させるには、
フォーラムの方で回答がありましたので参考にしてみてください。
http://blog.fc2.com/forum_community/topic/12605/88964/

ちなみに、上部に出る青いバーを消すには、cssに
#change_mobile {
display:none;
}
と加えると消えます。
2014.09.29 09:32 | URL | #i4E9Nobc [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/471-68949839
← ギックラーふたたび → 要約のさらに要約