WordPressには、様々なお問い合わせフォームのプラグインがありますね。 日本ではContact Form 7やMW WP Formが有名ですが、どちらも多少のコーディング知識が必要になってきます…。 ブログサイトや小さな個人サイトを運営している方の中には、
簡単にフォームが作れるプラグイン「WPForms」の使い方を紹介【reCAPTCHAの設定も解説】 | WebDev Tech
WordPressには、様々なお問い合わせフォームのプラグインがありますね。 日本ではContact Form 7やMW WP Formが有名ですが、どちらも多少のコーディング知識が必要になってきます…。 ブログサイトや小さな個人サイトを運営している方の中には、
WordPressテーマの必須ファイルであるfunctions.phpを編集することで、テーマを拡張したり必要な機能を自作して使用することができますね。 オリジナルのWordPressテーマを作成する場合、functions.phpファイルへの記述量が多くなり、管理が大変になってしまいます。 そこで今回の記事では、functions.phpファイルを分割して管理する方法を紹介します！
CSSでは、レスポンシブに対応させるためのメディアクエリを書く機会が多いですよね。 特にブレイクポイントの多いサイトだと、以下のように記述量が多くなってしまいがちです。 .block { width: 30%; } @media screen and (max-width: 1080px) { .block { width: 50%; } } @media screen and (max-width: 768px) { .block { width: 80%; } } @media screen and (max-width: 480px) { .block { width: 100%; } } さらに、ブレイクポイントが変わった場合、メディアクエリを記述した全箇所を書き直す必要があるので、かなり手間がかかります。 そこで今回の記事では、Sassの変数と@mixinの機能を使用してメディア
CSSだけで、つい押したくなるような立体感のあるボタンを実装する方法を紹介していきます。 マウスカーソルを当てたとき、クリックしたときにボタンが押されているようなアニメーションもつけてみました。 ＼ ホバーしてください ／
レスポンシブサイトの制作において、フォントサイズの指定方法に悩むことがよくありますよね。 複雑なデザインのサイトだと、ブレイクポイントを多く設定する必要があったりして、管理も大変になります…。 そこでこの記事では、レスポンシブ文字サイズを実装できるvwという単位について紹介します！
ページ上にリンクを設定する場合には、aタグを使用しますよね。 aタグで作成されたリンクは、通常以下のように下線が引かれています。 リンクテキスト この下線を「ホバーに合わせてアニメーション付きで表示したい」という場合があるかと思います。 しかしそのままでは、下線にアニメーションをつけることができません。 そこで今回の記事ではlinear-gradientを使用して、リンクホバー時に下線が横に伸びるアニメーションを実装する方法を紹介します！ 多くの記事では擬似要素を使った方法が紹介されていますが、この記事ではCSSグラデーションを使用します。 リンクテキストが改行される場合にも対応できますので、是非参考にしてみてください。
サイト制作の案件では、Google Mapをページ上に埋め込むことがよくあります。 共有コードをサイトに貼り付けるだけで会社やお店の場所を載せることができるので、すごく便利ですよね。 しかしGoogle Mapは埋め込み用コードをそのまま設置しても、レスポンシブになりません。 PCでは問題なく表示されるのですが、スマートフォンなど画面幅の狭いデバイスで見ると、地図が縦長になってしまいます…。 そこで今回の記事では、Google Mapの比率を保持したままレスポンシブに対応させる方法を紹介します！ この記事を読むことで、以下のようにGoogle Mapをレスポンシブで埋め込むことが可能になります。
MW WP Formでフォームを作成する際に、エディター内で改行するとpタグやbrタグが自動挿入されてしまいます。 不要なタグが自動で挿入されると、デザイン崩れや思いがけないバグが発生するので、できればストップさせたいですよね。 そこで今回の記事は、MW WP Formのエディタ内のタグ自動挿入を無効にする方法を紹介します！ コピペ用のコードを用意していますので、ぜひ参考にしてみてください。 MW WP Formのタグ自動挿入を無効にするコード functions.phpファイルを開き、以下のコードをコピペしてください。 <?php function mvwpform_autop_filter() { if (class_exists('MW_WP_Form_Admin')) { $mw_wp_form_admin = new MW_WP_Form_Admin(); $forms = $m
落ち葉を舞わせるエフェクトのDEMOページ 今回の実装内容を確認するために、DEMOページをご覧ください。 3種類の葉っぱをランダムサイズで降らせるエフェクトを実装しています。 実装内容が確認できたら、次でコードを見ていきましょう。 【コピペ用】落ち葉を舞わせるエフェクトの実装コード すべてのコードと必要な画像ファイルを用意しましたので、コピペしてお使いください。 index.html style.css main.js ファイルを作成し、以下のコードを貼り付けると使用できます。 画像は以下からダウンロードできるので、imgフォルダを作成して画像を追加してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
Webページ上に「ファイルをダウンロードできるリンクを設置したい」という場面があるかと思います。 主に製品のマニュアルが記載されたPDFや、画像などのアセットを配布したいときなどによく使われますね。 こういったダウンロードリンクを作成するには、aタグのdownload属性を使用するだけで簡単に実装できます！ 今回の記事では、
4つのサイトを作りながらGatsby.jsを学べるおすすめUdemyコースを紹介！ 2022 12/11 Web制作をしている人なら、JAMstackという言葉を聞いたことがあるのではないでしょうか。 それぞれの頭文字はJavaScript・API・Markupを意味し、高速でセキュリティ性の高いサイトを作れることが特徴ですね。 JAMstackで開発する際の主な構成は、「静的サイトジェネレーター」「ヘッドレスCMS」「ホスティングサービス」の3つなのですが、この静的サイトジェネレーターにあたるのがGatsby.jsです。 今回の記事では、Gatsby.jsで4つのサイトを作りながらJAMstackでの開発を学べるUdemyコースを紹介します！
WordPressの投稿一覧を表示するとき、「記事公開から○日間は”New”をつけて欲しい」といった要望をいただくことがあります。 イメージとしては、以下の画像のような感じです。 “New”のタグをつけることで、その記事が新しく投稿されたというのが一目でわかりますね。 そこで今回の記事では、記事公開から指定した期間”New”のテキストを表示する方法を紹介していきます。 【コピペ用】記事公開から指定期間中”New”を表示するコード 以下のコードを、WordPressの記事ループ内に記述してください。 <?php $days = 7; // テキストを表示する日数 $published_time = get_post_time(); $today = wp_date('U'); $show_threshold = $today - $days * 86400; if($published_ti
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【WordPress】functions.phpのコードを分割して管理する方法 | WebDev Tech
【Sass】変数と@mixinでメディアクエリを簡単に記述する方法 | WebDev Tech
【コピペOK】CSSで立体感のあるボタンを作成する方法 | WebDev Tech
font-sizeにvwを指定してレスポンシブ文字サイズを実装する方法 | WebDev Tech
【改行にも対応】aタグのリンクをホバーすると下線が横に伸びるアニメーションを実装する方法 | WebDev Tech
【CSS】Google Mapの比率を保持しながらレスポンシブで埋め込む方法 | WebDev Tech
MW WP Formでpタグの自動挿入を無効にする方法 | WebDev Tech
JSとCSSで落ち葉をひらひらと舞わせるエフェクトを実装する方法 | WebDev Tech
【aタグで簡単実装】ファイルをダウンロードさせるdownload属性の使い方 | WebDev Tech
4つのサイトを作りながらGatsby.jsを学べるおすすめUdemyコースを紹介！ | WebDev Tech
記事公開から指定した期間”New”のテキストを表示する方法【WordPress】 | WebDev Tech