WEBST8

今回は、GMOデジロック社のレンタルサーバー「XREA(エクスリア)」の特徴やメリット・デメリットをご紹介します。   XREAの特徴としては無料プランが利用できることです。機能は低く制限も大きいため、実用的なホームページとしては物足りないものの、まずは無料でWordPressやサイトを試したいという方にとてもおすすめのサーバーです。   他社含めたレンタルサーバー比較について 本記事では、XREAを中心にご紹介していますが、他社含めたおすすめのレンタルサーバーを「【おすすめレンタルサ ...

今回は、GMOデジロック社のレンタルサーバー「バリューサーバー」の特徴やメリット・デメリットをご紹介します。   結論から言うと、今から契約するなら、同GMOデジロック社の「コアサーバー」をはじめ、エックスサーバーやConoHaWINGなど、そのほかのレンタルサーバーの方がおすすめです。しかし、個人・趣味サイト目的で格安プランを契約するなら、バリューサーバーも安価に利用できるのでメリットがあります。   他社含めたレンタルサーバー比較について 本記事では、バリューサーバーを中心にご紹介 ...

今回は、ネットオウル社のレンタルサーバー「スターサーバー」の特徴やメリット・デメリットをご紹介します。     他社含めたレンタルサーバー比較について 本記事では、スターサーバーを中心にご紹介していますが、他社含めたおすすめのレンタルサーバーを「【おすすめレンタルサーバー比較】WordPress対応5社総まとめ」に記載しています。   本記事記載の内容は、2022年9月1日時点で公式サイトなどから調べた情報です。今後、価格や機能面など時期によって本記事に記載の内容と変わってく ...

今回は、GMOデジロック社のレンタルサーバー「コアサーバー」の特徴やメリット・デメリットをご紹介します。     他社含めたレンタルサーバー比較について 本記事では、コアサーバーを中心にご紹介していますが、他社含めたおすすめのレンタルサーバーを「【おすすめレンタルサーバー比較】WordPress対応5社総まとめ」に記載しています。   本記事記載の内容は、2022年9月1日時点で公式サイトなどから調べた情報です。今後、価格や機能面など時期によって本記事に記載の内容と変わってく ...

今回は、GMOクラウドの「iCLUSTA+」の特徴やメリット・デメリットをご紹介します。 他社含めたレンタルサーバー比較について 本記事では、GMOクラウド iCLUSTA+を中心にご紹介していますが、他社含めたおすすめのレンタルサーバーを「【おすすめレンタルサーバー比較】WordPress対応5社総まとめ」に記載しています。 おすすめのレンタルサーバーを比較検討したい方はあわせてご参照いただければと思います。     (注意事項)本記事を読み進めるにあたって 本記事記載の内容は、20 ...

今回はCSSのグリッドレイアウト(display: grid)の使い方を解説していきます。 グリッドレイアウトを利用すると、要素を格子状に並べて自由に配置することができるので、レイアウトを組むのにとても便利です。       CSSグリッドレイアウト(display: grid)とは？ Grid Layout(display: grid)は、CSSでレイアウトを組む手法の1つで、要素を格子状に並べて配置することができます。 Grid Layoutでは列数と行数をあらかじめ指定 ...

今回は、要素の枠線に画像を表示させることができるCSSプロパティ「border-image」の使い方を解説していきます。 border-imageの使い方を覚えると以下のようにオリジナルの枠線デザインを作ることが可能です。       border-imageプロパティとは？ border-imageは、要素の枠線に好きな画像を表示させることができるCSSプロパティです。 border-imageは下記の5つのCSSプロパティを同時に指定することができます。最初のうちは、個別 ...

今回はWordPressのアクションフック・フィルターフックの意味と使い方について紹介します。 WordPressのフックとは、WordPressサイトが表示されるまでの過程で、独自の処理（関数）を挿入することができる仕組み・トリガーです。 アクションフックやフィルターフックを理解すると、WordPressのテーマ自作する人もカスタマイズする人も圧倒的にやりやすくなるので覚えておきましょう。     WordPressのフックとは？意味と概要 WordPressのフックとは、WordP ...

今回はブログを運営する際に、WordPressの管理画面で見かけるトラックバック・ピンバック機能について解説していきます。 トラックバックおよびピンバックは、参考にした記事の運営者に対して「記事へのリンクを貼りましたよ」と通知することができる機能です。 この設定を知らないと「モデレートしてください」といったメールがたくさん来たり、知らない間に相手のサイトに通知していることがあるので、覚えておきましょう。 (関連記事)【WordPressモデレートしてくださいとは】通知オフにする設定   &nbs ...

