プログラミング– tag –

「予約フォームを作ってほしい」と頼まれたとき、何から手をつけたらいいか迷ったことはありませんか？ 特にPHP初心者の方や、副業・案件でWeb制作を受けている方にとって「メール通知はどう組み込む？」「予約の重複は防げる？」といった不安はつきもので...

「CSVで顧客管理してるけど、どうやってメール送ったらいい？」「案件でメール一括配信が必要だけど、ライブラリや高額なサービスは使いたくない…」 そんな声に応えて、今回紹介するのはPHPとCSVを使って、自分だけのメール配信スタンドを構築する方法です...

「画像をきれいに並べたい」「クリックで拡大できるギャラリーを自分でも作ってみたい」そんなふうに感じたことはありませんか？ とくにポートフォリオや商品紹介のページでは、視覚的に魅せるギャラリーがあるかどうかで第一印象が大きく変わります。 で...

「FAQが長くて、目的の項目が見つけにくい…」 「商品一覧に検索機能を付けたいけど、どう作るの？」 そんなお悩み、感じたことはありませんか？ この記事では、キーワードを入力するだけでリストの内容が自動で絞り込まれ、 さらに該当部分がハイライト表...

「CSVで登録データを管理したいんですが、実装できますか？」 クライアントや社内から、こんなふうに相談された経験はありませんか？でも、CSVの読み取りや書き出し、DBとの連携って、意外と手間がかかりそうで不安になりますよね。 そんな方にこそ知って...

「記事が長くなりすぎて、読者が離脱してしまう…」「もっと読むボタンって、どうやって作るの？」 そんな悩みを持つWeb制作者の方へ。今回ご紹介するのは、ページ表示を最適化する「もっと読むボタン」と「無限スクロール」の作り方です。 いずれもユーザ...

「Dockerってよく聞くけど、なんだか難しそう…」「VS CodeでDockerを使うと何が便利なの？」 そんな方にこそ試してみてほしいのが、VS Code × Dockerのコンテナ開発環境です💡 Dockerは、アプリ開発に必要な環境をまるごと“箱（コンテナ）”の中に閉じ込めて...

「サーバーに直接接続してコードを書けたら便利そう…」「Docker環境をVS Codeで扱えるってどういうこと？」 そんな疑問を持っている方へ。実は、VS Codeには「リモート開発」に特化した強力な拡張機能があり、自宅のPCからサーバー上のファイルを編集した...

「VS Codeを使っているけど、もっと便利にカスタマイズしたい！」「拡張機能ってたくさんあるけど、どれを入れればいいの？」 そんな方におすすめなのが、VS Codeの拡張機能（エクステンション）！ 🎉 VS Codeは、拡張機能をインストールすることで、作業効...

プログラミングを始めたいけれど、「どのコードエディタを使えばいいの？」「初心者でも簡単に扱えて、高機能なエディタが欲しい！」 そんなあなたにおすすめなのが、Visual Studio Code（VS Code） です！✨ VS Codeは、無料で使える高機能なコードエディ...

📈 「サイトのSEO効果を高めたい！」🏠 「訪問者が迷わない分かりやすいナビゲーションを作りたい！」 そんなあなたにおすすめなのが、「パンくずリスト」です！🍞✨ パンくずリストは、サイト訪問者が現在どのページにいるのか一目でわかるナビゲーション機能...

「WordPressのテーマをもっと自由にカスタマイズしたい！」「プラグインに頼らず、オリジナル機能を追加したい！」 そんなあなたにおすすめなのが、functions.phpを使ったテーマカスタマイズです。 functions.phpは、WordPressテーマに新機能を追加したり...

「WordPressでオリジナルテーマを作ってみたいけれど、何から始めればいいの？」「テーマ開発なんて難しそう…でも、サイトをもっと自由にカスタマイズしたい！」 そんな悩みを抱えている方に向けて、超初心者向けにわかりやすくオリジナルテーマの作り方を...

