mysticdiary

〜vintage romantic web design〜

newmonoch

こんにちは。
いままで作ってきたテンプレートで一番のお気に入りはなんだろうなあ~と考えていて、
ふっとそういえば、あきっぽい管理人が一番長く使ってたなと思えるテンプレート
だいぶ前に作ったmonochというテンプレートでした。

newmonoch.jpg

共有テンプレートには申請していなかったので、今回は多少手直しして申請してみることにしました。
追記でカスタマイズ方法について書きます。



1.サイドバーのナビゲーションの編集
<nav class="menu">
<ul>
<li><a href="<%url>archives.html" title="記事リスト">Articles List</a></li>
<li><a href="#" title="LoremIpsum">Lorem Ipsum</a></li>
<li><a href="#" title="AboutMe">About me</a></li>
<li><form action="./" method="get"><input class="input" type="text" name="q" value="" placeholder="SEARCH" autocomplete="off" /></form></li>
<li><a href="<%server_url>control.php" title="管理画面">Log in</a></li>
</ul>
</nav>

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

2.個別記事の下の説明文
<footer class="bottomfooter">
<div class="authorimage"><img src="<%image>"></div>
<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. </p>

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

3.記事の下のソーシャルメディアへのリンクの編集
<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="//www.pinterest.com/pin/create/button/?url=<%topentry_link>&amp;media=<%topentry_image_url>&amp;description=<%topentry_enc_title>" 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を入れて変更してください。

4.コメント欄の背景色の変更
.管理人 .ctriangle{
background-color:#ffffff;
}

管理人のところを自分のユーザー名に置き換えてください。
関連記事
baorin

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

8 Comments

がたぱしゃ says..."テンプレートについて"
はじめまして。
今度、FC2ブログを始めるに際して、
テンプレートに、こちらのnewmonochを使わせていただくことにしました。
数多いテンプレートの中でも、シンプルで素敵なテンプレートだと思っていますが、
唯一、ブログタイトルの文字が目立たないのが気になっています。
私は、HTMLの事は殆ど分からない素人なのですが、
もし文字をもう少しだけ太くする方法がありましたら、教えて戴けると嬉しいです。
よろしくお願いいたします。
2019.07.11 15:34 | URL | #BaRPan0g [edit]
管理人 says..."がたぱしゃさんへ"
こんにちは。テンプレート使っていただきありがとうございます。

ご質問の件ですが、
ブログタイトルの文字を太くするには、
CSS編集画面で、

h1{
padding:0;
margin:0;
font-size:20px;
font-family: 'Quicksand', sans-serif;
letter-spacing:2px;
line-height:1.2em;
}

上の記述を見つけだし、
font-weight:bold;(必ず半角文字で)
と加えると、太くなると思います。
文字の書体自体を変更したい場合は、font-family: 'Quicksand', sans-serif;をお好みの
フォントに変更していただくか、
大きくしたい場合は、font-size:20px;の数値を変更してみてください。
ブラウザによって見え方が違ったりするので、いろいろ試してみてください。

よろしくお願いします。
2019.07.12 17:02 | URL | #cLLqd4q6 [edit]
がたぱしゃ says..."タイトル"
baorin様

ご教示通りにやってみましたら、良い感じになりました。
ありがとうございました。

ところで、私のブログタイトルが少しだけ長くて、2行に改行されて表示されるのですが、言葉の途中で改行されてしまうのです。ちょうど良いところで改行できるようにするのは可能なのでしょうか?
もしかしたらFC2の設定の方で行うことかもしれませんが、何しろ初めてなもので全く分かりません。もし方法があるようでしたら、お暇な時で構いませんので、またご教示いただけると嬉しいかぎりです。
よろしくお願いいたします。
2019.07.12 18:03 | URL | #BaRPan0g [edit]
管理人 says..."がたぱしゃさんへ"
こんにちは。

ブログのタイトルを任意の位置で改行するには、いろいろやり方はあります。
ただ、今現在はいろいろなデバイスがあり、画面の大きさも違いますので、すべての
パターンに対応させるには慣れた方でないと難しいかもしれません。
一例として、対処方法をあげてみます。

HTMLでH1(タイトル)の記述をさがします。タイトルは通常FC2ブログの
変数が入っていますので、その部分を自分のタイトルに直接書き換えます。
そして、そのタイトルで改行させたい単語ごとに<SPAN></SPAN>でくくります。
例としてMysticDiaryだと、以下のようにします。
<header>
<h1><a href="./" name="top"><span>Mystic</span><span>Diary</span></a></h1>
<span class="intro"><%introduction></span>
</header>

