MysticDiary

mysticな日常

また共有申請してみたよ~

Posted by baorin on   0  0

パニック障害で休職期間を満喫している管理人です(笑)。
暇なんでいろいろテンプレートの案は出てくるんだけど、とりあえず前に作っといた作品を
申請してみます。
一応カードレイアウトになってます。あとはいつもとおんなじ感じかなあ。。。
追記でカスタマイズ方法を書きますね。

mysticlovers.jpg


1.上部ナビゲーションの編集
<nav>
<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>

これはいつもとおんなじ。#のところにリンクをいれて、好きなタイトルに変更するだけです。

2.ヘッダー画像および文章を変更する
<div id="headerimage">
<span class="headerintro">Lorem Ipsum dolor sit amet</span>
</div>

ヘッダー画像の文章は上のLorem Ipsum....の部分を魅力的なキャッチに変更してください。
画像はCSSで変更します。
#headerimage{
width:100%;
height:200px;
background-image:url(https://blog-imgs-115.fc2.com/m/y/s/mysticdiary/lovers.jpg);
background-position:center center;
background-size:cover;
display: flex;
justify-content: center;
align-items: center;
}

上のCSSを見つけ、画像のリンクをお好きなアドレスに変更してください。
スマホ用にもう一カ所小さい画像を指定しています。
#headerimage{
width:100%;
height:200px;
background-image:url(https://blog-imgs-115.fc2.com/m/y/s/mysticdiary/lovers2.jpg);
background-position:center center;
background-size:cover;
display: flex;
justify-content: center;
align-items: center;
}

CSSの編集画面で下の方にあります。こちらはスマホように少し小さめの画像を指定しています。
お好みで変更してください。

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>

お好きな文章を入れてください。

あとは、関連記事の表示ですけど、一応個別ページの記事下に5つ表示されるようにCSS指定していますので、
設定で記事は5つに指定するとうまく表示されると思います。

関連記事
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.

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/596-a1428434
該当の記事は見つかりませんでした。