Webサイト制作に関するノウハウブログ｜IWACODE

【CSS】スクロールでヘッダーが重なる問題を解決！scroll-padding-topで快適なページ移動を実現しよう！

岩村　彰斗 — Tue, 01 Oct 2024 23:00:00 +0000

Webサイトを作っていると、固定されたヘッダー（ナビゲーションバーなど）がページをスクロールした時にセクションのタイトルに被ってしまう…なんて経験、ありませんか？特にアンカーリンク（aタグ）やページ内リンクをクリックした際、この問題がよく発生します。この問題を解決してくれるのが、CSSのscroll-padding-topプロパティ！今日は、この便利なプロパティの使い方と、どうしてこの問題が起きるのか、解説していきます！

なぜヘッダーが重なるのか？

アンカーリンクでセクションに飛んだとき、ブラウザは通常セクションの上端を画面上に揃えます。しかし、固定されたヘッダーがあるとセクションタイトルが隠れてしまいます。そこで、scroll-padding-topを使うことで、ヘッダー分の余白を確保してタイトルが隠れないようにします！

scroll-padding-topで解決

それでは、ナビゲーションメニューのリンクをクリックしたときに、セクションタイトルがヘッダーに隠れないようにする方法を具体的に見ていきましょう。

次の例では、各セクションに個別のscroll-padding-topを指定しています。

固定ヘッダー


  セクション1
  セクション2
  セクション3



  セクション1
  ここはセクション1の内容です。



  セクション2
  ここはセクション2の内容です。



  セクション3
  ここはセクション3の内容です。

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: white;
  text-align: center;
  line-height: 60px;
  z-index: 1000;
}

nav {
  margin-top: 60px;
  /* ヘッダーの下にナビゲーションを配置 */
}

nav a {
  margin-right: 10px;
  color: #0073e6;
  text-decoration: none;
}

section {
  padding: 0 20px;
  height: 1000px;
}

#section1 {
  background-color: #eee;
}

#section2 {
  background-color: #ddd;
}

#section3 {
  background-color: #ccc;
}

このコードでは、html要素（スクロール元となる親要素）にscroll-padding-top: 60px;を指定しています。これにより、ナビゲーションのリンクをクリックしたとき、固定されたヘッダーがセクションタイトルに被らず、スクロールがスムーズに行われます！

カスタム変数でヘッダーの高さを管理しよう

ヘッダーの高さは変わることがあるので、scroll-padding-topの値も管理しやすくするために、カスタム変数を使うと便利です。

:root {
  --header-height: 60px; /* ヘッダーの高さを変数として管理 */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

.fixed-header {
  height: var(--header-height);
}

こうすることで、将来的にヘッダーの高さを変える場合でも、変数の値を変更するだけで全体が自動的に調整されます。管理が楽になるだけでなく、コードのメンテナンス性も向上します！

さいごに

今回は、各セクションにscroll-padding-topを設定し、ナビゲーションメニューからリンクをクリックした際にヘッダーがセクションに重ならないようにする方法を紹介しました！scroll-padding-topをうまく活用することで、スクロールに関する細かな調整も可能となるため、ぜひ取り入れてみてください！

【CSS】【filter】画像にエフェクトをかける方法 – ホバーした際に写真を白黒からカラーに

岩村　彰斗 — Tue, 01 Oct 2024 07:11:17 +0000

CSSのfilterプロパティとは？

CSSの中には、画像にエフェクトを簡単にかけられる「filter」プロパティがあります。

filterを使えば、画像を白黒にしたり、ぼかしを入れたり、明るさやコントラストを調整したりと、いろいろな加工ができます。

「デザインをもうちょっとオシャレにしたいな…」と思ったときに役立つ技の一つなので、ぜひ活用してみてください！

よく使われるfilter効果

filter: grayscale(100%);    /* 画像をモノクロにする */
filter: blur(5px);          /* ぼかし効果 */
filter: brightness(150%);   /* 明るさ調整 */
filter: contrast(200%);     /* コントラストを調整 */
filter: saturate(300%);     /* 彩度を調整 */
filter: sepia(80%);         /* 画像をセピア色にする */

filter効果は組み合わせて使用できる

filterプロパティは、複数の効果を組み合わせて使用できます。

例えば、白黒にした上で少し明るさを加えると、柔らかい印象のモノクロ画像が作れます。

filter: grayscale(100%) brightness(120%);

動きのあるエフェクトを作るには？

ただエフェクトをかけるだけでなく、動きがあるとさらに魅力が増します！

例えば、画像がグレースケール（モノクロ）からカラーに変わるようなアニメーションを加えてみましょう。

img {
  filter: grayscale(100%);
  transition: filter 1s ease-in-out;
}
img:hover {
  filter: grayscale(0%);
}

このコードでは、画像にマウスをホバーすると、徐々にカラーに戻るアニメーションが実現できます。

ホバーを外すとまたモノクロに戻るので、動きのあるスタイリッシュな演出ができますね！

マスクや影を使った効果でさらにオシャレに！

次に紹介するのは、画像にマスクや影を加える方法です。例えば、drop-shadow()を使えば、画像に立体感を持たせることができます。

filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));

こうすることで、画像の周りにぼんやりとした影をつけることができ、より深みのあるデザインが可能です。画像の配置や背景次第で、様々な演出に応用できます！

