ふわっと浮き出てくるグローバルナビのハンバーガーメニュー
ちょこっと解説とサンプルページ 横とか上からスライドで出てくるメニューじゃなくて、ふわっと浮き出てくるハンバーガーメニューを作ってみた。 非表示のときは「opacity: 0;」だけじゃなくて、「right: -100v...
HTML・CSSHTML・CSSHTML・CSS【jQuery】文章が長いときのみグラデーションで隠して続きを読む・閉じるを表示
文章が長いときによくある「続きを読む」っていうやつ。一定の長さのときのみ「続きを読む」を表示させて、短いときは表示しないようにできます。jsの高さを調整すれば、ある程度表示させたい文章の長さを調整できる。 デモはこちら ...
HTML・CSSコピペで使えるcssアニメーション
コピペで使えるCSSアニメーションをメモしておきます。よかったらご自由にコピペして使ってください。 一文字ずつふわっと表示テキストアニメーション ※jQueryのCDNを先に読み込まないと動きません。 背景が幕のように上...
WebTipsWordPressの投稿したアイキャッチ画像をOGP画像に設定する方法
メモメモ。 参考サイト：https://rilaks.jp/wordpress/eyecatch-ogp/ 上記サイトが参考になりました。ありがとうございます。
WebTipsWordPressでお問い合わせページだけにreCAPTCHA v3ロゴを表示させる方法
プラグインのcontactform7は、reCAPTCHAの設定が楽ちん。GoogleのreCAPTCHAを設定した後、サイトキーとシークレットキーをcontactform7のインテグレーションのところに記入するだけ。だ...
HTML・CSSタスクランナーGulp4で環境構築してsassとpugでコーディングを楽に！
コーディング作業ってスピード勝負な所ありますよね。。。コーディングすればするほどパーツ的なものも増えるし、使い回せたらめっちゃ爆速でコーディングできるんじゃないか！？ということで、重い腰を上げて環境構築の調整を。。。 j...
WebTipsWordPressなどのサイトで「/index.html」や「/index.php」を.htaccesで「/」にリダイレクトする方法
◯◯◯.com/index.html とか ◯◯◯.com/index.php へのアクセスを、 ◯◯◯.com/ にリダイレクトさせる方法のメモ。.htaccessに記述しておくと、WordPressなどのサイトで40...
WebTips投稿エリアのcssメモ
WordPressの投稿の汎用的に使えるscssをメモしとく。 「.btn_more」ってclassつけたボタンを投稿で使うこともあるから、「a」のところで除外設定の記述をしている。必要なければ「a:not(.btn_m...
HTML・CSSコーディングパーツ（見出し・リスト・お知らせ一覧・矢印・テーブル）
コーディング中にパーツのコード（HTML・CSS）をいちいち調べるのめんどくさいから、ここにストックしていく。 見出し センターで下線 左にタテ線 ストライプ背景 ストライプ生成便利サイト：CSS STRIPE GENE...
WebTipsMacで.htaccessを表示させる方法メモ
いつも「.htaccessとかの隠しファイル表示させる方法どうだったっけ？」ってなって検索かけてるから、メモしとく。 Finderの「表示」とかから表示の切り替えできるんだったっけ〜？とか思うけど、「ショートカットだった...