カスタムフィールドで未入力の時は項目ごと非表示に出来ない？ WordPressのカスタムフィールドは、固定ページなど通常編集しないページでも部分的に編集出来るように出来ます。 ただしテキストなど未入力にしたい時もあります。 そしてそのまま未入力にすると不都合が起きる事があるので、今回はそうならないように未入力の時は要素ごと非表示にする方法をご紹介していきます。 ※今回はAdvanced Custom Fieldsを使った例で解説していきます。 カスタムフィールドが未入力（空）の時は項目ごと非表示にする方法 ...

Adobe Creative Cloud年間プラン（月々払い）の解約手数料って結構高い コーディングをするにはデザインカンプを使いますが、カンプにはいくつか種類があります。 Photoshop Illustrator XD Figma 例外でPowerPointも1回だけありましたが、基本的には上記4種類のどれかになると思います。 どのデザインデータで来るかはコーダー側で指定はせず、基本的にデザイナーさんによります。 そしてお付き合いするデザイナーさんが決まっている場合は全然使わない物も出てきます。 私も ...

WordPressでページの上にある黒いバーの位置を変更出来ない？ WordPressサイトのページ上部にある黒いバーはツールバーと呼ばれるもので、簡単に管理画面やカスタマイズ画面に切り替える事が出来ます。 デフォルトでは表示されるようになっていて、前回はこれを非表示にする方法をご紹介しました。 【WordPress】ページ上部の黒いバー（ツールバー）を非表示にする方法 今回はこのツールバーを下に表示する方法をご紹介していきます。 WordPressでページ上部の黒いバー（ツールバー）を下に移動するプラグ ...

WordPressでページの上にある黒いバーって消せない？ WordPressサイトのページ上部にある黒いバーはツールバーと呼ばれるもので、簡単に管理画面やカスタマイズ画面に切り替える事が出来ます。 デフォルトでは表示されるようになっていますが、非表示にする事も出来るので今回はその方法をご紹介していきます。 ちなみに表示はさせたいけど下に移動させたい場合はプラグインを使えば簡単に出来ます。 【WordPress】ページ上部の黒いバー（ツールバー）を下に移動するプラグイン Admin Bar Positio ...

お名前.comでドメイン取得したけど、エックスサーバーで使えるようにするにはどうしたらいい？ 今回はこのような状態を想定します。 お名前.comでドメイン取得済み エックスサーバーを契約済み エックスサーバーでWordPressをインストールしたい それでは解説していきます。   なお、エックスサーバーで契約する時はエックスサーバーでドメインを取得した方が楽です（キャンペーンでドメインが永久無料の時もあります） 詳しくはこちらの記事を参照下さい。 初心者でも10分で出来る！WordPressブロ ...

画像をhoverしたら拡大するにはどうすればいい？ hoverしたら画像を拡大させるのは実務でも非常に良くある実装になります。 画像を表示させるにはimgタグとbackground-imageの2種類の方法があります。 今回は両方のケースで画像を拡大する方法を解説していきます。 hoverしたら画像を拡大する方法（imgタグ） まずはimgタグを使った場合です。 コードを見ていきます。 <div class="img-wrapper"> <img src="画像パス" alt=""&gt ...

画像をhoverしたら黒いマスクかけてテキストを表示させたいけどどうしたらいい？ これは実務でも良くあるので、必ず出来るようにしておきましょう。 hoverしたら背景に透過させた黒いマスクをかけテキストを表示させる方法 まずはHTMLから見ていきます。 <div class="img-wrapper"> <img src="画像パス" alt=""> <div class="hover-mask"> <p> テキストが入ります。 </p> &lt ...

Contact Form7ってメールアドレス複数設定出来る？？ すごく簡単に設定出来るよ！ お問い合わせフォームの送信先として設定するメールアドレスですが、複数設定したい場合もあると思います。 今回はその方法をご紹介していきます。 Contact Form7の使い方については以下の記事を参照下さい。 WordPressお問い合わせフォームの定番プラグイン Contact Form 7の使い方 Contact Form7でメールアドレスを複数設定する方法 まずは管理画面からお問い合わせフォームを開きます。 ...

