ブログパーツ

スポンサーサイト

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

ブログカスタマイズ

固定メニューとドロップダウンメニュー / カテ別一覧&全記事リストをわける / ① 同じページ内にリンクする / 追記【続きを読む】を同一ページに表示させる / 続きを読む / ページナビ(番号)を挿入する / 全記事一覧 / カテゴリー別一覧 / 複数ブログのエントリータイトルを一覧で表示する  / ヘッダーの下にサブタイトルを追加する / サイドメニュータイトル画像 / 背景画像を固定する / 分析をする / 人気記事ランキング外部  ② 色に統一感を持たせる / 個別記事のサイドメニューの調整 / ブログ下に「TOP」に上にぶように設定 / 上部にも下部にも次ページナビ / スクロールの色を変える(ブログ内も) / 「・」をハート画像に / 表示されている記事がすぐにわかるように上に一覧設置 / ヘッダーの透過


HTML (エイチティーエムエル、HyperText Markup Language)
   ・ウェブページを作成するために開発された言語。
   ・インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されている。
文書情報・構造
   ・!DOCTYPE ⇒ ドキュメントタイプを宣言する
   ・HTML   ⇒ HTML文書であることを宣言する
   ・HEAD   ⇒ 文書のヘッダ情報を表す
   ・META   ⇒ その文書に関する情報(メタ情報)を指定する
   ・TITLE   ⇒ 文書にタイトルをつける
   ・BODY   ⇒ 文書の本体を表す
   ・H1~H6  ⇒ 見出しを付ける
   ・P     ⇒ ひとつの段落(パラグラフ)であることを表す
範囲指定
   ・DIV   ⇒ ひとかたまりの範囲として定義する(ブロック要素)
   ・SPAN   ⇒ ひとかたまりの範囲として定義する(インライン要素)


スタイルシートとCSS (Cascading Style Sheets、カスケーディング・スタイル・シート)
   ・ウェブページのスタイルを指定するための言語
   ・ワープロソフトなどで作成される文書も含めて
      文書のスタイルを指定する技術全般をスタイルシートという。

ウェブサイト 
テンプレート
Free background to Blogger

素材
All-free-download.com
Vector4Free.com
桜のハート
オシャレなハート画像集
自然のハートマーク

色サイト
Color of Book
ウェブ配色ツール
色サイト
Color-Sample.com 色見本 -マロン・グラッセ
Webサイトで使われている色
Background Maker
おおまかな色確認



色・カラー 
ピンク系
    ピ#FC9493  合う白 ⇒ 白#F6F5F3 白#FFFFFF
    桜#fedaec  珊瑚#fd879f  
マイブログカラー
   灰#666  緑DFFECE   紫#FF3399 
   字FF6666 濃ピ#B24747  #FED9D9 #FEB3B3
   通常時リンクカラー #FF6666;
   訪問済みリンクカラー #999999; text-decoration: none; /*下線無し*/
   マウスを上に重ねた時リンクカラー */#33FF99;
   クリックした時リンクカラー #FFCC00;

カラーチャート
colorchart2.jpg


テキスト 
   text-align: right;
   ・EM     ⇒ 強調する
   ・STRONG   ⇒ 強調する


タイトル画像 
   ・img src="http://~~~"  align=absmiddle /

   background-image: url(http~~~.gif);
   background-repeat: no-repeat;
   background-position: left center;


ライン 
   solid (実線)double (二重の線)groove (谷型の線)ridge (山型の線)
   inset (凹型の線)outset (凸型の線)dotted (点線)dashed (破線)

   border-top:1px solid #FF0066;
   border-right:4px double #FF0066;
   border-bottom: 1px dotted #FF6699;
   BORDER-TOP: #FF6699 2px solid;/* 枠の上側 */

   border-bottom : 2px dotted #FF0066 ;
   border-left : 10px ridge #FF0066 ;


余白 
   margin ボックスの外側の余白
   padding  ボックスの内側の余白

   margin-top: 値
   margin-right: 値
   margin-bottom: 値
   margin-left: 値
   padding-top: 値

   margin: 値 (上、右、下、左すべて同数値になる)
   margin: 上px 右px 下px 左px(それぞれ指定、px以外の値でも良い)
   padding:1px 0px 1px 1px;  /* 内側[上 右 下 左]の余白 */
   margin :1px 18px 2px 2px; /* 外側[上 右 下 左]の余白 */