WordPressサイトを運営していると、ページごとやカテゴリーごとに異なるデザインを適用したくなることがあります。 例えば、特定の固定ページだけ背景色を変えたり、カテゴリーごとに異なるフォントを設定したりする場合です。 本記事では、WordPressでペ...

WordPressでjQueryを使いたいのに「$ is not function...」などのエラーがでて動かないと困っていませんか？ 本記事では、WordPressでjQueryを適切に読み込む方法や、よくあるトラブルの解決策を詳しく解説します。 WordPressでjQueryを使う基本の考え方 j...

WordPressでオリジナルテーマを作成するときや、カスタマイズをする際などに皆さんはどのようにCSSやJavaScriptを読み込んでいますか？ 実は間違った方法で追加してしまうと、サイトの表示速度が遅くなったり、テーマやプラグインと競合して不具合が起こる...

WordPressで画像スライダーを作るなら「slickスライダー」がおすすめ！ slick.jsとは？他のスライダープラグインとの違い Webサイトで画像スライダーを作成する方法はいくつかありますが、「slickスライダー（slick.js）」は特に人気のあるスライダーライ...

PCとスマホで記事一覧の表示数を変える理由 なぜデバイスごとに表示数を変えるべきか？ WordPressのテーマ開発では、記事一覧ページの表示数をPCとスマホで変えることが重要です。 なぜなら、PCとスマホでは画面の大きさやユーザーの操作方法が異なり、同...

期間限定サイトやイベントの開催日時に合わせてリンクをアクティブにしたい。 または、開催期間が過ぎたらリンクを自動でオフにしたいといった要望を受けたことはありませんか？ それをカレンダーやリマインダーに入れて、当日リンクを繋ぐ作業をしてもい...

HTMLでリンクを切る時、aタグのhrefに書いてあるURLを消したり、コメントオフの記号でリンク要素を切り替えていませんか？ aタグはhrefの中のURLを消してもクリックイベントが残ってしまっているため、同ページの最上部に移動してしまいます。 もう一度そ...

この記事はこんな要望にお応えしていきます。 この記事で実現すること 画像の一部分を切り出して表示させたい 画面のサイズに合わせて背景画像の大きさを変化させたい 画面のサイズに合わせて画像の切り出す範囲を変えたい ロゴ画像の背景に別の画像を設定...

今日はジャバスクリプトを使って、簡単な計算アプリを作って行きたいと思います。 こんな感じの計算フォームを作って行こうと思います。 計算フォームの概要 入力フォームに数値を入力する JavaScriptで数値を受け取って計算する 結果をHTLMでWEBページに...

WEBサイト全体や特定のページにパスワードをかけて、公開先を限定したい。 だけど、ログインページを作るのはハードルが高そうだし、どこの誰が書いたコードかわからないコードをコピペして作るのはなんだか不安。 そんなときに使えるのがBASIC認証という...

今回は最近のWEBサイトでは頻出のブログカードの作り方について説明していきます。 そもそもブログカードっていう呼び方自体、あまり知られていませんので、私も最初は作り方を探すのにも苦労しました。 この記事では下記のお悩みを解決していきます。 サ...

PCとスマホでJavaScriptの動作を変えたいことってありませんか？ 例えばアコーディオンメニューはスマホ表示の時だけにしたいとか、サイズや動作条件をPCとスマホで変えたい時などにとても便利な機能です。 CSSでは簡単に切り替えられるのに、JavaScriptだ...

コストなどの問題で、コンタクトフォームを設置できない。 そんな時はメールソフトを起動するリンクを張って、問い合わせを受けることになりますよね。 ただ、送信先のメールアドレスだけが入った新規のメールが立ち上がるだけでは、そこで問い合わせをや...

