ホームページの作り方・ブログの始め方

レンタルサーバー

2023/6/1

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

個人でブログを始めようとした際に、格安レンタルサーバースターサーバーを検討したことがある人も多いのではないでしょうか。スターサーバーは、有名なレンタルサーバーロリポップ！と並んでおすすめできる安価なレンタルサーバーです。今回は、ネットオウル社のレンタルサーバー「スターサーバー」の特徴やメリット・デメリットをご紹介します。サーバー公式サイトキャンペーン内容期間エックスサーバー公式サイト最大30%OFF！月額693円〜利用できるキャンペーン 2023年6月9日(金)12:00ま ...

レンタルサーバー

2023/6/1

【コアサーバー】CoreServerの評判・特徴やv1とv2の違い

レンタルサーバーはできるだけ安く使いたいけどその中でもできるだけ高スペックなほうが良いという方は多いと思います。コアサーバーは高速SSD、無料SSL、WordPressに対応しており、月額220円〜と安価な値段からWordPressを利用できる、コスパの良いレンタルサーバーの一つです。少しプランが複雑ですが、基本的に今から契約するならV2(新環境プラン)前提で、個人であればCore-X(月額390円〜)もしくは、法人であればCore-Y以上(690円〜)がおすすめです。今回は、GMOデジロック社のコ ...

レンタルサーバー

2023/6/1

【法人向け iCLUSTA+ by GMO】評判・特徴やデメリット

小規模法人のホームページ作成などの用途で法人向けレンタルサーバーGMOクラウドのiCLUSTA+(アイクラスタプラス)の評判や特徴について気になる方もいるのではないでしょうか。 iCLUSTA+は月額1,000円台と安価に利用できる法人向けサーバーで、それほど性能・機能面を求めない小規模HPを運用したい法人におすすめです。今回は、GMOクラウドの「iCLUSTA+」の評判をはじめ、特徴やメリット・デメリットをご紹介します。他社含めたレンタルサーバー比較について本記事では、GMOクラウド iCLUST ...

2022/10/14

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

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

2022/9/17

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

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

2022/9/17

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

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

2022/9/17

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

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

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でアニメーション ...

レンタルサーバー

2023/2/16

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

レンタルサーバーやVPSなどのホスティングサービスを選ぼうとした際に、国内でできるだけ人気・シェアの多いサービスを使いたい人も多いと思います。レンタルサーバーは国内でも100社近くありますが、結論を言うと、国内シェアトップ3は、1位：エックスサーバー、2位：ロリポップ！、3位:さくらインターネットの順になっています。今回は日本国内で使われているホスティングサービスのシェアトップ10社について解説していきます。 ※ホスティングサービスとは、事業者のサーバーを利用者に貸し出すサービスです。具体的には、レン ...

2022/9/7

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

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

2023/1/7

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

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

2023/1/7

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

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

2023/1/7

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

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

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 ...

2022/7/22

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

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

2022/9/8

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

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

その他・ツール類

2022/7/23

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

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

2023/1/7

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

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

WordPressプラグイン

2022/7/28

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

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

2022/7/18

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

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

2022/7/21

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

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

2022/7/8

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

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

2022/7/21

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

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

2022/7/21

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

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

2022/7/21

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

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

2022/7/21

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

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

2022/7/21

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

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

2022/7/21

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

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

<h1>テキストシャドウの使い方</h1>

1	<h1>テキストシャドウの使い方</h1>

h1{
  text-shadow: 6px 3px #bbb;
}

1

2

3

h1{

text-shadow: 6px 3px #bbb;

}

& ...

2022/9/7

CSS position:stickyの使い方と動かない時の対処法

今回はpositionプロパティの値の1つであるposition: stickyの使い方を解説していきます。 stickyを利用すると、javascriptなしで、表テーブルやサイドバーの特定要素の位置を途中で固定することができるので便利です。 ※なお、本記事ではpositionプロパティのstatic・relative・absolute・fixedの使い方について解説していません。これらについては【初心者向け】CSS positionで位置指定でする方法・使い方」をご参照く ...

2022/7/21

【CSS colorの使い方】テキスト文字色を変更する方法

HTMLやCSSを勉強し始めた初心者やWordPressを運用している方で「この部分だけは赤色文字で表示したい」といったことがあります。文字色を変更するには、CSSの「colorプロパティ」を利用します。今回は、colorプロパティでの文字色を変更する方法や使用できる値を解説します。 CSSのcolorプロパティの使い方 colorプロパティは、テキスト文字色を変更するCSSのプロパティです。 colorプロパティの使い方は簡単で、文字色を変更したい要素に対して以下のように ...

« Prev 1 2 3 4 … 14 Next »