次にCSS編集画面で、H1の記述を探し、
h1 span{
display: inline-block !important;
}
を加えます。
こうすると、HTMLで<SPAN></SPAN>でくくった部分ごとに
改行されます。

あとは、ヘッダーの余白を少し小さくするのもいいかもしれません。
CSSで、以下の記述を見つけます。
#header-container{
width:30%;
height:auto;
overflow:hidden;
padding:100px 100px 150px 100px;
background-color:rgba(202, 209, 210,0.5);
animation-name: SlideDown;
animation-duration: 2s;
}
ヘッダーの余白が左右100pxになっているので、
それをpadding:100px 50px 150px 50px;
とかに変更すると、余白が小さくなり、長い文章が入るようになったりします。
このあたりは、画面を見ながら調整するといいと思います。

またなにかありましたら、ご質問ください。

よろしくお願いします。
2019.07.14 11:10 | URL | #cLLqd4q6 [edit]
がたぱしゃ says..."タイトル"
こんにちは。
教えていただいた方法でHTMLを変更してみたら、思い通りのタイトル表示にすることが出来ました。ありがとうございました。
私は、今まで長年ヤフーでブログを開設してきたのですが、今年でヤフーがブログを閉鎖してしまうというので、今までのブログの引越し先として、試験的にFC2へブログを開設してみたのですが、最初は何も分からずまごまごしてしまいました。いろいろ教えていただけて、こちらのテンプレートを選んで本当に良かったと思います。これで、ヤフーブログをFC2へ引っ越すことに決められました。(記事の移転には数時間掛かるそうなので、回線速度が速い平日の深夜に引越しを考えています)また引越し後にも何か分からない事が出てきたらお聞きするかもしれませんが、その時は、またよろしくお願いいたします。
2019.07.14 16:02 | URL | #BaRPan0g [edit]
がたぱしゃ says..."ブログの画像"
こんばんは。
すみません、また教えて下さい!
教えていただいたタイトル表示がブラウザによって変わるということでしたので、いつも使用しているインターネットエクスプローラーの他に、グーグルクロームでも表示してみました。すると、なぜかクロームで表示させると、記事一覧表示の画像がモノクロになってしまいます。画像にカーソルを当てると、その時だけカラーになります。試しにスマホで見てみたら、やはり一覧の画像がモノクロでした。(記事を開くとカラーでした)エクスプローラーだと一覧の画像はカラー表示なのですが、これはテンプレートでそういう設定になっているのか、もしくはFC2の方でそういう設定になっているのでしょうか?ネットで「FC2ブログ・画像・モノクロ・白黒」で検索しても、何も原因が出てきません。もう、こちら頼みになってしまっていて恐縮なのですが、クロームやスマホの一覧表示をカラーに出来るのか、もし分かりましたら教えていただければ助かります。
ちなみに私のブログのURLです。https://gatapasya.blog.fc2.com/
2019.07.14 22:28 | URL | #BaRPan0g [edit]
管理人 says..."がたぱしゃさんへ"
こんにちは。
タイトル変更できたそうで、良かったです。
ところで、画像の色がブラウザによってモノクロになるとのことですが、このテンプレートはモノクロで表示されるのが正解です。カーソルを合わせるとカラーになるように作ってあります。ieではこの機能が働かないだけです。
ちなみにieでもedgeで見れば、モノクロになります。だからタイトルにmonoとつけているのです。
もし、最初から画像をカラーで表示させたい場合は、cssでの編集が必要です。
.item img{
width:100%;
margin:0 0 20px 0;
-ms-interpolation-mode: bicubic;
display:block;
filter: saturate(0%);
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
上の記述を見つけて、
filter: saturate(100%);
に変更してください。

これで、カラーで表示されます。
よろしくお願いします。
2019.07.15 14:41 | URL | #i4E9Nobc [edit]
がたぱしゃ says..."ブログの画像"
baorin 様
ありがとうございます。私はPCには疎く、今使っているPCを買った時に最初から入っていたブラウザのIEを普段から使っていたため、最初にこちらのテンプレートをプレビューした時には表紙の画像がカラーで表示されたため、それが標準で、他のブラウザでのモノクロ表示の方に何か問題があるのかと思ってしまっていました。baorinさんが、わざとモノクロ表示にしているとは気が付かず、申し訳ありませんでした。 お教えいただいた方法で、カラーに表示することができました。何度もいろいろとご教示していただき、ありがとうございました。
2019.07.16 18:42 | URL | #BaRPan0g [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/612-cd433ede