お店や企業のWEBサイトだったり、LP（ランディングページ）をスマホ表示に対応させることは、GoogleのSEO的にも、お客さんの使いやすさ的にも今やマスト。 さらに、より多くの問い合わせや申込みが欲しいなら、「問い合わせたい」という消費者の動機は絶対...

VS Codeはデフォルトで英語の設定になっているので、メニューなどを開いてもじっくり見れば理解出来るものの、やはり直感性にかけて一瞬ですが手が止まってしまいます。 積み重なれば結構なタイムロスになりますし、ストレスも感じるようになって来ます。 ...

作成中のWEBサイトをお客さんに確認してもらうときや、公開はしたものの検索に引っかかって欲しくないページって必ず出てきますよね。 　 ページの更新や運用までを私たちにまかせてくれるお客さんなら、こちらでnoindexを書くだけなので、大した問題には...

どのページを開いているか、ひと目で分かるように「開いたページのメニュー色を変えたい！」 でも、全部のページでHTMLを編集するのはとっても面倒ですよね。 コーディング途中でメニュー構成が変わったりすると、直すのも一苦労です。。 そんなときに役立...

WordPressの問い合わせフォームで定番なのがこのContact Form7ですが、入力途中の情報が誤って届いたりしたことありませんか？ Contact Form7の標準の仕様では、エンターキーで送信ができてしまうような作りになっているため、フォームから問い合わせをし...

HTMLでWEBサイトを作っていて、フッターにある連絡先の変更指示がきた・・・ 複数ページに渡って連絡先が書かれているので、何ページも修正しないといけないのはすごく面倒。 しかも、たまに修正漏れで直ってないと言われてしまうこともある。 そんなあな...

WordPressにはサイト内検索機能が簡単に実装できるようになっていますが、その検索結果をハイライト表示させたいと思ったことはありませんか？ ハイライトの例 プラグインなどでもハイライトさせるところまではかんたんに実装可能だったりするのですが、タ...

多くのサイトでワードプレスが使われるようになって、サイトのURLから.htmlや.phpといった拡張子を消して欲しいという要望がお客さんから出るようになってきました。 他にも運用のしやすさから、サイトをHTMLではなく、PHPでコーディングをすることがあり...

コンテンツはたくさんあるけど、メニューはすっきりさせたい。 そんな時にマウスをメニューの上に重ねると下にスルッとでてくるメニューを良く見かけますよね。 パッと見はスッキリしてみえるけど、自然とピンポイントのページに誘導するのにすごく便利な...

企業サイトをWordPressで作成していると、お知らせとコラムやその他の記事を分けて管理したいという依頼をいただく事があります。 目的は様々ですが、人気記事のランキングの中に休業日のお知らせなどが混ざらない様にしたり、部署ごとに管理できる投稿を...

今回はWordPressで複数の投稿タイプを管理するときに便利な機能を一つご紹介したいと思います。 投稿タイプを分けたとき、特定の投稿タイプだけ検索したい。 投稿タイプ毎に検索結果の表示方法やデザインも変えたい。 と思ったことはありませんか？ 例えば...

文章がだらだらと続くサイトって見づらいし、どこに何が書いてあるかわかりづらい。 Q＆Aや細かく階層が分けられたメニューも全体を俯瞰したり、目的のものに辿り着きにくくなりませんか？ 必要な時に、見たいものだけ読者に選んでもらって、表示できる仕...

前回に続き、ハンバーガーメニューの作り方を解説していきます。 出来上がりイメージはこちら 今回は前回の動くハンバーガーメニューのボタンをクリックした時に、横から出現するメニューを作って行きたいと思います。 ハンバーガーメニューのボタンの仕組...

ろくにデプロイもできない、超初級プログラマーの私が、ConoHaのVPSと用意されているテンプレートのRuby on RailsにLet's Encryptを使って実現した常時SSL化のやり方をご紹介します。 サーバー追加のときに入れられるLet's Encryptではうまく行かず、かな...