コピー2017.12.16サイドバーを固定する方法を色々なサイトで調べて試してみたのですが、そのほとんどが何かしら誤作動するものばかりでした。途中でサイドバーが消えてしまったり、サイドバーの横位置がずれたり幅が変わってしまったり、固定する範囲がおかしくなったり。仕方なく諦めかけていたところ、これだ!と思えるものを見つけたので紹介します。固定表示のサイドバー実装方法sidebar.phpの修正cssの設定jsファイルの作成jsファイルの読み込み最後に固定表示のサイドバー実装方法STINGER8の人は親テーマのscroll.jsを直接編集してもいいのですが、アップデートがあったときどうなるのかわからないので、子テーマに新しくjsファイルを作ります。子テーマを利用していない方は親テーマを直接編集するか、以前投稿したWordPress子テーマの作り方という記事を参考にして子テーマを導入してください。子テーマディレクトリにsidepar.phpがない場合、親テーマのsidepar.phpを一旦ローカルに落とし、子テーマディレクトリにアップロードします。id="scrollfix"></div>で囲みます。STINGER8の人はid="scrollad"となっているところをid="scrollfix"に変えます。STINGER8のscroll.jsはscrolladというIDの要素を探し、なければ処理をしないという内容になっています。scrolladをscrollfixにすることで親テーマのjsが無効になります。cssの設定cssファイルに下記の内容を追加します。0;}jsファイルの作成WordPressの子テーマディレクトリ(function.phpとかが置いてある場所)にjsフォルダがなければ作成し、scrollfix.jsなど名前はなんでもいいのですがjsファイルを作ります。作ったjsファイルに下記のコードを書きます。浮かす必要が無いならstaticでそのまま。画面上部の高さ+広告以下の高さを合わせて、コンテンツの高さを超えるならabsoluteで終端を揃える。それ以外はfixedで広告の頭を固定で浮かして表示する。広告の頭が画面上部に合うように引っ張り上げる。サイドバーが開始する高さまでは除去しないとずれる。resizeAdjust);});こちらのサイトからお借りしたコードを少しだけ修正しました。修正前はスマホやタブレットのときに変な挙動(一番下までいくと跳ね返ってくるような感じ)になり、その直し方がわからなかったのでPC以外では処理を行わないようにしました。959)の部分のとこです。959という幅はうちのサイトの場合なので、調整してください。マーカーを付けた2か所はSTINGER8を想定しているので、テーマに合わせて要素のIDまたはクラス名を指定してください。jsファイルの読み込みfunction.phpに下記のコードを書きます。);これでjsファイルが読み込まれるようになりました。最後にこの方法も1つ問題点があります。PCで表示後、1カラムになるまでウィンドウ幅を縮めて下までスクロールすると跳ね返ってくるのと、逆に狭い幅で表示後に広げた場合は固定されないということです。リサイズされたときに条件を入れればいいのでしょうが、レアケースなので放置してます。色とりどりのマカロンをイメージした色のコード一覧です。ポップなイメージに仕上げたい方におすすめです。フランボワーズ...ブログ運営ミルクペイントっぽい色見本ターナーのミルクペイントをご存知でしょうか。アンティークな風合いが手軽に出せる、DIY女子に大人気のペンキだそうです。くすんだ感じの風合いがとても素敵です。Explorerは表示を確認しながらスタイルの微調整ができる便利なツールです。border-radiusとかbox-shadowとか、どのくらいの値にしたらどのくらい変化するのかって最初の頃はイメージしづらいと思うんですが、このツ...ブログ運営cssのみで画像の縮小や切り抜きができるobject-fitプロパティobject-fitプロパティを使うと、cssのみで画像の縮小や切り抜きができるようになります。object-fitプロパティで指定できる値は5つあります。こちらの150×180の画像を200×100のス...ブログ運営cssコピペで作るマスキングテープ風ボックス(飾り枠)マスキングテープで貼られたメモ帳のようなボックス(飾り枠)をcssコピペだけで導入する方法です。テープ上に表示される文字も自由に変更できます。テープの色やメモの背景色もcssで簡単に変えることができますよ。cs...ブログ運営サーティワンアイスクリームみたいな色見本カラフルポップなサーティワンのアイスクリーム。にぎやかな配色を探している方におすすめです。定番のフレーバーをイメージしてカラーコードを集めました。ゲーム、読書、食べることや自然と触れ合うことが好きです!楽しいことや美味しいものの情報を発信していきたいと思います。Twitterではブログ運営に役立ちそうな情報をツイートしてます。ニケッチャメモ.メニューゲーム読書ブログ運営プロフィールホーム検索トップタイトルとURLをコピーしました。