ホーム » Vaster2 »

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

2022年01月20日更新

2018年09月20日公開

当サイトはアフィリエイト広告を使用しています

Blogger Vaster2

これを

こんな感じに

下にスクロールした時に、サイドバーの一番下のガジェットを固定・追従させるようにしました。作業手順ですが、まず、固定・追従させたいガジェットに CSS を追加。次に、PC で3ヶ所、スマホで3ヶ所、のセレクタの変更です。ベンダープレフィックス-webkit-や-ms-はAutoprefixer CSS onlineを使って付けました。

IE11 では動作しませんでした。
素人が変更したものです。意図しない不具合がでることが考えられます。正確性がないことに留意してください。
不具合の際、元に戻すことを考えて、元のプロパティは削除せずにコメントアウトしました。
HTMLを編集します。コピペ等する際は、必ずバックアップをとってから作業してください。

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