U-BOX/うさぎの小箱

FC2ブログのテンプレートを配布しています

  1. スポンサー広告
  2. [ edit ]

スポンサーサイト

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


  1. -
  2. tb: 0
  3. cm: 4
  4. [ edit ]

カラムの配置(v43green)

v43green は変則3カラムで通常両サイドのカラムが右に寄せてあります。
これを両サイドに戻す方法を説明します。

ブログは以下のボックスをフロートさせることにより構成されています。
[ out ] ・・・ 全体の幅を規定、[ main ] + [ side ]
 [ main ] ・・・ [ con ] + [ side2 ] → フロート左
  [ con ] ・・・ topentry → フロート左
  [ side2 ] ・・・ プラグイン1,3 → フロート右
 [ side ] ・・・ プラグイン2 → フロート右

両サイドに配置するためには [ main ] 内の [ con ] と [ side2 ] の配置を逆にします。
  [ con ] ・・・ topentry → フロート右
  [ side2 ] ・・・ プラグイン1,3 → フロート左
*あるいは [ main ] と [ side ] の配置を逆?(プラグイン1,2,3の配置による)

とりあえずは、上記の方法を説明します。

テンプレートの設定 > U-BOXv43green のスタイルシート編集
 > 以下の2箇所のフロートを変更します。
 > それに合わせてwidthを変更、カラム間を調整しました。


-----------------------------------------------------



/* 記事,menu表示部分------(side+con) */
#main {
float: left;
width: 735px;
width: 79%;
margin: 0 5px 0 0;
padding: 0;
}



/* 記事表示部分 */
#con {
background-color: #14332d;/*170-60-20*/
float: right;
width: 500px;
width: 67%;/*52.9%*/
width: 68.7%;/*54.3%*/
margin: 0;
padding: 1em 0 2em;
word-break: break-all;
border: 0px solid #333; /*0-0-20*/
}


/* -右サイドバー-------------*/
#side {
background-color: #14332d;
float: right;
width: 215px;
width: 20%;
padding: 0;
}


/* -左サイドバー--------------- */
#side2 {
background-color: #14332d;
float: left;
width: 215px;
width: 30%;/*23.7%*/
padding: 0;
/*display: none;*/
}



----------------------------------------------------------




  1. blog_type
  2. tb: 0
  3. cm: 2
  4. [ edit ]

v43-44green

