WEBST8

今回は、WordPress(ワードプレス)のプラグインAddQuickTag(アドクイックタグ)にコードやタグを登録して、記事をらくらく装飾する方法を紹介します。         【はじめに】AddQuicktagとは装飾のお気に入り登録機能 AddQuicktagは、一言で言うと装飾のお気に入り登録機能です。   AddQuickTagを利用すると、あらかじめ任意のコードを登録することができ、記事内で簡単にコードを挿入することができるようになります。記事 ...

WordPress(ワードプレス)は無料でも品質の高いテーマがたくさんあります。しかし、本格的にサイトを作るなら、より高機能・美しいデザインの有料テーマがおすすめです。   本記事では、超人気テーマの「SWELL」をはじめ、当ブログでも利用している「AFFINGER6」などのおすすめのWordPress有料テーマ10選をご紹介します。     ※今回は有料テーマ中心にご紹介していますが、無料テーマは「目的別WordPressおすすめ無料テーマ6選」をご参照ください。 &nbs ...

  WordPress(ワードプレス)は無料テーマだけでも数千以上がリリースされています。たくさんありすぎて「どれにしたものか」と迷っている人も多いのではないでしょうか。 そこで本記事では、おすすめテーマのポイントを意識しつつ、WordPressのおすすめ無料テーマ6選をご紹介します。 (関連)WordPressおすすめ有料テーマ10選 (関連)アフィリエイトおすすめWordPressテーマ7選     (※)本記事は、2024年4月13日時点で加筆修正した記事になります。記 ...

