newmonoch

こんにちは。
いままで作ってきたテンプレートで一番のお気に入りはなんだろうなあ~と考えていて、
ふっとそういえば、あきっぽい管理人が一番長く使ってたなと思えるテンプレートが
だいぶ前に作ったmonochというテンプレートでした。
newmonoch.jpg
共有テンプレートには申請していなかったので、今回は多少手直しして申請してみることにしました。
追記でカスタマイズ方法について書きます。

monoch_2019052913401568c.jpg
<a class="pin" data-pin-do="buttonPin" data-pin-custom="true" data-pin-lang="ja" href="//www.pinterest.com/pin/create/button/?url=&media=&description=” title=”Pin it on Pinterest” target=”_blank”>pin it

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;
}

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

YOU MAY ALSO LIKE
overlay

長い夏休みも終わりです

overlay

【無料WordPressテーマ/FC2ブログテンプレート】PRETTY GIRL

overlay

neon

10 Comments

  • SECRET: 0
    PASS: 8c505bc4315d1afffd1dead042ab5551
    はじめまして。
    今度、FC2ブログを始めるに際して、
    テンプレートに、こちらのnewmonochを使わせていただくことにしました。
    数多いテンプレートの中でも、シンプルで素敵なテンプレートだと思っていますが、
    唯一、ブログタイトルの文字が目立たないのが気になっています。
    私は、HTMLの事は殆ど分からない素人なのですが、
    もし文字をもう少しだけ太くする方法がありましたら、教えて戴けると嬉しいです。
    よろしくお願いいたします。

  • SECRET: 0
    PASS: 0e39c6a10a7f47650b31c72bc7b5c020
    こんにちは。テンプレート使っていただきありがとうございます。
    ご質問の件ですが、
    ブログタイトルの文字を太くするには、
    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;の数値を変更してみてください。
    ブラウザによって見え方が違ったりするので、いろいろ試してみてください。
    よろしくお願いします。

  • SECRET: 0
    PASS: 8c505bc4315d1afffd1dead042ab5551
    baorin様
    ご教示通りにやってみましたら、良い感じになりました。
    ありがとうございました。
    ところで、私のブログタイトルが少しだけ長くて、2行に改行されて表示されるのですが、言葉の途中で改行されてしまうのです。ちょうど良いところで改行できるようにするのは可能なのでしょうか?
    もしかしたらFC2の設定の方で行うことかもしれませんが、何しろ初めてなもので全く分かりません。もし方法があるようでしたら、お暇な時で構いませんので、またご教示いただけると嬉しいかぎりです。
    よろしくお願いいたします。

  • SECRET: 0
    PASS: 0e39c6a10a7f47650b31c72bc7b5c020
    こんにちは。
    ブログのタイトルを任意の位置で改行するには、いろいろやり方はあります。
    ただ、今現在はいろいろなデバイスがあり、画面の大きさも違いますので、すべての
    パターンに対応させるには慣れた方でないと難しいかもしれません。
    一例として、対処方法をあげてみます。
    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;
    とかに変更すると、余白が小さくなり、長い文章が入るようになったりします。
    このあたりは、画面を見ながら調整するといいと思います。
    またなにかありましたら、ご質問ください。
    よろしくお願いします。

  • SECRET: 0
    PASS: 8c505bc4315d1afffd1dead042ab5551
    こんにちは。
    教えていただいた方法でHTMLを変更してみたら、思い通りのタイトル表示にすることが出来ました。ありがとうございました。
    私は、今まで長年ヤフーでブログを開設してきたのですが、今年でヤフーがブログを閉鎖してしまうというので、今までのブログの引越し先として、試験的にFC2へブログを開設してみたのですが、最初は何も分からずまごまごしてしまいました。いろいろ教えていただけて、こちらのテンプレートを選んで本当に良かったと思います。これで、ヤフーブログをFC2へ引っ越すことに決められました。(記事の移転には数時間掛かるそうなので、回線速度が速い平日の深夜に引越しを考えています)また引越し後にも何か分からない事が出てきたらお聞きするかもしれませんが、その時は、またよろしくお願いいたします。

  • SECRET: 0
    PASS: 8c505bc4315d1afffd1dead042ab5551
    こんばんは。
    すみません、また教えて下さい!
    教えていただいたタイトル表示がブラウザによって変わるということでしたので、いつも使用しているインターネットエクスプローラーの他に、グーグルクロームでも表示してみました。すると、なぜかクロームで表示させると、記事一覧表示の画像がモノクロになってしまいます。画像にカーソルを当てると、その時だけカラーになります。試しにスマホで見てみたら、やはり一覧の画像がモノクロでした。(記事を開くとカラーでした)エクスプローラーだと一覧の画像はカラー表示なのですが、これはテンプレートでそういう設定になっているのか、もしくはFC2の方でそういう設定になっているのでしょうか?ネットで「FC2ブログ・画像・モノクロ・白黒」で検索しても、何も原因が出てきません。もう、こちら頼みになってしまっていて恐縮なのですが、クロームやスマホの一覧表示をカラーに出来るのか、もし分かりましたら教えていただければ助かります。
    ちなみに私のブログのURLです。https://gatapasya.blog.fc2.com/

  • SECRET: 0
    PASS: ebaad318736973cdb6ef83a152b89f23
    こんにちは。
    タイトル変更できたそうで、良かったです。
    ところで、画像の色がブラウザによってモノクロになるとのことですが、このテンプレートはモノクロで表示されるのが正解です。カーソルを合わせるとカラーになるように作ってあります。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%);
    に変更してください。
    これで、カラーで表示されます。
    よろしくお願いします。

  • SECRET: 0
    PASS: 8c505bc4315d1afffd1dead042ab5551
    baorin 様
    ありがとうございます。私はPCには疎く、今使っているPCを買った時に最初から入っていたブラウザのIEを普段から使っていたため、最初にこちらのテンプレートをプレビューした時には表紙の画像がカラーで表示されたため、それが標準で、他のブラウザでのモノクロ表示の方に何か問題があるのかと思ってしまっていました。baorinさんが、わざとモノクロ表示にしているとは気が付かず、申し訳ありませんでした。 お教えいただいた方法で、カラーに表示することができました。何度もいろいろとご教示していただき、ありがとうございました。

  • Baorin様
    はじめまして。newmonoch使わさせていただいております。
    ありがとうございます。
    コメント欄でやりとりされている方がいらっしゃったので質問させていただきます。
    ご不快でしたら申し訳ないです。

    質問
    カテゴリから開いたページのページャーを、カテゴリ別にしたいのですが可能ですか?
    今はカテゴリから開いた記事でも、ページャーから次の記事を出すとカテゴリ外の投稿順に出てしまうと思うのですが。

    前質問者さんと同じように素人なので恐縮ですが、カスタマイズ方法教えていただけますと嬉しいです。
    よろしくお願いいたします。

  • ぽちこさん、こんにちは。
    テンプレート使っていただきありがとうございます。

    ご質問の件ですが、多分FC2ブログの仕様的にカテゴリ欄から飛んでカテゴリ別にページ移動する機能が
    いまのところないんだと思います。(最新情報でなかったらすいません)
    なので、カテゴリ別にページ移動したい場合は、個別ページにカテゴリのナビゲーションをつけておく
    しかなさそうです。この方法だと、見た目の問題と、通常のナビゲーションと重複するという問題が
    おきますが、一応ソースをのせておきますので、ご自由にカスタマイズしてください。
    HTML欄のFiled inの部分に以下を追記します。

    <footer class="bottomfooter2">
    <div>
    Filed in : <a href="<%topentry_category_link>"><%topentry_category></a>
    </div>
    <nav class="catnav">
    <!--prevcategoryentry-->
    ←<a href="<%prevcategoryentry_url>" id="cat-next"><%prevcategoryentry_title></a><br>
    <!--/prevcategoryentry-->
    <!--nextcategoryentry-->
    <a href="<%nextcategoryentry_url>" id="cat-prev"><%nextcategoryentry_title></a>→
    <!--/nextcategoryentry-->
    </nav>

    以上です。
    よろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください