免責事項     


PAGE
TOP

当ファンブログのカスタマイズ記録メモ9  【画面右下に「PAGE TOP」を表示させた】

★当ファンブログのカスタマイズ記録メモ9★

*********************************************************************
■2015.04.13 画面右下に「PAGE TOP」を表示させた。
*********************************************************************
「デザイン設定」→「HTMLの編集」で、下記HTMLを追加。
「デザイン設定」→「CSSの編集」で、下記CSSを追加。
*********************************************************************
【追加HTML】
  <p id='page-top'><a href='#header' title='PAGE TOP'>&#9650;<br/>PAGE<br/>TOP</a></p>

【追加CSS】
/* ▼▼▼追加 PAGE TOP ▼▼▼ */
#page-top {
position: fixed;
bottom: 20px;
right: 15px;
font-size: 100%;
}
#page-top a {
background: #000080;
text-decoration: none;
color: #fff;
width: 55px;
padding: 10px 0;
text-align: center;
display: block;
border-radius: 10px;
}
#page-top a:hover {
text-decoration: none;
background: #F0F;
}

******************************************************************

当ファンブログのカスタマイズ記録メモ8  【左右のサイドバーに「小見出し」を表示】

 ★当ファンブログのカスタマイズ 記録メモ8★
*********************************************************************
■2015.04.02 左右のサイドバーに「小見出し」を表示させた。
*********************************************************************
「デザイン」→「コンテンツ」の「自由形式」で、下記のHTMLを追加。

【追加HTML】
-------------------------------------------------------------------------------
<div style="margin:10px 0 0; border-bottom: 1px solid #0000FF; padding: 4px 0 0px; background-color: #0000ff; color: #ffffff;" > お薦め書籍</div>
-------------------------------------------------------------------------------
【表示例】
見出し画像.PNG

サイドバーの正規の見出しの中の小見出しについて、PCでは正常に表示されていましたが、タブレット端末で見ると、小見出しが2段に表示され乱れていました。なので、タブレット端末でも正しく表示させたいと思い、上記のHTMLに変更しました。

その結果、左の例のように正しく表示されるようになりました。


当ファンブログのカスタマイズ記録メモ7  【ブログの上段部と下段部に、ローテーション広告を表示】

 ★当ファンブログのカスタマイズ 記録メモ7★

***********************************************************************
■2013.08.22 ブログの上段部と下段部に、ローテーション広告を表示させた。
***********************************************************************
「スタイルの編集」→「フリースキンの編集」の「メイン」「ポータル」「アーカイブ」
「1記事」「プロフィール」の各々のHTMLに追加した。

( < を、全角に変更して記載、そうしないと本当のHTMLとして認識し、表示されない為 )
-------------------------------------------------------------------------------
<上段部の表示>
<div id="main" class="clr">
<!--▼▼▼追加20130820▼▼▼-->
<table style="width: 880px;" border="0"><tbody><tr>
<td style="width: 140px;" height="160" align="center" valign="middle" bgcolor="#C90">
 (★ここに、A8netの125×125のバナー広告)
</td>
<td style="width: 730px;" height="150" align="left" valign="middle" bgcolor="#C90" >
 (★ここに、A8netの728×90ローテーション広告)
</td></tr>
<tr>
<td style="width: 140px;" align="center" valign="middle">
</td>
<td style="width: 730px;" align="left" valign="middle">
<br />.
</td>
<tr>
<td style="width: 140px;" align="center" valign="middle">
</td>
<td style="width: 730px;" align="left" valign="middle">
 (★ここに、Google Adsenseのリンク広告728)
<br />.
</td></tr>

<td style="width: 140px;" align="center" valign="middle">
</td>
<td style="width: 730px;" align="left" valign="middle">
<p align="right">
<a title="免責事項" href="http://fanblogs.jp/sandi/category_21/" target="_blank">       免責事項       </a>
</td>
</tr></tbody></table>
<!--▲▲▲▲▲▲-->
<div id="wrapper" class="clr">
-------------------------------------------------------------------------------
<下段部の表示>
<div id="footer">
<!--▼▼▼追加20130820▼▼▼-->
<br />
 (★ここに、Google Adsenseのリンク広告728)
