WEB制作のメモ帳

コピペで使えるリンク・ボタンのCSS＆サンプルコード10選～問い合わせや資料請求ボタンにも

リンクやボタンは、WEBサイトのデザインにおいて重要な要素のひとつです。分かりやすさはもちろん大事ですが、デザインを工夫することで、訪問者の目を引いたり、クリック率を向上させることができます。 基本的にシンプルでベーシックなボタンデ

2024/12/04 12:00

コピペで使えるテキストのCSSエフェクト＆サンプルコード12選

見出しや文章の文字（テキスト）に、影や色を付けたり回転させたりと、さまざまな効果（エフェクト）を加えることができます。エフェクトは、簡単なCSSの記述で実現することができます。 それでは、いくつかデザインとコードをご紹介していきます

2024/03/06 09:00

はじめてのCSS講座～CSSの書き方やレスポンシブ対応を完全マスター

HTMLとCSSの基本をマスターできれば、もう自力でウェブページが作れます。ここでは、CSS初心者の方向けに、CSSの基本を解説しています。 これからホームページを作りたい方、将来ウェブデザイナーを目指している方、ウェブ業界で働きた

2024/02/25 09:00

コピペで使えるボックス（見出し・枠付き）のCSSデザイン＆サンプルコード10選

例えば、 目次の見出し一覧 おすすめやポイントの箇条書き 注意書きや補足情報 などは、枠線や背景色、小見出し（タイトル）などを付けて、見た目を分かりやすくすることがあります。 今回は、そんなときに使えるボ

2023/08/07 09:00

ChatGPTの始め方～アカウント登録・認証・ログイン・使い方・注意点

「ChatGPT（チャットジーピーティー）」。メディアでいろいろ取り上げられていますが、聞くだけではなく、実際にChatGPTにふれてみたい方に、始め方・登録手順・使い方を解説していきます。 ChatGPTとは？ ChatGP

2023/06/24 09:00

WordPressサイトに自身の最新インスタ写真を自動表示！埋め込み方法解説

WordPressサイトにインスタグラムの写真を掲載する（埋め込む）方法をご紹介します。 記事のなかに1つのインスタ写真を埋め込む 記事内やフッターなどにインスタの一覧写真を埋め込む（写真は自動更新） 前者は、インス

2023/05/22 09:00

CSSだけで写真を編集加工（フレーム・影・トリミング・色）サンプルコード10選

写真・画像にフレームを付けたい、影を付けたい、トリミングしたい、色を変えたい。そんなときは、写真・画像データ自体を加工すればいいわけですが、めんどくさい（個人的感想が強めです）。 いまは、写真・画像データはそのままに、CSSだけでさ

2023/04/01 09:00

おすすめは？写真・動画を保存できるクラウドストレージ8つを比較

携帯やパソコンに保存している写真・動画・音楽。いまの時代、めちゃくちゃデータ容量くいますよね・・・。 そんなときに考えるのが、クラウドストレージサービス。クラウドにデータを保存してローカルデータを削除すれば、携帯やパソコンのデータ容

2023/03/01 12:00

コピペで使える見出しタイトルのCSSデザイン＆サンプルコード35選

見出し・タイトルで使えるデザインサンプルを35種類、どどどっとご紹介します。 このデザインサンプルでは、h1タグに対してCSSを適用しています。詳しいコードの解説は省いていますが、コピペで利用できますので、お気軽にご活用ください。

2023/02/15 12:00

コピペで使える見出しセットのCSSデザイン＆サンプルコード8選

ウェブサイト制作で必ず登場する「見出し」。見出しのデザインは、サイトの印象、サイトのわかりやすさ、文章の読みやすさなどに影響します。 見出しのタグは、<h1><h2><h3><h4>&

2023/02/01 09:00

2段階認証導入でセキュリティ強化！WordPressプラグイン「Two-Factor」

WordPressのセキュリティ対策してますか？ WordPressは、無料で簡単にサイトが作成できることから、個人・法人問わず世界中で数多く利用されています。その反面、WordPressのログイン画面は、不正アクセスの攻撃の的とな

2023/01/16 16:00

コピペで使える王道フッターのCSSデザイン＆サンプルコード7選

