コピー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カラムになるまでウィンドウ幅を縮めて下までスクロールすると跳ね返ってくるのと、逆に狭い幅で表示後に広げた場合は固定されないということです。リサイズされたときに条件を入れればいいのでしょうが、レアケースなので放置してます。Explorerは表示を確認しながらスタイルの微調整ができる便利なツールです。border-radiusとかbox-shadowとか、どのくらいの値にしたらどのくらい変化するのかって最初の頃はイメージしづらいと思うんですが、このツ...ブログ運営ハンバーガー廃止⇒画面幅でメニュー数が増減するナビゲーション今までスマホサイトではハンバーガーメニューを採用していましたが、画面幅に合わせてメニューの数が変わるナビゲーションメニューに変更しました。htmlとcssのコードを紹介するので、好みで修正して使ってください。ハンバーガーメニューをやめた理...ブログ運営1行追加するだけ!簡単かわいいアイコンフォントFontAwesomeを導入する方法FontAwesomeは絵文字のようなウェブフォントです。画像ではなくテキストとして表示されるので、色やサイズをテキストと同じようにcssで設定できます。FontAwesomeはダウンロードして使...ブログ運営コピペでOKプラグインなし!押したくなる...かもしれないシェアボタンアイキャッチ画像を背景に使ったシェアボタンボックスを作ってみました。こちらがイメージです。FontAwesomeを既に導入している方はそのままコピペでOKです。FontAwesomeの導入がまだ...ブログ運営ブラウザサイズを基準に高さや幅を指定したいときにはvwやvhが使える!画面いっぱいに画像を表示したいな~とか思ったとき、%で指定する手法がよく使われます。この%は、親要素のサイズに対する割合を指定するものなので、うまく動作してくれないことがあります。そんなときに使えるのがvwやvhという単位です。vw...ブログ運営サーティワンアイスクリームみたいな色見本カラフルポップなサーティワンのアイスクリーム。にぎやかな配色を探している方におすすめです。定番のフレーバーをイメージしてカラーコードを集めました。ゲーム、読書、食べることや自然と触れ合うことが好きです!楽しいことや美味しいものの情報を発信していきたいと思います。Twitterではブログ運営に役立ちそうな情報をツイートしてます。ニケッチャメモ.メニューゲーム読書ブログ運営プロフィールホーム検索トップタイトルとURLをコピーしました。