About Template

共有テンプレート一覧はこちら

OK

  • カスタマイズ
  • 素材の入れ替え

NG

  • 素材及びテンプレートの再配布
  • 著作権表記及びリンクの削除、改変
  • アダルト・違法・宗教関連のサイトでの使用
  • fc2ブログ利用規約の禁止行為に該当するサイトでの使用

詳細は「テンプレートの利用について」をご覧ください。



テンプレート「NV_flat」

flat.png

個別記事プレビュー

2カラム。左右カラム入れ替え可。
幅固定960px。記事部分590px。サイドバー300px。
プラグイン3を記事上に常に表示。
プラグイン2はフッターエリアに表示。
個別ページのみ表示される、記事直下のフリースペースあり。
記事の日付クリックで、記事編集画面へ。

カッチリしたフラットデザインっぽいものを目指して作ってみました。
ビジネス系やアフィリエイトなどにどうぞ。
サイドバーには300pxの広告を貼り付け可能です。

デフォルトでは右サイドバーですが、簡単に左サイドバーに変更できます。
サイドバー変更方法やフリースペースの使用方法などは、「続きを読む」以下でご紹介しておりますので、ご覧ください。

当テンプレートのご利用については、「テンプレートの利用について」をご一読ください。

左右カラム入れ替え方法



管理画面の「テンプレートの設定」をクリックして出てくる「html」にある、「カラム配置の設定」を変更します。

「class="~"」の~部分を変更してください。



右サイドバー → クラス名「side-right」

左サイドバー → クラス名「side-left」

とします。



個別ページの記事直下フリースペース



管理画面の「テンプレートの設定」をクリックして出てくる「html」をご覧ください。

<!-- FreeSpace▼ -->

<!-- FreeSpace▲ -->

とありますので、このタグに囲まれた部分にご自由に広告やお知らせなどのタグ等を貼り付けてご使用ください。


cssにも、先頭の見つけやすい位置に対応部分をすでに設定してあります。
ご自由に書き加えて使いやすいようカスタマイズなさってみてくださいね。
デフォルトでは、直前の要素から30px離して表示されるように指定してあるのみで、他は何も設定しておりません。

FacebookやTwitterアイコンをご自分のアカウントにリンクさせる方法



Facebookの場合

htmlの以下の部分の「https://www.facebook.com/」を、ご自分のアカウントURLに書き換えてください。

<li class="fb"><a href="https://www.facebook.com/">facebook</a></li>



Twitterの場合

htmlの以下の部分の「https://twitter.com/」を、ご自分のアカウントURLに書き換えてください。

<li class="twitter"><a href="https://twitter.com/">twitter</a></li>




FacebookやTwitterアイコンを消す方法



htmlの該当部分を消去してください。


facebookを消去 ↓部分を削除します。

<li class="fb"><a href="https://www.facebook.com/">facebook</a></li>




Twitterを消去 ↓部分を削除します。

<li class="twitter"><a href="https://twitter.com/">twitter</a></li>



関連記事

スポンサーリンク

trackback

comment

はじめまして。
テンプレートお借りしております。
素敵なテンプレートありがとうございます。

ところで質問があります。

コメントを下さる方のURLを別タブで開きたくて、a target="_blank" href="にカスタマイズしたいのですが上手くいきません(汗)

ご教示いただければ有りがたいのですが…。

コメント失礼しました。
  • 2013-08-09│11:53 |
  • ladyluck13 URL
  • [edit]
はじめまして
こんにちは。
テンプレートをご使用下さりありがとうございます。

ご希望のカスタマイズ方法は私もわからず、
検索してみて見つけた方法がありましたのでお知らせします。


FC2ブログのコメントURLを別窓でリンクするという記事で、
URLはこちらになります。
http://www.my-chicken-heart.com/2006/12/fc2url.html

私のテンプレートで試してみましたが、
ちゃんと反映されましたのでどうぞお試しください。

  • 2013-08-09│13:19 |
  • Neriko URL│
  • [edit]
ありがとうございます♪
こんにちは、お手数お掛けして申し訳ありません。

調べてくださったようで、ありがとうございます。

