ＣｕｓbｌO |
忍者ブログテンプレートカスタマイズ ブログテンプレートＣＳＳ／ＨＴＭＬカスタマイズ覚書 忍者用ブログテンプレート作成中
HOME≫カラムとサイドバーとプラグインの記事
[2024/04/26] [PR] (No.)
[2010/03/21] 月間アーカーブとカレンダー融合プラグイン作成 (No.37)
[2010/03/21] プラグインにスクロールバー (No.36)
[2010/03/14] サイドバープラグインごとを背景画像で綺麗に囲む (No.26)
[2010/03/14] サイドバーを上に伸ばす (No.25)
[2010/03/10] プロフィール カスタマイズ (No.20)
[2010/03/21] 月間アーカーブとカレンダー融合プラグイン作成 (No.37)
[2010/03/21] プラグインにスクロールバー (No.36)
[2010/03/14] サイドバープラグインごとを背景画像で綺麗に囲む (No.26)
[2010/03/14] サイドバーを上に伸ばす (No.25)
[2010/03/10] プロフィール カスタマイズ (No.20)
月間アーカーブとカレンダー融合プラグイン作成
月間アーカイブとカレンダーば別なのがわずらわしいし長さをとってしまうから纏めた
手順アーカイブを移すことにした場合
アーカイブプラグインＨＴＭＬ編集を開く
内容を全てコピー
プラグイン一覧に戻りカレンダーのＨＴＭＬ編集を開く
コピーしたものをカレンダータグの上か下に貼り付け表示させいたほうに！
保存後カレンダーの設定の変更でタイトルを任意のものに書き換える例）月間カレンダー
PR
プラグインにスクロールバー
各プラグインごとにつけるプラグインのＨＴＭＬ編集で以下を付け加える
フリーエリア用<div style="width:100%;height:200px;overflow:auto;">内容をここに書く</div>
サイドバープラグインごとを背景画像で綺麗に囲む
プラグインヘッダー作成ラインで区切るのではなく
１つ１つのプラグインを囲んで
飾るための説明
タイトル（ＴＯＰヘッダーなど） 説明 内容 フッダー の４部構成背景画像連結はプラグインＣＳＳ余白 margin(外）・padding（内）で微調整
CSS プラグイン欄に追加.PluginFooter {
height:24px;/*画像の高さに合わせる*/
background:url(画像ＵＲＬ) no-repeat;
}
HTML 各プラグインに追加
<div class="PluginFooter">
</div>
サンプル<!--plugin数--> 数はプラグインの数字１～５
<!--plugin1-->
<div class="PluginInnerBlock">
<div class="PluginTitle <!--$plugin_title_align-->">
<!--$plugin_title-->
</div>
<div class="PluginContentsBox">
<div class="PluginExplanation <!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<div class="PluginContents <!--$plugin_contents_align-->">
<!--$plugin_data-->
</div>
<div class="PluginExplanation <!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
</div>
<div class="PluginFooter">
</div>
</div>
<!--/plugin数-->
サイドバーを上に伸ばす
サイドバーを上に伸ばすとブログの名前（タイトル）の横まで引き上げる
実際右サイドバーをやってみた
理論：ＨＴＭＬ内、サイドバーが ブログタイトルの上にあるか無いかの違い
ＨＴＭＬを変更すれば自由に変えられる
こまめに保存実際のブログで確認推薦
こまめに保存実際のブログで確認推薦
場所移動 ＨＴＭＬ<!--右プラグイン--> から <!--/右プラグイン-->
もしくは
<div class="PluginBlockright">
から
<!--/plugin5-->など最後の閉め括りの下にある </div>
までを
選択(マウスカーソル右クリック押しっぱなし）
コピー（Ｃｔｒｌ＋Ｃ） 削除（Ｃｔｒｌ＋Ｘ）
サイドバーが２つある場合 移動させたいほうを選択コピー削除
<!--if_not_edit--> の上に貼り付け
<!--if_not_edit--> の上に貼り付け
縦横調節 ＣＳＳ トップブロック用デザイン
/*一番上のブロック（タイトルが書かれる場所）の設定*/
/*一番上のブロック（タイトルが書かれる場所）の設定*/
width:数字px; 数字を小さくする
ブログタイトル と 上に伸ばしたプラグインの
padding:内側余白 と margin:外側余白
０ｐｘ ０ｐｘ ０ｐｘ ０ｐｘ；
上 右 下 左
背景画像使用の場合 background-position
を微調整
ブログタイトル と 上に伸ばしたプラグインの
padding:内側余白 と margin:外側余白
０ｐｘ ０ｐｘ ０ｐｘ ０ｐｘ；
上 右 下 左
背景画像使用の場合 background-position
を微調整
プロフィール カスタマイズ
プロフィールカスタマイズ
デフォルトのままだと
非公開や記入しないものまで表示されちゃう
入らないものは全て削除してすっきりさせたいな～
表示文字を書き換えたいな～
非公開や記入しないものまで表示されちゃう
入らないものは全て削除してすっきりさせたいな～
表示文字を書き換えたいな～
を
やっちゃったー ♥（ ´^ิ∀^ิ｀）
どーーーーん
やっちゃったー ♥（ ´^ิ∀^ิ｀）
どーーーーん
カスタム準備
プラグイン
↓
プロフィール ＨＴＭＬの編集 を開く
最新記事
(06/23)
(06/19)
(05/14)
(05/14)
(04/28)
カテゴリー
最新トラックバック
ジェネレーター リンク
ソフト不要で作成カスタマイズできる
ＣＳＳ／ＨＴＭＬ
ブログ：
ネーム：
かすぽ
趣味：
美しい・綺麗なものの鑑賞
自己紹介：
ＣｕｓＢｌｏスタート：２０１０．０３．０７
３月１６日１作目完成とどうじに愛猫天使記念日
最近自分が引っ込み思案と知った。
フリーかつ手動作成まっしぐら中
３月１６日１作目完成とどうじに愛猫天使記念日
最近自分が引っ込み思案と知った。
フリーかつ手動作成まっしぐら中
素材配布サイト様へ：リンク漏れが有る場合以下の専用ページにコメントください
