テンプレートカスタマイズ

ブログ初心者の無料アクセスアップ法

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スクロールバーの色を変える方法

飾りっけのないスクロールバーをサイトカラーに合わせた色に変更する方法です。

テンプレートのCSS(スタイルシート)に以下のようにタグを記述することで変更できます。


scrollbar-場所-colorというように記述します。

scrollbar-face-color: #から始まるカラー数値、又はカラーネーム
scrollbar-arrow-color: #から始まるカラー数値、又はカラーネーム
scrollbar-shadow-color: #から始まるカラー数値、又はカラーネーム
scrollbar-darkshadow-color: #から始まるカラー数値、又はカラーネーム
scrollbar-track-color: #から始まるカラー数値、又はカラーネーム
scrollbar-highlight-color: #から始まるカラー数値、又はカラーネーム

●タグの意味以下の通りです。

face 上下左右の端にある三角印のある四角い部分とバーの表面の色

arrow 上下左右の三角印の色

shadow 上下左右のバーと両端の右枠の内側の色

darkshadow 上下左右のバーと両端の右枠の外側の色

track 上下左右のバーと両端の左枠のうち側の色

highlight 上下左右のバーと両端の左枠の外側の色


●各設定場所は以下の通り

テンプレートのCSS(スタイルシート)内の

body{ }   BODYのカッコ内に記述する方法と

*{ }    アスタリスク内に記述する方法があります。