リンク参考にさせて頂きます!早速試してみたいと思います。
頑張ってみます(’-’*)





  • 2013-08-10│12:29 |
  • ladyluck13 URL
  • [edit]
No title
こんにちは、テンプレートをお借りしています。
シンプルなデザインでとても満足しています。

ブログ初心者でテンプレートの編集が良く出来ません。

・タイトル
・説明文
の下に、画像を貼りたいのですが、どこを編集すればよいのかわからず、
困ってしまいました。

教えて頂きたくコメントさせて頂きます。

どうぞ、よろしくお願いいたします。
  • 2013-09-01│10:22 |
  • チョコパパ URL│
  • [edit]
Re: No title
返信が大変遅くなってすみませんでした。
もうすでに解決なさっていらっしゃるかもしれませんが、
私の分かる範囲でお答えいたしますね。

管理ページの「テンプレートの設定」をクリックし、テンプレートの編集画面を表示してください。

「HTML編集」のテキストエリア内、上の方にある、
<p><%introduction></p>
という部分のすぐ下に画像タグ<img src="~">を貼り付けると、
タイトルと説明文のすぐ下に画像を表示させることができます。

画像はあらかじめご自分のブログにアップロードしておき、
アップロードされたURLを"~"内に入れてくださいね。

ただ、画像のサイズによっては上手く表示されないこともあるかもしれません。
その場合は、画像のサイズを変更するなどしてみてください。
  • 2013-09-26│10:51 |
  • Neriko URL│
  • [edit]
プラグインのフォント
お世話になります。
テンプレートお借りしています。
さて、①右側のプラグインのフォントを大きくしたいのと②全て左寄せしたいのですがどうすれば?いいのでしょうか
よろしくお願いいたします。
Re: プラグインのフォント
はじめまして。
テンプレートをお使いいただきありがとうございます。

プラグインの件なのですが、atok440様のブログを拝見しソースを見てみましたら、
プロフィールのプラグインの中に、他のすべてのプラグイン(エントリーやリンクなど)が入っている状態になっていました。
右側プラグインでフォントの大きさはスタイルシートで少し縮小するよう指定しておりますが、
プラグイン内にさらにプラグインが内包されている状態なので、
二度フォントサイズが縮小されているという結果になって、文字がさらに小さくなってしまっています。

atok440様の管理画面を私が確かめることは出来ないのですが、
プロフィールのHTML編集内にすべてのプラグインのソースが書き込まれている状態となっているように見えます。

プラグインの設定しなおし等面倒であれば、テンプレートのスタイルシートの部分を開き、

div#wrapper div#side div.side-plugin div.side-body {
margin: 0 auto;
padding: 0 0 15px 0;
font-size: 75%;
}

赤字の部分をお好きな大きさの数字にしてください。
現状が75%となっておりますが、これはブログ本文の75%の大きさという意味です。
つまり、atok440様のフォントサイズはこの設定が二重にかかっているため、
ブログ本文の75%のさらに75%の大きさになっているため、フォントがかなり小さいんです。

プラグインが二重になっているので、今後プラグインによって不具合が出ることが考えられますので、
一度プラグインをすべて解除し、最初から入れ直すことをおすすめします。

左寄せの件ですが、「免責事項」のみ中央となっているようです。
これは、そのプラグインがもともと中央寄せ設定になっているためなので、
免責事項のプラグイン(フリーエリアでしょうか?)の設定から、
コンテンツの文字設定などを左寄せにすれば左寄せになるはずなのですが・・・。

もしプロフィールのHTML内に書くカスタマイズをしていらっしゃるなら、

<div class="plugin-freearea" style="text-align:center">

赤字の部分をleftに書き換えてください。

  • 2014-08-11│09:27 |
  • Neriko URL│
  • [edit]
質問返答お礼
親切に教えていただき、ありがとうございました。
やさしさに感動しています。
今後もよろしくお願いいたします。
フォント調整できました。
プラグイン入れ替えても直りませんでした。
テンプレート質問
Nerikoさま

お世話になります。
2つほど質問します。

一つ目はタイトルの右に画像を入れ込みたいのですがどうすればよいのでしょうか?

