WEBST8

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】 1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。 「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。 ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。 メルマガ登録はこちら 個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ

無料サーバーXREA 特徴 評判・メリット・デメリット

レンタルサーバー

2022/9/28

無料サーバーエクスリア(XREA)の特徴やメリットデメリット

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

バリューサーバーvalueserverの特徴 評判・メリット・デメリット

レンタルサーバー

2022/9/27

バリューサーバー(ValueServer)の特徴やメリットデメリット

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

スターサーバーStarServerの特徴 評判・メリット・デメリット

レンタルサーバー

2022/9/26

スターサーバー(StarServer)の特徴やメリットデメリット

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

CoreServerコアサーバーの特徴評判メリット・デメリット

レンタルサーバー

2022/9/25

コアサーバー(CoreServer)の特徴やメリットデメリット

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

iCLUSTA+の特徴 評判・メリット・デメリット

レンタルサーバー

2022/9/25

GMOクラウド iCLUSTA+の特徴やメリットデメリット

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

CSS Gridグリッドレイアウト display: gridの使い方

CSS

2022/9/17

【CSS グリッドレイアウト】display: gridの使い方

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

CSS border-imageの使い方枠線に画像表示する方法

CSS

2022/9/17

【CSS border-imageの使い方】枠線に画像表示する方法

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

WordPress アクションフック / フィルターフックの意味と使い方

WordPress

2022/9/17

WordPressフックとは?アクションフック・フィルターフックの使い方

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

WordPress トラックバック・ピンバックとは?意味と使い方

WordPress

2022/9/17

WordPressトラックバック・ピンバックとは?意味と使い方

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

CSS keyframes animation CSSだけでアニメーションをつける方法

CSS

2022/9/17

【keyframes animation】CSSでアニメーションする方法

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

レンタルサーバー 日本国内シェアランキング

レンタルサーバー

2022/9/6

【2022年版】レンタルサーバー日本国内シェアランキング

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

CSS vertical-alignの使い方テキスト縦方向の位置変更向の位置を変更する方法を紹介!

CSS

2022/9/7

【CSS vertical-alignの使い方】テキストの縦・上下方向の位置変更

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

transform:skew 要素に傾斜をつける・斜めにする方法

CSS

2022/9/7

【CSS transform skewの使い方】要素に傾斜をつける方法

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

transform:scale 要素の拡大・縮小方法

CSS

2022/9/7

【CSS transform scaleの使い方】要素の拡大・縮小方法

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

transform:rotate 要素を回転させる方法

CSS

2022/9/7

【CSS transform rotateの使い方】要素を回転させる方法

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

CSS box-sizing:border-box 余白/枠を横幅 高さに含める方法

CSS

2022/9/7

CSS box-sizing:border-boxで余白と枠を横幅高さに含める

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

WordPress functions.phpとは? 意味や書き方・記載場所

WordPress

2022/7/22

WordPress functions.phpとは?意味や書き方・記載場所

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

WordPress jQuery読み込み・書き方 動かないエラー時の注意点

WordPress

2022/9/8

WordPressでjQueryを利用する際の書き方と注意点

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

VSCode Emme(エメット)とは。基本的な書き方・使い方

その他・ツール類

2022/7/23

Emmet(エメット)とは?エメットを使った基本的な書き方

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

CSS transform translateの使い方・要素の移動

CSS

2022/9/7

【CSS transform:translate()の使い方】xy軸上の移動方法

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

WordPress Advanced Custom Fieldsの使い方・出力方法

WordPressプラグイン

2022/7/28

Advanced Custom Fieldsの使い方・出力関数【WordPress カスタムフィールド】

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

WordPress カスタムフィールドとは? 意味や使い方・設定方法

WordPress

2022/7/18

wordpressカスタムフィールドとは?意味や使い方・出力方法

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

CSS object-fitの使い方 CSSで画像をトリミング

CSS

2022/7/21

【CSS object-fitの使い方】CSSで画像トリミングする方法

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

WordPress キャッチフレーズ変更方法 何を入れるべきか・空白?

WordPress

2022/7/8

WordPressキャッチフレーズ変更方法と何を入れるか・空白?

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

CSS font-familyの使い方 フォント種類・字体の変更方法

CSS

2022/7/21

【CSS font-familyの使い方】フォント種類・字体の変更方法

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

CSS letter-spacingの使い方 テキスト文字の字間を調整する方法

CSS

2022/7/21

【CSS letter-spacingの使い方】テキスト文字の字間調整

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

CSS font-weightの使い方 文字の太さの変更・指定方法

CSS

2022/7/21

【CSS font-weightの使い方】文字の太さの変更方法

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

CSS font-sizeの使い方 文字の大きさ px / rem / em / %

CSS

2022/7/21

【CSS font-sizeの使い方】文字サイズ変更(px rem em %)

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

CSS box-shadowの使い方 要素・画像に影をつける方法

CSS

2022/7/21

【CSS box-shadowの使い方】ボックス要素や画像に影をつける方法

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

CSS text-shadowの使い方 テキスト文字に影をつける方法

CSS

2022/7/21

【CSS text-shadowの使い方】文字に影を付ける方法

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

& ...