セレクトボックスで1行目を選択不可にしたいけどどうすればいい？ お問い合わせフォームなどによくあるセレクトボックスですが、1行目は選択出来ないようにしたい場合もあると思います。 今回はその方法をご紹介します。 セレクトボックスで1行目を選択不可にする方法 まずは通常のセレクトボックスを見てみます。 See the Pen セレクトボックス①（通常） by junpei (@junpei-sugiyama) on CodePen. ここでの選択肢はチワワ・トイプードル・ミニチュアダックスの3つですが、選択肢 ...

placeholderの色ってどうやって変更するの？ お問い合わせフォームなどでよくあるplaceholder。 これは入力項目の例を表示させておくもので、これがあると「こういう風に入力します」というのが分かります。 こういうやつですね。 基本的には薄い色にしますが、この色を変える方法をご紹介します。 placeholder(プレースホルダー)の色を変更する方法 例として以下のhtmlで解説していきます。 <div> <input type="text" class="name01" p ...

カスタムフィールドで未入力の時は項目ごと非表示に出来ない？ WordPressのカスタムフィールドは、固定ページなど通常編集しないページでも部分的に編集出来るように出来ます。 ただしテキストなど未入力にしたい時もあります。 そしてそのまま未入力にすると不都合が起きる事があるので、今回はそうならないように未入力の時は要素ごと非表示にする方法をご紹介していきます。 ※今回はAdvanced Custom Fieldsを使った例で解説していきます。 カスタムフィールドが未入力（空）の時は項目ごと非表示にする方法 ...

WordPressでページの上にある黒いバーの位置を変更出来ない？ WordPressサイトのページ上部にある黒いバーはツールバーと呼ばれるもので、簡単に管理画面やカスタマイズ画面に切り替える事が出来ます。 デフォルトでは表示されるようになっていて、前回はこれを非表示にする方法をご紹介しました。 【WordPress】ページ上部の黒いバー（ツールバー）を非表示にする方法 今回はこのツールバーを下に表示する方法をご紹介していきます。 WordPressでページ上部の黒いバー（ツールバー）を下に移動するプラグ ...

WordPressでページの上にある黒いバーって消せない？ WordPressサイトのページ上部にある黒いバーはツールバーと呼ばれるもので、簡単に管理画面やカスタマイズ画面に切り替える事が出来ます。 デフォルトでは表示されるようになっていますが、非表示にする事も出来るので今回はその方法をご紹介していきます。 ちなみに表示はさせたいけど下に移動させたい場合はプラグインを使えば簡単に出来ます。 【WordPress】ページ上部の黒いバー（ツールバー）を下に移動するプラグイン Admin Bar Positio ...

Contact Form7ってメールアドレス複数設定出来る？？ すごく簡単に設定出来るよ！ お問い合わせフォームの送信先として設定するメールアドレスですが、複数設定したい場合もあると思います。 今回はその方法をご紹介していきます。 Contact Form7の使い方については以下の記事を参照下さい。 WordPressお問い合わせフォームの定番プラグイン Contact Form 7の使い方 Contact Form7でメールアドレスを複数設定する方法 まずは管理画面からお問い合わせフォームを開きます。 ...

サイトヘルスステータスに変なメッセージがあるけど何これ？？ サイトヘルスとは、WordPress5.2以降実装されたサイトのセキュリティやパフォーマンスの状態をチェックする機能です。 サイトの状態をより良くする為の情報が表示されているので、出来るだけ良い状態にしておきたい所ですね。 「推奨セキュリティヘッダーがインストール済みではありません」とは？ 管理画面のダッシュボードにはサイトヘルスステータスという項目があります。 ここを見てみると、まだ改善出来る項目があることが分かります。 ここでサイトヘルス画面 ...

WordPressブログは開設出来たけど何から始めていいの？ 今回はそんな疑問にお答えしていきます。 まだブログを開設していない場合はこちらの記事を参照下さい。 初心者でも10分で出来る！WordPressブログの始め方【丁寧に解説】 初期設定をする前に これからやる初期設定は後から変更可能な物も多いですが、 SEO対策 セキュリティ面 主にこの2つが関係してくるので、結構やることは多いですがブログを書き始める前にしっかり設定しておきましょう。 どうせやるなら最初からやった方がいいですよね。 ただ全部一気 ...

