HTMLのbrで改行した文章にする

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にコンパイルできるようにする

GulpでEJSからHTMLにコンパイルできるようにするための環境構築を練習してみたときのことをメモがてらまとめました。 ejsファイルを修正してコンパイルしたhtmlファイルを、 […]

円弧をCSSのborder-radiusで表示する

円弧のデザインにした要素を作成したかったのでCSSのborder-radiusを使用して表現してみました。 CSSで円弧にした要素を作成してやりたかったことは、以下の画像のように背 […]

WordPressに静的サイトを共存させてみる

WordPressと静的サイトを共存させてみたときのやり方についてです。 「共存させてみる」とかカッコつけて言ってますが、WordPressをインストールしているフォルダと同じ階層 […]

WordPressに静的サイトを共存させてみる

WordPressと静的サイトを共存させてみたときのやり方についてです。 「共存させてみる」とかカッコつけて言ってますが、WordPressをインストールしているフォルダと同じ階層 […]

GitとGitHubでHTMLファイルを管理する

ウェブサイト製作の勉強で作成したHTMLファイルやCSSファイル、画像などのフォルダがローカルに溜まってきたのでGitHubで管理することにしました。 コマンドでローカルのファイル […]

WordPressのesc_urlでURLをエスケープ処理する

WordPressのesc_urlでURLをエスケープ処理するときに必要な知識としてesc_urlのパラメータと簡単なesc_urlの使用例。そしてesc_urlが関数の内部でどの […]

Flexboxで最後の行を左寄せにするやり方

CSSのFlexboxでレイアウトを組むときflex-wrap: wrapで折り返しを行い、フレックスコンテナ(親要素)内部のフレックスアイテム(子要素)の配置をjustify-c […]

WordPressのesc_htmlでHTMLをエスケープ処理する

WordPressのesc_htmlはHTMLをエスケープ処理するときに使用するWordPressで用意されている関数です。 esc_htmlを使用するクセが付いていなかったのでH […]

aタグでメールアドレスをリンクする方法

HTMLのaタグにメールアドレスをリンクするとメールリンクになり、クリックした場合には使用しているメーラーが開いてメール送信ができるようになります。 aタグでメールアドレスをリンク […]

aタグでメールアドレスをリンクする方法

HTMLのaタグにメールアドレスをリンクするとメールリンクになり、クリックした場合には使用しているメーラーが開いてメール送信ができるようになります。 aタグでメールアドレスをリンク […]

CSSでテーブルを横並びから縦並びに切り替える

HTMLのtable要素でth、tdをマークアップしたテーブルをCSSで横並びから縦並びのレイアウトに切り替える記述を記事にまとめました。 CSSでテーブルを横並びから縦並びに切り […]

HTMLのbrタグをCSSで非表示にするやり方

HTMLのbrタグで改行した部分をCSSで非表示にするやり方と使用例を紹介します。 brタグをCSSで非表示にするやり方については細かい説明が必要ないくらい簡単です。   […]

WordPressの404.phpを作成してエラーページを表示する

WordPressでは404.phpのテンプレートファイルを作成してテーマフォルダに設置すると、存在しないページにアクセスがあった場合には404エラーページとして404.phpに記 […]

HTMLとCSSでポップアップを表示する

HTMLとCSSでポップアップを表示する作り方を説明します。 ウェブサイトでのポップアップはボタンをクリックしたときに、最初は隠れていたコンテンツがボタンに連動して表示される動作の […]

HTMLのaタグで電話がかけられるリンクを作成する

最近になって知ったのですがHTMLのaタグは電話がかけられるリンクを作成することができるのです。 HTMLのaタグで何かしらのウェブページをリンクするときにはhref属性の値にペー […]

WordPressでstyleタグをテキストエディタに記述する

最近までWordPressのテキストエディタにはstyle属性でCSSを記述することしかできないと思い込んでいましたが、styleタグでCSSを記述することができることを今さら知り […]

CSS 見出しの下線を長さ調整ができるようにする

CSSで見出しに下線を表示するときにはborder-bottomを使うことが多いですが、見出しのhタグにborder-bottomを適用すると下線の長さが見出し幅でしか調整できない […]

WordPressで特定の固定ページだけにCSSを読み込む

