モバイルサイズ時のWordPressサイトでテーブルを横スクロール表示する方法 – ワードプレステーマTCD
モバイルサイズ時のWordPressサイトでテーブルを横スクロール表示する方法 2023.03.04 2024.08.01 WordPressサイトをスマホで見た時、テーブル（表）の右端がこのように切れてしまうことがあります。 PCでは綺麗に見えていても、スマホでこのようにはみ出しているともったいないですよね。 当記事では、こういったテーブルを横スクロールできるようにする方法をご紹介いたします。WordPressテーマの対応の可否によって方法が異なりますので、下記よりご確認ください。 未対応テーマ 対応テーマ 未対応テーマの場合 TCDテーマの場合、FALCON（TCD089）を含むそれより品番が若いテーマが未対応です。対象のテーマをお使いの場合は、以下の記述をそれぞれ追加いただくことで横スクロール可能です。 CSSを追加 divタグでテーブルを囲む CSSを追加 まずは、スマホで見た際
【賢威8】スマホのフッターパネルをスクロールに応じて表示/非表示を切り替える | Let's Hack Tech
フッターパネルとは これです。 最近では基本的にほとんどのアクセスがスマホですので、標準でフッターパネルが搭載されているテンプレートなども多いと思います。 このブログのテンプレート「賢威8」でもフッターパネルは標準搭載です。 フッターパネルは必要か？ もちろんあるに越したことはないと思うのですが、この限られたスマホの画面の面積を、常時占有し続けるのはユーザビリティ的にいかがなものか？と思うわけです。 当サイトでは「シェア、お問い合わせ、TOPへ」の3項目を表示しておりますが、きっちり計測してないですが、押されたことがあるのか甚だ疑問でもあります。 ということで、必要ない時(ユーザーが記事を読み進めているとき)はフッターパネルを非表示に、必要になったら(記事途中で立ち止まってスクロールアップで戻ろうとすると)フッターパネルを表示させる、という仕様にカスタマイズします。 フッターパネルをスクロ
賢威7でサイドバーを追尾させるプラグイン | 放置型アフィリエイト研究所
放置型ネットビジネスの研究所。ブログ・メールマガジン・アフィリエイト・コンテンツ販売・情報商材やアフィリエイトツールのレビューなどなど。 ページをスクロールすると指定したサイドバー部分も降りてくるようにしたい。 賢威7のWordPressテンプレートを使用していてそう思ったので、Q2W3 Fixed Widgetプラグインを使い、やったことをメモとして残しておきます。 追尾機能が付いていない賢威7で追尾を実装したい場合は このプラグインを使用してみてください。 タブレットでも追尾するか？ 検索して調べたところサイドバーの 追尾（追従）プラグインっていくつかあるんですね。 賢威7で特定のウィジットを追従させるに当たり、 試したプラグインは以下の３つです。 １．Standard Widget Extensions ２．Strx Magic Floating Sidebar Maker ３．Q2
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。 scroll-snapプロパティの基礎知識と便利な使い方を紹介します。 Practical CSS Scroll Snapping 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクロールにスナップさせる「scroll-snapプロパティ」 「scroll-snapプロパティ」のサポートブラウザ 「scroll-snapプロパティ」の基礎知識 親要素の「scroll-snapプロパティ」 子要素の「scroll-snapプロパティ」 「scroll-snapプロパティ」の便利な使い方 スクロールスナ
wow.jsでスクロールアクションをトリガーにして画面に入るとフェードインで表示させる
wow.jsを使うととても簡単にスクロールアクションを設定できます。 スクロールを着火させるためにwow.jsでトリガーを設定→animate.cssを使ってアニメーションを設定。 この方程式は2年くらい使い続けていますがテッパンですね。 時間も予算もないけど、サクッと動かしたい。そんな人のためのjqueryプラグインと言えます。 wow.jsとは wow.jsはアニメーションのトリガーとして、スクロール位置を知ることができるJavascriptのプラグインです。 wow.jsを使うことで、好きなタイミングでAnimate.cssを呼ぶことができます。 スクロールが行われてからアニメーションさせるため必要なんですよね。めっちゃ感動！！！ 要するに表示領域にオブジェクト（動かしたい要素）が入るとアニメーションを起動させてくれます。 GitHub こちらは公式サイト これで誰でも簡単にclas
Adobe XDとSketchで飲食店のサイトを作る【後編】
やっとムスリム向け日本食レストラン”HALAL SAKURA”様のWebサイトを公開しました。 いやー感無量ですね！東京のクライアントを相手に大阪から初めてフルリモートで全ての工程を終えることができました。 おめでとうございます！ そして前編に引き続き、Webサイトの制作工程を余すことなくレポートします。 Adobe XDとSketchで飲食店のサイトを作る【前編】ではワイヤーフレームはAdobe XDで作り、デザインはSketchで作るWebサイトの制作フローを紹介しました。 後編の今回はデザインを形にしていくコーディングについて詳しく書いていこうと思います。 今回の実装はどれもJqueryを使えば汎用的に使えるギミックなので、マークアップ初心者でも簡単に取り込んでいくことができます。 喜んでもらうにはアニメーションも含めてデザインする アニメーションを使うことはリッチにカッコよく見せる
グローバルナビをスクロール時に固定する方法
グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフォルトの位置を取得し、それ以上の値がスクロールされたら上部に固定するというものを作成していきます。 まずはサンプルを確認してみてください。 DEMO スクロールをすると横に5つ並んだグローバルナビゲーションが上部に固定されるのが確認できると思います。 サンプルを見ながら確認していきましょう。 HTMLを記述 まずは、サンプルにも使っている横に5つのボタンを配置した場合のhtmlコードを記述します。 <div id="globalNavi"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2
スクロールするとコンテンツがフェードインするjQueryプラグイン作った。
スクロールして対象要素が画面に出てきたときにいい感じでフェードインして表示させるjQueryプラグイン「jquery.scrollFade.js」を作りました。文章だとわかりにくいかと思いますので、下記のデモを参照ください。 サンプルコード jQuery本体、jquery.easing、jquery.scrollFade.jsの3つを読み込みます。そして、フェードさせたい要素に対してscrollFadeメソッドを実行させます。下記の例では「.scrollFade」というクラスを持つ要素を対象にしています。scrollFadeメソッドは、フェードアウト前の透明度（out）、フェードにかける時間：ミリ秒（duration）を引数として設定できます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PCモニターについての質問です。 IEやFIREFOXなどのブラウザで、画面スクロール中に、文字（黒色）の 上や下に白いブレ（滲み）みたなものが出るのですが何か対…
Bright英会話