プロフィール

qmi

  • Author:qmi
  • html、css、フォトショ、イラレいじりは趣味と勉強を兼ねてます。

    -----------------------------------
    当サイトはリンクフリーです。
    当サイト内の記載内容・画像・デザイン等
    の無断転載を固く禁じます。

カテゴリー

最近の記事

最近のコメント

月別アーカイブ

最近のトラックバック

Amazon

ブロとも申請フォーム

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



--------(--) --:--| スポンサー広告| トラックバック(-)| コメント(-)

プラグインについて

とりあえず、公式テンプレから部分的にコピッてきたプラグインを恐る恐るいじってます・・
まだ詳しい動作を理解できませんが、コレをサイドバー部分に入れればいいらしい・・

 <div id="side">
<!--plugin-->

<!--plugin_first-->
<h3 style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</p>
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
<!--/plugin_first-->

<!--plugin_second-->
<h3 style="text-align:<%plugin_second_talign>"><%plugin_second_title></h3>
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description>
</p>
<%plugin_second_content>
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description2>
</p>
<!--/plugin_second-->

<!--plugin_third-->
<h3 style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description>
</p>
<%plugin_third_content>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description2>
</p>
<!--/plugin_third-->

<!--/plugin-->
 </div>

サイドバー左右で分ける場合は、plugin_first、plugin_second、plugin_third をブロックごとに<!--plugin--> ? <!--/plugin-->ではさむ。

プラグイン無効の場合のソースは、
<!--not_plugin--> ? <!--/not_plugin-->

【引用記事】http://blog.blog2.fc2.com/blog-entry-17.html


...read more
スポンサーサイト

2005-12-16(Fri) 22:00| ブログの構築| トラックバック 0| コメント 2

レイアウトテンプレ

2カラム、3カラムの基本レイアウト設定です。

*----------------- 2カラム -----------------*
html
head
body

#wrapper
#sideber
#main


* HTML

* CSS


wrapperの入れ子に、サイドバーは左、メインは右にfloatプロパティで配置する。
この場合、HTML上では常にメインがサイドバーより先に配置されるようにすることが可能。
入れ子のラッパーと、左右の段の幅の合計の幅を一致させるが、borderやmarginなども考慮する。
ユーザビリティを優先させるなら、ラッパーを相対値(%)、サイドバーを絶対値(px)指定にしてリキッドレイアウトにする。


*----------------- 3カラム -----------------*
html
head
body

#wrapper
#sideber
#content →
#main
#extra


* HTML

* CSS


wrapperの入れ子に、サイドバー1は左、メインとサイドバー2(extra)をcontentの入れ子に入れて右にfloatプロパティで配置する。



2005-10-26(Wed) 16:04| ブログの構築| トラックバック 0| コメント 1

カスタムmemo

* 前記事の改善点
・メインカラムのみ両脇borderで上下ぴっちりにしたい。
・サイドバーのメニューが長いと、コメント編集や1記事表示にするとフッター部分があがってしまう。

tableで3つのセルを作る。
メインカラム
メイン(フッター部)
サイドカラム→rowspan="2"セル結合

2カラムそれぞれに、td id でcss(#main-column、#side column)のセレクタを新しく作る。cssで両カラムwidth、メインのみborderを指定。

メイン(フッター部)tdに直接指定。
valign="bottom" 
height="50"

#container
└ table
  td#main-column(#side-column)
     └ div#main(div#side)
         └ class.content

テーブルtdそれぞれに通常のdiv idが入れ子で入る。

前はテーブルのセル2つに2カラム(div#)をそれぞれ入れてみた。
メインカラムの両脇borderで上下ぴっちりは、div idでなくtd idにborderをcss指定すればセル2つでも問題ない。
あくまでfooter位置(どの状態でも下位置)にこだわらなければ。

反省としては、htmlとcss両方でスタイル指定している部分。
できればtableは使わずdiv(ブロック要素)ですべてcss記述したい派なんだけど、、まだチカラと知識が及ばず。


2005-06-11(Sat) 16:30| ブログの構築| トラックバック 0| コメント 0

ブログの構造

html
head
body

#container
#banner
#main
└ content - entry-body
#side
#footer


上のようなブロック状に要素が分かれています。
#containerのなかに#banner他のブロックが含まれ、さらにそのなかにも細かい要素が入れ子のように収められています。
idやセレクタ名は自分で名前を変えられます。
ブロック要素
html記述 div id="要素名"
css記述  #要素名 {プロパティ : 値 ;}



2005-04-18(Mon) 14:00| ブログの構築| トラックバック 0| コメント 1

カレンダー

06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -

ブログ内検索

RSSフィード

リンク

ADS




↑ 設置で100円、500円から払出し

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。