二つ目は記事の下にフリースペースがあるとのことで、ブログランキングなどのスクリプトを入れたのですが反映しませんでした。
なにか問題があるのでしょうか?

たびたびで申し訳ございませんがよろしくお願いいたします。
Re: テンプレート質問
> 一つ目はタイトルの右に画像を入れ込みたいのですがどうすればよいのでしょうか?

スタイルシート編集

div#title-bg {
margin: 0;
padding: 0;
background: top right no-image url(ここに入れたい画像のURL);
}

赤文字の部分を付け足してください。



> 二つ目は記事の下にフリースペースがあるとのことで、ブログランキングなどのスクリプトを入れたのですが反映しませんでした。
> なにか問題があるのでしょうか?

当ブログでも当記事「個別ページの記事直下フリースペース」にあるとおりにスポンサーリンクのスクリプトを入れていますが、問題なく表示されております。
atok440様のブログを拝見しましたが、
<!-- FreeSpace▼ -->

<!-- FreeSpace▲ -->
の間にはソース上何もないようです。
atok440様のブログに現在ランキングなどのスクリプトを貼り付けていない場合、もう一度貼り付けていただければ、その状態をこちらで見られる状態になっていれば何かわかるかもしれません。

また、スクリプトがうまく反映されなければ、試しに普通の文字列「ああああ」などを入れてみて表示されるかどうか、まずはお試しください。
もし表示されればスクリプトに何か問題があるのかもしれませんので。
  • 2014-08-18│23:32 |
  • Neriko URL│
  • [edit]
No title
お世話になります。

タイトルの右とフリースペースに適当なものを挿入しましたが反映できないようです。

そのままでアップしてありますので、
一度見ていただけますか?
お忙しいところ申し訳ございませんが、よろしくお願いいたします。
Re: No title
申し訳ありません。タイトルの右に入れるべきソースを書き間違えていました。
お手数おかけしますが、以下のように修正してください。

background: top right no-repeat url(ここに入れたい画像のURL);


フリースペースの方ですが、個別記事にて「atok」と表示されているのが確認できますが、
この文字列ではないのでしょうか?

  • 2014-08-20│07:53 |
  • Neriko URL│
  • [edit]
テンプレート修正
お世話になります。

タイトル画像表示できました。

記事下のフリースペースのデータ反映はその記事に行ったときに半円されるのですね。トップページの記事の下にも反映されるものと勘違いしていました。すみません。逆にトップページの各記事のしたにフリースペースのスクリプトが反映できますか?

いろいろ質問して申し訳ございません。
お忙しいようでしたらこの辺で結構です。
本当にありがとうございました。
Re: テンプレート修正
表示できてよかったです。

記事下のフリースペースは、html編集にある

<!--permanent_area-->と<!--/permanent_area-->を消去するとすべての記事の状態で表示されるようになります。
  • 2014-08-22│07:38 |
  • Neriko URL│
  • [edit]
タイトル文字の大きさ
テンプレートを使用させていただいています。ブログタイトルの文字の大きさを変更するにはどうしたらよいのでしょうか。

よろしくおねがいします。
  • 2014-09-06│23:01 |
  • sora URL│
  • [edit]
Re: タイトル文字の大きさ
テンプレートを使用して下さってありがとうございます。


ブログタイトルの文字の大きさを変更するにはスタイルシートの編集で、

#title h1 {

のあとに、

font-size: 100%;

と記入します。

#title h1 {
font-size: 100%;

このようになります。


ちなみにもともとタイトルの文字はデフォルトで200%となっていますので、
ご自分のお好きな大きさになるよう、いろいろ数字を変えてお試しくださいね。
  • 2014-09-06│23:47 |
  • Neriko URL│
  • [edit]
ありがとうございました。
タイトル文字の件早速ご回答をくださりありがとうございました。

教えていただいたやり方でIEではきちんとできましたが、クロームだと大きさが変わりませんでした。クロームでも対応できる方法がありましたら教えてください。
  • 2014-09-07│01:09 |
  • sora URL│
  • [edit]
Re: ありがとうございました。
私はchromeを使っていまして、自分のブログで確かめてみましたがフォントサイズは変更されていました。
ブラウザや環境によって%の数字での表示の幅が存在するかもしれません。
例えば、86%で文字が1段階小さくなる場合と、もっと数字を小さくしないと文字も小さくならない場合です。

