ここでは、レンタル無料ブログサービス比較での 2006年 01月 に掲載した記事を表示しています。
--/--/--(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006/01/30(月)
プロとして恥ずかしくないスタイルシートの大原則

プロとして恥ずかしくないスタイルシートの大原則 プロとして恥ずかしくないスタイルシートの大原則
(2006/01)
MdN  価格: ¥ 1,890 (税込み)
この商品の詳細を見る

内容紹介
CSSの基礎知識から文字装飾、ページデザインの基本と実践までわかりやすく図解。さらにXHTMLやJavaScriptの基本と応用など、Web作成のノウハウをマスターできる一冊

出版社 / 著者からの内容紹介
Webデザイナーなら覚えておきたいスタイルシートをこれ1冊で総復習
XHTML+CSSベースでWebページを作成するために必要な基本的な知識から実例までを1冊にまとめたWebデザイナー向けの解説本です。これからのWebページ作成は、XHTML+CSSがスタンダードとなってくることはまちがいありません。一見難しそうな印象を受けてしまうCSSですが、正しいルールに基づいて作成すれば簡単に理解できるはず。本書ではCSSを中心に、基本的な使い方や役立つTipsを解説。また、CSSの対となるXHTMLや、Webページを1ランクアップするJavaScriptについての基本的な解説や実践も掲載しています。読んで理解するだけでなく、実際に応用できるプロ必携の1冊です。

▼関連カテゴリー
 ※スタイルシート(CSS)
 ※HTML タグ 関連解説
 ※JavaScript (ジャバスクリプト)
 ※ブログ カスタマイズ 方法
[スタイルシート(CSS)の大原則]の続きを読む
スポンサーサイト

タグ : スタイルシート CSS

2006/01/29(日)
livedoor Blogではじめてのブログ―世界一簡単&オシャレ!! livedoor Blogではじめてのブログ―世界一簡単&オシャレ!!
(2006/01)
千舷社  価格:¥ 1,764 (税込み)
 ※この本の詳細を見る

本の説明
今や「ブログ」はインターネットの常識。「よくわからないけどブログをはじめたい」という人のために、会員登録とブログの基本設定、基本的な記事の投稿、一歩進んだ記事の投稿など、図解のとおりに進めればわかるように構成。

ポータルブログ別解説本
 ● さすが!と言わせる FC2ブログ徹底攻略術
 ● とっておきの秘技 ライブドアブログを120%使いこなす秘伝書
 ● livedoor Blog(ライブドアブログ)解説本
 ● できるブログ gooブログ対応 解説本
2006/01/28(土)
文字サイズや色、行間隔などを変更するには、「テンプレートの設定」「スタイルシートの編集」にて、各、該当するブロックの文字サイズ指定箇所を変更して頂く必要があります。

ブログ全体の文字サイズや色、行間隔などを変更するには

body{
font-size: 12px; // 文字サイズ
color: #333333; // 文字色
line-height: 130%; // 行間隔
text-align: center; // テキスト配置位置
}

エントリー本文の文字サイズや色、行間隔などを変更するには
 ※ブログ全体の指定を引き継ぐ場合には設定の必要はありません

.mainEntryBlock {
font-size: 13px; // 文字サイズ
color: #555555; // 文字色
line-height: 130%; // 行間隔
text-align: left; // テキスト配置位置
}

メニュー枠の文字サイズや色、行間隔などを変更するには
 ※ブログ全体の指定を引き継ぐ場合には設定の必要はありません
 ※3カラムの場合には「.menu2BlockBase」も設定する必要がある場合もあります

.menu1BlockBase {
font-size: 13px; // 文字サイズ
color: #555555; // 文字色
line-height: 130%; // 行間隔
text-align: left; // テキスト配置位置
}

2006/01/27(金)
文字をスクロールさせます

タイトルやサブタイトル(サイト説明文)などに使うと効果的です。

文字の大きさ20px、赤色指定
 ↑
<MARQUEE style="font-size:20px;color:#ff0000;padding:5px;">文字の大きさ20px、赤色指定</MARQUEE>

スクロールの速さを指定する
 ↑
<marquee scrollamount="5" scrolldelay="50" behavior="scroll"
loop="0">スクロールの速さを指定する</marquee>

 ※scrollamount="5" 数値を大きくするとスクロールの速度が速くなります
 ※scrolldelay="50" 数値を小さくするとスクロールの速度が速くなります

1度だけ動かし、スクロールを止める(※IE のみ有効)
 ↑
<marquee scrollamount="5" scrolldelay="50" behavior="slide"
loop="1">1度だけ動かし、スクロールを止める(※IE のみ有効)</marquee>
 ※サンプルページ

2006/01/25(水)
▼ランダム画像表示スクリプト

<SCRIPT language="JAVASCRIPT">
<!--
Se=Math.floor(Math.random()*10);
if(Se==0||Se==1){Se1="0";}
if(Se==2||Se==3){Se1="1";}
if(Se==4||Se==5){Se1="2";}
if(Se==6||Se==7){Se1="3";}
if(Se==8||Se==9){Se1="4";}

Co=new Array(5);
ga=new Array(5);

Co[0]="http://www.amazon.co.jp/exec/obidos/ASIN/4798010332/wonderland-22?dev-t=DVZ02IW2V71DT%26camp=2025%26link_code=xm2"; // リンク先0
ga[0]="http://images-jp.amazon.com/images/P/4798010332.09.MZZZZZZZ.jpg"; // 表示画像0

Co[1]="http://www.amazon.co.jp/exec/obidos/ASIN/4896272714/wonderland-22/"; // リンク先1
ga[1]="http://images-jp.amazon.com/images/P/4896272714.09.MZZZZZZZ.jpg"; // 表示画像1

Co[2]="http://www.amazon.co.jp/exec/obidos/ASIN/4798108987/wonderland-22?dev-t=DVZ02IW2V71DT%26camp=2025%26link_code=xm2"; // リンク先2
ga[2]="http://images-jp.amazon.com/images/P/4798108987.09.MZZZZZZZ.jpg"; // 表示画像2

Co[3]="http://www.amazon.co.jp/exec/obidos/ASIN/4839916543/wonderland-22?dev-t=DVZ02IW2V71DT%26camp=2025%26link_code=xm2"; // リンク先3
ga[3]="http://images-jp.amazon.com/images/P/4839916543.09.MZZZZZZZ.jpg"; // 表示画像3

Co[4]="http://www.amazon.co.jp/exec/obidos/ASIN/4798010928/wonderland-22?dev-t=DVZ02IW2V71DT%26camp=2025%26link_code=xm2"; // リンク先4
ga[4]="http://images-jp.amazon.com/images/P/4798010928.09.MZZZZZZZ.jpg"; // 表示画像4

document.write('<A href="'+Co[Se1]+'">');
document.write('<IMG src="'+ga[Se1]+'" border="0"></A>');
// -->
</SCRIPT>
2006/01/20(金)
代替文字とは画像がうまく表示されないときのために画像(IMGタグ)の「alt属性」に記述する文字の事を言います。(下部参照)
 代替文字
しかし、下記のように背景色が代替文字と同じような色の場合、代替文字が認識しずらくなってしまいます。
代替文字

このような場合の対処方法として代替文字に対して文字色を指定する方法があります。

代替文字に対して文字色を指定する方法(スタイルシート)

<div style="color:#fff;">
<img src="画像.gif"
alt="代替文字" width="100" height="30" border="0">
</div>

 ※上記のソースでは、文字色として白色を指定しています。

表示例
代替文字

背景色に濃い色を使っている場合などは、代替文字に文字色を指定すると良いでしょう。

2006/01/16(月)
背景画像を指定するスタイルシートとフリー素材(背景画像)

■背景画像を指定するスタイルシート

body{
background: #ff8833 url("背景イメージへのパス") fixed;
}

 #ff8833 背景画像が表示されない場合、ここで指定した背景色を表示
 fixed 背景画像を固定する場合に使用

自作背景画像(拡大表示)
 画像をクリックすると、実際の背景イメージをご覧いただけます。
 ほとんどのイメージが1kバイト以下の軽い画像です。ご自由にご利用ください。
 ※ただし、直リンクは厳禁です。必ずダウンロードしてご利用下さい。

HTMLリファレンス - カラー編(RGB)
※備考;RGBとは
 コンピュータで色を表現する際に用いられる表記法の一つ。
 色を赤(R)・緑(G)・青(B)の3つの色の組み合わせとして表現する。
 この3色は光の三原色と呼ばれ、この組み合わせですべての色を表現できます
2006/01/15(日)
■リンクする要素に対してスタイルを適用します
/* 記述例 */
a {
text-decoration: underline; color:#0000ff;
}

リンクするテキストにアンダーラインを表記し、青字で表示する
(underline ⇒ none ;アンダーラインを表記しない)

■リンクする要素のうち、未閲覧(キャッシュされていない)要素に対してスタイルを適用します
/* 記述例 */
a:link {
color : #ff6633!important;
}
(important=サイト制作者のスタイルよりもユーザーが設定した色を優先する)

■リンクする要素のうち、閲覧済(キャッシュされている)要素に対してスタイルを適用します
/* 記述例 */
a:visited {
color : #ff8800 !important; text-decoration: none;
}

閲覧済リンクテキストにアンダーラインを表記せず、オレンジ色で表示する

■リンクする要素のうち、未閲覧(キャッシュされていない)要素に対してスタイルを適用します
/* 記述例 */
a:hover {
color : #ff0000 !important; text-decoration: underline;
}

未閲覧リンクテキストにアンダーラインを表記し、赤色で表示する

■カーソルをその要素の上に置いているが、まだアクティブ状態でない時のスタイル
/* 記述例 */
a:hover {
color : #ff3333 !important; text-decoration: underline;
}

■アクティブ状態にされた時(クリックした時)のスタイル
a:active {
color : #ffff00 !important;
}
2006/01/14(土)
フォント(文字)装飾 - モザイク文字

▼ソース
<DIV STYLE='WIDTH:400px;FONT-SIZE:24pt;padding:5px;FONT-WEIGHT:bold;
FONT-FAMILY:Times New Roman; COLOR:#0000FF; FILTER:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=2)'>無料ブログSEOテンプレート</DIV>

  ※モザイクの強さ: maxsquare

▼実行例
無料ブログSEOテンプレート



ブログ:スタイル シート(CSS)
2006/01/13(金)
フォント(文字)装飾 - 波打ち文字

▼ソース
<DIV STYLE='WIDTH:400px;FONT-SIZE:25px;padding:5px;FONT-WEIGHT:bold;
FONT-FAMILY:Times New Roman; COLOR:#0000FF; FILTER:progid:DXImageTransform.Microsoft.Wave(ad=0,freq=5,lightstrength=30,phase=4,strength=2)'>ブログ
テンプレート カスタマイズ</DIV>

 ※波の数:phase ※光の強弱:lightstrength ※波の幅:strength

▼実行例
ブログ テンプレート カスタマイズ


ブログ:スタイル シート(CSS)
2006/01/12(木)
フォント(文字)装飾 - 発光文字

▼ソース
<DIV STYLE='WIDTH:400px;FONT-SIZE:26px;padding:5px;FONT-WEIGHT:bold;FONT-FAMILY:Times
New Roman;COLOR:#FF0000;FILTER:progid:DXImageTransform.Microsoft.Glow(color=#FFEE20,strength=10)'>ブログ
テンプレート カスタマイズ</DIV>

  ※発光の強さ: strength

▼実行例
ブログ テンプレート カスタマイズ



ブログ:スタイル シート(CSS)
2006/01/11(水)
フォント(文字)装飾 - 影付き文字

▼ソース
<DIV STYLE='WIDTH:400px;FONT-SIZE:26px;padding:5px; FONT-WEIGHT:bold; FONT-FAMILY:Times
New Roman; COLOR:#FF0000; FILTER:progid:DXImageTransform.Microsoft.shadow(color=#aaaaaa,direction=135,strength=6)'>ブログ
テンプレート カスタマイズ</DIV>

▼実行例
ブログ テンプレート カスタマイズ


影の方向: direction  影の長さ: strength
2006/01/11(水)
CSSとはカスケーディング・スタイルシート(Cascading Style Sheets)の略で、HTMLで定義されるWebコンテンツの視覚的な表現を指定するための仕組みのことです。

HTMLファイルのHTMLタグに、スタイルシートで、「フォントの大きさ」や「文字の色」などのホームページの見た目に関する記述を埋め込みプラウザ上で表現します。

また、HTMLファイルとは別に「~.css」というファイルを作成し、 HTMLファイルからこの「~.css」ファイルを読み込むことでスタイルシートを適用させることもできます。(外部スタイルシート)

外部スタイルシートを利用すれば、ホームページを模様替えする時に一括で変更でき、また、統一したホームページで作成できるので、ホームページの管理が非常に楽になります。

CSSファイル(外部スタイルシート)を別途設置することにより「.htmlファイル」が簡素化され『SEO:検索エンジン最適化』の効果もあがります。

2006/01/08(日)
ライブドアブログでは、デフォルトの状態だと、同じ日に投稿した記事は、同一枠内に区切りなしに表示されてしまいます。このままだと、記事の区別がつきにくいので、同日投稿でも記事の区切りができるようにしてみましょう。

まず、管理画面「デザインの設定」より、「トップページ」をクリックして、HTML の編集画面を表示し、以下の青字の部分(上部にあり)を探します。

  --- 上部略 ---
<div id="content">
<div class="blog">

<!-- Loop Start -->
<IndexArticlesLoop>

<$TrackBackAutoDiscovery$>
<IfDateChanged><h2 class="date"><$ArticleDate$></h2></IfDateChanged>

<div class="blogbody">

  --- 以下略 ---

h2タグを挟んでいる、<IfDateChanged>と</IfDateChanged> の部分を削除します。

これで、同日投稿でも記事の区切りができるようになります。

アクセスアップSEO対策リンク集 (※現在、休止中)
2006/01/07(土)
FC2ブログ サポートフォーラム
 ※FC2ブログに関するサポートフォーラムです。
   わからない事があったら、まず、こちらで調べてみてください。

FC2からのお知らせ
 ※FC2からの一般的なお知らせやメンテナンス・障害の際のお知らせ

一般カテゴリー
  FAQ・よくある質問 (質問する前にチェック)
  質問掲示板 (FC2ブログに関する質問フォーラム)
  不具合・要望掲示板 (不具合と思われるもの・要望等はこちら)

デザイン・カスタマイズ
  テンプレート掲示板 (テンプレートのカスタマイズはこちら)
  カウンター・アクセス解析掲示板 (カウンター・アクセス解析等の話題はこちら)
  その他ブログパーツ掲示板 (ブログパーツ等の話題はこちら)

その他
  雑談掲示板 (話題や雑談はこちら)
  ブログ宣伝掲示板 (FC2ブログの宣伝が可能)


ブログ カスタマイズ 方法
2006/01/02(月)
FC2ブログ共有テンプレート登録BLOGテンプレート
 ※2カラム;右メニュー(風水;2006年ラッキーカラー)

123_luck_2rmの特徴
 ※2カラム;右メニュー(プラグイン対応、枠可変タイプ)
  (プラウザの状況にメニュー枠と記事部分枠の幅が変化)
 ※トップページにのみ表示されるフリーエリアを設置
 ※2006年のラッキーカラー(ゴールド・ラベンダー色・ワインレッド)3色を使用
  *参考記事;2006年 Dr.コパの風水のバイオリズム

123_luck_2rm  ※123_luck_2rm プレビュー

記事にご満足頂けましたら、クリックをお願い致します
  人気blogランキングへ  FC2 ブログ ランキング

  FC2ブログをはじめよう!>>>登録はこちら*

SEO対応ブログ テンプレート無料会員募集中
  ※アフィリエイトの収入アップにSEO対策は必須です!

  無料ブログ比較・評価&サンプルblog
  ※アクセスアップ SEO対策同好会
  ※ホームページ作成講座
2006/01/02(月)
FC2ブログ共有テンプレート登録BLOGテンプレート
 ※左メニュー(風水;2006年ラッキーカラー)

122_luck_2lmの特徴
 ※2カラム;左メニュー(プラグイン対応、枠可変タイプ)
  (プラウザの状況にメニュー枠と記事部分枠の幅が変化)
 ※トップページにのみ表示されるフリーエリアを設置
 ※2006年のラッキーカラー(ゴールド・ラベンダー色・ワインレッド)3色を使用
  *参考記事;2006年 Dr.コパの風水のバイオリズム

122_luck_2lm  ※122_luck_2lm プレビュー

記事にご満足頂けましたら、クリックをお願い致します
  人気blogランキングへ  FC2 ブログ ランキング

  FC2ブログをはじめよう!>>>登録はこちら*

SEO対応ブログ テンプレート無料会員募集中
  ※アフィリエイトの収入アップにSEO対策は必須です!

  無料ブログ比較・評価&サンプルblog
  ※アクセスアップ SEO対策同好会
  ※ホームページ作成講座

2006/01/02(月)
FC2ブログ共有テンプレート登録BLOGテンプレート
 ※(風水;2006年ラッキーカラー)

121_luck_3cの特徴
 ※3カラム;(プラグイン対応、枠固定タイプ)
 ※トップページにのみ表示されるプラグイン3を使ったフリーエリアを設置
 ※2006年のラッキーカラー(ゴールド・ラベンダー色・ワインレッド)3色を使用
  *参考記事;2006年 Dr.コパの風水のバイオリズム

121_luck_3c  ※121_luck_3c プレビュー

記事にご満足頂けましたら、クリックをお願い致します
  人気blogランキングへ  FC2 ブログ ランキング

  FC2ブログをはじめよう!>>>登録はこちら*

SEO対応ブログ テンプレート無料会員募集中
  ※アフィリエイトの収入アップにSEO対策は必須です!

  無料ブログ比較・評価&サンプルblog
  ※アクセスアップ SEO対策同好会
  ※ホームページ作成講座
2006/01/02(月)
FC2ブログ共有テンプレート登録BLOGテンプレート
 ※(120_gray3ca;3カラム)

特徴
 ※3カラム;(プラグイン対応、枠固定タイプ)
 ※トップページにのみ表示される「フリースペース」をメニュー上部設置
 ※トップページにのみタイトルがバウンド表示します。

120_gray3ca  ※120_gray3ca プレビュー

記事にご満足頂けましたら、クリックをお願い致します
  人気blogランキングへ  FC2 ブログ ランキング

SEO対応ブログ テンプレート無料会員募集中
  ※アフィリエイトの収入アップにSEO対策は必須です!

  FC2ブログをはじめよう!>>>登録はこちら*

  無料ブログ比較・評価&サンプルblog
  ※アクセスアップ SEO対策同好会
  ※ホームページ作成講座
2006/01/02(月)
FC2ブログ共有テンプレート登録BLOGテンプレート
 ※(118_sakura3ca;3カラム)

特徴
 ※3カラム;(プラグイン対応、枠固定タイプ)背景イメージは桜
 ※トップページにのみ表示される「フリースペース」をメニュー上部設置

118_sakura3ca  ※118_sakura3ca プレビュー

SEO対応ブログ テンプレート無料会員募集中
  ※アフィリエイトの収入アップにSEO対策は必須です!

記事にご満足頂けましたら、クリックをお願い致します
  人気blogランキングへ  FC2 ブログ ランキング

  FC2ブログをはじめよう!>>>登録はこちら*

  無料ブログ比較・評価&サンプルblog
  ※アクセスアップ SEO対策同好会
  ※ホームページ作成講座
2006/01/01(日)
FC2ブログ共有テンプレート登録BLOGテンプレート
 ※(110_pink-3ca;3カラム)

特徴
 ※3カラム;(プラグイン対応、枠固定タイプ)背景はピンクのハート
  (バレンタインデー用にいかがでしょう?)
 ※トップページにのみ表示される「フリースペース」を設置
 ※meta タグの赤字部分は、ご自身で編集して頂く必要があります。
  <meta name="keywords" content="keywords,キーワード記入"/>
  (重要なキーワードを記入;多すぎるとSEO逆効果;最高でも10個以内)
  特に SEO を意識しない方は、そのまま修正しなくても、差し支えございません。

110_pink-3ca  ※110_pink-3ca プレビュー

記事にご満足頂けましたら、クリックをお願い致します
  人気blogランキングへ  FC2 ブログ ランキング

  FC2ブログをはじめよう!>>>登録はこちら*

  無料ブログ比較・評価&サンプルblog
  ※アクセスアップ SEO対策同好会
  ※ホームページ作成講座
2006/01/01(日)
◎SEO対策仕様blogテンプレートを利用していただける会員様を募集致します。

無料ブログ テンプレート カスタマイズで公開させて頂いている、FC2blog共有テンプレートを基に、微力ながらSEO対策の経験をもとに、SEO対策仕様ブログ テンプレートを作ってみました。

あまりセンスが良いとはいえないものばかりではございますが、検索エンジンからのアクセスが少ないとお悩みの方は、ぜひ一度、試してみて下さい。
現在のところ、あまり種類は多くはございませんが、順次増やしていくつもりでおります。

◎本テンプレートは、以下の利用規約を厳守できる方のみ、無料でご利用できます。

テンプレート利用規約
 ※アダルトブログや誹謗・中傷の多いブログはご遠慮ください。
 ※簡単な審査のうえ、上記に該当しない場合でもお断りする事もございます
 ※テンプレートの再配布(改造したものを含む)は厳禁です。
 ※テンプレートの改造はご自由にどうぞ。但し、著作権表示は残して下さい。
 ※会員様にはメールマガジンを発行させて頂きます。(現在準備中)
  (独自システムによるものですので、余分なメルマガは届きません)

上記テンプレート利用規約は、今後変更する場合もございます。

テンプレート利用上の注意点
 ※利用する事で検索エンジン上位表示を約束するものではありません。
 ※ご質問には、テンプレートに関する事のみお答えさせて頂きます。
  (時期により、即座にお答えすることができない場合もございます)
  (初歩的な質問は、ご自身で調べた上でわからない場合のみにして下さい)
 ※テンプレートに関するご質問以外は一切お答え致しませんので、ご了承下さい
 ※SEO対策テンプレート公開用ブログ閲覧時に必要なパスワードは定期的に変更します
  (変更時には、メルマガにてお知らせ致します)
 ※SEO対策仕様テンプレートは、FC2ブログ以外ではご利用戴けません

   FC2ブログ開設はこちら

SEOテンプレート会員登録フォームはこちら

無料ブログ テンプレート カスタマイズ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。