今回はCSSだけでアニメーションを実装することができるCSSのkeyframesとanimationプロパティの使い方を紹介していきます。 CSSで簡単なアニメーションはtransitionでも実装できますが、keyframesとanimationを利用すると、より多様なアニメーションが実装できます。 https://webst8.com/blog/wp-content/uploads/2022/07/keyframes-animation-demo-kansei.mp4 (参考)【CSSでアニメーション ...

レンタルサーバーやVPSなどのホスティングサービスを選ぼうとした際に、国内でどのくらいのシェア状態になっているのか気になる人も多いと思います。 ※ホスティングサービスとは、事業者のサーバーを利用者に貸し出すサービスです。具体的には、レンタルサーバー(共用サーバー)をはじめ、バーチャルプライベートサーバー(VPS)、マネージドサーバー、専用サーバーなどを提供しているサービスのことです。 レンタルサーバーは国内でも100社近くありますが、今回は日本国内で使われているホスティングサービスのシェアトップ10社につ ...

今回は行内やセル内の縦方向の位置を変更することができるCSSプロパティ、vertical-alignの使い方やよく使用される値を紹介します。       vertical-alignプロパティとは？ vertical-alignは、インライン(例: テキスト、画像など)要素、インラインブロック要素の垂直・縦方向の位置を指定するのに使用されるCSSです。 高さの異なるインライン画像とテキストを横一列に並べた時、両者の揃え位置を指定したい場合などに、vertical-alignプ ...

今回は要素に傾斜をつけることができるCSS関数、skew関数の使い方を紹介します。       transformで利用するskew関数とは skewはtransformプロパティの値として使用する関数の一つで、要素に傾斜を付けることができます。 ■(参考)skew()を使用してx軸方向に傾斜を付けている例 なお、skew()はCSSプロパティではなく関数なので、transformプロパティの値として使用します。 また引数を2つ取ることができ、1つ目の値にはx軸方向、2つ目の ...

今回は要素を拡大・縮小させることができるCSS関数、scale関数の使い方を紹介していきます。 scale関数が使えるようになると、ホバー時に拡大されるボタンや画像の中央部分がゆっくりズームされるといった実装ができるようになります。       transformで利用するscale関数 scale()は要素をx軸、y軸方向に拡大・縮小させることができるCSS関数です。 ■(参考)scale()を使用してホバー時に要素をx軸・y軸方向に拡大している例 なお、scale()はC ...

今回は要素を回転させることができるCSS「transform:rotate()」の使い方を紹介します。 rotate()を使用すると、マウスホバー時に要素を好きな角度で回転させたりといった実装できるようになります。 実際によく見る例では、ハンバーガーメニューの上下の棒を45度回転させたりといった実装が挙げられます。     transformで利用するrotate関数 rotateはCSS関数の1つで、要素を中心点や軸を基準に回転させることができます。 ■(参考)rotateを使用して ...

今回は、要素の枠線(border)やpaddingで取った余白などを要素の幅・高さ(width・height)に含めるかどうかを指定することができるプロパティ「box-sizing」の使い方を解説します。         box-sizingの意味と使い方 box-sizingはborderやpaddingで指定される枠線や余白の大きさを要素の幅・高さ(width・height)に含めるかどうかを指定することができるCSSプロパティです。 例えば「width: 50 ...

WordPressの編集を始め、もう少しテーマをカスタマイズしたいと思った時、必ず編集が必要になってくるのがfunctions.phpというファイルです。   本記事では、Wordpress内にあるfunctions.phpについて意味や役割、記載場所、注意点、編集例を解説していきます。     functions.phpの意味・役割 functions.phpは、Wordpressのプラグインのように、WordPressの動作やテーマ動作・各種機能をカスタマイズ・追加できる ...

WordPressでjqueryのスクリプトを扱う際に、「うまく動かない」「$ is not function...」のようなエラーがで困っているという人も多いのではないでしょうか。 WordPressでjqueryを扱う際にはいくつかの注意願があります。 本記事では、WordPressでjqueryを使う際の注意点や書き方について解説していきます。     WordPressのjQueryを使う際の注意点 ここでは、WordPressでjQueryを使う際に動かなくなる原因になりやす ...

Emmet（エメット）とは、コーディングをするとき省略したコードを書いてEnterやTabキーを押すだけで自動変換され記述できる便利な機能です。 いちから<div class="wrap"><div class="content"><h1>.....といったタグを手打ちで記述するよりも、エメットを使った方が早く書けて効率的です。 Emmetは記法なので、Emmetに対応するエディターであれば利用できます。今回は標準でEmmetを利用できるVisual Studio Co ...

今回は要素をxy軸上で移動させることができるCSS関数、translate()の使い方を紹介します。 translateが使えるようになると、要素の位置調整ができたり、簡単にアニメーションを実装したりすることができ非常に便利です。       transformで利用するtranslate関数 translateはtransformプロパティの値として使用する関数の一つで、要素を水平方向や垂直方向に移動することができます。 ■(参考)translateを使用してホバー時に要素 ...