<br /><br />
 (★ここに、A8netの728×90ローテーション広告)
<br /><br /><br />
<address> Copyright © <a href="http://www.sandi-hp.com/">
無料Webサイト構築サポート (エス・アイ・コム)</a> All rights reserved. </address>
<p style="text-align:right"><a href="#header" title="このページの先頭へ">このページの先頭へ</a></p>
<br /><br />
<!--▲▲▲▲▲▲-->
</div><!-- /footer -->

当ファンブログのカスタマイズ記録メモ6  【「ブログタイトル」および「記事タイトル」に マウスオーバー時、水色(#0FF)を表示】

///////////////////////////////////////////////////////////////////////////////////////////////////////
 ★当ファンブログのカスタマイズ 記録メモ6★
///////////////////////////////////////////////////////////////////////////////////////////////////////

**********************************************************************
■2013.08.19 「ブログタイトル」および「記事タイトル」に
マウスオーバー時、水色(#0FF)を表示すると見やすいので、
下記のように、CSSプロパティを変更・追加。
**********************************************************************
----------------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「スタイルシート」のCSSを変更と追加(赤字の部分)
----------------------------------------------------------------------
<ブログ タイトル>

/* ★変更20130819*/
h1#blogTitle a:hover {
color:#0FF;
}

----------------------------------------------------------------------
<記事タイトル>

#entries h2.entryTitle a:hover {
color: #FFF;

/* ★追加20130819 */
color: #0FF;

}

----------------------------------------------------------------------
<補足>
記事タイトルは、color: #FFF; が、元々の色(白)で、color: #0FF; の色(水色)にした。
CSSプロパティは、後の方が優先されるので、元のcolor: #FFF; も残した。

----------------------------------------------------------------------

当ファンブログのカスタマイズ記録メモ5  【記事の最後に「このページの先頭へ」を表示させた】

/////////////////////////////////////////////////////////////////////////////////////////////////////////
 ★ファンブログのカスタマイズ記録メモ5★
/////////////////////////////////////////////////////////////////////////////////////////////////////////
***************************************************************
■2013.08.18 記事の最後に「このページの先頭へ」を表示させた。
-------------------------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「メイン」のHTMLに追加(赤字の部分)
-------------------------------------------------------------------------------
( < を 全角に変更して記載、そうしないと本当のHTMLとして認識し、表示されない為 )

<div id="nextprev"> と </div><!-- nextprev -->の間に、下記のHTMLを追加した。

<div id="nextprev">
<!--▼▼▼追加20130818▼▼▼-->
<p style="text-align:right"><a href="#header" title="このページの先頭へ">このページの先頭へ</a></p>

</div><!-- nextprev -->

当ファンブログのカスタマイズ記録メモ4  【ブログ内の画像のマウスオーバー時、半透明にする】

///////////////////////////////////////////////////////////////////////////////////////////////////////

 ★当ファンブログのカスタマイズ 記録メモ4★

///////////////////////////////////////////////////////////////////////////////////////////////////////

画像にマウスオーバー時、半透明にすると、その画像を選択したことが
分かりやすくなるので、下記のように、CSSプロパティを追加しました。

また、コメントに更新日付を追加。 /* ★追加20130811*/ というように。

***************************************************************
■2013.08.11 ブログ内の画像のマウスオーバー時、半透明にする 
----------------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「スタイルシート」のCSSに追加(赤字の部分)
----------------------------------------------------------------------