サイトマップって何？どうやって作るの？ ブログを始めたら最初に作っておきたいサイトマップ。 これには2種類あり、それぞれ役割が違うので両方作りましょう。 サイトマップとは？ サイトマップとはサイトの地図という意味ですね。 これはサイト内のページリンクをまとめた一覧ページで、以下の2種類あります。 XMLサイトマップ：検索エンジン向け HTMLサイトマップ：ユーザー向け それぞれ役割が違うので、サイトマップは2つ作る事になります。   XMLサイトマップとは XMLマップとは検索エンジンにサイトの ...

プライバシーポリシーって何？ ブログを書き始める前に必ず作成しておきたいプライバシーポリシー。 今回はプライバシーポリシーについての解説と、コピペで作成していけるようにサンプルをご紹介します。 プライバシーポリシーとは？ 最初にプライバシーポリシーについて簡単に説明しておきます。 プライバシーポリシーとは個人情報を取り扱いについて定めたもので、「サイトで収集した個人情報は悪用しません」と言った内容を明記したり、逆に「サイトの画像や文章を無断で転用しないで下さい」と記載するものです。 これは訪問者に安心して ...

ブログを始めたけどGoogleサーチコンソールの設定ってどうすればいい？ 今回はブログ開設後に必ず導入しておきたいGoogleサーチコンソールの設定方法について解説していきます。 ブログの開設がまだの人はこちらの記事を参照下さい。 初心者でも10分で出来る！WordPressブログの始め方【丁寧に解説】 Googleサーチコンソールとは Googleサーチコンソールとは、無料で使えるWebサイトの管理ツールです。 どんな事が分かるかというと、 どんなキーワードで検索されてきたか 検索の結果、何番目に表示さ ...

ブログを始めたけどGoogleアナリティクスの設定ってどうすればいい？ 今回はブログ開設後に必ず導入しておきたいGoogleアナリティクスの設定方法について解説していきます。 ブログの開設がまだの人はこちらの記事を参照下さい。 初心者でも10分で出来る！WordPressブログの始め方【丁寧に解説】 Googleアナリティクスとは Googleアナリティクスとは無料で使えるアクセス解析ツールです。 どんな事が分かるかというと、 PV数 ユーザー数 どの時間帯にアクセスされたか どのデバイスからアクセスされ ...

今回はWordPressオリジナルテーマの作り方【第10回】カスタム投稿編となります。 前回までに以下の事をやってきました。 ファイルの準備 トップページ作成 functions.phpからCSSやJavaScriptなどを読み込む 固定ページ作成 ブログカード作成 記事一覧ページ作成 パンくずリスト作成 個別記事ページ作成 カテゴリーページ作成 今回のWordPressオリジナルテーマの作り方はカスタム投稿編です。 案件によってはない事もありますが、逆に当たり前のようにある事も多いのでぜひ覚えておいた方 ...

今回はWordPressオリジナルテーマの作り方【第9回】カテゴリーページ編となります。 前回までに以下の事をやってきました。 ファイルの準備 トップページ作成 functions.phpからCSSやJavaScriptなどを読み込む 固定ページ作成 ブログカード作成 記事一覧ページ作成 パンくずリスト作成 個別記事ページ作成 今回はカテゴリーページについて書いていきたいと思います。 まずこちらを見て下さい。 これは個別記事ページのパンくずリストです。 記事のタイトルの前にカテゴリーである「チワワ」と書い ...

今回はWordPressオリジナルテーマの作り方【第8回】個別記事ページ編となります。 前回までに以下の事をやってきました。 ファイルの準備 トップページ作成 functions.phpからCSSやJavaScriptなどを読み込む 固定ページ作成 ブログカード作成 記事一覧ページ作成 パンくずリスト作成 今回は個別記事ページについて書いていきたいと思います。 これはWordPressオリジナルテーマの作り方⑥で作成した記事一覧ページから記事をクリックした先のページの事です。 それではまずファイルを作成し ...

今回はWordPressオリジナルテーマの作り方【第7回】パンくずリスト編となります。 前回までに以下の事をやってきました。 ファイルの準備 トップページ作成 functions.phpからCSSやJavaScriptなどを読み込む 固定ページ作成 ブログカード作成 記事一覧ページ作成 今回はパンくずリストについて書いていきたいと思います。 その前にパンくずリストとは何かということについて軽く説明していきます。 パンくずリストとは？ 最初聞いた時何のことだ？と思いましたが、これはWikipediaにも載っ ...

