ブログカスタマイズのカテゴリ記事一覧

無料で始められるネットで稼ぐ方法や簡単なお小遣い稼ぎの方法、解説・攻略法などを初心者にもわかりやすく紹介していきます。

カテゴリ:ブログカスタマイズ

ブログカスタマイズのカテゴリ記事一覧。無料で始められるネットで稼ぐ方法や簡単なお小遣い稼ぎの方法、解説・攻略法などを初心者にもわかりやすく紹介していきます。

ブログカスタマイズ
ページのトップに戻るボタンを設置してみました☆ 私のブログは記事が長くて、ものすごーく縦長になっていることが多いです(>_...

記事を読む

ブログカスタマイズ
記事に小見出しをつけて記事にメリハリをつけましょう☆ ↑上記のように記事タイトルとは違った記事内につけるタイトルを『小見出し』と言います。 記事の内容を目立たせたい時や、話題が変わるときなど、 文章がダラダラと続くよりはこういったタイトルがある方が 見栄えもいいし、どういった内容の文章が書いてあるのかも一目瞭然ですよね☆ 私が行っているやり方は2種類あります。 ・記事に直接毎回タグを貼り付ける方法 ...

記事を読む

no-image

ブログカスタマイズ
ブログタイトル下にメニューバーを設置してみました☆ 前々からメニューバーを付けたかったのですが 中途半端な記事が多かったのでなかなか出来ませんでした(^_^;) やっと設置出来るくらいにはなったのですが、まだ準備中の記事も多いので おいおい追加していきたいと思います(^_^;) 気長に見守ってやって下さい 毎日記事更新している↓ げん玉MONOW、ECナビ「クリックくじ」、モッピークイズ、フルーツメールスクラッチは ...

記事を読む

ブログカスタマイズ
私のサイドバーの至る所にある緑のお花の小さなマーク これはリストマークと言うそうで、 これを好きな画像のアイコンに変える方法を紹介したいと思います☆簡単ですよ♪ 普通は↓こんなマークが多いです。     アイコン画像はなるべく文字より小さめの画像がいいので、フリー素材配布されているサイトさんから ダウンロードしておくといいですよ☆ 画像のURLが必要なので、画像をアップロードしておきます。 やり方を忘...

記事を読む

ブログカスタマイズ
今回はカテゴリ内の記事を一覧で記事の上に表示させる方法の紹介です。 記事の上に同一カテゴリの記事一覧が表示されますので 過去の記事も見てもらえるキッカケにもなりますよ☆ 私のブログではこんな感じで表示しています。 私のカテゴリ一覧は、古い順で表示していますので 埋もれている古い記事もついでに見てもらえるかも~ 新しい、古いの順番や、一覧に表示する記事数は自分の好きなように変更出来ます。 管理画面→...

記事を読む

ブログカスタマイズ
ファビコンとは?? こういうサイト名の前についているマークです。 私のサイトのファビコンはこんな感じ☆ 他のサイトさんとの区別もつきやすいですし、 自分のブログのシンボルマークがあるっていいですよね☆ FC2ブログのファビコンはこんなのがついていますよね? このファビコンを自分のサイト用に変更することが出来ますので 是非挑戦してみて下さい☆   まず、ファビコンにする素材を選びます。 「ファビコ...

記事を読む

ブログカスタマイズ
「パンくずリスト」を設置すると、訪問者がブログ内で迷わないよう道しるべの役目をしてくれます。「パンくずリスト」は私のブログでは、記事の上に表示されている部分です。 私のテンプレートには設置されていませんでしたが元々設置されているテンプレートもあるようです。パンくずリストを設置する場合は、管理画面左の「環境設定」→「テンプレートの設定」から編集します。失敗したら大変なので、テンプレートの複製(コピー)...

記事を読む

ブログカスタマイズ
記事の下に広告やランキングなどのバナーが入っているサイトさんって多いですよね? 私が初めてカスタマイズに挑戦したのは、この記事の下に自動で表示させる方法だったんです。 「なんでみんな毎回同じ広告を貼ってるんだろう?どうやって貼ってるんだろう?」 「私も入れてみたいな~」から始まりました。 もちろん、初心者だった私はやり方など知らず・・・ いろいろと探しまわりました(^_^;) <%topentry_body>のあ...

記事を読む

ブログカスタマイズ
基本的な記事編集のやり方は前回紹介しました。 →FC2ブログ ~記事の編集~ このやり方の場合、記事数が多くなってくると 編集した記事の編集画面にたどりつくまで 何ページもさかのぼらなければいけないこともあり 記事数が多い方はとっても大変!! 私の記事数でさえ探すのは一苦労だから・・・(^_^;) そんな時にめちゃくちゃ便利な方法を見つけたので 紹介しておきますね☆ 【FC2ブログカスタマイズ】記事から直接その記事の編...

記事を読む

ブログカスタマイズ
ブログカスタマイズ・・・はじめはなんのこっちゃ??っと思っていたほど、ド素人の私でしたがこんな私でも、いろいろと勉強しながらなんとか簡単なものなどは出来るようになりました☆最初は本当になんにもわからなかったのでテンプレートのあのわけのわからん英語ばっかりのものを見て「だめだこりゃ~」っと思いました。が、!!どうしても、自分のブログをこんな風にしたい、あんな風にしたいという理想を叶えたくて、いろいろ...

記事を読む

ページトップに戻るボタンをつけてみよう!

ページのトップに戻るボタンを設置してみました☆


私のブログは記事が長くて、ものすごーく縦長になっていることが多いです(>_<)

ブログを読んで下さっている方には、ページのトップに戻るために

ご苦労をおかけしておりました(´・_・`)

なので、いろいろと探し回っていい方法を見つけましたので

今回ページトップに戻るボタンをつけてみることにしました。

記事をしばらく下にスクロールするとページの右下に以下のボタンが出てきます。

          blog1.jpg


このボタンをクリックしていただくと一瞬でトップに戻ります(^-^)

テンプレートの編集をするので念のため「複製(コピー)」をしておいて下さいね☆

FC2ブログ管理画面⇒「テンプレートの設定」⇒「HTMLの編集」で

スクリプトの設置をします。

</head>の直前に以下のものを挿入します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 700) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
});
</script>

上の数字700は、下にスクロールさせて画像が表示されるまでの長さ。

下の数字500は、ページトップに戻る速さ。


さらに、「HTML編集」で

</body>の直前に以下のものを挿入して下さい。

<p id="back-top">
<a href="#top"><span>ここに文字を入れるとボタン画像に文字が入ります。</span></a>
</p>


これで「HTML編集」は終わりです。


次にCSSに追加をします。「スタイルシート編集」で一番下から一行改行して以下を挿入します。

/* backtotop */
#back-top {
position: fixed;
bottom: 5px;
margin-left: 85%;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

/* arrow icon (span tag) */
#back-top span {
width: 100px;
height: 50px;
display: block;
margin-bottom: 0px;
background: #eae5e3 url(http://~画像のURLを挿入) no-repeat center center;

/* rounded corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}


↑これは画像は回らない設定です。

画像をくるっと回したい場合は、さらに末尾に一行あけて以下を追加してください。

#back-top a:hover span {
-webkit-transform: rotate(720deg) scale(1.2);
-moz-transform: rotate(720deg) scale(1.2);
transform: rotate(720deg) scale(1.2);
opacity:0.5;
}


以下の数値はボタンを設置する位置です。

bottom: 5px; 下からの高さ
margin-left: 85%; ページ左からの位置 数値を少なくすると画像を左側に設置出来ます。


以下の数値は ボタン画像の大きさに合わせて変更して下さい。

width: 100px; 横幅
height: 50px; 縦幅


以下のコードは ボタン画像の背景の色です。お好きな色に変更して下さい。

background: #eae5e3


この設置方法は「Subox.net」というサイトさんで参考にさせて頂きました。

当ブログ用に変更した部分もありますのでこちらでも編集のやり方を載せましたが、

詳しくは「Subox.net」も見てみて下さい。


ユーザビリティを考えると、トップに戻るボタンは設置しておいた方がいいですね☆

当ブログでは、記事の最後にも付けていますが、

blog2.jpg

これはあまり使われていないと思いますので

常時見える位置にあるボタンはとっても便利だと思います☆

» 記事の続きを読む

 タグ
None

記事の中に「小見出し」を付ける方法(CSS スタイルシートを設定する方法)

記事に小見出しをつけて記事にメリハリをつけましょう☆


↑上記のように記事タイトルとは違った記事内につけるタイトルを『小見出し』と言います。

記事の内容を目立たせたい時や、話題が変わるときなど、

文章がダラダラと続くよりはこういったタイトルがある方が

見栄えもいいし、どういった内容の文章が書いてあるのかも一目瞭然ですよね☆

私が行っているやり方は2種類あります。

・記事に直接毎回タグを貼り付ける方法

・CSS(スタイルシート)でタグ指定する方法


前回は簡単な『直接タグを貼る方法』をご紹介しましたが

今回は『CSS(スタイルシート)でタグ指定する方法』をご紹介しますね☆


スタイルシートで設定して小見出しを記事に表示させる方法


前回紹介した「直接タグを貼る方法」は毎回記事を書くたびに

タグをコピペしなければなりません。

たまにしか使わないならそれでもいいですが、私のように頻繁に使うなら面倒なんです(´ε` )

「小見出し」は記事を書く上で、見栄えもいいしSEO対策としても使用した方がいいと思いますので

スタイルシートで設定して使ってみて下さい☆


テンプレートのスタイルシートの方で設定をします。当ブログの「FC2ブログ」での解説になります。

管理画面の「環境設定」→「テンプレートの設定」→「スタイルシート編集」で設定します。

テンプレートを触るので、万が一の時のため、念の為に、

テンプレートの複製(コピー)をしておいて下さいね。


と言ってもそんなに難しいことはありません。

以下のタグをスタイルシートの末尾にコピペして下さい。

貼り付ける場合は、一番下で一回改行してからそのあとに貼り付けて下さい。


当ブログと同じ大きさの小見出し

 ↓ ↓ ↓ (枠線、文字の色は「黒」、背景は「白」にしています。)

h3{
font-size:12pt; color:#000000;
background-color:#ffffff;
border-bottom:1px solid #000000;
border-right:0px solid #000000;
border-left:8px solid #000000;
padding:8px;
}


基本はこのタグ↓ いらない枠線は削除するといいですよ。

h●{  ←●に数値を入れる
font-size:文字の大きさpt;
background-color:#ffffff;  ←背景の色
border-top:    1px solid #000000;  ←上の枠線
border-bottom: 1px solid #000000;  ←下の枠線
border-right: 1px solid #000000;  ←右の枠線
border-left: 8px solid #000000;  ←左の枠線
padding: 余白の大きさpx;
}


ブログのタイトルが「h1」、記事のタイトルが「h2」の設定になっていると思います。

なので、記事内に付けるタイトル(見出し)は「h3」からはじめるといいでしょう。

枠線、文字の色は「黒」、背景は「白」にしています。

色の見本はこちら>>『色colors table』<<を参考にしています。


スタイルシートにタグを貼り付けて設定したら、

あとは記事内で<h3>~</h3>の間にタイトルを入れるだけです。

記事内で <h3>書きたいタイトル</h3> と書き込めば

実際の記事にはちゃんと見出しが出来ています。


当ブログでは、見出しは4種類設定しています。

こんな感じ <h3>~</h3>


こんな感じ <h4>~</h4>


こんな感じ <h5>~</h5>

こんな感じ <h6>~</h6>

見出しの大きさは「font-size:12pt」の数値で変わります。

あとは、基本のタグから枠線を実線から点線に変えたり、色を変えたり

色々とご自分のサイトに合わせて変えてみて下さい。

枠線の種類 solid(実線)、dotted(点線)、dashed(破線)、double(二重線)などがあります。


スタイルシートに設定するのは、面倒かもしれませんが

一度設定してしまえば、あとは記事内で書きたいタイトルを<h3>~</h3>の中に

書き込めばいいだけなので、あとは楽になりますよ♪

先に紹介した『直接記事内にタグを貼る方法』か、今回の『スタイルシート設定』か

どちらかお好きな方法で見出しを作ってみて下さいね☆


>>小見出しのタグを直接記事内に貼る方法はこちら<<


記事にタグを入れる場合のブログの設定

簡易モードを「OFF」にする

FC2-12.jpg

 ↓ 

下の方にある「記事の設定」の「改行の扱い」を「HTMLタグのみ」にしておく

FC2-102.jpg

ちゃんと表示させるためにもタグを入れる場合は忘れずに設定しておいて下さいね☆

 タグ
None

ブログタイトル下にメニューバーを設置する方法

ブログタイトル下にメニューバーを設置してみました☆


前々からメニューバーを付けたかったのですが

中途半端な記事が多かったのでなかなか出来ませんでした(^_^;)

やっと設置出来るくらいにはなったのですが、まだ準備中の記事も多いので

おいおい追加していきたいと思います(^_^;) 気長に見守ってやって下さい


毎日記事更新している↓

げん玉MONOWECナビ「クリックくじ」モッピークイズフルーツメールスクラッチ

本日のお役立ち情報」の欄に入っていますのでそちらを見て頂けたらと思います☆

ビンゴ情報や他にもありましたら、そのうちまたちょこちょこと追加変更はしていくつもりです♪


見にくいところとかありましたら、意見を頂けたらと思います☆


メニューバーを付けてみたい方はこちらを参考に~

次の記述を設置したい箇所のHTMLに追加 (赤い部分は各自希望のURL、リンク名に変えてください。)

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>
</ul>
<!--▲ メニューバー ▲-->

次の記述をスタイルシートの末尾追加

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

メニューバーを付けてみたい方は、詳しいことが書かれていますので

FC2ブログのテンプレート工房」さんの>>こちら<<を参考にするとイイと思います♪

私も参考にさせて頂きました☆



お小遣い稼ぎについて詳しく知りたい方はこちら↓
>>お小遣い稼ぎの詳しい情報が満載!
>>小遣いブログ 主婦のお小遣い稼ぎ

 タグ
None

リストマークを好きな画像のアイコンに変更する方法

私のサイドバーの至る所にある緑のお花の小さなマーク

これはリストマークと言うそうで、

これを好きな画像のアイコンに変える方法を紹介したいと思います☆簡単ですよ♪

FC2-97.jpg

普通は↓こんなマークが多いです。

   FC2-98.jpg

アイコン画像はなるべく文字より小さめの画像がいいので、フリー素材配布されているサイトさんから

ダウンロードしておくといいですよ☆

画像のURLが必要なので、画像をアップロードしておきます。

やり方を忘れた方は、→ FC2ブログ ~記事に画像を入れる 画像アップロード~

アップロード出来たら、画像のURLをコピーしておきます。

FC2-877.jpg

 

管理画面の「環境設定」→「テンプレートの設定」→「スタイルシート編集」で

スタイルシートの最後の行から一行あけて以下を挿入します。

ul { list-style-image: url("画像のURL"); }

画像のURLの部分に、先ほどコピーしておいた画像のURLを挿入して下さいね。

""の間に隙間がないように挿入しましょう~隙間があるとうまくいきません。。。

これで、リストマークがお好みのアイコンに変わりました☆

簡単なので是非やってみて下さいませ~

 


上記のやり方は、ブログ全体のどの部分のリストマークもすべて指定していて

みんな同じアイコンになるという方法です。

箇条書きをした場合もすべて同じアイコンということです。

もしも、記事内や個別にリストマークを別のものに変えたい場合は

直接以下のもので指定するとその部分はそこで指定した画像にすることが出来ます。

 

  • 例えば
  • この画像で
  • 表示する場合は
  • このように記入して下さい。

<ul style="list-style-image: url(画像のURL);">
<li>例えば</li>
<li>この画像で</li>
<li>表示する場合は</li>
<li>このように記入して下さい</li>
</ul>

これで、この部分だけ別のリストマークにすることも出来るようになりました☆

記事内は別のリストマークにしてみるなど、いろいろ変更してみても楽しいですね☆

 

 

 タグ
None

カテゴリの一覧を記事の上に表示する方法

今回はカテゴリ内の記事を一覧で記事の上に表示させる方法の紹介です。

記事の上に同一カテゴリの記事一覧が表示されますので

過去の記事も見てもらえるキッカケにもなりますよ☆

私のブログではこんな感じで表示しています。

FC2-95.jpg

私のカテゴリ一覧は、古い順で表示していますので

埋もれている古い記事もついでに見てもらえるかも~

新しい、古いの順番や、一覧に表示する記事数は自分の好きなように変更出来ます。

管理画面→「環境設定の変更」→「ブログの設定」→「記事の設定」

赤で囲んだ部分で変更して下さい~

FC2-96.jpg

 

それでは、カテゴリ内の記事を一覧で記事の上に表示させる設定をします。

管理画面の「環境設定」→「テンプレートの設定」→「HTML編集」で設定します。

失敗した時のために、テンプレートの複製(コピー)をお忘れなく!

「HTML編集」の<!--topentry-->を探します。

「Ctrl」+「F」で検索窓を出して検索すると一発です。

<!--topentry-->が見つかったらその直前に以下のものを挿入します。

<!--category_area-->
<div class="mainEntryBlock">
<div class="mainEntryTitle"><div style="text-align:left;">カテゴリ:<%sub_title> の記事一覧</div></div>
<div class="mainEntryBody">
<ul>
<!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
<!--/topentry-->
<p class="content-nav" align="center">
<!--prevpage-->
<a href="<%prevpage_url>">≪古い記事一覧へ </a>
<!--/prevpage--> <!--nextpage--> <a href="<%nextpage_url>"> 新しい記事一覧へ≫</a>
<!--/nextpage--> </ul>
</p>
</div></div>
<!--/category_area-->

これは、私のブログに挿入しているタグなので、ブログによってはうまくいかないかもしれません。

赤字の部分を消して、一行目の<!--category_area-->の下に

 『<h2>カテゴリー [<%sub_title>] </h2>』か、『カテゴリー [<%sub_title>] 』 を挿入するだけでもいいかもです。

その場合は、枠で囲まれません。


以下の部分はブログと同じ枠にする部分で、赤字のところは、ブログによってentry_box、entry_title など

表示が違うと思うので、ご自分のブログを見て変えてみて下さい。

<div class="mainEntryBlock">
<div class="mainEntryTitle"><div style="text-align:left;">カテゴリ:<%sub_title> の記事一覧</div></div>
<div class="mainEntryBody">

 

 

 タグ
None

FC2ブログでファビコンをつけてみよう

ファビコンとは??

こういうサイト名の前についているマークです。

FC2-90.jpg

私のサイトのファビコンはこんな感じ☆

FC2-84.jpg

FC2-83.jpg

他のサイトさんとの区別もつきやすいですし、

自分のブログのシンボルマークがあるっていいですよね☆

FC2ブログのファビコンはFC2-89.jpgこんなのがついていますよね?

このファビコンを自分のサイト用に変更することが出来ますので

是非挑戦してみて下さい☆

 

まず、ファビコンにする素材を選びます。

「ファビコン素材」「Favicon 素材」などで検索するといろいろありますよ♪

 

無料配布されているフリー素材をダウンロードすると簡単です。

自分の持っている画像でもOKです。

ファビコンにするには、拡張子を変える必要があります。

JPEGなどの形式のものをicoに→こちらで変換します

FC2-91.jpg

「参照」をクリックして、ファビコンにする素材を自分のファイルなどから選び

矢印の「Generate FavIcon.ico」をクリックします。

 

例えば、私のプロフィールの画像を使ってやってみるとこんな感じになりました。

FC2-86.jpg

矢印の「Download FaIcon Package」をクリックして「保存」します。

圧縮ファイルで保存されるので、ファイルを開いて展開しておいて下さい。

FC2-93.jpg → FC2-94.jpg 展開→ FC2-92.jpg

「favicon」を使います。

ここまで出来たら、画像をアップロードします。

やり方を忘れた方は、→ FC2ブログ ~記事に画像を入れる 画像アップロード~

アップロード出来たら、画像のURLをコピーしておきます。

FC2-877.jpg

ここまでは、ファビコンにする素材を選んだというところまで出来たということです。

ここからは、いよいよファビコンを設定する作業になります。

管理画面左の「環境設定」→「テンプレートの設定」で「HTMLの編集」をします。

失敗しないためにも、テンプレートの複製(コピー)をお忘れなく~

「Ctrl」+「F」で検索窓を出して</head>を検索して探します。

その</head>の直前に以下のものを挿入します。

<link rel="shortcut icon" href="http://blog~~~.ico">

赤字の部分に先ほど、画像をアップロードしたときにコピーしておいたURLを入れます。

これで作業は完了です。

ファビコンがちゃんとついているか確認してみて下さい。

 

 タグ
None

パンくずリストを設置する方法

「パンくずリスト」を設置すると、訪問者がブログ内で迷わないよう

道しるべの役目をしてくれます。

「パンくずリスト」は私のブログでは、記事の上に表示されている部分です。

FC2-85.jpg

私のテンプレートには設置されていませんでしたが

元々設置されているテンプレートもあるようです。

パンくずリストを設置する場合は、管理画面左の「環境設定」→「テンプレートの設定」から編集します。

失敗したら大変なので、テンプレートの複製(コピー)を忘れずにしておきましょう!

「HTMLの編集」に以下のタグを挿入して下さい。

<!-- パンくずリスト -->
<!--not_index_area-->
<div class="pankuzu">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="TOPページへ">TOP</a> > <a href="<%topentry_category_link>"><%topentry_category></a> > title - <%sub_title>
<!--/topentry-->
<!--/permanent_area-->
<!--category_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > CATEGORY - <%sub_title>
<!--/category_area-->
<!--search_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > SEARCH - <%sub_title> の検索結果
<form action="./" method="get"><input type="text" size="20" name="q" value="" maxlength="200" class="ipt" /> <input type="submit" value="Search" class="search" /></form>
<!--/search_area-->
<!--date_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > ARCHIVE - <%now_year>年<%now_month>月
<!--/date_area-->
<!--edit_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > edit - 修正画面
<!--/edit_area-->
<!--tag_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > <%tag_word>
<!--/tag_area-->
</div>
<!--/not_index_area-->
<!-- パンくずリスト ここまで-->

挿入する場所は、「パンくずリスト」を設置したい位置によります。

私のブログと同じように、記事のすぐ上に設置する場合、<!--topentry-->の直前に挿入します。

ブログタイトルのすぐ下に設置する場合、<body>の中にある<%blog_name>の後ろの方に挿入します。

ブログ紹介文の下に設置する場合、<body>の中にある<%introduction>の後ろの方に挿入します。

 

ここまで出来たら、次は、「スタイルシート編集」の一番下の行から一行あけて 

以下のタグを挿入して下さい。 

.pankuzu {
font-size:12px;
text-align:left;
margin:0px 0px 10px 0px;}
.pankuzu a:link{color:#ff9900}
.pankuzu a:visited{color:#ff9900}

文字の大きさやリンクの色など、自分流にしたい場合は

・文字の大きさを変える : font-size:12px;の数字を変える

・リンクの色を変える : color:#ff9900の#ff9900の部分を変える →カラーコードはこちら

・「TOP」を他の言葉に変える : 「HTML編集」のtitle="TOPページへ">TOP</a>の

                    TOPのところを他の言葉に変える→HOMEとか、ブログタイトルとか

私のブログのように、パンくずリストをBOXの中に入れたい場合

スタイルシートの編集に赤字の部分を追加して下さい。

.pankuzu {
font-size:12px;
text-align:left;
background-color: #ffffff; ←背景の色
border: 3px ridge #ffffff; ←これは枠なのでいらない場合は削除して下さい。
padding: 5px 0px;
line-height: 100%;
clear: both;
margin:0px 0px 10px 0px;}
.pankuzu a:link{color:#ff9900}
.pankuzu a:visited{color:#ff9900}


これは、記事のすぐ上にパンくずリストを設置した場合なので

他の場所だとうまくいかないかもしれません。。。

私の別ブログでもこの方法で設置出来ていますが、

他の方のブログで出来るかはわかりかねますのであしからず・・・<(_ _)>

 タグ
None

記事の下にバナーやランキングを入れる方法

記事の下に広告やランキングなどのバナーが入っているサイトさんって多いですよね?

私が初めてカスタマイズに挑戦したのは、この記事の下に自動で表示させる方法だったんです。

「なんでみんな毎回同じ広告を貼ってるんだろう?どうやって貼ってるんだろう?」

「私も入れてみたいな~」から始まりました。

もちろん、初心者だった私はやり方など知らず・・・

いろいろと探しまわりました(^_^;)

<%topentry_body>のあとに入れる。と言うのをよく見かけました。

「環境設定」→「テンプレートの設定」→「HTMLの編集」をします。

キーボードの「Ctrl」+「F」を押して検索窓に<%topentry_body>をコピー&ペーストします。

fc2-kensakumado.jpg

すると、すぐに<%topentry_body>の場所にたどりつけます。

私のテンプレートの場合だと、こんな感じ。↓

FC2-81.jpg

プレビューしてみるとこんな感じ↓

FC2-80.jpg

テンプレートに挿入したので、これで毎回自動的に

記事の下にバナーや広告が表示されるようになりました☆

すべての記事の下にバナーなどが表示されていますよね♪

もしも、バナーや広告を削除したり変更したい場合は

テンプレートに挿入したものを削除したり変えればいいだけなので

1記事ごとにバナーなどを貼ったり削除したりするよりも効率的ですよね☆


この位置に挿入の場合、拍手などの上にバナーなどがくる設定になっています。

私のブログのように、拍手などの下にバナーを貼る場合は

記事の下~フッター部分より上の間に入れるといいようです。

ブログの設定や、テンプレートの種類によっていろいろだと思うので

フッター部分(記事ページの一番下の部分)から上付近に入る場所を探してみてください。

「更新」をしない限り、何回でもやり直しが出来ますので試してみてください。

 タグ
None

FC2ブログ ~記事の編集画面へ簡単にいく方法~

基本的な記事編集のやり方は前回紹介しました。 →FC2ブログ ~記事の編集~

このやり方の場合、記事数が多くなってくると
編集した記事の編集画面にたどりつくまで
何ページもさかのぼらなければいけないこともあり
記事数が多い方はとっても大変!!

私の記事数でさえ探すのは一苦労だから・・・(^_^;)

そんな時にめちゃくちゃ便利な方法を見つけたので
紹介しておきますね☆
【FC2ブログカスタマイズ】記事から直接その記事の編集ページへ
↑こちらでこの方法を紹介して下さっています~!
でも、けっこう簡単に説明されていますので・・・
よく分からない方のために~
私のテンプレートでちょこっと紹介もしておきます。
テンプレートはそれぞれ違うので、似たようなソースを探しながら作業してみて下さい☆

まず、管理画面左の「環境設定」→「テンプレートの設定」で「HTML編集」の編集をします。
「テンプレートの設定」で「HTML編集」の画面が見えるところまでスクロールして下さい。
それからパソコンのキーボードの「Ctrl」と「F」キーを同時に押すと下に検索窓が出てきます。
そこに <!--/topentry--> をコピー&ペーストします。

FC2-74.jpg


そうすると「HTML編集」内にある <!--/topentry-->にすぐ辿り着くことが出来ます。

<!--/topentry-->の付近のソースのから記事を表している場所をさがして
その付近の記事のフッター部分にこれを挿入する↓
      <a href="./admin.php?mode=editentry&no=<%topentry_no>">[Edit]</a>」とありますがわかりますか?

なんのこっちゃわからない方もいると思います(>_<)

私のテンプレートの場合、<!--/topentry-->の付近のソースを探しても全然なくて
ずーーーっと下に下がってだいぶ下がったところに記事のフッター部分がありました。
記事のフッター部分って簡単に言えば記事の一番下ってことですね(^_^;)
私の記事でいうと赤で囲ったこの部分↓
FC2-75.jpg


<!--/topentry-->から下に下がって
この部分を探せばいいってわけです。
今回入れたいものは「Edit」ですから
これを入れたいところの前にある「Page Top↑」を私の場合は探せばよかったわけです。

↓拡大して見て下さい↓
FC2-76.jpg 
「Page Top」を見つけたのでそのあとに
<a href="./admin.php?mode=editentry&no=<%topentry_no>">[Edit]</a>
を入れました。
「プレビュー」でちゃんと出来ているか確かめてOK!だったら「更新」して完了です☆

[Edit]の部分は自分の好きな言葉に変更してもいいです。「編集」とか「修正」とかいろいろと・・・

ちゃんと出来ましたか~??
これで、この記事を修正したいな~っと思った時にはこの「Edit」をクリックすれば
この記事の編集画面に一瞬で飛べるというわけです!

これを付けたおかげで、あとから記事を読み返して「ここおかしいな~」とか「修正が必要」って
思ったらすぐに編集出来るようになって、とても作業がやりやすくなりましたよ



 タグ
None

初心者でも出来る!ブログカスタマイズをやってみよう!

ブログカスタマイズ・・・
はじめはなんのこっちゃ??
っと思っていたほど、ド素人の私でしたが
こんな私でも、いろいろと勉強しながら
なんとか簡単なものなどは出来るようになりました☆

最初は本当になんにもわからなかったので
テンプレートのあのわけのわからん英語ばっかりのものを見て
「だめだこりゃ~」っと思いました。
が、!!
どうしても、自分のブログをこんな風にしたい、あんな風にしたい
という理想を叶えたくて、いろいろ探しまわりました。

と言っても、本とか買うのももったいないって感じだったので(^_^;)
ネットでいろいろと探しまわったんです~
けど、カスタマイズの呼び方?とかも何もわからなかったので
探すのも一苦労。。。

結局わからなくて、テンプレートの中に「貼り付けては消して貼り付けては消して」を繰り返し
挿入したいものの位置を確認しながら丸1日がかりでやったものも初めはありましたね・・・

とりあえず、私がこのブログでやってきたいろいろなカスタマイズを
初心者の方にもわかりやすく紹介出来れば~とは思っています(*^_^*)

カスタマイズを始める上で一番大切なことは、テンプレートの複製をしておくこと!
これに限ります!!
要するにコピーしておくってことです☆
英語だらけでわけわからないから、もし間違えたりしたら大変!!
取り返しのつかないことになってしまいます(>_<)

管理画面左の「環境設定」→「テンプレートの設定」
旗印のついたものが使用中のテンプレート。それの「複製」をクリックすると
その下にコピーしたものが表示されます。
コピーが出来たら、失敗しても大丈夫!何度でもやり直せますからね~☆
FC2-73.jpg(←クリックで拡大します)

テンプレートは「HTML」と「スタイルシート(CSS)」から出来ていて
こちらを編集することでカスタマイズが出来るっというわけです!

FC2ブログのカスタマイズマニュアルもあります!

詳しいことはいまだによくわからないので
いろいろお勉強してみたい方はこちらのサイトでお勉強してみて下さいませ~
詳しく解説してくれていますよ!

ブログが作りたい!+FC2ブログの作り方+
初心者でもできる簡単FC2ブログの作り方

初めはわけがわからなくても、何度もカスタマイズをやってるうちに
少しずつわかることも増えてきました^^
こんな私でも、出来たことなのできっと大丈夫!
カスタマイズをやってみたい!という方は、是非挑戦してみて下さいね~☆

 タグ
None



Copyright © 0円でお小遣いも稼ぎたい主婦のつぶやき All Rights Reserved.

テキストや画像等すべての転載転用販売を固く禁じます