400%など、多少ありえないくらいの数字で試してみても変化はないでしょうか。
それでちゃんと変わればよいのですが・・・。
それでも変化がないとなると、sora様のブログを拝見してソースを見てみなければこれ以上は私にはわかりかねます。申し訳ありません。
  • 2014-09-07│11:14 |
  • Neriko URL│
  • [edit]
再度ありがとうございます。
クロームで再読み込みをしたらできました。ありがとうございました。お手数をおかけしてすみませんでした。
  • 2014-09-09│06:33 |
  • sora URL│
  • [edit]
タイトル編集についてご質問
はじめまして。

お忙しいところ、大変申し訳ございませんが表題の件ご質問したく、コメントさせて頂きました。


【質問内容】
タイトル横の「にこちゃん画像」をブログの構成上、削除したいのですがどのように編集したらよろしいのでしょうか。


お手数お掛けしますが、何卒ご返信のほどよろしくお願い申し上げます。
Re: タイトル編集についてご質問
テンプレートを使用して下さってありがとうございます。

スタイルシートの編集画面内で、

/* ヘッダー */

と書かれている項をお探しください。

その下側にある、

#title h1 {
padding: 30px 0 0 50px;
background:url(http://blog-imgs-59.fc2.com/n/o/v/novicetemplate/flat_blog_title_bg.png) no-repeat 0 33px;
}

の赤文字の部分がにこちゃんマークの画像になりますので、そちらを削除してください。

  • 2015-02-02│08:19 |
  • Neriko URL│
  • [edit]
No title
はじめまして。
こちらの素敵なテンプレートに変更して、約1ヶ月です。
途中からフォントが太く変わってしまい(原因は未だ、わからず。。)
cssのfont-weightを確認しましたが、boldです(最初からそうだと思うのですが)
font-weightは自分で変更してないはずなのですが。
そこで、フォントを前のような細さにしたいと思い、boldをnormalやlighterに変更してみましたが変わらずで 400や200も試しましたが、変化ありません。
読みづらく、現在文字色を黒からグレー(#555555;)に変えています。
初心者で未熟なため、お手数おかけ致しますが、ご教授頂きたく。よろしくお願い致します。

  • 2016-01-29│15:45 |
  • pipi(ぴぴ) URL│
  • [edit]
Re: No title
こんにちは。
テンプレートをお使いいただきありがとうございます。
cssのどの部分でboldになってしまっているのか、
またはhtml側で何らかのプラグイン等で書き換わっているのかしまったのか、
そしてそれがどの部分なのかなどなど、
実際にコードを見て確認しないと具体的なアドバイスができないです・・・。
pipi様のブログURLを教えていただければ、
原因がわかると思います。
「管理者にだけ表示を許可する」チェックしていただくと、
他閲覧者様には見えませんので、どうかよろしくお願いいたします。
  • 2016-01-30│09:34 |
  • Neriko URL│
  • [edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 2016-01-30│16:38 |
  • [edit]
多分これです。
プラグイン3の一番最後の文章の次に<strong>(<は半角)が入っていて、
それが記事全体に掛かっているため、
すべてboldになっているようです。
そちらの見直しをしてみてください。
  • 2016-01-30│16:52 |
  • Neriko URL│
  • [edit]
ありがとうございました!
やってみた処、元のフォントに無事戻せました。
色々ネットで調べても、わからず困っていました。
Nerikoさんに聞いて、一発でわかりました。
お手数おかけ致しました。
本当に、有難うございます。
  • 2016-01-30│21:15 |
  • pipi(ぴぴ) URL│
  • [edit]

コメントする

Secret


Profile

Neriko

Author:Neriko
遊ぶべ!道南探検隊

本サイトは「遊ぶべ!道南探検隊」

はこだて・こどもずかん

→ もっと詳しく

最新記事のRSS

Entry+Comment

Tag+Search


Sponsor

Calendar

01 | 2017/03 | 03
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -

Link

QRcode

QR

Mailform

Name:
Email:
Title:
Message: