解決したいこと wordpress内で数値によって背景の色を変えたいです。 以下のコードで、 10→赤 100→黄 1000→緑 にしたいのですが、全て緑になってしまいます。 該当するソースコード <div class="test">10</div> <div class="test">100</div> <div class="test">1000</div> <script> jQuery(function(){ jQuery('.test').each(function(index, element){ Number(element); if (element < 100) { jQuery(this).css({ 'background-color': 'red', 'color': 'black'}); }else if (element < 200) { jQuery(this

WordPressのカスタマイズにはCSSやPHP、HTML、JavaScriptを利用します。 JavaScriptが使えるとスライドショーやアニメーションなど、動的なコンテンツのカスタマイズが可能です。 今回の記事では、JavaScriptの読み込み方法やJavaScriptプラグイン、管理画面からJavaScriptファイルを編集する方法などを解説します。 JavaScriptを使いこなし、WordPressを自由にカスタマイズしましょう。 JavaScriptとは、ウェブページ上で高度な機能を実現するためのプログラミング言語です。 「好きなところにズームできる地図」「2Dや3Dのグラフィックアニメーション」「スライドショーのスクロール」「カーソルを合わせると変化するボタン」などの機能にJavaScriptが使われています。 JavaScriptはユーザーのブラウザ上で動作するため、

「コーポレート・ロゴ」フォント（ver3）の提供情報「コーポレート・ロゴ」（ver3）は、オープンソースの源ノ角ゴシックに会社ロゴタイプ風のひらがな・カタカナを組み合わせ、加工を加えたフリーフォントです。本サイトにて無料にてダウンロードすることができます。WindowsおよびMac OSの主なバージョンに対応しています。 本フォントファイルは、源ノ角ゴシックと同じ SIL Open Font License 1.1 のもとで使用することができます。 「コーポレート・ロゴ」フォントのデザインいわゆる企業やサービスで使われているようなモダンでシンプルなロゴ文字をイメージしたフォントです。そのままロゴタイプとして使用することもおすすめですし、ロゴ作成のベース・フォントにすることも可能です。 ロゴとしての活用例 ※以上のフォント見本にある会社・団体名はすべて架空のものです。 かな文字の中でもカタカ

ページ内スクロール時リンク先で要素を消す方法 ページ上部や下部に固定したバナー、ボタンなどがページ内リンク先まできたら消えるようにする実装方法を忘れないようにメモしました。 今回はページ下部の固定ボタンをページ内リンクさせました😊 共通css .wrapper{ display: block; } .cont{ margin-bottom: 20px; padding: 20px; height: 300px; background-color: #eee; box-sizing: border-box; } .menu{ display: block; padding: 15px 10px; width: 100%; background-color: #dee5f3; box-sizing: border-box; text-align: center; } .menu.is-fix

ページのスクロールに連動して様々なエフェクトで要素が表示されていくJavaScriptプラグイン［SCROLL TRIGGER］を紹介します。 実際に導入したサンプルは以下より。 SCROLL TRIGGER DEMO : https://on-ze.com/demo/js-scroll-trigger/ 各要素のモーションは CSS3 のアニメーションに依存しており、痒いところに手が届く細やかな動作も実装可能。 最小限の手間でクオリティの高いサイトを構築できるのでオススメです。 公式サイトは以下。 ScrollTrigger : https://terwanerik.github.io/ScrollTrigger/GitHub : https://github.com/terwanerik/ScrollTriggerjQuery不要で動くので、GitHubから動作に必要なファイル［Scr

インスタグラムの特定のハッシュタグ投稿を新着順に埋め込む方法になります。 プロモーションでよく利用される「ハッシュタグを付けて○○な写真を投稿しよう!」といったキャンペーンに使えます。 まずはこちらをご覧ください。 #男飯 こちらは24時間以内「#男飯」というハッシュタグをつけた写真投稿をwebに表示しています。 こちらの埋め込み方法を解説します。 表示の流れ

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved.

Flexboxは、CSSはWebページのレイアウトを設定できるモジュール。 Flexboxを使うと簡単に整列したり、配置できるようになるので、ヘッダーなどのレイアウトに使われています。 今回の記事では、Flexboxを使ったヘッダーの作り方を紹介します。 よくあるヘッダーレイアウトをFlexboxで作る 左にロゴ、右にメニューがあるヘッダーレイアウト 【解説】　右に寄せる要素（今回だとnav）に、margin-left:autoを設定します。 子要素のmarginにautoを設定すると、空いたスペース分marginを広げるようです。 今回の場合は、navの左の空きスペースを埋めるようにmarginが拡張されるので、navは右側に押し出されます。 逆に、ロゴの方にmargin-right:autoを設定すると、ロゴが左に移動します。 margin:autoは上下中央の配置になります。 【解説

生まれ変わったKeywordmap 膨大で面倒な調査・分析作業をKeywordmapが肩代わり。ユーザーは手順に従うだけで、ツールがWebサイト運用を効率的にサポート、最小限の工数で成果創出まで導きます。 Keywordmapの強み KeywordmapはSEO、リスティング広告、コンテンツマーケティングで戦略的にWebサイトの成長を図る企業に導入されています。 Keywordmap×AI（ChatGPT）で Webサイト運用の工数を 圧倒的に削減 ビッグデータに基づいた 競合サイト・検索ニーズ（結果）の 分析が可能 カスタマーサクセスがサポート SEO・Web広告における 成果創出まで伴走

あなたは、プロの【その分野の専門家】です。 以下の制約条件と入力文をもとに、【出力内容】を出力してください。 # 制約条件 - 前提条件 - 決まりごと # 入力文 期待する出力結果・指示 あなたは、プロのプログラマーです。 以下の制約条件と入力文をもとに、プログラムを出力してください。 # 制約条件 - JavaScriptを使うこと - React 18.1.0を使うこと - AtomicDesignでコンポーネントを作ること - 初心者でも分かりやすいコードを書くこと - コメントを残すこと # 入力文 huluやネットフリックスのサービスページのような動画一覧ページを作成する CSSもつけてリッチなデザインにする。 出力結果 以下のコードは、React 18.1.0とAtomic Designを使って、HuluやNetflixのような動画一覧ページを作成するための簡単な例です。初心

皆さんはHTMLでモーションを作るときにどのトゥイーンライブラリを使用していますか？ GSAP（グリーン・ソック・アニメーション・プラットフォーム）は、Flash全盛時代から存在する歴史あるトゥイーンライブラリです。 GSAPはCSS/HTML Canvas/WebGLなどさまざまなアニメーション作成に利用できます。類似トゥイーンライブラリよりも高機能であり、かつ実行パフォーマンスも優れているのが魅力的です。GSAPの詳しい使い方は次の記事で解説しているので、使い方を知りたい方は以下の記事から参照ください。 GSAP入門（前編） - 基本的な使い方 GSAP入門（後編） - タイムライン機能など この記事では、GSAPのタイムスケールという機能を中心に解説します。 作成したモーションデモを紹介 今回はGSAPの機能の1つ「タイムスケール」を使って、3Dの表現を試してみました。まずは次の2つ

プログラミング未経験でも簡単に習得できるGoogle Apps Script👩‍💻🔰 今回は文字列操作にかかせないindexOfの使い方を紹介しました💡 ◎動画はこちら ◎DriveAPIをオンにする手順今回はDriveAPIを使用するため、下記対応が必要です （オンにしないと、スクリプトがエラーになります） また下記キャプチャは旧バージョンのエディタです、ご了承ください①リソース＞Googleの拡張サービス をクリック ②DriveAPIをONにする ③OKをクリック ◎スクリプト function myFunction() { //変換したいファイル情報を取得 var file = DriveApp.getFileById("★ファイルIDを記載"); var name = file.getName(); //格納するフォルダIDを宣言 var folderId = "★フォル

const sheetUrl = "https://docs.google.com/spreadsheets/d/19RTV39Z6wJQdoa8txs_eSCQf_iA0LoRg9valE594hSQ/"; //スプレッドシートURL const sheetName = "検証データ" //シート名 //ピンポイントでセルを指定して値を取得する(API呼び出し = 4回) function getValue() { let start = Date.parse(new Date()) / 1000; let ss = SpreadsheetApp.openByUrl(sheetUrl); let sheet = ss.getSheetByName(sheetName); let value = sheet.getRange(51, 4).getValue(); let end = Dat