WordPressで特定の固定ページだけに使用するCSSを読み込む場合には、テーマのfunctions.phpで特定の固定ページだけに読み込むCSSとメインCSSを条件分岐すること […]

サーバーにアップロードしたHTMLファイルを編集する

HTMLファイルをサーバーにアップロードしてからのことです。 アップロードしたHTMLファイルで表示しているウェブページの内容を編集したくなることがあります。 ちょっとした文章を書 […]

WordPressでContact Form 7の使い方を覚える

Contact Form 7は問い合わせや申込みのフォームを簡単に作成できるWordPressのプラグインです。 とあるWordPressの案件でContact Form 7を使用 […]

CSS メインとサイドバーの2カラムを作成する練習

CSSで2カラムのレイアウトにするHTMLをマークアップしてから、CSSのdisplay:flexとflexプロパティでmain要素とaside要素を横並びにして、メインとサイドバ […]

CSSのkeyframesとanimationの使い方を覚える

CSSでアニメーションを要素に適用したいときには、Keyframesとanimationを利用することで、細かい設定が可能なアニメーションの動作を要素に適用することができます。 K […]

お名前.comのWhois情報公開代行メール転送オプション解除方法

お名前.comで取得したドメインにWhois情報公開代行を設定している場合、Whois情報に掲載されるメールアドレスは、自分自身のメールアドレスではなく、個人情報の保護を目的として […]

WordPressで検索フォームを自作する方法

WordPressで検索フォームを自作する方法を説明します。 検索フォームに使用するWordPressのテンプレートファイルを作成してから、検索機能となる検索フォームを自作し、テン […]

LION MEDIAのお問い合わせフォームにreCAPTCHAを設置する

WordPressテーマLION MEDIAの簡易お問い合わせフォームにGoogleのreCAPTCHAを設置してみました。 reCAPTCHAはお問い合わせフォームに入力している […]

CSSでハンバーガーメニューの作り方を覚える

CSSでハンバーガーメニューの作り方を覚えるために練習したことを誰かに説明しているかのように記事にまとめました。ハンバーガーメニューの作り方に必要なHTMLとCSSの書き方で役に立 […]

410エラーとはどんなエラーなのか設定してみた

HTTPステータスコードに410があることを知る機会があり、どんなエラーなのか興味がわきました。 410エラーとはウェブサイトのページをリクエストして返ってきたレスポンスでどんな意 […]

WordPressのカスタムフィールドを表示する

WordPressのカスタムフィールドを使用したことがなかったので、勉強がてら自作しているテーマにカスタムフィールドを表示してみることにしました。 WordPressのカスタムフィ […]

CSSのz-indexで親要素より下に子要素を配置する

CSSのz-indexで親要素よりも下に子要素を配置するときのやり方についてです。 基本的には子要素にposition:static以外(relativeやabsolute)を指定 […]

meta descriptionをHTMLファイルに記述する

meta description(メタ ディスクリプション)をHTMLファイルに記述するとウェブサイトのページが検索結果に表示するときにページの説明文を表示することができます。 m […]

LION MEDIAに更新日を表示する

WordPressテーマLION MEDIAに更新日を表示するやり方を説明します。 「更新日と公開日を表示する場合」と「更新日だけを表示する場合」の2パターンのPHPコードをLIO […]

WordPressのカスタム投稿を自作して表示する

WordPressのカスタム投稿を使用したかったので自作して表示してみました。 カスタム投稿を自作して表示するまでに2日かかったポンコツな私ですが、時間をかけてカスタム投稿を作成し […]

ファビコンをHTMLで表示させてみた

ファビコン(favicon)とはfavorite iconの略でブラウザのタブや履歴、お気に入りに表示されるアイコンやスマホでサイトをホーム画面に置いたときに表示することができるア […]

CSSファイルの作り方を覚える

普段はテキストエディター(vscode)でCSSファイルを作成するのですが、MacやWindows、iphone、ターミナルでもCSSファイルの作り方を覚えたくなりました。 CSS […]

WordPressのcategory.phpでカテゴリーページを作成する

WordPressのcategory.phpでカテゴリーページを作成すると、同じカテゴリーに属する投稿をカテゴリーの記事一覧にして表示することができるため、カテゴリー別に分かれたア […]

Basic認証の作成方法を覚えてテストサイトにアクセス制限をする