今回はWordPressオリジナルテーマの作り方【第6回】記事一覧ページ編となります。 前回までに以下の事をやってきました。 ファイルの準備 トップページ作成 functions.phpからCSSやJavaScriptなどを読み込む 固定ページ作成 ブログカード作成 今回は記事一覧ページについて書いていきたいと思います。 記事一覧ページ用のテンプレートファイルを作成 まずはテンプレートファイルを作成します。 今回はWordPressオリジナルテーマの作り方①（ファイルの準備編）で作成したhome.phpを ...

今回はWordPressオリジナルテーマの作り方【第5回】ブログカード編となります。 前回までに以下の事をやってきました。 ファイルの準備 トップページ作成 functions.phpからCSSやJavaScriptなどを読み込む 固定ページ作成 今回はトップページに新着3件表示させるという設定で、ブログカードについて書いていきたいと思います。 ブログカードとは？ まずブログカードとは何かということですが、画像（アイキャッチ）やタイトル付きの投稿記事のリンクのことになります。 普通のリンクであれば、 Wo ...

今回はWordPressオリジナルテーマの作り方【第4回】固定ページ編となります。 前回までに以下の事をやってきました。 ファイルの準備 トップページ作成 functions.phpからCSSやJavaScriptなどを読み込む 今回は固定ページの作り方について解説していきます。 固定ページの作り方は2つ 固定ページの作り方は2つあります。 テンプレートファイルで作成（page-〇〇.php） 固定ページの編集画面でテキストエディタに直書き（page.php） このどちらかになります。 共通しているのは、 ...

今回はWordPressオリジナルテーマの作り方【第3回】functions.php編となります。 前回までに以下の事をやってきました。 ファイルの準備 トップページ作成 前回の記事でトップページをパーツごとに分ける作業は完了しました。 今回はfunctions.phpというテーマファイルについて説明していきたいと思います。 functions.phpとは functions.phpとは各ページのコンテンツを表示させるものではなく、分かりやすく言うとWordPress全体のプラグインのような働きをするもの ...

今回はWordPressオリジナルテーマの作り方【第2回】トップページ編となります。 オリジナルテーマを作るのに必要なテンプレートファイルの準備に関しては前回の記事をご参照下さい。 WordPressオリジナルテーマの作り方①（ファイルの準備編） front-page.phpにindex.htmlのコードをコピペ まずはトップページの元となるfront-page.phpに、準備しておいた静的ページであるindex.htmlの中身を丸ごとコピペします。 index.htmlのファイルごとコピペしてファイル名 ...

WordPressのオリジナルテーマってどうやって作るの？ 今回はそんな疑問にお答えします。 今回はhtmlやcssで静的ページの作成が完了し、これからそのファイルを使ってWordPressのオリジナルテーマを作成したい人向けの記事となります。 最初から最後まで書くとボリュームが半端ないので、何回かに分けて書いていきます。 またWordPressを1から勉強したい方は動画で学べるUdemyがおススメです。 本と違って動画だと手を動かしながら確認出来るのでいいですね。 Udemyは有料の教材ですが、かなりの ...

Adobe Creative Cloud年間プラン（月々払い）の解約手数料って結構高い コーディングをするにはデザインカンプを使いますが、カンプにはいくつか種類があります。 Photoshop Illustrator XD Figma 例外でPowerPointも1回だけありましたが、基本的には上記4種類のどれかになると思います。 どのデザインデータで来るかはコーダー側で指定はせず、基本的にデザイナーさんによります。 そしてお付き合いするデザイナーさんが決まっている場合は全然使わない物も出てきます。 私も ...

WordPressブログは開設出来たけど何から始めていいの？ 今回はそんな疑問にお答えしていきます。 まだブログを開設していない場合はこちらの記事を参照下さい。 初心者でも10分で出来る！WordPressブログの始め方【丁寧に解説】 初期設定をする前に これからやる初期設定は後から変更可能な物も多いですが、 SEO対策 セキュリティ面 主にこの2つが関係してくるので、結構やることは多いですがブログを書き始める前にしっかり設定しておきましょう。 どうせやるなら最初からやった方がいいですよね。 ただ全部一気 ...