HTML編集・CSS
済 
固定メニューとドロップダウンメニュー 
カテ別一覧&全記事リストをわける 
同じページ内にリンクする
追記【続きを読む】を同一ページに表示させる  続きを読む
ページナビ(番号)を挿入する ページナビを追加(12345・・・●) 上部にも下部にも
全記事一覧
カテゴリー別一覧 カテゴリー別一覧
複数ブログのエントリータイトルを一覧で表示する 
ヘッダーの下にサブタイトルを追加する  ヘッダー下にサブメニューをつける 
サイドメニュータイトル画像  Tree-CATEGORYの大見出し前にアイコン画像を設置する
背景画像を固定する  
分析をする アクセス分析外部
人気記事ランキング 外部
ヘッダーの透過◆半透明化 ヘッダーの透過の時に


・未整理
色に統一感を持たせる
個別記事のサイドメニューの調整
ブログ下に「TOP」に上にぶように設定  記事ごとに読み終わるとTOPにとべるように
上部にも下部にも次ページに進めるようにページナビを
スクロールの色を変える(ブログ内も)
「・」をハート画像に
表示されている記事がすぐにわかるように上に一覧設置 



◆固定メニューとドロップダウンメニュー 
【FC2ブログ】横メニューバーを設置【ドロップダウンメニュー】
FC2ブログのテンプレート工房 メニューバーのドロップダウン


◆カテ別一覧&全記事リストをわける サイトマップ
カテゴリ別全記事一覧ページを作る
親子カテゴリ対応サイトマップ













▼ カテゴリ一覧 ▼▼▼▼▼▼▼▼▼▼


▲ カテゴリ一覧 ▲▲▲▲▲▲▲▲▲▲






▼カテゴリ別の記事一覧▼▼▼▼▼▼▼▼▼▼














<%category_name> (<%category_count>)












▲ カテゴリ別の記事一覧 ▲▲▲▲▲▲▲▲▲▲







▲-->



◆同じページ内にリンクする
リンク元(出発点)
ABCの位置へジャンプ
リンク先(到達点) 

ここがABCの位置




◆追記【続きを読む】を同一ページに表示させる
追記表示(続きを読む)をページ遷移させることなくシームレスに同一ページに表示させる方法を紹介します。
HTMLを編集します。との間に以下を挿入します。




▲-->





◆続きを読む





▲-->





◆ページナビ(番号)を挿入する
<%prevpage_url>';
nextpageurl = '<%nextpage_url>';
n = '<%total_pages>';
//-->
▲-->



◆全記事一覧

全記事リスト








▲-->



◆カテゴリリスト別一覧

   

全ての記事のタイトル一覧


   

   
   ■ 
   ■ 
     ┣
     ┗
   <%category_name> (<%category_count>)


   

   
   

カテゴリ別の記事のタイトル一覧


   

   

   
   

カテゴリ別表示は、JavaScript を オン にしてください。



   

全ての記事のタイトル一覧


   
   



   ■ 
   ■ 
     ┣
     ┗
   <%category_name> (<%category_count>)






▲-->


◆複数ブログのエントリータイトルを一覧で表示する 
 例:全てのエントリータイトルを日付つきで新しい順に10件表示する。



◆ヘッダーの下にサブタイトルを追加する



▲-->


◆サイドメニュータイトル画像



◆背景画像を固定する





◆分析をする




▲-->



◆アクセス分析 外部


◆人気記事ランキング 外部
com/emoji/2007-05-09/97510.gif" alt="" border="0" style="border:0;" class="emoji">カテゴリー別一覧







カテゴリ一覧










各カテゴリ別










 □
 □


<%category_name> (<%category_count>)















▲-->





◆ヘッダーの透過の時に

関連記事

この記事へのコメント

トラックバック

URL :

記事リスト
最新の記事
カテゴリー
カレンダー
全記事表示
全タイトルを表示
ブログ内検索
人気記事ランキング
 カウンター
ビジター数
月齢
プロフィール

 美心

Author: 美心
心穏やに、心豊かに
☆愛・感謝・平和・美・自然・調和☆

誕生数44、太陽乙女26、月牡牛1、黄色い月の種

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