テストサイトにアクセス制限をするときのことです。 使用してるレンタルサーバーの設定でBasic認証をかけてしまえば簡単なのですが、自分でBasic認証の作成方法を覚えて実装をしたこ […]

エックスサーバーでアクセス制限するBasic認証を設定する

レンタルサーバーのエックスサーバーには「アクセス制限」という設定があります。 アクセス制限の設定を活用することによって、エックスサーバーのウェブサーバーに保存しているHTMLファイ […]

WordPressのウィジェットブロックエディターを無効化する

WordPressを5.8以降にバージョンアップしてからのウィジェットブロックエディターは無効化することで旧ウィジェットの設定画面に戻すことができます。   目次 1. […]

CSSでNEWマークを表示するやり方

CSSでNEWマークを表示するとブログやホームページで最新情報をユーザーに分かりやすく伝えることができます。 たとえばNEWマークが表示されていると凄く分かりやすいと思ったのは、と […]

HTML 複数ページで共通になる部分はインクルードする

複数のHTMLファイルで共通になる部分はファイルを部品化したパーツとして扱いインクルードすると、修正するファイルが少なくできるので作業効率が良くなります。 サイトのヘッダー、フッタ […]

エックスサーバーでPHPをHTMLファイル内で使えるようにする

エックスサーバーを使用しているウェブサイトのHTMLファイル内でPHPを使えるようにしたいときがありました。 共通パーツをPHPのincludeで読み込むようにしたいという目的があ […]

WordPressにサイドバーを自作して表示する

自作しているWordPressテーマにサイドバーを表示したくなったので、サイドバーを自作して表示することにしました。 簡単にではありますが、WordPressにサイドバーを自作して […]

CSSのhoverをスマホにも対応させる簡単なやり方

CSSのhoverをスマホにも対応させるやり方は「難しそうだな」と思いながら、どんなやり方があるのか調べてみると、簡単な2つのやり方があることを知りました。 忘れないうちにCSSの […]

CSS カスタムプロパティの使い方「定義」と「呼出」

CSSでカスタムプロパティなるものがあることを知りました。 ウェブサイトの複数のページで同じプロパティ値を使用している場合、たとえば背景色ですが、背景色の値を修正するときには置換す […]

WordPress アイキャッチの「有無を判定」ない場合は代替画像を表示する

WordPressでのことです。投稿編集画面でアイキャッチを設定していない場合は記事一覧には代替画像を表示したいというとき。     実現するには記事一覧のルー […]

HTMLページの目次を自動生成して表示する

HTMLとCSSで目次を作成していたのですが、目次を使うHTMLページが多くなったときのことを考えて、目次を自動生成してHTMLページに表示したいと考えました。 javascrip […]

CSS transitionの使い方を覚える

CSSのtransitionはHTMLでマークアップした要素に「カーソルを重ねる」といった動作をキッカケに、始点と終点の2点間のデザインをアニメーションで変化させることができるCS […]

WordPress ログイン判定をしてログイン時のみに表示する

WordPressにログインしているユーザーのみが閲覧可能なコンテンツを表示させたい場合には、ログインしてるユーザーかどうかをチェックできるWordPress関数をPHPのif文の […]

HTMLファイルにSVGで四角形の図形を表示する勉強

HTMLファイルにSVGで四角形の図形を表示する勉強をしたときのことを覚え書き程度に記事にしておくことに。 SVGについての知識がまったくない状態で勉強を始めたのですが、作りやすそ […]

WordPressプラグインのマーカーアニメーションをバージョンアップする

WordPressにマーカーアニメーションの最新のプラグインファイルをインストールするだけのやり方でバージョンアップしたのですが、設定していたマーカーのセレクタが変わってしまいまし […]

WordPressでマーカーを作成プラグインなしのやり方

WordPressでマーカーを記事内の文章で使用するのを目的として、プラグインなしでマーカーを作成するやり方を説明します。 マーカー自体の作成はCSSのみで作ることができるので簡単 […]

CSSでマーカーを作成してカラーのセットを設定する

CSSで「基本的なマーカー」「下線のマーカー」「マーカーアニメーション」を作成しました。 文章を強調するときに蛍光ペン風のマーカーを使用したくなったのが作成の目的なのですが、作成途 […]

WordPressでページのURLを取得してリンクを作成する