【例えば】
*{margin: 0;padding: 0;
scrollbar-face-color: #ff6600;
scrollbar-shadow-color: #F0F0F0;
scrollbar-highlight-color: #FFFFFF;
scrollbar-darkshadow-color: #999999;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color: #FFFFFF;}

アスタリスク内に記述するのであれば、こんな感じ^^

*{}(アスタリスク)に記述した場合は全てに適用、
body{}に記述した場合は、<body> ~ </body>内に適用

特に違いはないと考えて良いです。


よくわからない方は、このままコピペしてプレビューしながら、色だけ変更して使って下さい。
あとその際、宜しければこのブログをリンクして頂ければ嬉しいです^^。



自信のない方や、不安な方は、
テンプレートを複製するか、コピーを取って編集することをお勧め致します。


#から始まるカラーコードがわからない場合は、『記事を書く』から
左上の“文字に色を付ける”から、色を選ぶと記事作成部分にカラーコードが出てきますので、
そのままコピペで変更できます。

スポンサーサイト

テキストリンク(文字リンク)の変更と装飾

テキストリンクの変更・装飾の方法について説明します。


テキストリンクとは、
単語や文章をクリックすると別のページに移動するように設定されているものです。

例えば⇒ このブログのトップページ

html上で、<a>~</a>で囲ったタグです。


このテキストリンクの変更は、CSS(スタイルシート)で設定します。

【FC2ブログ】
テンプレートの設定⇒CSSの編集

【忍者ブログ】
テンプレート設定/編集⇒修正をクリックし、右側のHTMLの下のCSS編集窓

【シーサーブログ】
デザインからデザイン一覧を選択し、
少し下にスクロールすると現在適用されているCSSを選択できます。

【アメーバブログ】
ブログを書く⇒デザインの変更⇒スキンCSSの編集


● それでは、設定方法を説明します。

※自信のない方は、わからなくなった時や、修正出来なくなり挫折してしまったときの為に
  CSSの複製やコピーを取ってから変更してみて下さい。



まず、CSS(スタイルシート)の a のセレクタを探します。

通常

a {
color:#5f9b9f;
text-decoration: underline;
}

のみで設定されている場合と


a:link {
color:#5f9b9f;
text-decoration: underline;
}
a:visited {
color: #5f9b9f;
text-decoration: none
}
a:hover {
color: #dd0000;
text-decoration: underline;
}

上記のように3つや4つに分かれて設定されている場合があります。


私のこのブログの場合は↓のような設定になってます。
テキストリンク変更画像


設定は全て半角で、a:link{ } a:visited{ } a:hover{ } の3つで設定します。

a:link 通常時のテキストリンクの設定
a:visited 一度訪問したことのあるテキストリンクの設定 
a:hover マウスがテキストリンクの上にある時の設定

変更項目は、

color: テキストリンクの色の変更(#文字の色)

text-decoration: none;  装飾なし
text-decoration: underline; 下線
text-decoration: overline;  上線
text-decoration: line-through; 打ち消し線

で各設定を行います。


a:link {
color:#5f9b9f;
text-decoration: none;
}
a:visited {
color: #5f9b9f;
text-decoration: none
}
a:hover {
color: #dd0000;
text-decoration: underline;
}

それぞれの項目で色とアンダーラインなどの設定をします。

上記は、オーソドックスなパターンですが
通常時、一度訪問した時は、色が同じでアンダーラインなし
マウスがテキストリンクの上に来たときのみ色の変更とアンダーラインを表示する設定です。


その他、

マウスがテキストリンクの上に乗ったときに、背景色を変更する方法

a:link{ color: #3333ff; text-decoration:none;}
a:visited{ color: #3333ff; text-decoration:none;}
a:hover{color: #337777; text-decoration:none; background-color: #文字の色;}

このブログのトップページ



マウスがテキストリンクの上に乗ったとき、テキストリンクを動かす方法

a:link{ color: #3333ff; text-decoration:none;}
a:visited{ color: #3333ff; text-decoration:none;}
a:hover{color: #337777; text-decoration:none; position: relative; top: 1px; left: 1px;}
※マウスを乗せると右下にテキストリンクが動く設定(画像リンクも動きます)

このブログのトップページ

画像リンクのみを動かす場合はこのように記述
a:hover img{color: #337777; text-decoration:none; position: relative; top: 1px; left: 1px;}


(ただ下に動かす場合は以下の設定)
a:hover{color: #337777; text-decoration:none; position: relative; top: 1px;}

top: left: right: bottom:にpx(ピクセル)で数値を設定
それぞれの意味は、top(上から)、left(左から)、right(右から)、bottom(下から):
何px動かすのか、数値で設定します。


上記のタグは、コピーしてそのまま貼り付けて色だけ変更してお使い頂いて構いません。
あとその際、宜しければこのブログをリンクして頂ければ嬉しいです^^。

リンク先のURLを隠す方法

リンク先を隠す方法について

通常、テキストリンクにカーソルを合わせると、
インターネットエクスプローラーの左下に、リンク先のアドレスが表示されますが、

&とかID~と、あからさまにアフィリコードが表示されていると、
判っていてもクリックを躊躇してしまう気持ちになってしまう場合ないですか?(苦笑

とは言っても、ある程度ネットになれている方であれば、
アフィリリンクかどうかは大体わかるので、ネット初心者にしか通用しない
小手先のテクニックかと思いますが…

一応、リンク先を見せたくない方のために
もっとも簡単に出来る方法を…

<body onmouseover="status=''; return true">

<body>タグに付け加えるだけです。

ただし、この方法が機能するのはIE(インターネットエクスプローラー)だけで
しかも、テキストリンクのみです。
画像バナーにカーソルを合わせると、リンク先が表示されます。
FireFoxやGoogle Chromeの他のプラウザでは通用しません。

また、リンク先を隠しても
そのテキストリンクの上で右クリックをするとIEでも行き先が表示されます。

なので、はっきり言って気休め程度でしかありませんが、
この方法を知りたい方もいるのではないか…、ということでアップしてみました^^

右クリック禁止にする方法

右クリックを禁止にする方法について

たまに、画像のコピーなどを防ぐ対策として右クリックを禁止にしているサイトを見かけますが、

その方法として、もっとも簡単なのは

<body bgcolor="#FFFFFF" oncontextmenu="alert('右クリックは禁止です');return false">

<body>タグに付け加える方法があります。


その目的にもよりますが…
ただ、右クリック禁止にすると
意図的に違うタブでページを開きたいときに使い勝手が悪く、嫌われる傾向にあります。

また、画像のコピーを防ぐなどの対策としても、
ドラック&ドロップで画像をPCに保存できてしまいますし、

ソースなどを隠したい場合でも
LunascapeやFireFoxなどでは、
プラウザ上部メニューの“表示”から“ソースの表示”が選択可能です、

文字コードによっては、ソースを表示したときに文字化けしますが、
URLはそのまま表示されてしまいますので、
画像バナーやその他、アドレスを直接入力し直接画像にアクセスすることが可能です。
なので、ネット上に公開している以上
画像のコピーは避けられないと思ったほうが良いと思います。

右クリック禁止にして、観覧者から不便に思われるよりも
大切な画像であれば、その画像にロゴを入れるなどして
対策を講じる必要もあるかと思いますが、
それでもネット初心者には効果があると思います。

トップページにのみ表示、又はサブページにのみ表示させる方法

トップページのみ表示、又はサブページのみ表示させる方法について

FC2ブログで、トップページのみでバナーを表示させたり
又は、サブページのみで表示させたりする方法です。

どちらも『テンプレートの管理』からhtmlに記述します。


トップページのみで表示させたい場合は、
<!--index_area--> ~ <!--/index_area-->

表示させたい部分を囲います。


サブページのみで表示させたい場合は
<!--not_index_area--> ~ <!--/not_index_area-->

同じように表示させたいタグを囲います。


利用方法としては、
アフィリエイトバナーなどを表示させるスペースに
トップページとサブページで違うものを表示させたり、
また、広告でも違うバナーを表示させるなど、

例えば
<div>
<!--index_area-->
<a hrdf="http://~アフィリリンク"><img src="http://~" /></a>
<!--/index_area-->
<!--not_index_area-->
<a hrdf="http://~アフィリリンク(上と違うもの)"><img src="http://~" /></a>
<!--/not_index_area-->
</div>

このように、同じスペースにトップページ用とサブページ用にタグを設定することが可能です。

テキストや文章などもトップページとサブページで違うものを表示させることが出来ます。

記事の下部に表示させる方法

ブログの記事の最後の部分に、よくランキングバナーやアフィリエイトバナーなどを
貼り付けているブログを見かけますが、

これって、その都度ブログの記事に貼り付けていると結構面倒だったりしませんか?


毎回、記事に貼り付ける内容が同じものならば、
htmlから記事下部や上部に、タグやテキストを書き込むことで
表示させることが可能ですし、後の変更や管理も楽です。


まず、FC2BLOGの場合でご説明しますと、

ブログの記事は、テンプレートの設定から
htmlタグ内の<%topentry_body> ←この部分が記事として表示されます。


<%topentry_body>タグの下部に、
アフィリエイトリンクやランキングバナータグなどを記述しておくと
毎回、記事の最後に設定したバナーが表示されます。

<%topentry_body>タグの上に設定した場合は、記事の最初


また、【追記の編集】で記事を書くと
ブログでは、>>続きを読むをクリックして開く部分となります。

この続きを読むの部分は
html内の<%topentry_more>が、“続きを読む”で開くと表示される記事となります。


<!--more-->

追記の上部に表示される部分

<%topentry_more>

追記の下部に表示される部分

<!--/more-->

指定の場所にリンクタグなどを記述しておくと、
続きの記事を開いたときに、指定したバナーやテキストが表示されます。

統一したバナーやテキストであれば、管理も一括してできる為
htmlタグを変更したら、全ての記事のバナーが変更できるので便利です。


因みに基本的にhtmlタグに、文章やバナーを挿入する場合

<p> ~ </p>

上記のように、pタグで囲ってこの部分を一つの段落として示します。

文章の改行は、<br /> と記述します。



また、その他では、

忍者ブログの場合

記事 <!--$entry_text-->

追記部分  <!--$entry_ps_text-->


Seesaaの場合

記事 <% article.entire_body | text_summary(240) %>


htmlの編集(修正)から探してみて下さい。

CSSハックとは…その対応法

CSSハックとは

ブラウザによって表示が異なる問題を解決するテクニックです。

ホームページのみならず、ブログでも
テンプレートやCSS(カスケーディングスタイルシート)のカスタマイズをする場合

SafariやOpera、GoogleChrome、Firefoxなど
IE(インターネットエクスプローラー)以外にも様々なブラウザで観覧している方がいます。


各ブラウザと、IEでは多少CSSの解釈が違うことから
IEだけでテンプレートをカスタマイズすると、
他のブラウザでは、デザインが崩れて表示されることがあり
また、IEのVer.によっても表示がことなります。

この、各ブラウザによる表示が異なる問題を
ブラウザごとにスタイルシートで設定するテクニックをCSSハックと言います。


では、この問題解決の記述を下記に表記しておきますので、
テンプレートをカスタマイズする方は参考にしていただければと思います。


ただ、とは言っても実は1番厄介なのはIE(インターネットエクスプローラー)の
バージョンの違いによってそれぞれ表示が異なる点です。

ご存知のように、一番利用者が多いのはWindowsのIEです。

IEは、バージョンアップするごとに
徐々にその他のブラウザと同じに表示されるようになってきましたが、

IE6以下、IE7、IE8

それぞれ、CSSの解釈が多少異なりますので、
もしあなたが、IE7でテンプレートをカスタマイズした場合
実はIE6では、プラグインが段落ちしていたなんて事は珍しくありません。

また、IEで正しく表示されていても
GoogleChromeやFirefoxなどの他のブラウザで、表示が崩れていたら
検索エンジンから適正な評価を受けられないなんてこともありますので、
できれば、どのブラウザでサイトを観覧しても
同様に表示されるように、しっかりと対策しておきたいところです。


■CSSハック一覧


IE6以下に適用
* html #hack { margin:0px; }

セレクタの前に【* html 】を付ける。


IE7のみ
*:first-child+html #hack { margin:0px; }

セレクタの前に【*:first-child+html】を付ける。


IE7以外のモダンブラウザに適用(Firefox、Safari、Opera、Chrome、IE8)
html>/**/body #hack { margin:0px; }

セレクタの前に【html>/**/body】を付ける。


IEの各バージョンごとの表示チェックは、IE Testerが便利です。


IE Tester
IEを各Ver.別に同時に表示可能なブラウザです。


■その他各ブラウザ
※IE以外の表示確認の為に、どれか1つくらいはインストールしておくと良いと思います。

Google Chrome

Safari

Opera

Firefox


因みに、私の場合はSafariで確認しながらHPを作成して、
最後にIE Testerで各IEの表示を確認してます。

ファビコンの作成と設定方法

ファビコン(Favicon)とは、Favorite icon(フェイバリット・アイコン)の略で

プラウザのアドレスバーに表示されるロゴのような小さな画像のことです。

ファビコン

お気に入りに登録した際にも、
このアイコンが表示される為

このファビコンを設定しておくことによって
読者にブログをお気に入り登録してもらった際に、
複数のブログサイトから、
自分のサイトをわかりやすくアピールできるというメリットもあります^^


ファビコンは、サイズを16×16ピクセルで作成し
拡張子は、一般的な画像ファイルの.jpgや.gif、.pngではなく
ビットマップ形式のアイコンファイルの.icoで作成する必要があります。

16×16ピクセルと画像サイズが小さい為、
ホームページビルダーに付属の
初心者向けの画像作成ソフトなどでは、
画像が荒くなってしまう為、作成には向いてません。


.ico画像はPHOTSHOPで、作成することが出来るのですが、


無料でファビコンを作成出来るサイトもあります。

favicon.cc
Favicon Generator

どちらもサイト上で作成後、そのまま.icoファイルで保存できます、



更に、他の方法としては、
FC2ブログの新しく記事を書く際の上部にある『絵文字エディター』
から作成する方法もあります。

絵文字エディターで作成した画像は、16×16ピクセルなので、
ちょうどサイズもピッタリです^^

ただ、絵文字エディターで作成した画像は、
拡張子がGIFなので、ICOに変換するまでに
2つのフリーソフトを経由する必要があります。


では、その手順を説明します。

■FC2絵文字エディターを利用したファビコンの作成方法

(1) 絵文字エディターで作成します。
(PCに保存してもしなくても良いです)

(2) GIFを一旦PNGファイルへ変換する為にフリーソフトをダウンロード

G・こんばーちゃ♪

このソフトは、ダウンロード後ファイルを解凍
アイコンをクリックしてソフトを起動したら、
拡張子をPNGにチェックを入れて、
(1)で作成した画像をドラッグ&ドロップするだけ
PNGファイルは、一旦PCに保存します。

(3) PNGをICOに変換する為のフリーソフトをダウンロード

@icon変換

ダウンロードしたソフトで、(2)で作成したPNGファイルをICOに変換します。
ICOに変換した画像は、ファイル名を『favicon.ico』として保存します。



■画像をファビコンに設定する方法

FC2ブログ場合
管理画面から『ツール』⇒『ファイルアップロード』
作成した画像をアップロードします。


テンプレートの設定からhtml内に下記のように記述します。

<head>

<link rel="shortcut icon" type="image/x-icon" href="http://~(画像のURL)" />

</head>

このように、htmlの<head> ~ </head>内に記述します。

以上で完了です。
(PCのキャッシュなどの関係から、表示されるまで時間がかかる場合があります)


※ファビコンは、16×16ピクセルとサイズが小さいので、
 シンプルに作成するのがすっきりと見せるコツです。

ランキングサイト

ネット銀行

便利なネットバンクはアフィリエイター必須

口座残高範囲で使用できるクレジットカード機能を備えたデビットカードは、計画的な利用がしやすく便利

最新記事

キーワード検索

プロフィール

タラコ

Name:タラコ

はじめまして^^
ブログ歴・アフィリエイト歴
約3年のタラコが、
初心者でも出来る、
テンプレートの簡単カスタマイズ方法や
SEO対策、パーツやツールなど、
アクセスアップやアフィリエイトに役立つ情報を総合的に紹介しています。


ご意見・ご質問・お問い合わせはこちら
メールフォーム

最新コメント

相互リンク

『テンプレートカスタマイズ』について、説明しています。
ブログ初心者の無料アクセスアップ法

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。