ブログのスタイル・スキン・スタイルシート(CSS)の編集と、サイドバーのフリースペースへのコンテンツ(HTML)挿入(例)です。 コンテンツ表示幅や、背景画像、全体のハイパーリンク色、トップタイトル(バナー)背景画像、〃ハイパーリンク色など。 CSS。 スタイルシート(テキストファイル、半角で記述)などの編集゙はテキストエディター(≠Wordpad)などで可。 all 対応。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
< ご使用方法 >
・ このファイルのローカル(=PC)への保存は、blog_css.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。
・ CSSファイルの作成・保存 : 【任意のホルダー】- [右クリック] - [新規作成] - [テキストドキュメント] - ”新規テキストドキュメント.txt”を作成します。 既存のブログの ”[スキンCSSの編集] ” などから目的のCSSをコピー、css1.txt(任意名)保存・バックアップします。
・ スタイルシート(CSS)の編集は、テキストエディター(≠Wordpad)や コード編集メニュー などで行います。 表示効果とCSSの対象は本例を参考に!。 下記の(例) (*1) : So-netと、(*2) : Ameba、(*2g) : gooを参考に太字部分の編集を任意に行います。
・ 要素のまとめ指定は、『 , 』、属性は『 ; 』で複数を区切り指定可。 同じものへの複数の定義は後方の定義が優先 。 セレクヤ具体性:同要素に対し、セレクタIDがセレクタCLASSより優先。 CLASSがセレクタHTML要素名より優先。 優先順位は、(1) インラインスタイル、(2) ID、(3) CLASS、および(4) HTML要素の順。 カスケーディングは特定の要素のスタイル順を決定。 継承は、スタイルプロパティの次の要素への継承を指定。
・ スタイルシート(CSS)編集メニュー(画面) : So-netは、【管理ページ】- [デザイン] - [テンプレート管理] - 該当スキンを選択へ。 Amebaは、【Amebaトップ・ホームへ】- [ブログ管理] - [デザインの設定] - [CSSの編集] - で。 gooは、ログイン - 【gooブログ】- [デザインメニュー → テンプレート編集] - [データ編集 → CSSデータ] で。
・ サイドバへ任意HTML挿入方法(”フリープラグイン” や ”フリースペース” へ) : So-netは、【管理ページ】- [デザイン] - [レイアウト] -で。 Amebaは、【Amebaトップ・ホームへ】- [ブログ管理] - [サイドバーの設定] - 各メニィーへ。 HTML(例) : (*3) : DIV・オーバーフロースクロール 、(*4) : 折り畳みコンテンツ(spanの隠しコンテンツを右に表示)、(*5) : トップナビバー53 (マウスオーバーでリンクテーブルを表示)-IE8では、“互換表示”で有効。
・ CSS情報いろいろ : ”月別表示”をプルダウンメニューに変更する(org)、”サイドバーを折り畳みに”(org)。
・ 表示テストは、 それぞれ、”スタイルシート(CSS)編集メニュー” > ”プレビュー”で保存前・直接行えます。 また、ブラウザで既に表示中であった場合は、[F5]キー を押すなどで、キャッシュを更新・最新データ読み込んで、行います。(※: 再アクセス・Enterキーや、前に”戻る”では未反映。)
・ 関連情報 :
色記号5、〃6、スタイルシートリファレンス、ホームページ開設入門。
(*1) : css1.txt 〔So-net〕(例) 5 Back to Top
表示効果の説明 | (*1) をテキストエディターで開き、下記↓太字部分などを編集、該当CSSにペースト、使用。 |
/* */ 内はコメント、CSSは半角英数 以下サーバーの仕様変更の影響など body 文字色 背景色・画像 下線
ヘッダー ”SSブログ ………… AD”
ブログ名称
サイト紹介文
コンテンツ幅
矢画像
記事枠(画像)幅
記事幅
記事タイトル フォントサイズ 記事 メイン記事
サイドバー枠幅
サイドバー幅
サイドバー |
@charset
"UTF-8"; #lead{
==== この間、説明を省略。 ==== /*-----Side-----*/ ==== この間、説明を省略。 ==== |
(*2) : css1.txt 〔Ameba〕(例) 5 Back to Top
表示効果の説明 | (*2) をテキストエディターで開き、下記↓太字部分などを編集、該当CSSにペースト、使用。 |
以下サーバーの仕様変更の影響など
リンクのフォント種類
全体のフォントサイズ
全体背景画像(個別) メイン枠幅 背景画像
ハイパーリンク文字色 背景色 下線
ヘッダー トップ背景画像
トップサイト名
サイト説明文 ヘッダー内ナビゲーション
メインコラム_お気に入りブログ一覧
メインコラム_ブックマーク一覧
サイド_サイドA,B共通項目
サイドタイトル フォント色
フォントサイズ
サイド_プロフィール
サイド_カレンダー
サイド_プラグイン
フッター
|
/* ==== この間、説明を省略。 ====
|
(*2g) : css1.txt 〔goo〕(例) 5 Back to Top
表示効果の説明 | (*2) をテキストエディターで開き、下記↓太字部分などを編集、該当CSSにペースト、使用。 |
※: 現在CSS編集不可能、機能が無い。
背景画像
幅
ハイパーリンク 文字色 背景色 下線〃
タイトル上右下左余白 トップタイトル画像
タイトル文字サイズ
幅(コンテンツ表示幅)
項目タイトル背景画像
背景画像
背景画像
項目タイトル背景画像
背景画像
|
/* クリアグレー左メニューのCSS */ |
(*3) : DIV・オーバーフロー時スクロール 5 Back to Top
・ “Sio-net Blog 月別表示” での応用例 管理ページ → デザイン → レイアウト → 月別表示 → コンテンツHTML編集 → 保存 → 前画面・保存
HTMLの編集方法 | 下記↓ をコピーし、テキストファイルにペースト後、テキストエディターで開き、太字部分などを編集、HTML挿入にペーストします。 |
〔この列ペースト不要〕
追加します 背景画像
追加します |
<div
class="sidebar" id="archive"> |
・ “Ameba Blog ルーム” と、“Sio-net Blog プロフィール”での応用例。
==== この間、説明を省略。 ====
diskunion新宿Jazz館Blog
・ Ameba Blog ルーム の応用例
HTMLの編集方法 | 下記↓ をコピーし、テキストファイルにペースト後、または blog_css.htm を テキストエディターで開 きコピー後、太字部分などを編集、フリープラグインやフリースペースなどのHTML挿入にペーストします。 |
※ : < >内
英数は基本半角限定。
フォント(頭優先) DIV幅・高さ 左詰め 行間 自動スクロールバー 背景色・〃画像 内余白、透明度 以下、同様にサイト〔<a 〜 </a><br/>〕を編集、数を加減。 ”ルーム” の例は、”font:normal |
<!-- ★ ---- (*3) : DIV・オーバーフロースクロール ---- ↓ この間をコピー&ペーストします。
------------ --> <a target="_blank" href="http://www.flickr.com/photos/tags/cat/"
title="Flickr">=(ΦωΦ)= = (・。.・)= (´。`) =ΘΘ=ΠΠ〜</a><br/>
<a target="_blank"
href="http://i-love-tochigi.blog.so-net.ne.jp/">山、登ろう!</a><br/> |
・ “Sio-net Blog プロフィール” の応用例
HTMLの編集方法 | 下記↓ をコピーし、テキストファイルにペースト後、または blog_css.htm を テキストエディターで開 きコピー後、太字部分などを編集、フリープラグインやフリースペースなどのHTML挿入にペーストします。 |
※ : < >内
英数は基本半角限定。
フォント DIV幅・高さ 左詰め 行間 自動スクロールバー 背景色・〃画像 内余白 外余白 以下、同様にサイト〔<a 〜 </a><br/>〕を編集、数を加減。 |
<div
style="font:normal 12px Arial,MS PGothic,Lucida Sans Unicode; width:350px;
height:600px; text-align:left; line-height:75%;
overflow:auto; background:#F9F8F9 url('http:// …… .gif');
padding:0px 10px 10px 0px; margin:0px 10px 0px 0px;">
<a target="_blank"
href="http://i-love-tochigi.blog.so-net.ne.jp/">山、登ろう!</a><br/> |
(*4) : 折り畳みコンテンツ(spanの隠しコンテンツを右・下に表示) 5 Back to Top
・ “Sio-net Blog
太陽風ДζΨΠ∀1”(サイドバー)での応用例 デモは、↓ のクリックで。
Digitally Radio
Mostly Classical ♪ ♪ ModernJazz ♪ ♪ Ambient ♪ ♪ NewAge ♪ ♪ WorldMusic ♪ ♪ SmoothJazz ♪ ♪ Classical Guitar ♪ ♪ Salsa ♪ ♪ Hit 70s ♪ ♪ Best of the 80s ♪ ♪| WGUC Classical ♪ WCNY Classic ♪ WNED Classic ♪ Moris Mauritius ♪ ChoiceTropical ♪ *.pls?
・ 編集方法
HTMLの編集方法 | blog_css.htm をWordpadなどで開き、太字部分などを編集、フリープラグインやフリースペースなどのHTML挿入にペーストします。 |
※ : < >内は半角
英数限定。 ★1、★2の選択、または同時使用。 フォント DIV幅 〃高さ 余白 罫線 スクロールバー自動 背景画像 コンテンツ〔ハイパーリンク : <a 〜 </a>間は、加減〕 折り畳みSPAN
ID
コンテンツ
DIV幅 〃高さ 内余白 外余白 罫線 スクロールバー無し 背景画像 コンテンツ 折り畳みSPAN
ID
コンテンツ |
<!-- ★1 ----------- ↓ この間をコピー&ペーストします。 ------------ --> ==== この間、説明を省略。 ==== <a
href="http://syndication.choiceradio.com/zap.cfm?og=390&broadband=true&pid=5"
target="_self">ChoiceTropical ♪</a> <a title="『*.pls ファイルの再生アプリが不明』
旨のダイアログ表示時は、クリック → 対処法。"
==== この間、説明を省略。 ==== <a href="http://www.…….htm" "target=_blank"><IMG height=20 alt="ランダムメッセージ - 小説家の箴言" src="http://www…….gif" width=20 border=0></a>
</SPAN></div> |
・ “Sio-net Blog 月別表示” での応用例 管理ページ → デザイン → レイアウト → 月別表示 → コンテンツHTML編集
HTMLの編集方法 | 下記↓ をコピーし、テキストファイルにペースト後、テキストエディターで開き、太字部分などを編集、HTML挿入にペーストします。 |
〔この列ペースト不要〕
追加します 個別番号(ページ内の重複不可)IE 画像 ※: IE onjy |
<div
class="sidebar" id="archive"> |
(*5) : トップナビバー53 (マウスオーバー時にリンクテーブルを出現。) 5 Back to Top
・ “So-net blog ”お気に入り・ (*^.^*) 2” での応用例。 ※: 関連・詳細情報は、top_navbar53.htm を参照。 Internet Explorer8では、“互換表示”で有効。
HTMLの編集方法 | 下記↓ をコピーし、テキストファイルにペースト後、Wordpadなどで開き、太字部分などを編集、フリープラグインやフリースペースなどのHTML挿入にペーストします。 |
※ : < >内は半角
英数限定。 外部CSS(例)、IEキャッシュなどからコピー 、任意のWebサーバーにアップロード。 ダウンロードは、ここを右クリック → 対象をファイルを保存、で。 外部CSSは、既存のCSS中に記述可。 メニュー名1 メニュー名2
以下、同様にハイパーリンクを記述。 ※: 全HTMLのコピーは、IEでSo-net blogを開きます。 右クリックし、“ソースの表示” メニューを実行。 “お気に入り・ (*^.^*) 2” のキーワードで検索(Ctrl+F)、右HTML部分を見つけます。 |
<link media=all href="http://www.pat.hi-ho.ne.jp/oka_tosho/00574131a.css" type=text/css rel=stylesheet>
==== この間、説明を省略。 ==== <li><a target="_blank" href="http://tv.shimano.co.jp/type/trout/"> トラウト
SHIMANO TV</a></li> ==== この間、説明を省略。 ==== <li><a href="http://www.nzfishing.com/" target="_blank"> New Zealand Fly
Fishing</a></li> |
・ “So-net blog ”お気に入り・ (*^.^*) 3” での応用例。 ※: 関連・詳細情報は、top_navbar53.htm を参照。 Internet Explorer8では、“互換表示”で有効。
HTMLの編集方法 | 下記↓ をコピーし、テキストファイルにペースト後、Wordpadなどで開き、太字部分などを編集、フリープラグインやフリースペースなどのHTML挿入にペーストします。 |
※ : < >内は半角
英数限定。 外部CSS(例)、IEキャッシュなどからコピー 、任意のWebサーバーにアップロード。 ダウンロードは、ここを右クリック → 対象をファイルを保存、で。 外部CSSは、既存のCSS中に記述可。 吹き出し 位置補正 個別番号(ページ内の重複不可)IE
メニュー名2 >
以下、同様にハイパーリンクを記述。
※: 全HTMLのコピーは、IEでSo-net blogを開きます。 右クリックし、“ソースの表示” メニューを実行。 “お気に入り・ (*^.^*) 2” のキーワードで検索(Ctrl+F)、右HTML部分を見つけます。
サイト 5の削除は、<li><a class=xx2 〜 </li> までを削除。 |
<link media=all href="http://www.pat.hi-ho.ne.jp/oka_tosho/00574131a.css" type=text/css rel=stylesheet>
<div title="クリック → 続きを、右・下に “表示/折り畳み” します。"
style="position:relative; top:-20px; left:2px; width:190;
height:10px; CURSOR: hand; COLOR: #3C0166; BACKGROUND-COLOR:"
onclick="document.all.idxxx005.style.display=
document.all.idxxx005.style.display=='none'
? '' : 'none'">いろいろ <IMG height=12 src="http:// …… 10vl_r.gif"
width=9 border=0 align=""></div ><div id=idxxx005
style="DISPLAY: none"> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 119</a></li> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 110</a></li> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 2110</a></li> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 210</a></li> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 3110</a></li> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 310</a></li> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 4110</a></li> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 410</a></li> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 5110</a></li> ==== この間、説明を省略。 ==== <li><a href="http:// …… .html"> サイト 510</a></li> |
・ “Ameba blog ◇太陽風 > ”お気に入り・ (*^.^*)” での応用例。
HTMLの編集方法 | 下記↓ をコピーし、テキストファイルにペースト後、Wordpadなどで開き、太字部分などを編集、フリープラグインやフリースペースなどのHTML挿入にペーストします。 |
※ : < >内は半角
英数限定。 ieキャッシュからコピー、任意のURLで。 メニュー名1 メニュー名1
メニュー名2
以下、同様。 ※: HTMLサイズmax(4KB)対応は、
|
<link media=all href="http:// …… /00574131a.css"
type=text/css rel=stylesheet> ==== この間、説明を省略。 ==== <li><a
href="http://www. …… /hanoi.htm" target="_blank"> ハノイの塔</a></li> ==== この間、説明を省略。 ==== <li><a href="http://www. …… /google_earth10.htm" target="_blank"
title="上空散歩・サンフランシスコなど"> Google Earth10 (カメラ コントロール)</a></li> |
< 補足 > 適時参照あれ!。