WordPressでページのURLを文字列で取得してから、実際にWordPressに表示してみる。そして、取得したページのURLでリンクを作成するという一連の流れを覚えることにしま […]

HTMLでツールチップを表示する要素を作成する

HTMLで作成した要素内で、専門用語や略語などを分かりやすくするために、ヒントや助言などを文章で書いて分かりやすくすることがあります。 しかし作成した要素にヒントや助言を表示するス […]

CSS calc関数の使い方を勉強してみた

calcはcalculationの略で「計算」や「演算」といった意味です。 CSSのcalc関数の使い方はcalculationの言葉の意味と同じく、計算式の結果をプロパティの値で […]

HTML timeタグの使い方を覚える

HTMLのtimeタグの使い方があまり理解ができていなかったので勉強して覚えることにしました。 HTMLのtimeタグは「datetime属性を使用した場合」と「datetime […]

WordPressに投稿の更新日を表示するやり方を覚える

WordPressに投稿の公開日を表示するやり方を覚えてから、WordPressで投稿の更新日も表示するやり方も覚えたので記事にまとめておきます。 投稿の更新日を表示するために使用 […]

WordPressに公開日を「表示」または「取得」する

WordPressを使用しているサイトで記事を公開した投稿の日付を公開日として表示したい場合には、WordPressの関数で簡単に公開日を表示することができます。   t […]

HTMLタグをそのまま表示するためにpreタグとcodeタグ使用する

HTMLタグをブラウザにそのまま表示したいときに、タグをHTMLファイルにそのまま記述したり貼り付けると、HTMLの開始タグと終了タグはHTMLタグとしての機能が働いてしまい表示が […]

WebフォントをCSSの@font-faceで表示する方法

Webサイトに表示できるフォントはCSS2.1までは閲覧環境にインストールされているローカルフォントだけでしたが、CSS3からはサーバーに置いたフォントを読み込んで使用することがで […]

single.phpを作成してWordPressテーマに投稿ページを表示する

自作しているWordPressテーマのトップページに記事一覧を表示して満足していたら、リンクからページ移動しようとしたときに、投稿ページが表示できないことに気づきました。 sing […]

レスポンシブデザインを確認するツールをいくつか使用してみた

Webサイトをレスポンシブデザインにして作成するときに必ずと言っていいほど確認が必要になるレスポンシブ確認。 Chromeの検証ツールでレスポンシブデザインにしたページを確認してば […]

jqueryをダウンロードしてHTMLファイルに読み込む

jqueryをこれから利用する人や、何かのjqueryプラグインをHTMLファイルに組み込むときに必要になる最初の作業「jqueryをダウンロードしてHTMLファイルに読み込む」や […]

CSS スマホでの縦並びをPCでは横並びに切り替える

HTMLでマークアップした要素のレイアウトをCSSでスマホの画面では縦並びに、PCの画面では横並びに切り替えるレスポンシブデザインを練習がてら記事にしてみました。 CSSでスマホで […]

WordPressテーマLION MEDIAを2年使用した感想

WordPressテーマLION MEDIAを2年使用してブログ運営をしています。正確には2年6ヶ月LION MEDIAを使用して、そろそろ3年目が近ずいてきた時期です。 LION […]

WordPress タイトルセパレーターを変更するやり方

WordPressのタイトルセパレーターを変更するやり方を説明します。 使用しているWordPressテーマのfunctions.phpでタイトルを出力させてから、WordPres […]

パソコンでディレクトリの作り方を覚えてファイルをまとめる

パソコンを使い始めたとき、すごくディレクトリの作り方が難しく感じました。 パソコンでディレクトリの作り方は慣れてしまうと簡単に作成できるようになるのですが、パソコンの操作に不慣れな […]

WordPressのバックアップ方法をプラグインなしで練習

WordPressのバックアップを作成する方法としてプラグインなしでバックアップする手動のやり方を練習しておこうと思います。 プラグインなしのWordPressのバックアップ方法を […]

CSSのtext-stroke-colorとtext-stroke-widthの使い方

CSSでtext-stroke-colorとtext-stroke-widthの使い方を覚えると、文字の周りを縁取るテキストの表現ができるようになります。 text-stroke- […]

WordPressのデータベース情報を確認する場所