filterプロパティを使うときのポイント！

最後に、filterを使う上で気をつけたいポイントをいくつかご紹介します。

ブラウザ対応

filterプロパティはほとんどのモダンブラウザで対応していますが、古いブラウザでは一部サポートされていないことがあります。念のため、使いたいエフェクトが対応しているか確認しておきましょう。

パフォーマンス

特に大きな画像や多くのエフェクトを同時に適用すると、ページの読み込みやパフォーマンスに影響が出ることがあります。適度に使うのがポイントです！

さいごに

CSSのfilterプロパティを使えば、シンプルに見えるけど、プロっぽいエフェクトを画像に加えることができます！

ホバーアニメーションを使えば、動きのあるデザインが手軽に実現できるので、ぜひ試してみてください！

【CSS】【アスペクト比】aspect-ratioプロパティで要素の縦横比を簡単に設定する方法

岩村　彰斗 — Tue, 17 Sep 2024 13:14:53 +0000

はじめに

WEBデザインにおいて、要素の縦横比を調整するのはよくある課題です。特に、画像や動画、カードレイアウトなど、特定のアスペクト比を維持したい場合、従来の方法ではpaddingを利用したトリックやJavaScriptによる調整が必要でした。しかし、CSSのaspect-ratioプロパティを使えば、これが非常に簡単になります！

この記事では、aspect-ratioプロパティの使い方や注意点について詳しく解説していきます。

概要

aspect-ratioプロパティは、要素の縦横の比率を簡単に指定できるCSSのプロパティです。これを使うと、幅に合わせて高さを自動で計算してくれるので、面倒な調整が不要になります。値の指定は「横:縦」の形式で行います。例えば、aspect-ratio: 16 / 9;と書けば、その要素は常に16:9の比率を保つようになります。

それでは、このプロパティを使ったシンプルな例を見てみましょう。




    
    
    aspect-ratioの例

この例では、.aspect-boxクラスの要素にaspect-ratio: 16 / 9;を設定しています。この要素の幅は100%（最大500px）に設定されており、それに合わせて縦横比16:9が自動的に保たれます。画面サイズが変わっても、この比率は変わらず、見た目がきれいに維持されるのがポイントです。

注意点

aspect-ratioプロパティは、明示的に高さや幅が指定されている場合、それらのプロパティに影響を受けます。例えば、要素にすでに高さが設定されていると、aspect-ratioはCSSの記載の順番によっては無視される可能性があります。このため、aspect-ratioを使う際は、他のCSSプロパティとの組み合わせに気をつけてください。

活用例

aspect-ratioをうまく使うと、レイアウトに統一感を持たせることができます。例えば、ギャラリーの画像やカードのレイアウトに使うと、画像のサイズがバラバラでも一貫した比率で表示されるので、全体のデザインが整いやすくなります。

以下に、カードレイアウトにaspect-ratioを使った例を紹介します。




    
    
    カードレイアウトの例
    


    
        カード1
        カード2
        カード3
        カード4
        カード5
        カード6

この例では、.cardクラスにaspect-ratio: 4 / 3;を設定して、カードの幅に対して4:3の比率を保っています。これにより、各カードが均等に配置され、レイアウト全体が整った印象になります。

おわりに

いかがでしたでしょうか。今回はaspect-ratioプロパティについて解説させていただきました。

aspect-ratioプロパティを使うと、これまで難しかった要素の縦横比の調整がとてもシンプルになります。
自身で計算して値を算出しなくともプロパティ側で自動的に割り当ててくれるため、非常に便利です。aspect-ratioをうまく活用して、見た目が美しいデザインを実現していきましょう！

【CSS】【三角形】clip-pathの使い方 – borderは使わずpolygon,circleで多様な形を切り取る方法と実例

岩村　彰斗 — Sun, 15 Sep 2024 04:55:43 +0000

皆さんこんにちは！IWACODEの岩村です。

CSSのclip-pathプロパティを使うと、画像や要素をさまざまな形に切り取ることができます。borderプロパティでも三角形を作ることはできるんですが、少し手間がかかるのと少々わかりにくいところがあります。
clip-pathを使うともっと簡単に、そして柔軟に形を作ることができるので、特に三角形や直角三角形をデザインに取り入れたいときにはおすすめです。

本記事では、clip-pathを使って基本的な三角形から少し変わった形状までを作る方法を紹介し、それらを実際のデザインにどのように応用できるかも解説していきます。WEBデザインにちょっとしたアクセントを加えたい方には、clip-pathはとても便利なプロパティです。

さまざまな形の作り方と、その活用法をご覧ください！

clip-pathとは？

clip-pathは、要素の表示領域を指定するCSSプロパティです。形状を定義することで、その形に合わせて要素をクリップ（切り取り）できます。

clip-pathを使うことで、単純な四角形以外の形状をCSSだけで実現できます。

clip-pathで作る基本的な形

三角形の作成

三角形を作成する最も簡単な方法の一つがclip-pathを使うことです。まずはclip-pathを使った三角形の作成方法を見てみましょう。