本記事では、WordPress(ワードプレス)5.0からリリースされたブロックエディター(グーテンベルクエディター)から旧クラシックエディターに戻す方法を説明しています。     この記事の対象者 WordPressを久々に更新したらエディターが変わった・元に戻したい人 WordPressを新規インストールしたけれど、何らかの理由で旧エディターに戻したい人   ■【Classic Editor】WordPressを旧エディターに戻す方法(動画解説版)   &nbsp ...

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。   ここでは、Bootstrap3.3.7に搭載されている「カルーセル」の使い方をご紹介します。       関連 Bootstrap4版でのカルーセルの使い方について Bootstrap4版でのカルーセルの使い方は「Bootstrap4 Carousel(カルーセル)によるスライド ...

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。   ここでは、Bootstrap3.3.7に搭載されている「コラップス(collapse)」の使い方をご紹介します。       関連 Bootstrap4版でのコラップスの使い方について Bootstrap4版でのコラップスの使い方は「Bootstrap4 Collapse(コラッ ...

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。   ここでは、Bootstrap3.3.7に搭載されている「ボタン(button.js)」の使い方をご紹介します。         合わせて読みたい記事 BootStrapの基本・環境設定から実施したい方はこちらの記事をご覧ください。 https://webst8.com/ ...

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。   ここでは、Bootstrap3.3.7に搭載されている「アラートメッセージ」の使い方をご紹介します。         合わせて読みたい記事 BootStrapの基本・環境設定から実施したい方はこちらの記事をご覧ください。 https://webst8.com/blog/ ...

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。   ここでは、Bootstrap3.3.7に搭載されている「ポップオーバー」の使い方をご紹介します。       関連 Bootstrap4版でのPopoverの使い方について Bootstrap4版でのPopoverの使い方は「Bootstrap4 Popover(ポップオーバー) ...

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。   ここでは、Bootstrap3.3.7に搭載されている「ツールチップ」の使い方をご紹介します。       関連 Bootstrap4版でのTooltipの使い方について Bootstrap4版でのTooltipの使い方は「Bootstrap4 tooltip(ツールチップ)の使 ...

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。   ここでは、Bootstrap3.3.7に搭載されている「タブ」の使い方をご紹介します。       関連 Bootstrap4版でのTabの使い方について Bootstrap4版でのTabの使い方は「Bootstrap4 Tabs(タブメニュー)の使い方を徹底解説」をご覧ください ...

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。   ここでは、Bootstrap3.3.7に搭載されている「スクロールスパイ」の使い方をご紹介します。         合わせて読みたい記事 BootStrapの基本・環境設定から実施したい方はこちらの記事をご覧ください。 https://webst8.com/blog/c ...

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。   ここでは、Bootstrap3.3.7に搭載されている「モーダル」の使い方をご紹介します。         合わせて読みたい記事 BootStrapの基本・環境設定から実施したい方はこちらの記事をご覧ください。 https://webst8.com/blog/css-b ...

キャッチコピーはお客様があなたの商品・サービスを知る最初の文章です。魅力的なキャッチコピーはあなたの商品・サービスの売り上げを２倍にすることもありますし、下手なキャッチコピーを作ると、売り上げを半減させてしまうでしょう。   ここでは、読者が思わず読み進めてしまうような心を掴むキャッチコピーの作り方の基本を、以下の3ステップに分けて説明しています。 キャッチコピーのターゲット(ペルソナ)を決める 幸せ実現型か不幸回避型かキャッチコピーのタイプを決める ネーミングテクニックを使ってキャッチコピーを ...

今回は、HTMLの勉強を始めた初心者に、画像を挿入するタグ「imgタグ（イメージタグ）」の基本的な使い方・作り方を説明していきます。       画像・イメージタグとはimgの基本的な使い方 imgタグ(<img>はImageの略)は、画像をWebブラウザ上に表示するHTMLタグの一つです。基本的な書き方は以下のとおり。  

  imgタグの末尾にスラッシュ(/)をつけて< ...

今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明します。       なお、HTML・CSSはテキストなのでテキストエディターであればなんでも記述することはできますが、Visual Studio Code (以下VS Code)などの開発用エディターを利用するのが一般的です。VS Codeのインストール方法は「【VSCode】Visual Studio Codeのインストール・設定手順」をご参照ください。     CSSとはWebページの見た ...

今回は、CSSの枠線borderタグの基本と注意点や角の丸さを設定するborder-radiusについて説明します。         枠線 borderの使い方 枠線 borderの基本的な使い方 borderは、要素に枠線を設定するCSSプロパティです。枠線の色、枠線の種類、そして枠線の太さと3つの値を指定して利用します。     「border:red solid 5px」のように3つの値は半角スペースで区切ります。順番は順不同でどれから先に ...

今回は、CSSの内部余白paddingタグの基本と注意点、外部余白marginとの違いを説明します。         内部余白paddingタグの使い方 内部余白 paddingの基本 まずは内部余白paddingの基本的な使い方を説明していきます。   下記は一番シンプルな例、「padding:100px」と内部余白を指定した例です。   ■使用例 divタグの内部余白を100pxとる   ■表示例   ■上記例のソースコー ...

今回は、CSSの外部余白marginの基本的な書き方、およびmargin:autoを利用した要素の真ん中寄せの方法・text-align:centerとの違いを説明します。         外部余白marginの基本的な書き方 marginは、要素の外部余白(外側の余白)を調整するCSSです。margin:100px;のように設定すると、対象要素の対して100pxの外側余白をとってくれます。   ■使用例 divタグの外部余白を100pxとる [crayo ...

フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。   フレックスボックスは、display:flexで実現でき、従来のfloatよりも柔軟なレイアウトを組むことができます。     フレックスボックス display:flexの使い方 フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。 display:flexを設定することで、 ...

「あの人の書いたブログは読みやすいなあ」「反対に、自分の書いた文章なんかよみにくいなあ」と思ったことはありませんか？ 今回は、読みやすく説得力のでる文章作成テクニックを20項目にまとめて徹底解説します。     ブログのWebライティングとは ブログで利用するWebライティングとは、読む人(ユーザー)と検索エンジンの両方に対して価値あるコンテンツ(文章)を作成する技術のことを言います。   Webライティングとは、読む人と検索エンジンの両方に価値あるコンテンツを文章として作成 ...

ブログでアフィリエイトを始めようとしているけど、『仕組みもやり方もいまいちわからない。効率的にすすめるためにまず基本を勉強したい』という方も多いのではないでしょうか。 そこで今回は、これからアフィリエイトを始めたい初心者向けに、アフィリエイトの勉強におすすめの本をご紹介していきます。     アフィリエイトの勉強で必要な3つのカテゴリー ブログアフィリエイトを効率的に進めるにあたって、勉強しておきたい内容を大きくカテゴライズすると、「アフィリエイト」「WordPress」「SEO・We ...

ブログを書き始めた初心者の方で、「あのブログはすごく読みやすいのに、自分の書いたブログはなんだか読みにくいなあ」と感じる人は多いのではないでしょうか。 ブログ記事の書き方には、いくつかのポイントがあります。 今回は、ブログ初心者のためのブログWebライティングの基本を徹底解説します。       ブログ記事を書く前にやるべきこと いきなり文章を書き始める前にやるべきことがあります。 最も重要なことは、「誰に・何を提供して・どうなってほしいのか」ブログ記事の目的を明確化すること ...

「ネット上でみるブログ記事は読みやすいけど、自分の書いたブログはなんか読みにくいなあ」と感じたことはありませんか？ ブログには、おすすめの文章構成があり、同じ文章でもグッとわかりやすくすることができます。 今回は、ブログ記事を分かりやすく読みやすく書きたいけれどやり方がわからないという方向けに、ブログ記事のおすすめ文章構成・テンプレートパターンを解説していきます。   この記事を読んでわかること ブログの冒頭（リード文）の書き方 ブログの中身（各論）の書き方 ブログ記事の総論（まとめ）の書き方 ...

本記事では、WordPress(ワードプレス)初心者の方を対象に、WordPressのウィジェットの使い方について説明していきます。 ウィジェットの使い方が分かるようになると、WordPressのカスタマイズの幅が広がります。 ■【WordPressウィジェットとは】ウィジェットの使い方(動画解説版) https://www.youtube.com/watch?v=z0JOD3RdLnw&embeds_referring_euri=https%3A%2F%2Fwebst8.com%2Fblog%2 ...

WordPress(ワードプレス)を始めたばかりの初心者の方で、固定ページの意味や使い方がよくわからず、悩んでいる方も多いのでしょうか。   ここでは、従来から使われているクラシックエディター版での固定ページ機能の概要、固定ページの親子関係、ビジュアルエディタとテキストエディタの違いや画像の載せ方、見出しの付け方、改行など基本機能について一通り説明していきます。   関連記事 WordPress5.0から標準になった新エディター「ブロックエディター」版での固定ページの使い方を知りたい方 ...

WordPress(ワードプレス)を始めたばかりの初心者の方で、投稿の意味や使い方がよくわからず、悩んでいる方も多いのでしょうか。   ここでは、従来から使われているクラシックエディター版の投稿の概要、ビジュアルエディタとテキストエディタの違いや画像の載せ方、見出しの付け方、改行、カテゴリ・タグなど基本機能について一通り説明していきます。   関連記事 WordPress5.0から標準になった新エディター「ブロックエディター」版での投稿の使い方を知りたい方は、「【徹底解説】WordPr ...

「Lightning」は、株式会社ベクターが開発しているWordPressで人気の無料テーマで、スタンダードなビジネスタイプホームページを作成したい方におすすめのテーマです。 今回は、WordPressで有名な無料テーマ「Lightning(ライトニング)」の使い方を説明していきます。 ■ホームページ作成方法デモ動画   本記事は2023年6月に更新した内容です。時期によって古くなっている場合もありますので最新の正確な情報は公式サイトをご参照ください。   Lightning(ライトニ ...

ブログやホームページに利用できる画像やイラストを探している方におすすめなのが「画像素材サイト」です。 基本的に他人のサイトにあるイラストやGoogleなどで検索した画像を勝手に利用することは著作権上NGです。 かといって、自分で全て用意することもを難しいくて困っている方も多いと思います。 そこで今回は、ブログやホームページで利用できる商用利用可能なおすすめのフリー素材サイトを中心にご紹介します。   今回ご紹介する素材サイト 写真素材サイト イラスト(アイコン・シルエット)素材サイト 背景素材サ ...

今回は、国内のSNS利用のトレンドと、世界と日本で人気のあるSNS一覧とその特徴・利用者数を説明します。       世界と日本で人気のSNS一覧と特徴・利用者数 世界と日本で人気のSNS一覧と特徴・利用者数 世界と日本で人気のあるSNSの特徴および利用者数について挙げていきます。 「これぞSNS」というものもあれば、「これはSNS？」というものもありますが、ここで取りあげるSNSは下記の通りです。   世界的に使われている日本でも有名なSNS SNS名 特徴 利用 ...