ウェブサイトのフッターのデザインサンプルです。王道のデザインなので、汎用性高く使えるのではと思います。レスポンシブデザインに対応しています。 コピペで利用できます。お気軽にご活用ください。 使い方 下部の「デザインサンプ

2021/07/23 09:00

コピペで使えるテーブル（表）のCSSデザイン＆サンプルコード17選

テーブルを使った表のデザインサンプルです。ベーシックな形の表、実線・破線などの罫線を組み合わせてデザインした表など、複数ご用意しました。 コピペで利用できます。お気軽にご活用ください。 使い方 HTML HTMLは

2021/05/30 10:00

WordPressのバージョンをプラグインひとつでダウングレードする方法

WordPressの利用者は、セキュリティの観点からも定期的に使っているWordPressをアップデートすることが必要です。 ただ、いざアップデートした後に、 最新バージョンがどうにもこうにも使いづらい・・・最新バージョンがリ

2021/05/13 14:00

WordPress プラグインを旧バージョンに戻す方法（ダウングレード）

「プラグインを更新したら、サイトの挙動がおかしくなってしまった！プラグインを以前のバージョンに戻せたら...」 今回はプラグインのバージョンをダウングレードさせる方法をご紹介します。 プラグインをダウングレードする前に

2021/04/13 09:00

WordPress リビジョンの保存数を無制限から特定の数に制限する

WordPressの記事を簡単にコピーできるプラグイン「Duplicate Post」をご紹介します。シンプルで使い勝手が良く、おすすめのプラグインです。企業サイトの投稿・固定ページなどは、複製機能は重宝するかもしれません。

2021/01/29 12:00

不要なリビジョンを一括削除「Optimize Database after Deleting Revisions」プラグイン

WordPressの記事を簡単にコピーできるプラグイン「Duplicate Post」をご紹介します。シンプルで使い勝手が良く、おすすめのプラグインです。企業サイトの投稿・固定ページなどは、複製機能は重宝するかもしれません。

2021/01/28 15:00

WordPressサイトに簡単にパスワード制限をかけられるプラグイン

ワードプレスのサイトを開発しているときや、公開中のサイトを一時的に非公開にしたいときなどに、ささっとサイトにパスワード制限をかけることができるプラグイン「Password protected」。設定方法や使い方を解説しています。

2020/11/08 08:00

LINEのリンクから直接Safari・Chromeブラウザを立ち上げさせる方法

LINEで送られてきたURLをクリックすると、通常はLINEアプリ上でウンドウが開きリンク先のページが表示されますが、ユーザーにSafariやChromeで立ち上げさせたい場合があります。そんなときは、リンクするURLにパラメーターを追加します。

2020/10/21 08:00

スパム防止！Contact form 7に認証機能（reCAPCHA）を追加する方法

WordPress のContact form 7にスパム防止機能「reCAPCHA（リキャプチャ）」を導入する方法をご紹介しています。設定は簡単。ロボット等によるフォームの迷惑送信（スパム行為）を自動で防御してくれています。

2020/09/27 08:00

はじめてのHTML～テーブルタグ<table>で表を作る方法とCSSデザインサンプル

テーブルタグの書き方・使い方を、サンプルコードをたくさん使いながらご紹介しています。HTML初心者にとってテーブルタグは少し難しいですが、書き方のルールはいたってシンプルです。タグのルールをしっかり覚えて、さまざまな表を作成しましょう。

2020/08/25 00:57

はじめてのHTML～リストタグ<ul><ol><li>の書き方とCSSデザインサンプル

箇条書きを実現するタグ「リストタグ（<ul><ol><li>）」の書き方・使い方を解説しています。文章を箇条書きにする際に使うタグですが、サイトのメニューをデザインするときにも良く使われます。サンプルコード、CSSのデザインサンプルも掲載。

2020/08/20 08:00

はじめてのHTML～コメントアウト<!– –>の書き方・使い方・注意点

ウェブサイト内のテキストやコンテンツを非表示にすることができるコメントタグ、コメントアウトの方法について解説しています。コメントアウトは、表示を制御するだけでなく、サイトの管理上の目印にも使われます。使い方の注意点もチェックしておきましょう。

2020/08/18 08:00

