WEBST8

今回は、Webサイトの好きな箇所に人気記事一覧を表示することができるプラグイン「WordPress Popular Posts」の使い方を紹介します。 「サイドバーや関連記事の下などに人気記事一覧を表示したい」といった方は、本記事を参考にプラグインの導入を検討されることをおすすめします。 ■(参考)WordPress Popular Postsを使って人気記事一覧を表示させている例     プラグインは便利ですが、古いプラグインやご利用のテーマやプラグインの組み合わせによっては、不具合 ...

法人がホームページや会員サイトなどを作成・運用しようとした際に、「できるだけ安定稼働・セキュリティ的に安全な法人向けサーバーが良い」という法人も多いと思います。 今回は、そういった安定性・堅牢性を重要視する法人におすすめのレンタルサーバー「CPIレンタルサーバー」の特徴やメリット・デメリットをご紹介します。 CPI 公式サイトはこちら   他社含めたレンタルサーバー比較について 本記事では、CPIレンタルサーバーを中心にご紹介していますが、他社含めたおすすめのレンタルサーバーを「【徹底解説】レン ...

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

今回は、GMOデジロック社のレンタルサーバー「バリューサーバー」の特徴やメリット・デメリットをご紹介します。   結論から言うと、今から契約するなら、同GMOデジロック社の「コアサーバー」をはじめ、ロリポップやConoHa WINGなど、そのほかのレンタルサーバーの方がおすすめです。 しかし、個人・趣味サイト目的で格安プランを契約するならバリューサーバーで安価に運用できるメリットもあります。今回バリューサーバーに興味を持っている人向けにバリューサーバーの評判・口コミや特徴をご紹介します。 &nb ...

個人でブログを始めようとした際に、格安レンタルサーバースターサーバーを検討したことがある人も多いのではないでしょうか。 スターサーバーは、有名サーバーロリポップ！やさくらのサーバ、エックスサーバーほど知名度はありませんが、格安で評判のレンタルサーバーです。 今回は、ネットオウル社のレンタルサーバー「スターサーバー」の特徴やメリット・デメリットをご紹介します。       他社含めたレンタルサーバー比較について 本記事では、スターサーバーを中心にご紹介していますが、他社含めたお ...

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

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

今回は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を利用すると、より多様なアニメーションが実装できます。 (参考)【CSSでアニメーション】transitionプロパティの使い方     CSSのkeyframesとanimationとは？両者の役割 keyframesとanimationプ ...

レンタルサーバーやVPSなどのホスティングサービスを選ぼうとした際に、国内でできるだけ人気・シェアの多いサービスを使いたい人も多いと思います。 レンタルサーバーは国内でも100社近くありますが、結論を言うと、国内シェアトップ3は、1位：エックスサーバー、2位：ロリポップ！、3位:さくらインターネットの順になっています。 今回は日本国内で使われているホスティングサービスのシェアトップ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つ目の値にはy軸方向 ...

今回は要素を拡大・縮小させることができる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タ ...