v43green_公開(8/9申請,8/14承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL

3カラム。変動幅。ウィンドウ幅の80%、最小幅固定900px、最大幅固定1200px。
記事部分52.9%。
右サイドバー(プラグイン1,3) 23.7%。
左サイドバー(プラグイン2) 20%。
font-size: 75% ( 12px)(winデフォルト16px )


v44green2_公開(8/10申請,8/14承認)

>>DL

2カラム。変動幅。ウィンドウ幅の80%、最小幅固定900px、最大幅固定1200px。
記事部分69%。
右サイドバー(プラグイン1,2,3) 30%。
font-size: 90% ( 14.4px)(winデフォルト16px )


v42flo03 のバリエーションです。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


カラム幅を超える画像は縮小表示されます。
サイドにナビメニュー、プラグインメニュー配置。


★8/19背景画像追加し、ページトップicon変更しました。




  1. blog_type
  2. tb: 0
  3. cm: 0
  4. [ edit ]

v42flo03

v42flo03_公開(8/7申請,8/14承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL


v22kamiB のバリエーションです。


3カラム。変動幅。ウィンドウ幅の80%、最小幅固定900px、最大幅固定1200px。
記事部分52.9%。
右サイドバー(プラグイン1,3)23.7%。
左サイドバー(プラグイン2)20%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


font-size: 75% ( 12px)(winデフォルト16px )

カラム幅を超える画像は縮小表示されます。
サイドにナビメニュー、プラグインメニュー配置。







  1. blog_type
  2. tb: 0
  3. cm: 0
  4. [ edit ]

v41mjL

v41mjL_公開(8/5申請,8/7承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL


v39flo02 のバリエーションです。


3カラム。変動幅。ウィンドウ幅の80%、最小幅固定800px。
記事部分47%。
右サイドバー(プラグイン1,3)29%。
左サイドバー(プラグイン2)19%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


font-size: 90% ( 14.4px)(winデフォルト16px )

カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。







  1. blog_type
  2. tb: 0
  3. cm: 0
  4. [ edit ]

v40voyage

v40voyage_公開(7/2申請,7/7承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL


v39flo02 のバリエーションです。


2カラム。変動幅。ウィンドウ幅の80%、最小幅固定900px。
記事部分70%。サイドバー27%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


font-size: 90% ( 14.4px)(winデフォルト16px )

カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。
26px幅罫線背景使用。






  1. blog_type
  2. tb: 0
  3. cm: 0
  4. [ edit ]

v37_2shark

v37_2shark_公開(7/1申請,7/7承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL



v37kurage のバリエーションです。

背景画像の変更とともに、配色を調整しました。

2カラム。変動幅。ウィンドウ幅の70%、最小幅固定900px。
記事部分72%。サイドバー27%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)

font-size: 90% ( 14.4px )( winデフォルト16px )

カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。

★テンプレート内の写真はゆんさんのものを使用しています。
写真を差し替えずにそのままご利用なさる場合は、ページ下部のPhoto by (c)Tomo.Yunを削除しないでください。






  1. blog_type
  2. tb: 0
  3. cm: 2
  4. [ edit ]

v33_3mw_sea

v33_3mw_sea_公開(7/1申請,7/7承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL



v33sakura3 のバリエーションです。

背景画像の変更とともに、ラインアイコン、ワンポイントアイコンを変更、配色を調整しました。

2カラム。変動幅。ウィンドウ幅の70%、最小幅固定900px。
記事部分72%。サイドバー25%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


font-size: 90% (14.4px) ( winデフォルト16px )

カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。






  1. -
  2. tb: 0
  3. cm: 2
  4. [ edit ]

カスタマイズのためのアレコレ

★最近カスタマイズに関する質問を受けることがあります。
極力お応えするようにしていますが、質問の意味することをよくくみ取れないこともあります。
ご自身のブログのアドレスをお知らせいただければ状況などわかりやすく、コメント欄でその場でお聞きしたり、お応えすることもできます。ということで、URL、お知らせいただけるとうれしいです。


★以下、今更ですが、変更する前にテンプレート一覧の複製欄をクリックして必ず複製を作る習慣を。そうすれば、変更しすぎてぐちゃぐちゃになってしまったとき、元に戻れます。

★リンククリックで表示されるページは、更新していないと変更が反映されません。

★知っていると便利なこと。PCのキーボード、[ctrl]+[F]でブラウザに検索バーが表示されページ内が検索できます。


★共有登録PCテンプレートには < %ad_overlay > のタグは含まれていません。(このタグはスマートフォンテンプレート専用のものです)


★どこかの背景色を変えたい場合、探すタグは [backgraund-color]  です。
それで指定されている色を、例えば、[red] 赤、などに変えてみる。そして、プレビューでどこが変化したかを確認していく、
そして該当箇所が確定できたら望みの色に変更する。
例:記事・コメント・TB 表示部分、色指定を外し、<body>の背景色( #fff )に統一してみました。 ( 参考ページ )

/ * -左サイドバー-------------*/
/* 記事表示部分 */
#con {
background-color: ;  →  色指定を外す。
float: left;
width: 63%;
margin: 0;
padding: 0 0 2em;
word-break: break-all;
border: 10px solid #fff;  →  太いワク線を白にして消す。
}



これは、背景色に限らず、容易に該当箇所を探す方法です。例えば文字指定。
タイトル、見出しなどは、<h1>、<h2>、<h3>のタグが使われています。
そのタグに関する指定の中に [ background-color: red; ] を加え、どの文字背景が赤くなるかで、該当する箇所を探す。
あるいは文字そのものを、 [ color: red; ] のように極端に変化させてても。

それ以外の文字、文字指定にはおおむね、 [ font-size: 12px; ] のようにフォント指定が含まれます。
この指定の中で,上記のように色を変えるなどして,該当する指定箇所をさがします。

ただし、リンク文字の場合は、色はリンクカラーで指定されています。サイズ変更、背景色追加などにより、確認できます。

例:記事投稿日

.dayday {
float: left;
font-size: 27px; →  17pxにしてみる。
line-height: 90%;
font-family: Georgia, "Times New Roman", Times, serif;
}




★ワク線などの色指定は [ border ] タグの中に含まれています。

 例: border-right: 1px solid #ddd;

これは右のワク線、1pxの太さの直線、色は#ddd を意味します。
どこに使われる線か、確認するには、1px → 10px、#ddd → red、のように極端に変化させ、該当箇所を探す。


★FC2の広告に関しては変更できるのは [ footer ] 内広告の文字の色、リンク色、サイズ、位置です。
ほかは有料に移行して消す以外ありません。







  1. blog_type
  2. tb: 0
  3. cm: 0
  4. [ edit ]

v33_2reef

v33_2reef_公開(5/27申請,6/5承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL



v33sakura3 のバリエーションです。

背景画像の変更とともに、ラインアイコン、ワンポイントアイコンを変更、配色を調整しました。

2カラム。変動幅。ウィンドウ幅の70%、最小幅固定900px。
記事部分72%。サイドバー25%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


font-size: 80% ( デフォルト12.8px )

カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。


★テンプレート内の写真はゆんさんのものを使用しています。
写真を差し替えずにそのままご利用なさる場合は、ページ下部のPhoto by (c)Tomo.Yunを削除しないでください。





テーマ : FC2ブログ共有テンプレート    ジャンル : ブログ

  1. -
  2. tb: 0
  3. cm: 0
  4. [ edit ]

プラグインタイトルの画像

テンプレートの設定 > U-BOXv16sorahane-sam のスタイルシート編集
 > 以下がプラグインタイトルの背景画像設定箇所です

画像の変更は太字部分をファイルアップロードした画像のURLと書き換えて下さい。

*画像位置は left top のデフォルトです。(通常の背景画像と同様に指定できます)
*画像サイズは 40 x 45 以内。余白のバランスは paddingの数値で調整して下さい。
----------------------------------------------------------



/* menuの見出し(タイトル) */
#side .body3 h3, #side2 .body3 h3 {
background-image: url(http://blog-imgs-56.fc2.com/a/o/g/aogaras10box/soh301.jpg);
background-repeat: no-repeat;
font-size: 13px;
text-align: left;
letter-spacing: 0;
padding: 20px;
margin: 0;
}



----------------------------------------------------------



<<NEW ENTRY  | BLOG TOP |  OLD ENTRY>>

プロフィール

usagi

Author:usagi
FC2ブログへようこそ!

information

2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ

管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。

お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。

カレンダー

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 - - - - -

ユーザータグ

* 



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