CSSGoogleマップを埋め込み、簡単にレスポンシブ化するテクニック
GoogleマップをWebサイトに埋め込んで、レスポンシブ対応したい。 こんにちは。 フリーランスWebコーダーの、たけちです。 Webサイトに地図を表示したいときに便利なのが、「Googleマップの埋め込み機能」です。 コードをコピペするReadMore...
CSS
Web制作CodePenをブログやNotionに埋め込みする方法
CodePenで作った画面やコードをご自身のWordPressブログで公開したり、Notionにスニペットとして保存したいときがあると思います。 そんな方のために、今回はCodePenをブログやNotionに埋め込みする方法を解説します。 ReadMore...
jQuery【jQuery】領域外をクリックしたときに｢閉じる｣イベントを発動する方法
たとえば｢モーダルの背景をクリックしたとき｣のように、指定した領域の外側をクリックしたときに要素を閉じる方法について解説します。 領域外をクリックしたときに｢閉じる｣イベントを発動するjQueryの書き方 jQueryで領域外をクリックしたReadMore...
Web制作【無料プランでもOK】CodePenで画像を使う方法
CodePenで画像を扱うには、基本的に有料プランへの加入が必要です。 ですので無料プランだと、普段通りにimgタグのsrc属性に画像パスを埋め込んでも表示されません。 しかし、今回お伝えする｢ひと手間｣を加えると、無料プランのままでも画像ReadMore...
CSS【CSS】box-shadowの基本的な使い方をマスターしよう！
box-shadowプロパティの使い方がイマイチわからない。そう感じていませんか？ box-shadowは指定する値が多いので、難しく感じるかもしれませんね。 とはいえ、基本的な使い方を抑えればとても簡単ですので、この機会に克服しちゃいましReadMore...
CSS【CSS】box-shadow（ドロップシャドウ）で影を下だけつける方法
CSSのプロパティであるbox-shadow（ドロップシャドウ）を使って、影を下だけにつける方法を解説します。 なお、box-shadowの使い方が曖昧な人は、下の記事を先に読んでおくと理解しやすいと思います。 box-shadowで影を下ReadMore...
Web制作VSCodeが急に英語になった場合の対処法【日本語に戻す】
VSCode(Visual Studio Code)を立ち上げたら、急に英語表記に変わってしまった。 こんなときに、日本語に戻す方法を解説します。 VSCodeが英語になったとき日本語に戻す方法 VSCodeの英語表記を日本語に戻す方法を解ReadMore...
CSSCSSで文字数制限（行数制限）して3点リーダーを表示する方法【複数行でもOK】
文字数や行数を制限して｢3点リーダー（・・・）｣を表示するにはどうすればいいんだろう？ 記事一覧などで｢文字数を制限して3点リーダー（･･･）を表示したい｣というケースがあると思います。 厳密に言うと、CSSでは｢100文字｣みたいに文字数ReadMore...
Contact Form 7【Contact Form 7】確認画面と完了画面（サンクスページ）を作る方法
Contact Form 7のお問い合わせフォームに「確認画面」と「完了画面（サンクスページ）を作りたいな。 こんにちは。 フリーランスWebコーダーの、たけちです。 Contact Form 7でお問い合わせフォームを作る際に｢確認画面とReadMore...
WordPressfunctions.phpのCSSやJSが反映されないときのチェック項目
functions.phpでCSSやJavaScriptなどの読み込みたいのに、反映されない･･･？ WordPressでオリジナルテーマを作成する際の定番作業といえばfunctions.phpでのCSSやJavaScriptなどの読み込みReadMore...