●掲載ソースを追加して正しく表示されないときは次を確認ください。
・ソースが文字化けしている可能性があります。一旦テキストエディタに貼り付けて確認してください。
・ご自身で全角スペースを入力している可能性があります。全角スペースを削除してください。
●画像は説明用のイメージサンプル画像です。
実際のブログや管理画面とは細部の表示が異なる部分がありますので予めご了承ください。
●CSS/HTMLソースの行数の番号/色は説明用です。
実施のブログでは、行数が違う・行数表示が無い・色が無い、となりますので予めご了承ください。
デザイン変更：ブログ左右の境界
ブログ左右の境界のデザイン変更方法を説明します。
書き替えしたメインCSSの■追加アレンジの箇所にソースを追加すると
デザインの変更ができます。
追加アレンジの箇所以外にソースを追加するとデザインが崩れますので、必ず、
追加アレンジの箇所にソースを追加してください。
デフォルトでは、左右の境界が無くて画面いっぱいに広がるデザインになっています。
ブログ左右に境界を入れることで、また違った雰囲気になりますので試してみてください。
デザインが表示されるのは、デバイスの画面サイズが、
2カラム版(横幅1010px以上)・3カラム版(横幅1070px以上)のときとなります。
デフォルトデザイン
デフォルトでは、下記図のように、左右の境界が無くて画面いっぱいに広がるデザインになっています。
プラン＃１ ブログ全体の左右に境界を入れる
イメージ
下記図のように、ブログ全体の左右に境界が入ります。
追加CSSソース
※2015-12-09 13:00 ソース更新※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
/*ブログ左右の境界 ＃1*/
#container1 {
width: 980px; /*全体の幅＋40pxで設定*/
}
#container1 {
border-left: solid 1px #d1d1d1;
border-right: solid 1px #d1d1d1;
box-shadow: 5px 0 5px 0 rgba(0,0,0,0.1),-5px 0 5px 0 rgba(0,0,0,0.1);
}
※2カラム版の全体幅940px+40px=980pxとしています。
※3カラム版は全体幅1000px+40px=1040pxとなります。
プラン＃2 コンテンツとフッターの左右に境界を入れる
※このカスタマイズは、ヘッダー＆グローバルメニューのプラン＃3とは併用不可イメージ
下記図のように、コンテンツとフッターの左右に境界が入ります。
追加CSSソース
※2015-12-09 13:00 ソース更新※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
/*ブログ左右の境界 ＃2*/
#container2,#globalmenu-in {
width: 980px; /*全体の幅＋40pxで設定*/
}
#header-in {
width: 950px; /*全体の幅＋10pxで設定*/
}
#container2 {
border-left: solid 1px #d1d1d1;
border-right: solid 1px #d1d1d1;
box-shadow: 5px 0 5px 0 rgba(0,0,0,0.1),-5px 0 5px 0 rgba(0,0,0,0.1);
}
※3行目は
2カラム版の全体幅940px+40px=980pxとしています。
3カラム版は全体幅1000px+40px=1040pxとなります。
※6行目は
2カラム版の全体幅940px+10px=950pxとしています。
3カラム版は全体幅1000px+10px=1010pxとなります。
プラン＃3 コンテンツだけ左右に境界を入れる
※このカスタマイズは、ヘッダー＆グローバルメニューのプラン＃6とは併用不可イメージ
下記図のように、コンテンツだけ左右に境界が入ります。
追加CSSソース
※2015-12-09 13:00 ソース更新※ソースをダブルクリックしてその状態でコピーしてください
【ご注意】Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。
/*ブログ左右の境界 ＃3*/
#container3,#globalmenu-in,#footer2 {
width: 980px; /*全体の幅＋40pxで設定*/
}
#header-in {
width: 950px; /*全体の幅＋10pxで設定*/
}
#container3 {
border-left: solid 1px #d1d1d1;
border-right: solid 1px #d1d1d1;
box-shadow: 5px 0 5px 0 rgba(0,0,0,0.1),-5px 0 5px 0 rgba(0,0,0,0.1);
}
※3行目は
2カラム版の全体幅940px+40px=980pxとしています。
3カラム版は全体幅1000px+40px=1040pxとなります。
※6行目は
2カラム版の全体幅940px+10px=950pxとしています。
3カラム版は全体幅1000px+10px=1010pxとなります。