Web制作記事一覧
詳細を見る
Webコーディング
SNSの時代にWebサイトを作るメリット・デメリットとは？
TwitterやFacebook、Instagram、TikTok…といった様々なSNS（ソーシャルメディア）が立ち並ぶ現代社会。集客はSNSでできてしまう時代でもあります。 そんな時代にWebサイトを作る意味はあるのか。Webサイトを作るメリットについて考えてみました。 情報を構造化することができる Webサイトの大きなメリットのひとつに「情報が流れてしまわない」ことが挙げられます。 情報を構造 […]
詳細を見る
Webコーディング
Web制作の「運用・保守」って何するの？
Web制作の仕事をしていたり、発注したりするときに目にする「運用・保守」という言葉。 あまり表立って見えるような作業ではないため、運用保守費用を「無駄なお金」と感じているクライアント様も多いはず。 そこで今回は、運用・保守ではどんな作業をしているのかを解説します。 サーバー・ドメイン管理 Webサイトが置かれているサーバーやそのドメインを管理します。 必要に応じて サーバー・ドメインの設定 プログ […]
詳細を見る
Webコーディング
PHPを使ってCSSやJSのキャッシュ削除を自動化しよう
Web制作をしているとよくある会話 コーダー「こちら修正しました。ご確認よろしくお願いいたします」 クライアント「変わっていません…」 コーダー「キャッシュ削除してください。方法は…」 あるあるですよね？ キャッシュ削除について何度も説明するのが面倒だという話をよく聞きます。 そんな時はキャッシュ削除を自動化しませんか？ date関数だけでもいいが、難点がある CSSのキャッシュを残さないようにす […]
詳細を見る
Webコーディング
aタグで「target=”_blank”」を記述した際に一緒に設定しておきたい「noopener」と「noreferrer」
aタグで別タブで開くリンクを実装した時、「target=“_blank”」と記述しますが、実はこの記述では不十分とされています。 では、どのように記述すればよいのでしょうか？ 実際のコードとともに紹介いたします。 rel属性で設定を追加 rel属性でnoreferrerとnoopenerを指定します。たったこれだけ。 誤字に注意しましょう。 なぜ「noopener」や「noreferrer」を記述 […]
詳細を見る
Webコーディング
FTPアップロードをGitプッシュで自動化する方法
Web制作ではよく「Filezilla」などのFTPクライアントを使ってサーバーにアップロードするのですが、これって正直、面倒ではありませんか？ どうせGitを使ってバージョン管理しているのなら、GitHubにプッシュ→FTPアップロードが自動でできたら…なんて思ったことはありませんか？ 実はそんな便利な機能、あるんです。紹介しますね。 仕組み ローカル環境からプッシュをすることでGitHubに反 […]
詳細を見る
Webコーディング
丸く配置したテキストがくるくる回転するデザインを作ろう！
よくおしゃれなサイトで丸配置のテキストがくるくると回転しているデザインを見ることが多くなってきました。 See the Pen 回転 by Ito Hiroki (@ito-hiroki) on CodePen. サイトのアクセントになって見栄えが増しますね。 今回はそんな丸配置のテキストが回転するデザインの実装方法を紹介します。 必要なツール Adobe Illustrator テキストエディタ […]
詳細を見る
Webデザイン
Adobe XDでパディング設定する方法
文字と長方形を作成 図形を作り、その上に文字を重ねます。 グループ化 文字と長方形を選択し、右クリック→「グループ化」 もしくはショートカットキー「⌘ + G」でグループ化します。 パディング設定 グループ化したものをクリックすると右側メニューに「パディング」が表示されます。 「レスポンシブサイズ変更」がアクティブになっていないとパディング設定できないので注意。 パディングは上下左右で数値指定でき […]
詳細を見る
Webコーディング
【CSSデモあり】横幅に合わせて文字を改行せずに省略して3点リーダーを表示させたい
プログやお知らせ一覧ページに文字を載せる際、文字数が多いと行数が増えてしまい、見た目がおかしくなってしまうことがありますよね。 そんなときは行数を制限すると見栄えが良くなります。 これを→ 2行に収めたい そんなお悩みはCSSで解消できちゃうかもしれません。 CSSでの実装方法 CSSでは横幅から余ってしまう文字を省略し、3点リーダーを表示させることができます。 以前はPHPで文字数制限をかけてい […]
詳細を見る
Webコーディング
TwitterシェアボタンをJavaScriptで実装しよう【Vanilla JS】
現代のWebサイトには欠かせない「SNSシェア」。SNSの中でもTwitterは拡散力が大きく、WebサイトをTwitterにシェアしたい人はたくさんいます。 そこで、ページごとのURLやタイトルをTwitterにシェアするボタンの実装方法を紹介いたします。 TwitterのシェアURLの仕組み 基本的に、Twitterのシェアボタンはリクエストパラメータでツイートの内容を設定できます。 パラメー […]
詳細を見る
Webコーディング
WordPressでサイト内検索フォームを実装しよう
Webサイトでコンテンツが増えてきた時にユーザーが探しているコンテンツを見つけるのに時間がかかるなんてことは多々あります。 そこで、サイト内検索フォームの導入を検討してみてはいかがでしょうか？ サイト内検索フォームを実装することで、サイト回遊率もアップすることでしょう。 テーマフォルダにsearchform.phpとsearch.phpを用意。 「/{ルートディレクトリ}/wp-content/t […]
