Web Design Trends

Webに関わるすべての人のためのメディア

Category

Web制作

【WordPress】マネージドホスティングとは?共用ホスティングとの比較

【WordPress】マネージドホスティングとは?共用ホスティングとの比較 個人でWordPressのサイトを公開する場合、レンタルサーバーを利用する場合がほとんどだと思います。 レンタルサーバーは安…

WordPressをヘッドレスCMS化する方法とは?メリットやデメリットを解説!

WordPressはこれまでブログやWebサイトの作成や管理のためのCMSとして多くのユーザーに利用されてきましたが、最近ではヘッドレスCMSとしてWordPressを活用する方法が注目されています。…

【2023年版】おすすめのリセットCSSまとめ!基本知識と使い方を解説

リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。 分かりやすい例だと、inputタグなどはSafariとChrom…

チャットで質問!「ChatWP」ならWordPressのコードをAIが教えてくれる

ChatGPTを中心に様々なAI関連サービスが注目を集めています。Webデザイン、Web制作においても同様に様々なサービスが登場しています。 今回は、WordPressの公式ドキュメントを学習データと…

【2023年最新】WordPressの使い方を徹底解説!初心者向けのおすすめ設定も

WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す…

【2023年】SEOに強いおすすめWordPressテーマまとめ

WordPressを使ってWebサイトを作成する時、みなさん最初に悩むのがテーマ選びだと思います。 今回は、SEO対策を意識して作られた、SEOに強いおすすめのWordPressテーマをご紹介したいと…

FLOCSSとは?CSS設計手法を活用して保守性の高いコードを書こう

FLOCSS(フロックス)は、人気の高いCSS設計手法の1つです。 CSSは複数人で作業したり、大規模なWebサイトになるとコード量が増えてしまい、途中で整合性が取れなくなったり、破綻してしまう場合が…

ヘッドレスCMSって何?メリット・デメリットや人気のサービスまとめ

これまではコーポレートサイト、メディアなど動的なコンテンツを伴うWebサイトの制作にはWordPress、もしくは独自のCMSを使うというケースがほとんどでした。 最近では、ヘッドレスCMSが注目を集…

各種SNSのシェアボタン設置用URLまとめ!サンプルコードも

Facebook、TwitterなどのSNSに記事をシェアしてもらうのに必要なのが「シェアボタン」です。サービスごとにURLやパラメータが異なるため、オリジナルでシェアボタンを作成する場合はそれぞれ設…

【GA4】簡単!外部リンクのクリック数を計測する方法

GoogleアナリティクスでWebサイトのデータを分析する際に、外部リンクのクリック数をKPIとして追っていたり、アクティビティの参考として確認したいケースはよくあります。 従来のGAはGoogleタ…

2022年版:OGPの正しい設定方法まとめ。確認方法や画像サイズも

OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。 ただしくOGPが設定されていないと、せっかくSNSでURLがシェア…

コピペでOK!CSSで作る背景パターンのサンプルコードまとめ

Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。 ドット柄やチェック模様、ストライプなど色々な種類の背景…

初心者でもOK!WordPressサイトをたった10分で公開する手順まとめ

WordPressはブログやコーポレートサイトなど、様々なサイトに使われている人気のソフトウェアです。 しかし、レンタルサーバーの用意やドメインの取得など、初心者がWordPressサイトを公開する場…

新たなノーコードWeb制作ツール「Siter」が登場!Figmaからのインポート機能も提供

最近ではノーコードのWeb制作ツールを使ったWebサイト制作も耳にする機会が多くなってきていますが、新たに「Siter.io」という海外のツールが登場しました。 実際には1年ほど前からベータ版のリリー…

Material Icons(Google Font Icons)の使い方を解説!表示されない時に確認すべきポイントも

Material Icons(マテリアルアイコン)は、マテリアルデザインに合わせて作られたGoogleが提供するフォントサービスです。Webサイトやアプリなど、様々な場面で利用することができます。 W…

無料で使える!Font Awesome 6 の導入手順まとめ

Font Awesome 6は、2022年に正式リリースされたばかりのFont Awesomeの最新バージョンです。 ベータ版では無料プランがありませんでしたが、正式リリースのタイミングで無料プランも…

【2022】WordPressにおすすめのレンタルサーバーを比較!初心者でも安心して使えるのは?

WordPressでWebサイトを作ろう!と思った時、最初に悩むのが「レンタルサーバー」です。 色々なサービスがあって、さらに難しい説明も多いため、どれを選べばいいのか分からないという方も多いのではな…

【VSCode】Live Serverを使ってWeb制作でライブリロードを活用しよう

Live Serverは、簡易的なローカルサーバーを簡単に立ち上げることができるVSCodeの拡張機能です。 ライブリロードにも対応していて、初心者の方がはじめてローカルサーバーを使った制作に挑戦する…

2021年版:WordPressで人気記事を表示する方法【WordPress Popular Posts】

主にブログなどで見かけることの多い「人気記事一覧」ですが、WordPressならプラグインを使って簡単に表示することができます。 今回は、WordPress Popular Postsを使ってサイドバ…

今さら聞けないFont Awesomeの使い方やカスタマイズ方法

Font Awesomeとは、無料で利用可能なWebアイコンフォントで、アイコンの種類がとても豊富なのでWeb制作の様々な場面で活用することができます。 ただ、CDNを使ったり疑似要素(::befor…

YouTube動画埋め込み時にパラメータを指定して表示をカスタマイズする方法

YouTubeの動画をWebサイトに表示したい場合、埋め込みコードを使えば簡単に動画を埋め込むことができます。 今回は、YouTube動画をWebサイトに埋め込む時にパラメータ(オプション)を指定して…

WordPressのブロックエディターを無効化して旧エディターに戻す方法【投稿・ウィジェット】

WordPressの標準機能となっている「ブロックエディター(Gutenberg)」ですが、できることが多い反面、使いづらいという声もよく耳にします。 今回は、WordPressの投稿・固定ページ編集…

WebサイトでYouTube動画をレスポンシブ対応して埋め込む方法【iframe】

今回は、WebサイトにYouTube動画をレスポンシブ対応して埋め込む方法をご紹介します。 なお、この方法はiframeをWebサイトに埋め込む場合に利用可能なので、Vimeoやその他のサービスでも同…

HTMLでのvideoタグを使った動画の埋め込み方法を解説!属性の使い方や注意点も

HTMLでは、videoタグを使うことによって動画を埋め込み、ページ上で再生することができます。 videoタグには様々な属性があり、それらを正しく組み合わせて使うことで、自動再生やループ再生などをコ…

© 2024 Web Design Trends