リンク先に飛ばないように一時的に無効にしてください。とご要望があった場合があったのですが、href属性の値で指定したurlを外すだけでは、そのページのトップに飛んでしまうので、aタ […]
リンク先に飛ばないように一時的に無効にしてください。とご要望があった場合があったのですが、href属性の値で指定したurlを外すだけでは、そのページのトップに飛んでしまうので、aタ […]
HTMLで文章を任意の位置で改行したい場合にはbrタグを使用します。 文章だけでは、その文章を囲んでいる要素に合わせて自動で改行が行われますが、HTMLのbrを文章の改行したい部分 […]
gulpのBrowser-SyncでHTMLとCSSをプレビューする
今回はgulpのbrowser-syncを設定することで、ejsとsassからHTMLとCSSにコンパイルしたファイルを自動リロードしてプレビューできるようにしたコードを書き記した […]
GulpでSass(SCSS)をCSSにコンパイルできるようにする
GulpでSassのSCSSをCSSにコンパイルできるようにするための環境構築を簡単にまとめました。 コンパイル環境構築の目的は、Gulpでscssをcssにコンパイルしたcssフ […]
GulpでEJSからHTMLにコンパイルできるようにするための環境構築を練習してみたときのことをメモがてらまとめました。 ejsファイルを修正してコンパイルしたhtmlファイルを、 […]
円弧のデザインにした要素を作成したかったのでCSSのborder-radiusを使用して表現してみました。 CSSで円弧にした要素を作成してやりたかったことは、以下の画像のように背 […]
WordPressと静的サイトを共存させてみたときのやり方についてです。 「共存させてみる」とかカッコつけて言ってますが、WordPressをインストールしているフォルダと同じ階層 […]
WordPressと静的サイトを共存させてみたときのやり方についてです。 「共存させてみる」とかカッコつけて言ってますが、WordPressをインストールしているフォルダと同じ階層 […]
ウェブサイト製作の勉強で作成したHTMLファイルやCSSファイル、画像などのフォルダがローカルに溜まってきたのでGitHubで管理することにしました。 コマンドでローカルのファイル […]
WordPressのesc_urlでURLをエスケープ処理する
WordPressのesc_urlでURLをエスケープ処理するときに必要な知識としてesc_urlのパラメータと簡単なesc_urlの使用例。そしてesc_urlが関数の内部でどの […]
CSSのFlexboxでレイアウトを組むときflex-wrap: wrapで折り返しを行い、フレックスコンテナ(親要素)内部のフレックスアイテム(子要素)の配置をjustify-c […]
WordPressのesc_htmlでHTMLをエスケープ処理する
WordPressのesc_htmlはHTMLをエスケープ処理するときに使用するWordPressで用意されている関数です。 esc_htmlを使用するクセが付いていなかったのでH […]
HTMLのaタグにメールアドレスをリンクするとメールリンクになり、クリックした場合には使用しているメーラーが開いてメール送信ができるようになります。 aタグでメールアドレスをリンク […]
HTMLのaタグにメールアドレスをリンクするとメールリンクになり、クリックした場合には使用しているメーラーが開いてメール送信ができるようになります。 aタグでメールアドレスをリンク […]
HTMLのtable要素でth、tdをマークアップしたテーブルをCSSで横並びから縦並びのレイアウトに切り替える記述を記事にまとめました。 CSSでテーブルを横並びから縦並びに切り […]
HTMLのbrタグで改行した部分をCSSで非表示にするやり方と使用例を紹介します。 brタグをCSSで非表示にするやり方については細かい説明が必要ないくらい簡単です。 […]
WordPressの404.phpを作成してエラーページを表示する
WordPressでは404.phpのテンプレートファイルを作成してテーマフォルダに設置すると、存在しないページにアクセスがあった場合には404エラーページとして404.phpに記 […]
HTMLとCSSでポップアップを表示する作り方を説明します。 ウェブサイトでのポップアップはボタンをクリックしたときに、最初は隠れていたコンテンツがボタンに連動して表示される動作の […]
最近になって知ったのですがHTMLのaタグは電話がかけられるリンクを作成することができるのです。 HTMLのaタグで何かしらのウェブページをリンクするときにはhref属性の値にペー […]
WordPressでstyleタグをテキストエディタに記述する
最近までWordPressのテキストエディタにはstyle属性でCSSを記述することしかできないと思い込んでいましたが、styleタグでCSSを記述することができることを今さら知り […]
CSSで見出しに下線を表示するときにはborder-bottomを使うことが多いですが、見出しのhタグにborder-bottomを適用すると下線の長さが見出し幅でしか調整できない […]
WordPressで特定の固定ページだけに使用するCSSを読み込む場合には、テーマのfunctions.phpで特定の固定ページだけに読み込むCSSとメインCSSを条件分岐すること […]
HTMLファイルをサーバーにアップロードしてからのことです。 アップロードしたHTMLファイルで表示しているウェブページの内容を編集したくなることがあります。 ちょっとした文章を書 […]
WordPressでContact Form 7の使い方を覚える
Contact Form 7は問い合わせや申込みのフォームを簡単に作成できるWordPressのプラグインです。 とあるWordPressの案件でContact Form 7を使用 […]
CSSで2カラムのレイアウトにするHTMLをマークアップしてから、CSSのdisplay:flexとflexプロパティでmain要素とaside要素を横並びにして、メインとサイドバ […]
CSSのkeyframesとanimationの使い方を覚える
CSSでアニメーションを要素に適用したいときには、Keyframesとanimationを利用することで、細かい設定が可能なアニメーションの動作を要素に適用することができます。 K […]
お名前.comのWhois情報公開代行メール転送オプション解除方法
お名前.comで取得したドメインにWhois情報公開代行を設定している場合、Whois情報に掲載されるメールアドレスは、自分自身のメールアドレスではなく、個人情報の保護を目的として […]
WordPressで検索フォームを自作する方法を説明します。 検索フォームに使用するWordPressのテンプレートファイルを作成してから、検索機能となる検索フォームを自作し、テン […]
LION MEDIAのお問い合わせフォームにreCAPTCHAを設置する
WordPressテーマLION MEDIAの簡易お問い合わせフォームにGoogleのreCAPTCHAを設置してみました。 reCAPTCHAはお問い合わせフォームに入力している […]
CSSでハンバーガーメニューの作り方を覚えるために練習したことを誰かに説明しているかのように記事にまとめました。ハンバーガーメニューの作り方に必要なHTMLとCSSの書き方で役に立 […]
HTTPステータスコードに410があることを知る機会があり、どんなエラーなのか興味がわきました。 410エラーとはウェブサイトのページをリクエストして返ってきたレスポンスでどんな意 […]
WordPressのカスタムフィールドを使用したことがなかったので、勉強がてら自作しているテーマにカスタムフィールドを表示してみることにしました。 WordPressのカスタムフィ […]
CSSのz-indexで親要素よりも下に子要素を配置するときのやり方についてです。 基本的には子要素にposition:static以外(relativeやabsolute)を指定 […]
meta descriptionをHTMLファイルに記述する
meta description(メタ ディスクリプション)をHTMLファイルに記述するとウェブサイトのページが検索結果に表示するときにページの説明文を表示することができます。 m […]
WordPressテーマLION MEDIAに更新日を表示するやり方を説明します。 「更新日と公開日を表示する場合」と「更新日だけを表示する場合」の2パターンのPHPコードをLIO […]
WordPressのカスタム投稿を使用したかったので自作して表示してみました。 カスタム投稿を自作して表示するまでに2日かかったポンコツな私ですが、時間をかけてカスタム投稿を作成し […]
ファビコン(favicon)とはfavorite iconの略でブラウザのタブや履歴、お気に入りに表示されるアイコンやスマホでサイトをホーム画面に置いたときに表示することができるア […]
普段はテキストエディター(vscode)でCSSファイルを作成するのですが、MacやWindows、iphone、ターミナルでもCSSファイルの作り方を覚えたくなりました。 CSS […]
WordPressのcategory.phpでカテゴリーページを作成する
WordPressのcategory.phpでカテゴリーページを作成すると、同じカテゴリーに属する投稿をカテゴリーの記事一覧にして表示することができるため、カテゴリー別に分かれたア […]
Basic認証の作成方法を覚えてテストサイトにアクセス制限をする
テストサイトにアクセス制限をするときのことです。 使用してるレンタルサーバーの設定でBasic認証をかけてしまえば簡単なのですが、自分でBasic認証の作成方法を覚えて実装をしたこ […]
レンタルサーバーのエックスサーバーには「アクセス制限」という設定があります。 アクセス制限の設定を活用することによって、エックスサーバーのウェブサーバーに保存しているHTMLファイ […]
WordPressのウィジェットブロックエディターを無効化する
WordPressを5.8以降にバージョンアップしてからのウィジェットブロックエディターは無効化することで旧ウィジェットの設定画面に戻すことができます。 目次 1. […]
CSSでNEWマークを表示するとブログやホームページで最新情報をユーザーに分かりやすく伝えることができます。 たとえばNEWマークが表示されていると凄く分かりやすいと思ったのは、と […]
複数のHTMLファイルで共通になる部分はファイルを部品化したパーツとして扱いインクルードすると、修正するファイルが少なくできるので作業効率が良くなります。 サイトのヘッダー、フッタ […]
エックスサーバーでPHPをHTMLファイル内で使えるようにする
エックスサーバーを使用しているウェブサイトのHTMLファイル内でPHPを使えるようにしたいときがありました。 共通パーツをPHPのincludeで読み込むようにしたいという目的があ […]
自作しているWordPressテーマにサイドバーを表示したくなったので、サイドバーを自作して表示することにしました。 簡単にではありますが、WordPressにサイドバーを自作して […]
CSSのhoverをスマホにも対応させるやり方は「難しそうだな」と思いながら、どんなやり方があるのか調べてみると、簡単な2つのやり方があることを知りました。 忘れないうちにCSSの […]
CSSでカスタムプロパティなるものがあることを知りました。 ウェブサイトの複数のページで同じプロパティ値を使用している場合、たとえば背景色ですが、背景色の値を修正するときには置換す […]
WordPress アイキャッチの「有無を判定」ない場合は代替画像を表示する
WordPressでのことです。投稿編集画面でアイキャッチを設定していない場合は記事一覧には代替画像を表示したいというとき。 実現するには記事一覧のルー […]
HTMLとCSSで目次を作成していたのですが、目次を使うHTMLページが多くなったときのことを考えて、目次を自動生成してHTMLページに表示したいと考えました。 javascrip […]
CSSのtransitionはHTMLでマークアップした要素に「カーソルを重ねる」といった動作をキッカケに、始点と終点の2点間のデザインをアニメーションで変化させることができるCS […]
WordPress ログイン判定をしてログイン時のみに表示する
WordPressにログインしているユーザーのみが閲覧可能なコンテンツを表示させたい場合には、ログインしてるユーザーかどうかをチェックできるWordPress関数をPHPのif文の […]
HTMLファイルにSVGで四角形の図形を表示する勉強をしたときのことを覚え書き程度に記事にしておくことに。 SVGについての知識がまったくない状態で勉強を始めたのですが、作りやすそ […]
WordPressプラグインのマーカーアニメーションをバージョンアップする
WordPressにマーカーアニメーションの最新のプラグインファイルをインストールするだけのやり方でバージョンアップしたのですが、設定していたマーカーのセレクタが変わってしまいまし […]
WordPressでマーカーを記事内の文章で使用するのを目的として、プラグインなしでマーカーを作成するやり方を説明します。 マーカー自体の作成はCSSのみで作ることができるので簡単 […]
CSSで「基本的なマーカー」「下線のマーカー」「マーカーアニメーション」を作成しました。 文章を強調するときに蛍光ペン風のマーカーを使用したくなったのが作成の目的なのですが、作成途 […]
WordPressでページのURLを取得してリンクを作成する
WordPressでページのURLを文字列で取得してから、実際にWordPressに表示してみる。そして、取得したページのURLでリンクを作成するという一連の流れを覚えることにしま […]
HTMLで作成した要素内で、専門用語や略語などを分かりやすくするために、ヒントや助言などを文章で書いて分かりやすくすることがあります。 しかし作成した要素にヒントや助言を表示するス […]
calcはcalculationの略で「計算」や「演算」といった意味です。 CSSのcalc関数の使い方はcalculationの言葉の意味と同じく、計算式の結果をプロパティの値で […]
HTMLのtimeタグの使い方があまり理解ができていなかったので勉強して覚えることにしました。 HTMLのtimeタグは「datetime属性を使用した場合」と「datetime […]
WordPressに投稿の公開日を表示するやり方を覚えてから、WordPressで投稿の更新日も表示するやり方も覚えたので記事にまとめておきます。 投稿の更新日を表示するために使用 […]
WordPressを使用しているサイトで記事を公開した投稿の日付を公開日として表示したい場合には、WordPressの関数で簡単に公開日を表示することができます。 t […]
HTMLタグをそのまま表示するためにpreタグとcodeタグ使用する
HTMLタグをブラウザにそのまま表示したいときに、タグをHTMLファイルにそのまま記述したり貼り付けると、HTMLの開始タグと終了タグはHTMLタグとしての機能が働いてしまい表示が […]
Webサイトに表示できるフォントはCSS2.1までは閲覧環境にインストールされているローカルフォントだけでしたが、CSS3からはサーバーに置いたフォントを読み込んで使用することがで […]
single.phpを作成してWordPressテーマに投稿ページを表示する
自作しているWordPressテーマのトップページに記事一覧を表示して満足していたら、リンクからページ移動しようとしたときに、投稿ページが表示できないことに気づきました。 sing […]
Webサイトをレスポンシブデザインにして作成するときに必ずと言っていいほど確認が必要になるレスポンシブ確認。 Chromeの検証ツールでレスポンシブデザインにしたページを確認してば […]
jqueryをこれから利用する人や、何かのjqueryプラグインをHTMLファイルに組み込むときに必要になる最初の作業「jqueryをダウンロードしてHTMLファイルに読み込む」や […]
HTMLでマークアップした要素のレイアウトをCSSでスマホの画面では縦並びに、PCの画面では横並びに切り替えるレスポンシブデザインを練習がてら記事にしてみました。 CSSでスマホで […]
WordPressテーマLION MEDIAを2年使用した感想
WordPressテーマLION MEDIAを2年使用してブログ運営をしています。正確には2年6ヶ月LION MEDIAを使用して、そろそろ3年目が近ずいてきた時期です。 LION […]
WordPressのタイトルセパレーターを変更するやり方を説明します。 使用しているWordPressテーマのfunctions.phpでタイトルを出力させてから、WordPres […]
パソコンを使い始めたとき、すごくディレクトリの作り方が難しく感じました。 パソコンでディレクトリの作り方は慣れてしまうと簡単に作成できるようになるのですが、パソコンの操作に不慣れな […]
WordPressのバックアップを作成する方法としてプラグインなしでバックアップする手動のやり方を練習しておこうと思います。 プラグインなしのWordPressのバックアップ方法を […]
CSSのtext-stroke-colorとtext-stroke-widthの使い方
CSSでtext-stroke-colorとtext-stroke-widthの使い方を覚えると、文字の周りを縁取るテキストの表現ができるようになります。 text-stroke- […]
WordPressで作成したWebサイトのデータベースにログインしたい場合に必要になるWordPressのデータベース情報が確認できる場所は「wp-config.php」です。 w […]
OGPの設定はWebサイトのページをSNS上に表示するときに、ページの「タイトル」「説明文」「画像」を表示することができ、SNS上でのページ情報を視覚的に理解しやすく表示変更できる […]
docker-composeでWordPressのローカル環境を作成する
WordPressのローカル環境を作成する方法として、Dockerのdocker-composeを使用したWordPressのローカル環境が気になったので作成してみました。 doc […]
エックスサーバーのCGIツールでメールフォームを作成してみる
エックスサーバーのCGIツールは2012年4月19日(木)にサービスを開始していて、エックスサーバーの全プランを対象にしているため、エックスサーバーを使用している方なら誰でもCGI […]
CSS clip-pathの使い方をジェネレーターを活用しながら覚える
CSSのclip-pathプロパティを使用してクリッピングしたことがなかったのでclip-pathの使い方を覚えることにしました。 CSSのclip-pathの使い方を覚えるにあた […]
WordPressのthe_posts_paginationでページネーションを表示する
WordPressにはthe_posts_paginationという関数が用意されてるため、トップページの記事一覧やカテゴリーの記事一覧にページネーションを表示したいときにはthe […]
HTMLとCSSで作成したWebサイトのトップページにページネーションを実装して次のページに移動できるようにしたいのでチャレンジしていたのですが、HTMLのaタグでリンクして作るペ […]
CSS メディアクエリのmax-widthとmin-widthの使い方
CSSでデザインしたページのファイルを溜め込み、CSSでデザインし直したり勉強してを繰り返す。というよく分からないことを趣味にして楽しんでる私でもメディアクエリを使用したレスポンシ […]
WordPress 前後の記事を取得して投稿ページに表示する
WordPressの投稿ページで記事を読み終えた最後に「前のページ」「次のページ」へのリンクを貼って「前後の記事」にページ移動できるWebサイトを見たことがあるかと思います。 Wo […]
iframeタグをHTMLで記述して埋め込みたいページを表示する
HTMLファイルにiframeタグを記述すると埋め込みたい外部のページを表示することができます。 iframeタグをHTMLでどのように記述すると埋め込みたいページを表示することが […]
サーチコンソールでエクスポートしたcsvファイルの文字化けを直す
Googleのサーチコンソールでは検索クエリやページごとの検索クエリ、掲載順位、クリック数の検索パフォーマンスをcsvファイルでエクスポートすることができます。 エクスポートするc […]
CSSでサイズの違う画像の高さを揃えるやり方に悩んでいたのですが画像の高さを揃えるCSSの書き方を覚えて解決できました。 サイズの違う画像の高さを揃えることができても幅が親要素から […]
WordPressのwp_body_openをbodyに記述してフックする
WordPressではwp_body_openという関数があります。まだ使用したことがなかったのでwp_body_openとはどんなことができる関数かを把握してから、wp_body […]
CSSで左に画像を右にテキストを配置した横並びにするレイアウトに挑戦して以下の画像のようにシンプルに作成しました。 CSSで「左に画像を配置」「右にはテ […]
index.htmlファイルをサーバーのドキュメントルートにアップロードしてからのことです。 ブラウザにURLをhttps://○○○.comのようにドメインだけでアクセスして表示 […]
お問い合わせフォームの作成にチャレンジしてみようと思い立ったのですが、HTMLで入力フォームの表示はできても、お問い合わせ内容を入力した情報をメール送信するPHPの書き方が分かりま […]
Web MakerをChromeの拡張機能に追加して使用してみた
HTMLとCSSを書くときに使用するエディタについて調べていたら「Web Maker」というエディタを見つけました。オフラインでのライブコーディングが可能とのこと。 Web Mak […]
WordPressを使用しているテーマのサイドバーに記事一覧を取得するときには、どのようなPHPコードを記述して記事一覧を表示するのかを説明します。 WordPressのトップペー […]
search consoleでクロールの統計情報はどのように変わったのか
Googleのsearch console(サーチコンソール)で「クロールの統計情報」は、Googleが検索結果に表示するためにインデックス保存しているサイトのページを、クロールし […]
CSSでoverflowの使い方をhiddenで要素がはみ出さないようにできるという知識くらいしかなかったので、overflowプロパティとhiddenの値以外も含めた使い方を覚え […]
LION MEDIAからTHE THORへのテーマ変更前に調べたこと
WordPressテーマLION MEDIAからTHE THORへテーマ変更をしようか悩んでいる人がTHE THORのことを調べておきたいと思って書いた記事です。 LION MED […]
HTMLファイルをサーバーにアップロードする場合には、ローカルに保存しているHTMLファイルをFTPソフトを使用してサーバーに転送することでアップロードすることができます。アップロ […]
WordPress カテゴリーごとの一覧を「取得」「表示」する
WordPressでカテゴリーごとの一覧を取得して表示したかったので、WordPressのget_categories関数とWP_Queryのサブループを使用してWordPress […]
WordPress カテゴリーごとの一覧を「取得」「表示」する
WordPressでカテゴリーごとの一覧を取得して表示したかったので、WordPressのget_categories関数とWP_Queryのサブループを使用してWordPress […]
styleタグはCSSをHTMLファイルに直接に記述して埋め込むことができます。 CSSは基本的にCSSだけを記述する専用のCSSファイル(style.css)を別のファイルとして […]
WordPressでブログをやっている知り合いに「記事の下書きってどんなやり方してますか？」と聞かれることがあって、「WordPressのローカル環境で下書きしますよ」 私「下書き […]
「ブログリーダー」を活用して、しゅうさんをフォローしませんか？
