ＣｕｓbｌO |
忍者ブログテンプレートカスタマイズ ブログテンプレートＣＳＳ／ＨＴＭＬカスタマイズ覚書 忍者用ブログテンプレート作成中
HOME≫[小技]の記事
[2024/11/21] [PR] (No.)
[2010/04/01] フリーエリア ＨＴＭＬ直記 (No.62)
[2010/03/31] 行サイズ指定 (No.61)
[2010/03/26] 日付表示 (No.47)
[2010/03/23] スクロール 縦スクロールのみ (No.43)
[2010/03/22] テーブル (No.41)
[2010/04/01] フリーエリア ＨＴＭＬ直記 (No.62)
[2010/03/31] 行サイズ指定 (No.61)
[2010/03/26] 日付表示 (No.47)
[2010/03/23] スクロール 縦スクロールのみ (No.43)
[2010/03/22] テーブル (No.41)
フリーエリア ＨＴＭＬ直記
フリーエリアとは！
プラグインのフリーエリアではなくテンプレートで編集するものを作成
ブログタイトル下と記事の間にパンくずリストやナビ、検索ＢＯＸなど
さまざまなものを表示させるのに便利
プラグインフリーエリアを持ってくるほうが便利
しかし
テンプレートをカスタマイズすることで
ちゃんと表示されない場合にこれを用いることで便利になる
さまざまなものを表示させるのに便利
プラグインフリーエリアを持ってくるほうが便利
しかし
テンプレートをカスタマイズすることで
ちゃんと表示されない場合にこれを用いることで便利になる
ＨＴＭＬ <!-- フリーエリア -->
<div id="free">
表示させたいものを書き込む
</div>
<!--/ フリーエリア -->
ＣＳＳ ここでＨＴＭＬに追記したフリーエリアを操作
どこかに以下を書き足す。操作しやすいように フッダー著作操作の上かしたあたりにでも
フリーエリアカスタマイズ
増やし方
フリーエリアをコンテンツごとに複数設置したい場合のカスタマイズ方法
これでいくらでも増やし
コンテンツごとに位置や背景、文字などをカスタムできる
しかし・・・増やしすぎると大変なのでほどほどに
簡単にカスタマイズできる
名前を決め付け足すし増やすだけ
どこのエリアかわかるように命名
ＨＴＭＬ
ＣＳＳ ここでＨＴＭＬに追記したフリーエリアを操作どこかに以下を書き足す。操作しやすいように フッダー著作操作の上かしたあたりにでも
/**************************************************************************************
フリーエリア
**************************************************************************************/
#free {
text-align:right;
border:solid 0px #ffb000;
margin-bottom:10px;
padding-top:10px;
padding-bottom:10px;
}
フリーエリアカスタマイズ増やし方
フリーエリアをコンテンツごとに複数設置したい場合のカスタマイズ方法
これでいくらでも増やし
コンテンツごとに位置や背景、文字などをカスタムできる
しかし・・・増やしすぎると大変なのでほどほどに
簡単にカスタマイズできる
どこのエリアかわかるように命名
ＨＴＭＬ 注：半角英数に切り替える
<!-- フリーエリア -->
<!-- フリーエリア -->
<div id="free1">数字やわかりやすい名前に英数で加える
ＣＳＳ
ＣＳＳ/**************************************************************************************
フリーエリア
**************************************************************************************/
この大きな見出しの下に
/*
free1の設定
*/
をエリアごとに付け足すと編集で混乱しない
#free 1{
ＨＴＭＬでつけた半角英数を書き足す。
ＨＴＭＬでつけた半角英数を書き足す。
PR
行サイズ指定
ＣＳＳに追加：数字を自分が使いたい幅に変更
/* 行幅 */
＜ＢＯＤＹ＞内指定
<p class="sample1のようにＣＳＳで設定の幅のどれを使うかサンプル数で指定する">指定したいタグや文章をここに来るようにする</P>
/* 行幅 */
p.sample1 {text-indent: 10px;}
p.sample2 {text-indent: 5em;}
p.sample3 {text-indent: 5ex;}
p.sample4 {text-indent: -10px;}
ＨＴＭＬ：
<head>に書き加え
<link rel="stylesheet" href="sample.css" type="text/css">
ＨＴＭＬ：
<head>に書き加え
<link rel="stylesheet" href="sample.css" type="text/css">
＜ＢＯＤＹ＞内指定
<p class="sample1のようにＣＳＳで設定の幅のどれを使うかサンプル数で指定する">指定したいタグや文章をここに来るようにする</P>
日付表示
記事タイトルの上や下にタグを記入フッダーに書く場合日付・時間だけでいける
表示位置／左右などの変更
ＣＳＳ記事・コメントなどで指定する
ＨＴＭＬ インライン要素：下に来る
<span class="EntryWriteDate">
日付・時間記入
</span>
オンライン要素：上に来る
<div class="EntryWriteDate">
日付・時間記入
</div>
日付
<a href="/Date/<!--$entry_year--><!--$entry_mon--><!--$entry_day-->/"><!--$entry_year-->.<!--$entry_mon-->.<!--$entry_day--></a>
時間
<!--$comment_res_hour-->:<!--$comment_res_min-->
スクロール 縦スクロールのみ
ＨＴＭＬテーブルなどのボックス内を以下で囲む
内容
</div>
ニンブロサイト様より抜粋使用
<div style="width:100%;height:100px;overflow:auto;">内容
</div>
最新記事
(06/23)
(06/19)
(05/14)
(05/14)
(04/28)
カテゴリー
最新トラックバック
ジェネレーター リンク
ソフト不要で作成カスタマイズできる
ＣＳＳ／ＨＴＭＬ
ブログ：
ネーム：
かすぽ
趣味：
美しい・綺麗なものの鑑賞
自己紹介：
ＣｕｓＢｌｏスタート：２０１０．０３．０７
３月１６日１作目完成とどうじに愛猫天使記念日
最近自分が引っ込み思案と知った。
フリーかつ手動作成まっしぐら中
３月１６日１作目完成とどうじに愛猫天使記念日
最近自分が引っ込み思案と知った。
フリーかつ手動作成まっしぐら中
素材配布サイト様へ：リンク漏れが有る場合以下の専用ページにコメントください