WordPressで作成したWebサイトのデータベースにログインしたい場合に必要になるWordPressのデータベース情報が確認できる場所は「wp-config.php」です。 w […]

OGPの設定をHTMLファイルに記述する

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ページにページネーションを簡単に実装する

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でサイズの違う画像の高さを揃えるやり方に悩んでいたのですが画像の高さを揃えるCSSの書き方を覚えて解決できました。 サイズの違う画像の高さを揃えることができても幅が親要素から […]

WordPressのwp_body_openをbodyに記述してフックする

WordPressではwp_body_openという関数があります。まだ使用したことがなかったのでwp_body_openとはどんなことができる関数かを把握してから、wp_body […]

CSSで左に画像を右にテキストを配置した横並びにする

CSSで左に画像を右にテキストを配置した横並びにするレイアウトに挑戦して以下の画像のようにシンプルに作成しました。     CSSで「左に画像を配置」「右にはテ […]

index.htmlなしのURLでアクセスできるようにする

index.htmlファイルをサーバーのドキュメントルートにアップロードしてからのことです。 ブラウザにURLをhttps://○○○.comのようにドメインだけでアクセスして表示 […]

お問い合わせフォームの作り方をHTMLとPHPで覚える

お問い合わせフォームの作成にチャレンジしてみようと思い立ったのですが、HTMLで入力フォームの表示はできても、お問い合わせ内容を入力した情報をメール送信するPHPの書き方が分かりま […]

Web MakerをChromeの拡張機能に追加して使用してみた

HTMLとCSSを書くときに使用するエディタについて調べていたら「Web Maker」というエディタを見つけました。オフラインでのライブコーディングが可能とのこと。 Web Mak […]

WordPressのサイドバーに記事一覧を取得して表示する

WordPressを使用しているテーマのサイドバーに記事一覧を取得するときには、どのようなPHPコードを記述して記事一覧を表示するのかを説明します。 WordPressのトップペー […]

search consoleでクロールの統計情報はどのように変わったのか

Googleのsearch console(サーチコンソール)で「クロールの統計情報」は、Googleが検索結果に表示するためにインデックス保存しているサイトのページを、クロールし […]

CSS overflowの基本的な使い方を覚える

CSSでoverflowの使い方をhiddenで要素がはみ出さないようにできるという知識くらいしかなかったので、overflowプロパティとhiddenの値以外も含めた使い方を覚え […]

LION MEDIAからTHE THORへのテーマ変更前に調べたこと

WordPressテーマLION MEDIAからTHE THORへテーマ変更をしようか悩んでいる人がTHE THORのことを調べておきたいと思って書いた記事です。 LION MED […]

HTMLファイルをサーバーにアップロードする方法

HTMLファイルをサーバーにアップロードする場合には、ローカルに保存しているHTMLファイルをFTPソフトを使用してサーバーに転送することでアップロードすることができます。アップロ […]

WordPress カテゴリーごとの一覧を「取得」「表示」する

WordPressでカテゴリーごとの一覧を取得して表示したかったので、WordPressのget_categories関数とWP_Queryのサブループを使用してWordPress […]

WordPress カテゴリーごとの一覧を「取得」「表示」する

WordPressでカテゴリーごとの一覧を取得して表示したかったので、WordPressのget_categories関数とWP_Queryのサブループを使用してWordPress […]

styleタグでCSSをHTMLファイルに記述する

styleタグはCSSをHTMLファイルに直接に記述して埋め込むことができます。 CSSは基本的にCSSだけを記述する専用のCSSファイル(style.css)を別のファイルとして […]

WordPressでブログの下書きをするやり方

WordPressでブログをやっている知り合いに「記事の下書きってどんなやり方してますか？」と聞かれることがあって、「WordPressのローカル環境で下書きしますよ」 私「下書き […]

アドセンス 自動広告の効果をテストしてデメリットを確認する

Googleのアドセンス広告で使用できる「自動広告」を一年くらい使用しないで手動広告だけでブログ運営をしてきました。 アドセンスの自動広告を実際に使用してみて自分のサイトでは効果が […]

CSSでボックスを中央に配置するやり方を覚える

CSSでボックスを中央に配置するやり方は1つではなく、いくつかのやり方があるので何パターンか覚えておくと、「この中央配置にするやり方だとできないから他のパターンで中央に寄せてみよう […]