[Vaster2] サイドバー（のガジェット）を固定・追従させました。[Blogger]

これを

こんな感じに

下にスクロールした時に、サイドバーの一番下のガジェットを固定・追従させるようにしました。

作業手順ですが、まず、固定・追従させたいガジェットに CSS を追加。次に、PC で3ヶ所、スマホで3ヶ所、のセレクタの変更です。

ベンダープレフィックス-webkit-や-ms-はAutoprefixer CSS onlineを使って付けました。

目次

• 1. 固定・追従させたいガジェットにCSSを追加
  • 1-1 追加したCSS
• 2.セレクタの変更 （PC表示の部分）
  • 2-1 変更する場所 .content-wrapper
  • 2-2 変更する場所 .main-outer
  • 2-3 変更する場所 .sidebar
• 3. スマホ表示の部分
  • 3-1 変更する場所 .content-wrapper
  • 3-2 変更する場所 .main-outer
  • 3-3 変更する場所 .sidebar
• 補足：サイドバー全体を固定・追従させる場合

1. 固定・追従させたいガジェットにCSSを追加

固定・追従させたいガジェット（今回は「新しい記事」のガジェット）に CSS を追加しました。

セレクタはchromeの検証機能（右クリックで[検証]、またはキーボードのF12 キー）を使って調べました。

1-1 追加したCSS

/* 固定・追従させたいガジェット */ 
div#HTML6 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #fcfcfc;
}

div#HTML6 がchromeの検証機能で調べたセレクタ名です。

position: sticky; で固定・追従。

top: 0; で上にぴったり張り付く。（数字の変更で上に間隔ができる 20px とか）

background: でサイドバーの背景色にあわせました。（なくてもいいかも）

貼り付けた場所はとりあえず .sidebar{} の下あたりにしました。

2.セレクタの変更 （PC表示の部分）

widthやmax-widthの値をデフォルトテンプレートよりやや大きくしていますが、これは好みで変えて下さい。

2-1 変更する場所 .content-wrapper

.content-wrapper{
 width: 1040px;  /*  記事部分 サイドバーの横幅  */
 margin-right: auto;
 margin-left: auto;
 padding-top:20px;
}

変更後

display: flexを追加しました。

widthの値を変更しました。

横幅がせまくなると横のスクロールバーがでたのでwidthをmax-widthに変更しました。

.content-wrapper {
 /* width: 1120px; */ /*  記事部分 サイドバーの横幅  */ /* default 1040 */
 max-width: 1120px;
 margin-right: auto;
 margin-left: auto;
 padding-top: 20px;
 display: -webkit-box; /* 固定・追従コンテンツ用*/
 display: -ms-flexbox; /* 固定・追従コンテンツ用 */
 display: flex; /* 固定・追従コンテンツ用 */
}

2-2 変更する場所 .main-outer

.main-outer{
 float:left;
 width:710px;
 background:#ffffff;
 box-sizing:border-box;
}

変更後

メインカラムは可変できるようにflex: 1;を追加しました。

横のスクロールがでたのでwidthからmax-widthに変更しました。

.main-outer {
 /* float: left; */
 /* width: 780px; */ /* default 710 */
 max-width: 780px;
 background: #fcfcfc;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
 -webkit-box-flex: 1; /* 固定・追従コンテンツ用 */
     -ms-flex: 1; /* 固定・追従コンテンツ用 */
         flex: 1; /* 固定・追従コンテンツ用 */
}

2-3 変更する場所 .sidebar

.sidebar {
 width:330px;
 max-width:100%;
 float:left;
 padding-left:40px;
 box-sizing:border-box;
}

変更後

サイドバーの幅は固定しました。

display: flexをつけないと、ガジェットがいい感じに降りてきませんでした。

.sidebar {
 width: 340px; /* default 330 */
 /* max-width: 100%; */
 /* float: left; */
 padding-left: 30px;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
 display: -webkit-box; /* 固定・追従コンテンツ用 */ 
 display: -ms-flexbox; /* 固定・追従コンテンツ用 */ 
 display: flex; /* 固定・追従コンテンツ用 */ 
}

3. スマホ表示の部分

「レスポンシブデザイン」の @media screen and (max-width: 768px){ 以下が変更対象です。

3-1 変更する場所 .content-wrapper

.content-wrapper{
 width:auto;
 margin:0 auto;
 padding-top:5px;
}

変更後

flex-direction: column; でメインカラムとサイドバーを縦に並べます。

.content-wrapper {
 width: auto;
 margin: 0 auto;
 padding-top: 5px;
 -webkit-box-orient: vertical; /* 固定・追従コンテンツ用 */
 -webkit-box-direction: normal; /* 固定・追従コンテンツ用 */
     -ms-flex-direction: column; /* 固定・追従コンテンツ用 */
         flex-direction: column; /* 固定・追従コンテンツ用 */
}

3-2 変更する場所 .main-outer

.main-outer{
 width:100%;
 padding:0 !important;
 float:none;
 margin-left:auto;
 margin-right:auto;
}

変更後

float: none; をコメントアウトしました。（コメントアウトしなくてもいいかも？）

.main-outer {
 width: 100%;
 padding: 0 !important;
 /* float: none; */
 margin-left: auto;
 margin-right: auto;
}

3-3 変更する場所 .sidebar

.sidebar{
 width:90%;
 float:none;
 padding-left:initial;
 margin-left:auto;
 margin-right:auto;
}

変更後

float: none; をコメントアウトしました。（コメントアウトしなくてもいいかも？）

.sidebar {
 width: 90%;
 /* float: none; */
 padding-left: initial;
 margin-left: auto;
 margin-right: auto;
}

これが

こんな感じに

補足：サイドバー全体を固定・追従させる場合

サイドバー全体を固定・追従させる場合、セレクタ名はdiv#sidebar-sectionでした。また.sidebarのdisplay: flex;はいらない様です。