ポートフォリオ作ったけどどうやって公開すればいいの？ ポートフォリオは作ったら人に見せるために公開する必要があります。 公開する方法はいくつかありますが、今回は実務での納品を意識した公開方法を解説していきます。 ポートフォリオの公開方法 まず今回ポートフォリオを公開する方法は、インターネット上に公開するという方法です。 PC上で作成したものはインターネット上にアップロードして公開しないと、営業する際にクライアントに見せる事が出来ません。 PCを持って行って対面で会うのであれば、自分のPCにあるものを見せる ...

Macでよく使うショートカットキー教えて 今回はそんな疑問にお答えしていきます。 というより最近メインPCをWindowsからMacに変え、色々と不慣れな部分があるので自分のためにここにまとめますw Macの便利なショートカットキー あまり使わない物が羅列してても見にくいと思うので、よく使うもの、もしくは使いそうなものしか書いていません。 個人的にですが、 よく使うもの：赤太文字 便利そうなもの：太文字 にしてあります。 その他は今後使うかも知れないなぁと思ったものが書いてあります。 キー 役割 comm ...

Web制作の納品時にブラウザチェックするらしいけど、どうすればいいの？ ブラウザだけじゃなくて端末でのチェックも必要だよ！ 今回は納品時におけるチェック項目について解説していきます。 ブラウザチェックとは？ Webサイトを見るのに必要なブラウザですが、様々な種類があります。 chrome safari FireFox Microsoft Edge IE（Internet Explorer） 例えばchromeでは正常に表示されていてもsafariでは崩れてるという事があるので、基本的には上記主要ブラウザ全 ...

旅しながら働くノマドになりたいけど、プログラミング勉強すれば可能？ Web制作系であれば可能だよ！ 2021年現在コロナ過という事もあり、ノマドワーカーという働き方に関心が集まってきていると思います。 結論から言えばプログラミング初心者でもWeb制作系であればノマドになれます。 今回は30代後半から独学で勉強し、2年後に海外移住を計画出来るようになった私の経験から解説していきます。 ノマドとは？ まずノマドとはなんぞや？という所から軽く説明しておきます。 ノマドとは英語で遊牧民という意味です。 つまり特定 ...

コーディングやデザインの勉強におすすめの本あったら教えて 今回はこんな声にお応えしていきます。 Web制作の勉強方法は様々ですが、今回は書籍で勉強したい方向けの記事となります。 今まで自分が購入して良かったものから、周りで持っている人が多い評判のいい本まで幅広くご紹介していきます。 このブログを見ている方にはご自身の目的に合ったものが必ず見つかると思います。 またAmazonではレビューも沢山書いてあるので、購入するかどうかはレビューを見て判断してもいいかと思います。 コーディングの書籍 まずはコーディン ...

リモートワークするならプログラミングがいいらしいけど本当？ Web制作ならフルリモートも可能だよ！ 今回はこんな疑問にお答えします。 ちなみに私は初案件からずっとフルリモートです。 プログラミングの仕事とは？ まずプログラミングの仕事についてお話します。 自分が今のWeb制作を始めたきっかけとしては、リモートワークがしたかったからです。 そして「リモートワーク」や住む場所を短期間で変えながら仕事をする「ノマドワーカー」で検索して辿り着いたのがプログラミングでした。 そしてプログラミングの仕事とはどんな仕事 ...

テストサーバーってどうやって用意するの？ 今回はエックスサーバーでテストサーバーを作成する方法について解説していきます。 テストサーバーとは？ まずテストサーバーについて簡単に解説しておきます。 通常Web制作は自分のPC上（ローカル環境）で制作し、それをテストサーバーという実際にインターネットに繋がっているサーバーにアップして、問題がなければ本番環境に移行するという形になります。 ローカル環境で制作 テストサーバーにアップ 本番環境に移行 ローカル環境では問題なくても実際のサーバーにアップしたら問題が発 ...

コードをまとめてすぐ引き出せるようにしたいんだけど、いい方法ない？ Notionっていうツールがおすすめだよ！ コーディングのスピードを上げる為にはコードの管理が必須です。 その為にはよく使うコードは管理しておく必要があります。 今回は万能ツールNotionを使ってコード管理する方法について解説していきます。 またコーディングスピードを上げるには自作したコードスニペットの登録も有効で、そちらについてはこちらの記事を参照下さい。 VSCodeで自作したスニペットを登録する方法 Notionを使う コード管理 ...