サイドバー最下部要素追従コード(CSSのみ/WordPressテーマ「Twenty Sixteen」)

当サイトのサイドバーの最下部要素はスクロールに合わせて追従するようになっています。

本ページではWordPressテーマ「Twenty Sixteen」使用時のやりかたを解説します。

  • 要コーディング知識(難易度は低)
  • プラグイン無しです
  • スタイルシートのみいじります
  • Twenty Sixteenのバージョンは2.7でやりました

要素のIDを特定する

追従させたい要素のIDを特定する

ChromeならF12押せばデベロッパーツールが出ます。あとは「セレクトモード」にして追従させたい要素をクリックしたらHTML側のコードと睨めっこしてれば特定できるでしょう。

私と同じTwenty SixteenならIDは「block-数字」です。


コンテンツエリアのIDを特定する

追従させたい要素のIDを特定した要領で、今度はコンテンツエリアのIDを特定してください。ヘッダーとフッターの間の、サイドメニューを含むメインエリアです。

私と同じTwenty SixteenならIDは「content」です。


「14.3 – >= 910px」内「.sidebar」の「margin-left」を「auto」にする

外観→テーマファイルエディター→style.css内の、下記14.3 – >= 910pxの「.sidebar」内、「margin-left:」を「75%;」から「auto;」に書き換えてください。

私と同じ状態なら3201行目にあるはずです。

.sidebar {
float: left;
margin-left: auto; /** margin-left: 75%; **/
padding: 0;
width: 25%;
}

※ /** margin-left: 75%; **/ はただのメモです。

これをしないと次の最後の操作でレイアウトが大きく崩れます。その状態が見たい人はあえて次の操作を先にやってからこっちをしてください。


追加CSSにsticky用コードを貼り付ける

外観→カスタマイズ→追加CSSと操作して下記コードを貼り付けてください。

#コンテンツエリアのID追従させたい要素のIDの部分は最初に特定した要素のIDに書き換えてください。

@media screen and (min-width: 56.875em) {#コンテンツエリアのID {
display: flex;
}}

#追従させたい要素のID{
postion: -webkit-sticky;
position: sticky;
top: 10px;
}

Twenty Sixteenはサイドバーの高さがサイドバーのコンテンツ分しかないので、記事とサイドバーを囲む親要素ID「content」に「display: flex;」を当てて記事エリアと同じ高さにしています。その前にある「@media screen and (min-width: 56.875em)」は、以下のコードはウィンドウ幅がこれ以上の時のみ適用、という意味です。

あとは要素を追従させる「position: sticky;」と、ウィンドウの上端からの間隔「top: 10px;」です。ちなみに「postion: -webkit-sticky;」はブラウザsafari用です。


おわりに

ここまでやればサイドメニューの一番下の要素がスクロールに合わせて追従されます。サイドメニュー内の要素ではなく、サイドメニューそのもののIDを指定すればメニューごと追従させることも可能です。

サイドメニューの追従方法を解説しているサイトはたくさんありますが、私の場合、レイアウト崩れがどうしても直せず、「.sidebar」の「margin-left: auto;」で解決できることは自力で特定しました。

これを解説しているサイトがなかったので本サイトでも解説ページをつくることにしました。

SNSソーシャルボタン「Twitter/Facebook/LINE/はてブ/pocket」のつくりかた

本ページではSNSソーシャルボタンのつくりかたを解説します。

  • WordPressに設置する方法(他のサイトでもできる)
  • プラグイン無し
  • Font Awesome」で無料利用で好きなアイコンを選ぶ
  • ソーシャルボタンは「Twitter/Facebook/LINE/はてブ/pocket」
  • Twitterボタンは「いま開いているページのタイトルとアドレスが入力済み」

Font Awesomeを利用登録する

Font Awesome」はWEBサイトなどでつかえるアイコンキットサービスです。ここからアイコン用に使うコードを入手します。

利用登録後、アイコンページからキーワード検索してほしいアイコンを探します。例えば「twitter」で検索すればTwitter用ボタンとして使えそうなアイコンが出てきます。