/* リンクの色と装飾 */
a:link { color:#000066;text-decoration:underline; }
a:visited { color:#4D7AE0; text-decoration:underline; }
a:hover { color:#4D7AE0; text-decoration:none; }
a:active { color:#4D7AE0; text-decoration:none; }

/* ★追加20130811*/
a:hover img {
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}

-------------------------------------------------------------------------
<解説>

(1)a:hover img {
aというタグ(リンクが貼られている)の上に
マウスを置いた(hover)イメージファイル(img)は

(2)opacity: 0.5;
透過度を0.5にする。(0.0:完全に透明。1.0:完全に不透明)

(3)filter: alpha(opacity=50);
IE専用の命令で、(2)と同じ意味

(4)-moz-opacity: 0.5;
}
FireFox専用の命令で、(2)と同じ意味

-------------------------------------------------------------------------
<補足>

filterプロパティは、Windows版Internet Explorerが独自に追加したプロパティ

 IE4以上の書式例

   filter:フィルタ名(必要な値)
   Alpha()・・・・・透過表示にする

***************************************************************

当ファンブログのカスタマイズ記録メモ3  【「私のWebサイト」のバナーを表示】

左サイドバーに、「私のWebサイト」のバナーを表示させました。

この内容は、カスタマイズではありませんが、一応、カスタマイズのカテゴリで記載します。

左サイドバーのリンク集の下に、下記の「私のWebサイト」のバナーを表示したいと考え、下記方法で作成すると、うまく表示されましたので、記録メモ3として残しておきます。



当ブログは、ファンブログという、アフィリエイトASPのA8.NETが提供している無料ブログを利用しています。

なので、画像のバナーを表示させる場合、事前にファンブログのサーバーに画像をアップロードしておく必要があります。

しかし、困ったことにファンブログには画像を個別にアップロードする機能がありません。
そこで、一旦、通常の記事の中で画像を紹介する形で取り込んで、その画像を使用することにしました。


ちなみに画像の作成は、最近、リリースされた、「Active Clip lite」を使用しました。
(SONYのWindows7搭載VAIO用の画像切り抜きソフト)

このソフトは、非常に優れもので便利です。
PC画面の好きな場所を自由に、その場ですぐに作成することが出来ます。

以前は、F12キーの右にあるPrtScキーを押して、ペイントに張り付けて加工するという面倒な方法か、スクリーンショットの無料オンラインツールで作成していました。



さて、本題ですが、次の手順と方法で表示させました。

@画像を作成
Aファンブログの記事に画像を紹介

B記事の画像の上で、マウスを右クリッツクし「画像URLをコピー」を選択
Cメモ帳にそのURLを張り付ける(下記内容)
http://fanblogs.jp/sandi/file/88/joSCzFdlYoNUg0ODZzIwMIF-MTI0NQg.PNG

DそのURLを利用して、下記のように作成。
(尚、 < は 大文字の < に変更して記載します。そうしないと、この記事に表示されない為。
また、http://www.sandi-hp.com は、私のWebサイトのURLです。)

<a href="http://www.sandi-hp.com" target="_blank">
<img border="0" width="200" height="124" alt="" src="
http://fanblogs.jp/sandi/file/88/joSCzFdlYoNUg0ODZzIwMIF-MTI0NQg.PNG
"></a>

E上記のHTMLタグを、左サイドバーに追加
ファンブログの場合、「コンテンツ設定」の中の「項目の追加・編集」で追加する。

以上の方法は、もしかすると、他のブログでも応用できるのかも知れません。

当ファンブログのカスタマイズ記録メモ2  【ブログタイトルのマウスオーバー時、赤くする】 【文字を大きくし、行間を広げた】

///////////////////////////////////////////////////////////////////////////////////////////////////////

 ★当ファンブログのカスタマイズ 記録メモ2★

///////////////////////////////////////////////////////////////////////////////////////////////////////

***************************************************************
■2013.07.31 ブログタイトルのマウスオーバー時、赤くする 
---------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「スタイルシート」のCSSを変更(赤字の部分)
---------------------------------------------------------------

/* ブログタイトルと説明文 */
h1#blogTitle a {
color: #FFF;
}

/* ★変更*/

h1#blogTitle a:hover {
color:red;
}

***************************************************************
■2013.07.31 文字を大きくし、行間を広げた
---------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「スタイルシート」のCSSに追加(赤字の部分)
---------------------------------------------------------------

/* 3 column multi */

body#multi #content {
float: right;
width: 490px;
margin: 0;
padding:0;
display: inline; /* for IE6 */
_overflow:hidden;/* for IE6 */

/* ★追加 */

font-size:120%;
line-height:160%;


}

***************************************************************


当ファンブログのカスタマイズ記録メモ1  【眼に優しくする為、メイン部の背景に少し色を付けた】 【リンクのマウスオーバー時、赤にする】 【見出しの文字を少し大きくした】 【メイン部の上に、広告を表示させた】

///////////////////////////////////////////////////////////////////////////////////////////////////////

 ★ファンブログのカスタマイズ(カストマイズとも言う)記録メモ★

///////////////////////////////////////////////////////////////////////////////////////////////////////

***************************************************************
■2013.07.30 サンタの部分を隠す 
---------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「スタイルシート」のCSSを変更(赤字の部分)
---------------------------------------------------------------
/* ヘッダー背景 */
#header{
background:url(http://fanblogs.jp/image/blog/xmas_b3/img-head.jpg) top no-repeat;
height:90px;
}

***************************************************************
■2013.07.30 眼に優しくする為、メイン部の背景に少し色を付けた
---------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「スタイルシート」のCSSを変更(赤字の部分)
---------------------------------------------------------------
/* レイアウトごとの設定 */

/* 3 column multi */
body#multi #main {
margin:0;
}
body#multi #container {
width: 880px;
margin: 0 auto;
background: #F6F6F6;
}