WordPressでカスタムフィールドを利用する際、簡単なものであれば標準のカスタムフィールドでも十分です。 しかし、カスタムフィールドを運用する際に、画像や文字数制限や必須設定など、標準機能よりより高度な設定をしたいシーンがよくあります。 そういった場合に、今回紹介する「Advanced Custom Fields」というプラグインを利用すると、より高度なカスタムフィールドを運用することができます。 本記事では、Advanced Custom Fieldsの使い方や主要な出力方法について解説していきます ...

wordpressでホームページを作成する際に、不動産の物件情報や、何らかの商品情報を掲載する際に、価格やエリアなど特定の入力項目を持たせたい場合があります。 WordPress標準では、タイトルや本文という入力項目以外ありませんが、WordPressでは、「カスタムフィールド」というものを使うことで入力項目を増やすことが出来ます。   本記事では、カスタムフィールドについてその意味や意味や使い方・出力方法について解説していきます。     カスタムフィールドとは カスタムフ ...

今回はCSSで簡単に画像をトリミングする事ができるCSSプロパティ「object-fit」の使い方をご紹介します。 object-fitが使えるようになれば、縦横比の異なる画像を高さを揃えて横一列に並べる事が可能で、CSSだけで簡易的な画像トリミングすることができます。       object-fitプロパティとは？ object-fitプロパティは、画像をトリミングする事ができるCSSです。 通常、縦横比の異なる画像を横一列に並べる場合、横幅を揃えて表示させると以下のよう ...

今回は、WordPress(ワードプレス)で作成したサイトで表示されるキャッチフレーズを変更する方法を今回ご紹介します。     この記事を読んでわかること WordPressのキャッチフレーズを変更する方法 キャッチフレーズには何を入れたら良いか     WordPressのキャッチフレーズの変更方法 まずキャッチフレーズの変更方法を説明します。まず、設定＞一般設定を選択します。   一般設定が表示されます。ここでキャッチフレーズを変更できます。必要に応 ...

今回は、フォントの種類・字体を変更することができるCSSプロパティ「font-family」の使い方を解説していきます。 PCやモバイル端末には、游ゴシック、游明朝、ヒラギノゴシックなど、いろいろなフォントがインストール・用意されており、CSSで表示される文字フォントを指定することができます。       font-familyはフォントの種類を指定できるCSSプロパティ font-familyはフォントの種類を変更する事ができるCSSプロパティです。 以下のように 「fon ...

今回はCSSプロパティの1つ「letter-spacing」の使い方をご紹介します。 letter-spacingを使用すると、選択したテキスト全体の文字間隔の調整をすることが可能です。       letter-spacingの使い方 letter-spacingは、文章の字間を調整することができるCSSプロパティです。 標準の字間よりもより字間を空けたい・狭めたい場合にletter-spacingを使用します。   letter-spacingを使って字間を調整 ...

今回は、CSSプロパティの1つで文字の太さを変更できるプロパティ「font-weightプロパティ」の使い方を解説していきます。 font-weightプロパティは、テキストの一部だけ文字を太くして目立たせたい場合や、もとから太字で表示されている部分を通常の太さに戻したい場合などに利用することができます。     font-weightは文字の太さを変更できるCSSプロパティ font-weightは文字の太さを変更することができるプロパティです。 テキストの一部だけ太字や細字にしたい ...

今回は文字サイズを変更するのに使用されるCSSプロパティ「font-size」の使い方を紹介します。 font-sizeを利用するとテキスト文字の大きさを変更することができます。フォントサイズの指定方法には、pxやrem、em、%など使える単位が多く、今回は各単位の意味や使用例について解説していきます。       font-sizeプロパティの使い方 font-sizeは、文字のフォントサイズを変更するのに使用されるプロパティです。 フォントサイズを指定していない場合、pタ ...

今回は画像やボックスにドロップシャドウのシャドウ効果を付けることができるCSSプロパティ「box-shadow」の使い方を解説していきます。     box-shadowで要素に影をつける方法 box-shadowは、画像やボックスの周りにドロップシャドウのような影の効果を付けることができるCSSプロパティです。 複数の値を半角スペースで区切って指定することができ、こうすることで影の位置の調整や色の変更、大きさの調整など様々な設定をすることができます。 [crayon-6339129b ...

今回はテキスト文字に影(シャドウ)を付ける事ができるCSSプロパティ「text-shadow」の使い方を解説していきます。       text-shadowでテキストに影をつける方法 text-shadowプロパティはCSSプロパティの1つで、テキストに影を付けることができます。 下記は、h1タグにtext-shadowで影をつけた例です。

& ...