はじめてのHTML～イメージタグ<img>の書き方とCSSデザインサンプル

ウェブサイトに画像を配置する際のイメージタグ（imgタグ）。基本的な書き方、src属性（絶対パスと相対パス）、alt属性、title属性、width属性とheight属性について解説しています。CSSで画像をデザインする方法も合わせて紹介。

2020/08/16 08:00

はじめてのHTML～アンカータグ<a>でリンクを貼る方法とCSSデザインサンプル

HTMLのリンク（aタグ）について解説しています。基本的な書き方、リンク先の指定方法（絶対パスと相対パス）、ページ内の特定箇所にリンクを貼る方法、別ウィンドウを表示する方法など。CSS（スタイルシート）のデザインサンプルあり。

2020/08/11 08:00

はじめてのHTML～段落タグ<p>の書き方とCSSのデザインサンプル

今回はウェブサイトで段落を表すタグ、段落タグ（pタグ）について解説していきます。 段落タグ（pタグ）の書き方 「p」は「Paragraph（パラグラフ）」の略です。テキストや画像を「&lt;p&gt;」と「&lt;/p

2020/08/09 08:00

はじめてのHTML～見出しタグ<h1>～<h6>の書き方と正しい使い方

見出しタグ（hタグ）の書き方・使い方・注意点を解説しています。文章を論理立てて表すために、またSEO対策としても、とても重要なタグです。使用頻度も高いタグです。正しい文章構成になるよう、hタグを設定しましょう。

2020/08/08 08:00

はじめてのHTML～最小限のHTMLを書いてページを表示してみよう！

サイト制作のはじめの一歩、HTMLについて解説しています。「HTMLとは？」「HTMLで書かれたウェブサイト」「HTMLファイルの作り方」「HTMLの基本構造と書き方」などを解説しています。ウェブサイト制作・HTMLの初心者向けの記事です。

2020/08/06 08:00

関東近郊おすすめグランピング施設9選～自然に浸る贅沢ステイ

自然のなかで、ホテルのような贅沢な滞在を、キャンプスタイルで楽しむ「グランピング」。関東近郊の宿泊を伴うおすすめのグランピング施設をご紹介しています。都心から車で2・3時間で行ける施設もあります。心も体もリラックスしてみてはいかがですか？

2020/08/02 13:00

京町家をリノベーションした一棟貸し宿11選～京都に住まうように過ごす

歴史と風情ある京都の伝統的な木造家屋「京町家」。京町家をリノベーションした宿泊施設が近年増えています。伝統を残しながら利便性・快適性が考慮されたつくりになっています。しかも一棟貸しでプライベート感たっぷり。おすすめ宿を厳選してご紹介。

2020/07/25 08:00

リスト（箇条書き・メニュー）にFont Awesomeアイコンを表示させる方法

リスト（&lt;ul&gt;&lt;li&gt;～&lt;/li&gt;&lt;/ul&gt;）を作成した際、箇条書きの先頭に「・（ナカグロ）」などが表示されますよね。あの「・（ナカグロ）」を、アイコンフォント「Font Awesome」

2020/07/21 08:00

【Q&A】Go To トラベルキャンペーンのよくある質問まとめ（8/5更新）

「Go To トラベルキャンペーン」について、Q&A形式でまとめています。「旅行代金が半額になるの？」「海外旅行は支援の対象？」「宿泊のみは支援の対象？」「地域共通クーポンって？」 Go To トラベルキャンペーンのよくある質問まとめ。

2020/07/17 08:00

Go To トラベルキャンペーン 期間・対象商品・割引額・予約方法など

『Go To トラベルキャンペーン』について解説しています。Go To トラベルキャンペーンでは、旅行代金の最大半額相当を国が支援してくれます。支援（割引）額がどのくらい？対象旅行商品は？予約方法は？地域共通クーポンって？詳細を説明。

2020/07/15 11:00

アイコンフォント『Font Awesome』の登録方法と使い方をざっくり紹介

『Font Awesome』はホントに便利です。アイコンをわざわざ作らなくても、コードを書くだけで、さまざまなアイコンをサイト上に表示することができます。1500種類以上のアイコンを無料で利用可能。使い方を簡単に解説しています。

2020/07/10 08:00