.triangle {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

コードの解説

clip-path: polygon()を使って三角形の頂点を指定しています。polygon関数の引数は、要素内の各頂点の位置を示します。この例では、3つの頂点が指定されています。

50% 0%：要素の上部中央を示します（x軸の50%、y軸の0%）
0% 100%：要素の左下を示します（x軸の0%、y軸の100%）
100% 100%：要素の右下を示します（x軸の100%、y軸の100%）

応用形の作成

直角三角形

直角三角形もclip-pathを使って簡単に作成できます。

.right-triangle {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

コードの解説

この例では、3つの頂点を以下のように指定しています。

0 0：要素の左上を示します（x軸の0、y軸の0）
100% 100%：要素の右下を示します（x軸の100%、y軸の100%）
0 100%：要素の左下を示します（x軸の0、y軸の100%）

台形

台形もclip-pathを使って簡単に作成可能です。

.trapezoid {
  width: 200px;
  height: 100px;
  background-color: #9b59b6;
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
}

実用例

カスタム形状の画像切り取り

円形

clip-pathを使うと、画像を任意の形状にクリップすることが可能です。例えば、プロフィール写真を円形することもできます。

.profile-image {
  width: 150px;
  height: 150px;
  background-image: url('https://via.placeholder.com/150');
  background-size: cover;
  clip-path: circle(50%);
}

多角形

頂点を増やすことで以下のように多角形も作成することが可能です。

.hexagon {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  clip-path: polygon(
    /* 上辺中央 */
    50% 0%,
    /* 右上 */
    100% 25%,
    /* 右下 */
    100% 75%,
    /* 下辺中央 */
    50% 100%,
    /* 左下 */
    0% 75%,
    /* 左上 */
    0% 25%
    );
}

三角形で吹き出しを実装

吹き出しの角の部分を疑似要素を使用して作成しております。

positionプロパティにて三角形の位置を調整することで吹き出しのデザインを実現しています。

positionプロパティの指定によっては右側に角を付けることも可能です。

吹き出しを作成

/* 吹き出しの本体部分 */
.speech-bubble {
  position: relative;
  background-color: #f0f0f0;
  padding: 1em;
  border-radius: 10px;
  width: fit-content;
  text-align: center;
  border: 1px solid #f0f0f0;
}

/* 三角形の部分 */
.speech-bubble::after {
  content: "";
  display: block;
  background-color: #f0f0f0;
  position: absolute;
  inset: 100% 0 auto 0;
  margin-inline: auto;
  width: 30px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

さいごに

いかがでしたでしょうか！

clip-pathを使用すると、要素や画像をさまざまな形にクリップでき、三角形などのデザインも容易に作成することができます。

clip-pathは非常に便利なプロパティのため、ぜひ使いこなして実線に役立てていきましょう！

【WordPress】CFSの代替に最適！Lazy Blocksで簡単カスタムフィールド設定【繰り返し処理（リピーター）も対応】

岩村　彰斗 — Fri, 06 Sep 2024 10:27:16 +0000

皆さんこんにちは！IWACODEの岩村です。

WordPressのカスタムフィールドを利用する際、Custom Field Suite（CFS）を使っていた方も多いでしょう。しかし、脆弱性の発見により、現在CFSの使用を見直す必要が出てきています。多くの方が代替としてAdvanced Custom Field（ACF）を検討していますが、ACFの無料版には繰り返しフィールド機能がなく、リピーター処理ができない点で悩んでいる方も少なくありません。

そこで今回は、Lazy Blocksというプラグインを使って、繰り返し処理に対応したブロックの作成方法をご紹介します。

Lazy Blocksの特徴

Lazy Blocksは、WordPressのブロックエディター（Gutenberg）でカスタムブロックを作成・管理できるプラグインです。特に、繰り返しフィールド（リピーター機能）を簡単に実装できる点で優れています。以下に、Lazy Blocksの主な特徴をまとめました。

Gutenberg完全対応: Lazy BlocksはGutenbergエディターに完全対応しており、ビジュアル的なブロック編集が可能です。これにより、コーディング不要でカスタムブロックを作成できます。
繰り返しフィールドのサポート: ACF（無料版）で対応が難しい繰り返し処理も、Lazy Blocksでは簡単に設定可能です。これにより、商品リストやスタッフ紹介ページなど、複数の要素を繰り返し表示したいケースに適しています。
カスタムフィールドの柔軟性: Lazy Blocksは、テキスト、画像、数値、リストなど多様なフィールドタイプをサポートしており、フィールドのグルーピングや条件付き表示にも対応しています。

Lazy Blocksのインストール、設定の手順

次に、CFSで作成していたカスタムフィールドをLazy Blocksに移行する手順を説明します。

今回はスタッフ紹介のブロックを作成し、WordPressのPHP関数を使用し取得してみようと思います。

Lazy Blocksのインストールと設定

WordPress管理画面でLazy Blocksをインストール、有効化します。

有効化すると管理画面に以下のように表示されます。

Lazy Blocksを有効化したら、「Lazy Blocks」→「新規投稿を追加」からブロックの作成を開始します。フィールド名やフィールドタイプを設定していきます。

※サンプルブロックは必要ないので削除して問題ありません。

ブロックを作成

このような画面が表示されるので、以下の手順にて登録していきます。

ブロック名を入力（ひとつ前の画面に一覧として表示されます）
SLUG名を登録（PHPにて取得する際にこちらの名称をキーにして取得します）
アイコンを設定します。グーテンベルク上で表示されるアイコンです。
カテゴリを設定します。作成したブロック定義をグーテンベルク上の選択画面のどのカテゴリに入れるかの指定になります。
グーテンベルク上でデータを登録する際に、グーテンベルク上で操作するのか、それとも右側の入力エリアで操作するのかの指定となります。

繰り返しの項目を作成

次に繰り返し項目（リピーター）を設定していきます。

繰り返し項目の名称を登録します。グーテンベルク上で表示されるラベルとなりますのでわかりやすい名前が良いです。
NAMEを登録します。DBに登録する際のキーとなる情報になるので、他と被らないように指定してください。後ほどPHPで取得する際にこちらの値を指定します。
リストから繰り返しを選択します。※結構下の方にあります。
こちらは繰り返し項目を追加していた際に表示される名称となります。グーテンベルク上では{{#}}には連番が割り当てられるため、実際には｛｛｝｝は表示されません。

繰り返し内の入力項目を作成

今回はスタッフ紹介のため、以下の項目を作成します。

スタッフ画像（image）
スタッフ名（text）
ひとことコメント（textarea）

Hide Child Controlsを押下し、繰り返しの中に入力項目を作成します。

画像

LABELに名称を設定
NAMEにキー情報を指定
TYPEに画像で指定

テキスト

LABELに名称を設定
NAMEにキー情報を指定
TYPEにテキストを指定

テキストエリア

LABELに名称を設定
NAMEにキー情報を指定
TYPEにテキストエリアを指定

設定したブロックを公開

画面右上の公開ボタンを押して保存します。
※上記の画像は既に公開ボタンを押しているため、ボタンの名前が「保存」になっています。

スタッフ紹介ブロックが作成されています。

グーテンベルク（ブロックエディタ）にてデータの登録

グーテンベルク（ブロックエディタ）上で、実際にデータを登録していきます。

ブロックの中に「スタッフ紹介」が追加されています。

こちらを選択すると、以下のようにエディタに追加されます。

+Add Rowを押下して画像、スタッフ名、ひとことコメントを登録してきます。

３名分追加してみました。

PHPファイルにて取得する

今回作成したブロック、登録した値を取得するコードのサンプルとなります。


        
          
            " alt="スタッフ画像">

主な処理内容

ブロックデータの取得

$blocks = parse_blocks(get_the_content())で、現在のページからすべてのデータを取得します。

対象ブロックの判別

取得したブロックデータの中から、blockNameがlazyblock/block-staffであるブロックを判定します。

  if ($block['blockName'] === 'lazyblock/block-staff') :

データのデコード

urldecode()関数を使用して、エンコードされたスタッフリストデータをデコードし、json_decode()関数でJSON形式のデータをPHPの配列として変換します。

    $staff_list_json = urldecode($block['attrs']['staff-list']);
    $staff_list = json_decode($staff_list_json, true);

データがエンコードされていたため、上記の処理にてデータが正常に見えるように調整しております。

スタッフデータのループ処理

デコードしたデータが存在する場合にのみ、各スタッフの情報をループ処理で展開します。

if (!empty($staff_list)) :
  foreach ($staff_list as $staff_item) :

出力結果

CSSは最低限とし、ページ上出力した結果が以下のようになります。

  .staff-introduction {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    width: min(964px, 100%);
    margin: 0 auto;
    padding: 30px 0;
  }

  .staff-image img {
    width: 150px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .staff-info {
    display: flex;
    flex-direction: column;
  }

  .staff-name {
    font-size: 1.2em;
    margin: 0;
    font-weight: bold;
  }

  .staff-message {
    margin-top: 10px;
    font-style: italic;
    color: #555;
  }

さいごに

いかがでしたでしょうか。

Lazy Blocksの繰り返し処理について解説させていただきました。

グーテンベルクの中でデータの登録などができるため、操作性も良く、カスタムフィールドについてはLazy Blocksで運用したほうが良い気もします。

CFSは色々な方がブログでオススメしていたプラグインなので、使用されていた方、使用しているサイトも多いです。

プラグインの脆弱性が発見され、そのまま放置しておくとサイトの乗っ取りや個人情報の流出など、セキュリティ事故が発生してもおかしくありません。

現在CFSは公式からダウンロードができなくなっているため、影響範囲としては過去に制作したサイトが対象となり、できるだけ早い対応が望まれます。

今回の記事が少しでも参考になりましたら幸いです！

最後までご覧いただきありがとうございました！

【JavaScript】現在のページに対応するナビゲーションメニューにスタイルを追加する方法

岩村　彰斗 — Mon, 29 Jul 2024 05:42:10 +0000

皆さんこんにちは！IWACODEの岩村です！

今回は現在のページに対応するナビゲーションメニューのリンクに対して、「このリンクが今のページですよ～」といった感じでスタイルを適用する方法を解説いたします。

実際によくあるヘッダーデザインを用いて解説していきます！

今回は以下のようなヘッダーを作成します。

トップページを開いている想定なので、TOPの文字がオレンジになっています。

WORKSを開いたらWORKSの文字がオレンジに・・・といったような制御を行います。

HTML/CSS/JavaScriptの例

HTML

今回使用するデザインのHTMLを構築していきます。





  
  
  ナビゲーションメニューのスタイル
  
  
  
  



  
    iwacode
    
      
        toppage
        works
        srevice
        contact

CSS

一番下にJavaScriptでクラスが付与された際のスタイルを記載しています。
※.is-activeが付与された際の指定

/* スタイルの初期化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

/* サイトの基本設定 */
html {
  color: #465572;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.header {
  align-items: center;
  background-color: #E9ECEF;
  display: flex;
  height: 80px;
  justify-content: space-between;
  padding: 0 40px;
}

.header__logo {
  font-family: "Caveat", cursive;
  font-size: 2rem;
  font-weight: bold;
}

.header__nav {
  font-family: "Roboto", sans-serif;
  font-size: .925rem;
}

.header__nav-list {
  display: flex;
  gap: 2em;
}

.header__nav-item>a {
  color: #465572;
  font-weight: bold;
  display: block;
  transition: .3s;
}

.header__nav-item>a:hover {
  color: #FF983A;
}

/* ↓↓↓↓↓　今回のポイント　↓↓↓↓↓ */
/* JavaScriptにて.is-activeクラスが付与された場合のスタイル */
.header__nav-item>a.is-active {
  color: #FF983A;
}
/* ↑↑↑↑↑　今回のポイント　↑↑↑↑↑ */

JavaScriptの記載

const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll(".header__nav-item a");

navLinks.forEach(link => {
  if (link.href === currentPath) {
    link.classList.add("is-active");
  }
});

JavaScriptの解説

分かりやすいよう１行ずつコメントを入れました。

// １）定数currentPathに現在開いているページのURLを格納
const currentPath = window.location.pathname;

// ２）定数navLinksに.header__nav-item a に該当する要素を格納
// 　　複数取得できるので配列となる
const navLinks = document.querySelectorAll(".header__nav-item a");

// ３）２で取得した要素をループで処理する
navLinks.forEach(link => {

  // ４）ここでのlink.hrefはaタグのhref属性に指定しているURL
  // 　　currentPathには現在開いているページのURLが入っているので、
  // 　　if文の===で比較し、一致している要素の場合、中の処理に入る
  if (link.href === currentPath) {

    // ５）linkにis-activeクラスを付与
    // 　　※linkはaタグのこと
    link.classList.add("is-active");
  }
});

処理の概要としては、aタグで指定しているURLと現在開いているページのURLを比較して、同一であれば、一致するhref属性を持つaタグに対して.is-activeクラスを付与するといったものになります。

さいごに

いかがでしたでしょうか。

上記の処理を行うことで、現在開いているページが閲覧している方も一目でわかるため、ページの回遊性にも繋がります。

比較的簡単なJavaScriptの処理で実装可能なため、仕様を理解しぜひ組み込んでいってください！

Bizメール＆ウェブビジネスにてWordPressをインストールする際の注意点｜管理画面でのエラーなど

岩村　彰斗 — Sun, 28 Jul 2024 10:24:02 +0000

今回ホームページの公開をBizメール＆ウェブ（NTTのホスティングサービス）というレンタルサーバにすることになりました。

XServerのように「WordPress簡単インストール」は用意されておらず、MySQLやphpMyAdminをインストール、有効化を自身で実施しなければなりません。

とはいうものの特に難しい操作は特になく、本記事にて紹介する手順で問題なくインストールができるかと思いますので、これからBizメール＆ウェブにWordPressを導入する際にはこちらの記事がご参考になりましたら幸いです。

Bizメール＆ウェブとは

NTTが提供しているレンタルサーバ（ホスティングサービス）の一つで、Xserverやロリポップなどと同様にホームページをアップし公開することが可能です。

上記のレンタルサーバと違うところは、マルチドメインが使用できないため、1つのサーバアカウントに対して、登録できるドメインは１つということ。

複数ドメインを取り扱うことが想定される際には、必然的にほかのサーバ会社を選ぶことになるかと思います。

WordPressの簡単インストールがないため、多少操作の工程が増えますが、WordPressを使用することは可能です。

ですが、ルートディレクトリやFTPの知識がないと、少し戸惑うことが出てくるかもしれません。

以下の流れで操作をすれば、迷わずにWordPressが使用できるようになりますので、ぜひ参考にされてください。

公式ページはこちら↓

WordPressのインストール手順について

MySQLの有効化（利用開始）

WordPressではログイン情報や投稿情報、プラグインの情報など、様々なデータを保持する必要があるため、データベースを使用する必要があります。

MySQLとは

データを取り扱うデータベースシステムの一種で、大量のデータを効率よく保存し、管理し、検索できるシステムのことを指します。
簡単に言えば、MySQLは多くのデータを効率的に管理し、必要な情報をすばやく取り出すための便利なツールです。ウェブサイトのユーザーデータ、在庫管理システム、ブログの投稿管理など、さまざまな用途で使用されています。

有効化の手順

アプリケーション→データベースをクリックします。

MySQLの利用開始ボタンがあるので、クリックします。

利用開始ボタンをクリックすると、パスワードを設定する画面が表示されるので、画面に沿ってパスワードを登録します。

※非常に大事なものになるため、別のテキストやパスワードを管理している媒体に保存しておきましょう。

phpMyAdminの有効化

ウェブブラウザ上で動作するMySQLデータベース管理ツールです。

アプリケーション→データベースをクリックします。

phpMyAdminの有効化ボタンがあるので、クリックします。

画面中央の矢印のアイコンから管理画面を開くことができますが、使用しているPHPのバージョンによってはエラーが発生します。

管理画面のバージョンを確認し、5.2を選択します。以下の画面にて既に5.2になっていれば特に操作する必要はありません。

エラーが発生した場合

PHPのバージョンを確認します。確認しPHPのバージョンを8.1に変更します。

アプリケーション→基本アプリを選択

PHPの設定ボタンをクリック

バージョンの選択から8.1（CGI）をクリックして変更ボタンを押します。

これでPHPのバージョン変更が完了します。

変更が完了したら、再度phpMyAdminの開いてみましょう。

ログイン画面が表示されればOKです。

phpMyAdminにログインするには、Bizメール＆ウェブのコントロールパネルにログインした際のIDと、MySQLを有効化した際に作成したパスワードが必要になります。

WordPressのインストール

アプリケーション→追加アプリを選択、WordPressの行のインストールボタンをクリックしてインストールを行います。

/www/htdocs/の中に「wordpress」フォルダが作成されます。

既にフォルダが作成されている場合、していた場合は上書きされます。

インストールを実行します。の子画面が表示されるので、「はい」をクリックしてインストールを実行します。

インストールが完了したら「インストールが完了しました」と子画面が表示されます。

大事な内容のため、内容を保管しておきましょう！

画面から選択してコピーができるので、マウスで選択状態にして、ctrl（command） + cでコピー、テキストエディタやメモ帳などに、ctrl（command） + vで張り付けておきましょう。

ルートディレクトリについて

Bizメール＆ウェブではhtdocsの直下がルートディレクトリとなります。

ルートディレクトリとは、起点となるフォルダのことで、https://〇〇〇〇〇.jpといった形でホームページを開いた場合やhtdocsの中のindex.htmlが読み込まれます。

もしhtdocsの中にpublic_htmlのようなフォルダが存在し、その中にあるindex.htmlを開きたい場合は、https://〇〇〇〇〇.jp/public_htmlをURLとして呼び出します。

他社のレンタルサーバ（ホスティングサービス）では、上記のルートディレクトリを変更することが可能でしたが、Bizメール＆ウェブで変更する方法はわかりませんでした。
変更する方法はないのかもしれません。

ホームページを開くURLを変更（ドメイン名で表示させたい）

上記の流れでWordPressをインストールした場合、ホームページを開くためのURLがhttps://ドメイン名/wordpressとなってしまいます。

こちらを変更する方法を解説いたします。

ここからの作業はFTPソフトを使用することを前提に解説いたします。
　※ファイルのダウンロード作業が発生するため

FTPソフトとはサーバとのファイルのやり取り（アップロード・ダウンロード）を行うためのソフトです。
アップロードだけの場合、コントロールパネルの機能で事足りるのですが、ダウンロードができないため、FTPソフトが必要となります。
ダウンロードするのは、サーバ上のファイルを修正する必要があるためです。直接編集ができないので、一旦ダウンロードする必要があります。

手順１）WordPressの管理画面からパスを変更する

始めに管理画面からログインをして、設定画面を開くと、上記のようにパスが設定されています。

これを以下のように変更します。

サイトアドレスの/wordpressの文言を削除しました。

管理画面での作業は以上です。

手順２）ルートディレクトリは変更できないため、wordpress/index.phpを変更する

作成されたwordpressフォルダの中にindex.phpファイルがあります。wordpressはこちらのファイルが起点となります。

FTPソフトにて、index.phpを一旦自身のPCにダウンロードし、中身を開きます。





一番下の行に、



require __DIR__ . '/wp-blog-header.php';




こちらを



require __DIR__ . '/wordpress/wp-blog-header.php';



と変更します。



変更したら、wordpressのフォルダではなく、一つ上の階層（htdocs）にアップロードしましょう。
ここにアップロードするのは、こちらのフォルダがルートフォルダになっているからです。
www/htdocsにindex.htmlが存在する場合は、一旦自身のPCにダウンロードしておきましょう。
※初期導入の場合は必要ないと思われますが・・・



これで、ドメイン名を指定するだけでWordPressサイトが開けるようになりました。



Bizメール＆ウェブ ビジネスではマルチドメインが使用できないため、コントロールパネルからWordPressをインストールすると、サブディレクトリとして、WordPressがインストールされるようです。



管理画面が正常に動かない！？



WordPressの管理画面からログインをしてAll-in-One WP Migrationなどのプラグインを使用し、自身で構築したWordPressサイトをアップロードしようとすると、プラグインの画面が正常に動作しない可能性があります。



私の場合は、エクスポートやインポートの画面は表示されるものの、クリックしても反応しない状態でした。



調査したところ、デフォルトで選択されているテーマが古く、アップデートされていないことが原因でした。



デフォルトがTwenty Twenty-Twoが選択されており、Twenty Twenty-Fourを有効化にすることで解消されました。



これでエラーが解消されAll-in-One WP Migrationも使用できるようになっていると思います。



さいごに



WordPressのインストールについて解説させていただきました。



簡単インストールがない分、若干時間は要しますが、同様にWordPressを使用することはできます。



少しでも参考になりましたら幸いです。



【CSS】ファーストビューや画像上のテキストなど、要素を中央、真ん中に配置する方法
岩村　彰斗 — Fri, 12 Jul 2024 11:17:46 +0000

皆さんこんにちは！IWACODEの岩村です。



今回はHTML/CSSコーディングにおいて避けては通れない、要素の真ん中寄せについて解説いたします。



真ん中寄せはWEBサイト上でかなりの頻度で実装する必要があるということと、仕組みについて理解することで、コーディングの知識が大きく高まるのかなと個人的には感じております。



今回記事を読んでいただくことによって、もう真ん中寄せでは悩まなくなると思います！



ぜひ最後まで読んでいただけると嬉しいです！



真ん中寄せをする方法について



真ん中寄せをする方法は大きくわけて４つ方法があり、それぞれ解説させていただきます！







display:flexを使用する方法




  






wrapクラスに以下のCSSを適用しています。



.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}



まずはwrapクラスの要素に対して、display:flexを適用させます。
そうすることによって子要素（.item）がflexボックスとして操作できるようになります。
これを利用し、justify-content: centerで水平方向（←→）に対して真ん中寄せ、align-items: center; で垂直方向（↑↓）に対して真ん中寄せを行い、結果的に真ん中寄せを実現させています。



この方法でも特に問題はないのですが、真ん中寄せのためにCSSを３行使用しているため、可能であればもっと短い記載で実現させたいところです。
ということで次の方法が個人的にはオススメです！



display:gridを使用する方法




  







wrapクラスに以下のCSSを適用しています。



  .wrap {
    display: grid;
    place-items: center;
  }



こちらでは上記の2行で真ん中寄せが実現可能です。



display:gridにてgridレイアウト化し、place-item: centerでgridコンテンツかしている要素（.item）を真ん中に寄せています。



コーディングを行う上で、この方法が一番記述が短く、楽に実現ができるのでかなりオススメな方法になります！



positionを使用する方法




  






wrapクラスにposition: relativeを指定し、positionの基点にします。
子要素である.itemに対して、position: absolute; inset: 0; margin: auto; を指定します。



  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; の略 */
    margin: auto;
  }



こちらの方法でも真ん中寄せにはできるのですが、ちょっと記載量が多いです・・・



insetプロパティはpositionプロパティと併用して使用する、top/right/bottom/leftのショートハンドプロパティです。



上下左右に値を0で指定し、さらに上下左右の余白をautoにすることで、.itemを真ん中寄せにしています。



通常真ん中寄せにするのであれば、display:flexやdisplay:gridで指定する方がすっきりしますし見やすいのでそちらをオススメします。



ですが、子要素の方が親要素より大きい場合、上記の方法では実装ができません。



次に実装する方法では、親要素より子要素が大きい場合でも、真ん中寄せにすることが可能です。



positionを使用する方法（親要素より子要素が大きい場合）




  






wrapクラスにposition: relativeを指定し、positionの基点にします。
子要素である.itemに対して、position: absolute; inset: 50% auto auto 0; transform: translate(-50%, -50%); を指定します。



  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }



これを説明すると、insetプロパティにてtop: 50%,left50%で.itemを移動させます。この状態では以下のようになります。







これでは不完全なので、transform: translate(-50%, -50%);の指定で、.itemの縦横の半分の大きさ（-50%）だけずらして調節します。







この方法であれば、もし子要素が親要素より大きい場合でも対応ができるため、より汎用的に対応が可能です！



さいごに



今回は真ん中寄せについて４種類解説させていただきました。



最後に解説した方法だけで特に困ることはないのですが、コードが長くなると複雑になってわかりにくくなってしまうため、出来るだけ簡潔にコーディングを済ませたいところです。



そのため、可能な範囲でdisplay:gridなどで調節できるとよりきれいにコーディングが進めれると思います！



今回の記事が少しでも参考になりましたら幸いです。



【HTML】TABLEタグで線が2重になる-線が重ならないとき
岩村　彰斗 — Thu, 11 Jul 2024 12:26:30 +0000

皆さんこんにちは！IWACODEの岩村です。



今回はTABLEタグの罫線について解説いたします。



WEBサイト上で料金表や時間割などの表を作成する際に使用するTABLEタグですが、



TABLEタグで罫線を引いたとき以下のような表示になったことはないでしょうか。TABLEタグにはとあるプロパティの初期値の影響で、borderプロパティで罫線を引くと以下のような状態になってしまいます。







  
    
      見出し
      見出し
      見出し
    
    
      内容
      内容
      内容
    
    
      内容
      内容
      内容
    
  

  



border-collapseプロパティについて



セルとセルの間に謎の間隔が生まれるのは、TABLEタグのborder-collapseプロパティが影響しています。



border-collapseプロパティの値が初期値ではseparateになっているため間隔があいています。



間隔を埋めるためにはTABLEタグに以下のように指定します。



  
    
      見出し
      見出し
      見出し
    
    
      内容
      内容
      内容
    
    
      内容
      内容
      内容
    
  

  







border-collapse: collapse;



このプロパティ、値を指定することで、セルとセル間の間隔を消すことができます。



セルとセルの線が重なって見栄えがスッキリしますね。



セルとセルの間隔を空けて見せるには



WEBサイトのデザインにもよりますが、基本的にTABLEタグではborder-collapse: collapseで指定してコーディングすることが多いです。



セルとセルの間隔があいているような表をデザインすることもありますが、そのような場合でもborder-collapse: collapseを指定して、罫線を白にするなど間隔があいているように見せることもできます。



以下はborderプロパティで白線で間隔を空けています。







  
    
      見出し
      見出し
      見出し
    
    
      内容
      内容
      内容
    
    
      内容
      内容
      内容
    
  

  



このように記載することによって間隔を空けて見せることも可能です。



さいごに



今回はborder-collapseについて解説いたしました。



初心者のうちはハマりやすいところでもあるので、TABLEタグを使用する際にはぜひ参考にしていただければと思います。



TABLEタグについては以下の記事でも解説しております。



少しでも参考になれば幸いです♪


			
				
					あわせて読みたい
					
					
						【初心者向け】tableタグの使い方！部分的に結合、セルを結合した表を作成する
						こんにちは。IWACODEの岩村彰斗です。 今回はtableタグの使い方ということで、部分的に結合された表の作成方法について解説させていただきます。 見出しなどが2行になっ…					
				
			
		

			
				
					あわせて読みたい
					
					
						tableタグは使わない？どんな時に使う？使用するケースについて解説
						こんにちは。IWACODEの岩村彰斗です。 今回はtableタグについて、どのようなときに使用するのが良いのか、tableタグを使用しない場合はどのようにするのかについて解説…					
				
			
		


【フリーランス/WEBデザイナー】コーディングができないとダメなのか – HTML/CSS/JavaScriptの勉強
岩村　彰斗 — Fri, 31 May 2024 10:42:30 +0000

こんにちは！IWACODEのいわむらあきとです。



今回はYouTubeでフリーランスのWEBデザイナーはコーディング（HTML/CSS）ができないとダメなのかということをテーマにおいて、お話しております。



「フリーランス」として活動する上で、どのような立ち位置で、どのような仕事を取っていくかによっても方向性が変わってきます。



WEBデザイナーの方で、



コーディングには手を付けていない方



苦手だから今後どうしようかな



といった方はぜひチェックをしてみてください。









本ブログ内でも記事にしておりますので、よろしければこちらもご覧ください。


			
				
					あわせて読みたい
					
					
						フリーランスのWEBデザイナーにコーディングスキルは必要なのか？
						こんにちは！IWACODEの岩村彰斗です。 今回はフリーランスのWEBデザイナーに、コーディングスキルはあったほうがよいのか？について考えてみました。 コーディングとい…

Webサイト制作に関するノウハウブログ｜IWACODE

【CSS】スクロールでヘッダーが重なる問題を解決！scroll-padding-topで快適なページ移動を実現しよう！

なぜヘッダーが重なるのか？

scroll-padding-topで解決

セクション1

セクション2

セクション3

カスタム変数でヘッダーの高さを管理しよう

さいごに

【CSS】【filter】画像にエフェクトをかける方法 – ホバーした際に写真を白黒からカラーに

CSSのfilterプロパティとは？

よく使われるfilter効果

filter効果は組み合わせて使用できる

動きのあるエフェクトを作るには？

マスクや影を使った効果でさらにオシャレに！

filterプロパティを使うときのポイント！

ブラウザ対応

パフォーマンス

さいごに

【CSS】【アスペクト比】aspect-ratioプロパティで要素の縦横比を簡単に設定する方法

はじめに

概要

注意点

活用例

おわりに

【CSS】【三角形】clip-pathの使い方 – borderは使わずpolygon,circleで多様な形を切り取る方法と実例

clip-pathとは？

clip-pathで作る基本的な形

三角形の作成

コードの解説

応用形の作成

直角三角形

コードの解説

台形

実用例

カスタム形状の画像切り取り

円形

多角形

三角形で吹き出しを実装

さいごに

【WordPress】CFSの代替に最適！Lazy Blocksで簡単カスタムフィールド設定【繰り返し処理（リピーター）も対応】

Lazy Blocksの特徴

Lazy Blocksのインストール、設定の手順

Lazy Blocksのインストールと設定

ブロックを作成

繰り返しの項目を作成

繰り返し内の入力項目を作成

画像

テキスト

テキストエリア

設定したブロックを公開

グーテンベルク（ブロックエディタ）にてデータの登録

PHPファイルにて取得する

主な処理内容

ブロックデータの取得

対象ブロックの判別

データのデコード

スタッフデータのループ処理

出力結果

さいごに

【JavaScript】現在のページに対応するナビゲーションメニューにスタイルを追加する方法

HTML/CSS/JavaScriptの例

HTML

CSS

JavaScriptの記載

JavaScriptの解説

さいごに

Bizメール＆ウェブ ビジネスにてWordPressをインストールする際の注意点｜管理画面でのエラーなど

Bizメール＆ウェブとは

WordPressのインストール手順について

MySQLの有効化（利用開始）

MySQLとは

有効化の手順

phpMyAdminの有効化

エラーが発生した場合

WordPressのインストール

ルートディレクトリについて

ホームページを開くURLを変更（ドメイン名で表示させたい）

手順１）WordPressの管理画面からパスを変更する

手順２）ルートディレクトリは変更できないため、wordpress/index.phpを変更する

Bizメール＆ウェブビジネスにてWordPressをインストールする際の注意点｜管理画面でのエラーなど