必要なコードは下記のように iタグから始まるアイコン用HTMLコードです。

<i class="fa-brands fa-twitter"></i>

コードを貼り付ける

jQueryを<head>内に貼り付ける

本ページで紹介するやりかたはJavaScriptをつかうので、下記、「jQuery」のコードを<head>内に貼り付けてください。位置は</head>の直前あたりで大丈夫です。
既に他の作業で導入済みの方はやる必要ないです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

ソーシャルボタン用HTMLコードを設置したいところに貼り付ける

下記のコードをコピペして、ソーシャルボタンを配置したいところに貼り付けてください。

<p style="text-align:center;">

<!-- Twitter -->
<a class="js-sns-link" href="//twitter.com/intent/tweet?text=&{title}=&url=" target="_blank" rel="nofollow noopener noreferrer">Twitterアイコン用HTMLコード</a>
<!-- Facebook -->
<a class="js-sns-link" href="//www.facebook.com/sharer/sharer.php?u=&t=" target="_blank" rel="nofollow noopener noreferrer">Facebookアイコン用HTMLコード</a>
<!-- LINE -->
<a class="js-sns-link" href="//timeline.line.me/social-plugin/share?url=&text=" target="_blank" rel="nofollow noopener noreferrer">LINEアイコン用HTMLコード</a>
<!-- はてなブログ -->
<a class="js-sns-link" href="//b.hatena.ne.jp/add?mode=confirm&url=&title=" target="_blank" rel="nofollow noopener noreferrer">はてぶアイコン用HTMLコード</a>
<!-- pocket -->
<a class="js-sns-link" href="//getpocket.com/edit?url=" target="_blank" rel="nofollow noopener noreferrer">pocketアイコン用HTMLコード</a>
</p>

<script>
let url = location.href
let title = document.title
let snsLinks=$(".js-sns-link")
for(let i=0; i<snsLinks.length; i++){
let href=snsLinks.eq(i).attr('href');
   //シェアページのURL上書き
href=href.replace("u=","u="+url) //facebook
href=href.replace("url=","url="+encodeURIComponent(url)) //twitter,LINE,はてなブログ,pocket
href=href.replace("{title}=","title="+encodeURIComponent(title)) //Twitter記事タイトル
snsLinks.eq(i).attr('href',href);
}
</script>

上記のコードは下記のサイトで解説されていたコードを組み合わせて作成しました。

 

 

 

」様のサイトではTwitterのシェアボタンに「ページタイトル」を入力済みにする機能がなかったので、「にしし ふぁくとりー」様で解説されていたコードを参考にして、組み合わせて完成させたという経緯です。(※2022/8/21 追記
22〜23行目のurlとtitleに「encodeURIComponent」を加えてエンコードされるようにしました)

なお、pocketのシェア用アドレスは他のサイトで使われていたものをとってきました。シェア用アドレスはどこでも同じなので問題ありません。

FontAwesomeのアイコン用HTMLコードを挿入する

前項のソーシャルボタン用HTMLコードの右の方に「◯◯◯アイコン用HTMLコード」という部分があります。そこをFontAwesomeでとってきたアイコンコードに差し替えてください。 iタグから始まるやつです。

 


おわりに

必要な作業は以上となります。

参考までに下記、当サイトのシェアボタンのコードを掲載しておきます。

アイコン用コードのところにある「fa-fw」とか「 fa-2x」という記述はアイコン同士の間隔やサイズを調整するFontAwesome専用のパラメータです。

 


Copyright (C) 2016 "HYOGOKURUMI" All Rights Reserved./「来未炳吾・平極ルミ・HYOGOKURUMI」の発達障害考察を主とした全ての発信は、相互不干渉など特別な約束をした者達を除き、どなたでもご活用できます。ただし著作権は放棄しておりません。あしからずご了承ください。詳細は著作権に関するガイドラインをご一読ください。/「HYOGOKURUMI.site」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。