***************************************************************
■2013.07.30 リンクのマウスオーバー時、赤にする
---------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「スタイルシート」のCSSを追加(赤字の部分)
---------------------------------------------------------------
/* リンクの色と装飾 */
a:link { color:#000066;text-decoration:underline; }
a:visited { color:#4D7AE0; text-decoration:underline; }
a:hover { color:#4D7AE0; text-decoration:none; }
a:active { color:#4D7AE0; text-decoration:none; }

/* ★追加*/
a:hover {
color: red;
}


***************************************************************
■2013.07.30 見出しの文字を少し大きくした
---------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「スタイルシート」のCSSを変更(赤字の部分)
---------------------------------------------------------------
/* 見出しの初期設定 */
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
margin: 0.5em 0;
}

/* ★変更*/

h1 {
font-size: 180%;
}
h2 {
font-size: 156%;
}
h3 {
font-size: 138%;

}


***************************************************************
■2013.07.30 メイン部の上に、広告を表示させた
---------------------------------------------------------------
「スタイルの編集」→「フリースキンの編集」の中の
「メイン」のHTMLに追加
---------------------------------------------------------------
( < を 全角に変更して記載、そうしないと本当のHTMLとして認識し表示されない為 )

<div id="main" class="clr"> と <div id="wrapper" class="clr">
の間に、下記のように広告バナーを含むHTMLを追加した。


<div id="main" class="clr">

<!--▼▼▼▼▼▼-->
<table style="width: 870px;" border="0">
<tbody><tr>

<td style="width: 140px;" align="center" valign="middle">

ここに、125×125の広告バナーを追加

</td>

<!--▼▼▼▼▼▼-->
<td style="width: 730px;" align="left" valign="middle">

<p>★★★★★★アフィリエイト通信講座★今ならお得です。★★★★★★</p>

ここに、728×90の広告バナーを追加

</td></tr>
<tr>

<!--▼▼▼▼▼▼-->
<td style="width: 140px;" align="center" valign="middle">

</td>

<!--▼▼▼▼▼▼-->
<td style="width: 730px;" align="left" valign="middle">

ここに、アドセンスのリンク広告728×15を追加

</td></tr>
<tr>

<!--▼▼▼▼▼▼-->
<td style="width: 140px;" align="center" valign="middle">

</td>

<!--▼▼▼▼▼▼-->
<td style="width: 730px;" align="left" valign="middle">

<br />

<p align="right">
<a title="免責事項" href="http://fanblogs.jp/sandi/category_21/" target="_blank">免責事項</a>

 </td>

</tr></tbody></table>

<!--▲▲▲▲▲▲-->

<div id="wrapper" class="clr">

***************************************************************
   
検索
検索語句

 広告 





 広告 













 運営サイト
@アルミ風チカ画バナー200×40.gif
 運営ブログ2
幸せへの手引き・バナー
 運営ブログ3
STAP騒動の正しい解説
 運営ブログ4
本田健の人生相談ナビ200.jpg


最新記事

 広告 

自分を不幸にしない13の習慣、今なら限定価格!

 広告 



 広告 

初回限定980円

美顔器!>>エステナードソニック<<

ブログ感覚で手軽にお店のホームページ作成「グーペ」
独自ドメイン対応・モバイルショップ・ショップブログ・集客プロモーション・動画表示など、様々な機能がある MakeShopでは、月額0円から始められます!
【簡単更新&こだわりデザイン!】
100% ホームページ プチ


minne(ミンネ)はハンドメイド作品のオンラインマーケットです。 手作り作品のネット販売が、月額利用料「0円」で行えます。

paperboy&co.運営のレンタルサーバー『ヘテムル』がスペックアップ! 独自ドメイン、データベース、FTP アカウントの設定数の上限を、 以下のようにに変更いたしました。
・独自ドメイン設定数の上限: 50個 → 無制限!
・データベース作成数の上限: 50個 → 100個
・サブ FTP アカウント作成数の上限: 2個 → 50個
ドメインや WEB サイトをたくさんお持ちの方は運用コストの削減が図れます。
『heteml(ヘテムル)』レンタルサーバーはこちら
ホームページ作成

  楽天の人気商品です。

ロリポップ!レンタルサーバー!はあなたの「やってみたい!」を応援します!
ロリポップ!なら、ホームページ、ブログ、ネットショップ…
これらが今すぐ、そして簡単にできちゃう!
マニュアルやライブチャットを完備しているので、ホームページ初心者でも安心。
これだけついてるのに月額105円〜ととってもお得。
もちろん無料のお試し期間も10日間あるので安心ですね。
ショッピングカートASP業界でNo.1の店舗数 カラーミーショップ
年間580円からの格安ドメイン取得サービス─ムームードメイン─
一ヶ月あたり99円から利用可能!エクストリムレンタルサーバー
フルカラー名刺100枚320円。今なら送料無料特典付き
1000以上のデザインから選べる。写真/ロゴアップロード可。








プロフィール

キーです
夢を叶える名言

presented by 地球の名言


ペットのおうち

 広告 




Gポイント

  お薦め動画(無料)

全世界で爆発的ヒット映画
『ザ・シークレット』始めの20分間です。

思考と感情があなたの人生を創っています。

下記の画像をクリックすると、動画サイトへ飛びます。(無料)
ザ・シークレット160.jpg

  お薦め DVD

全世界で800万枚(2012年現在)突破の大ヒットDVD。

『ザ・シークレット』の公式日本語版。

その映像は書籍化され、2300万部もの大べストセラー。

現在もなお読者を増やしています。(時間: 91 分)

THE SECRET [DVD]

新品価格
¥3,820から
(2015/3/18 23:35時点)


 お薦め書籍

お金、健康、人間関係、幸せ、など

人生のあらゆる面において「シークレット」をどのように使うかを学べる本です。

ザ・シークレット

中古価格
¥166から
(2015/3/2 09:47時点)


  お薦め DVD

「引き寄せの法則」シリーズ中、最高傑作の呼び声が高いDVDです。

ジェリー・ヒックス氏の他界により、夫妻名義では最後の作品。

20年以上に渡り開催された「引き寄せの法則」ワークショップの集大成とも言うべき濃密な講義がこのDVDです。(時間: 207 分)

引き寄せの法則 ヴォルテックス (2枚組) [DVD]

新品価格
¥5,019から
(2015/3/2 09:22時点)


  お薦め DVD

「ザ・シークレット」をはじめ、引き寄せの法則ブームを作った「エイブラハムの教え」のDVDです。

米国での「引き寄せの法則ワークショップ」の内容が完全収録されています。(時間: 85 分)

お金と引き寄せの法則 富と健康、仕事を引き寄せ成功する究極の方法 [DVD]

新品価格
¥3,300から
(2015/3/22 09:33時点)


 広告 





リマーユヘアシャンプー
投票いただけると嬉しいです。(^o⌒*) /

人気ブログランキング


アクセスカウンター

  お薦め動画 (無料)

中島みゆき 公式動画







 広告 



HP製作
記事一覧


ブログランキング・にほんブログ村へ
にほんブログ村


 広告 

利用金額の最大
100%ポイントバック♪

カテゴリアーカイブ
月別アーカイブ

 広告 

WISDOM

 
リンク集

はじける星屑

QRコード
http://fanblogs.jp/sandi/index1_0.rdf


 広告