Tips : PAGE5
詳細を見る
ガジェット
MacBookとiPad（iPhone）持ってるならキャプチャ連携でササっと書き込んじゃえ！方法を紹介！
Web制作の仕事をしていると、WordPressの操作方法のマニュアルや依頼の確認のためにスクリーンショットを撮って四角で囲んで…という作業が多く、手間になってしまうことがあります。
そんな時は「連携スケッチ」機能を試してみませんか？
Macでキャプチャした画像をそのままiPadやiPhoneで書き込むことが可能です。
スクリーンショットや画像を「クイックルック」で開く･･･
詳細を見る
Webコーディング
FTPアップロードをGitプッシュで自動化する方法
Web制作ではよく「Filezilla」などのFTPクライアントを使ってサーバーにアップロードするのですが、これって正直、面倒ではありませんか？
どうせGitを使ってバージョン管理しているのなら、GitHubにプッシュ→FTPアップロードが自動でできたら…なんて思ったことはありませんか？
実はそんな便利な機能、あるんです。紹介しますね。
仕組み
ローカル環境からプ･･･
詳細を見る
Webコーディング
丸く配置したテキストがくるくる回転するデザインを作ろう！
よくおしゃれなサイトで丸配置のテキストがくるくると回転しているデザインを見ることが多くなってきました。
See the Pen
回転 by Ito Hiroki (@ito-hiroki)
on CodePen.
サイトのアクセントになって見栄えが増しますね。
今回はそんな丸配置のテキストが回転するデザインの実装方法を紹介します。
必要なツール
A･･･
詳細を見る
Webデザイン
Adobe XDでパディング設定する方法
文字と長方形を作成
図形を作り、その上に文字を重ねます。
グループ化
文字と長方形を選択し、右クリック→「グループ化」
もしくはショートカットキー「⌘ + G」でグループ化します。
パディング設定
グループ化したものをクリックすると右側メニューに「パディング」が表示されます。
「レスポンシブサイズ変更」がアクティブになっていないとパディン･･･
詳細を見る
Webコーディング
【CSSデモあり】横幅に合わせて文字を改行せずに省略して3点リーダーを表示させたい
プログやお知らせ一覧ページに文字を載せる際、文字数が多いと行数が増えてしまい、見た目がおかしくなってしまうことがありますよね。
そんなときは行数を制限すると見栄えが良くなります。
これを→
2行に収めたい
そんなお悩みはCSSで解消できちゃうかもしれません。
CSSでの実装方法
CSSでは横幅から余ってしまう文字を省略し、3･･･
詳細を見る
Webコーディング
TwitterシェアボタンをJavaScriptで実装しよう【Vanilla JS】
現代のWebサイトには欠かせない「SNSシェア」。SNSの中でもTwitterは拡散力が大きく、WebサイトをTwitterにシェアしたい人はたくさんいます。
そこで、ページごとのURLやタイトルをTwitterにシェアするボタンの実装方法を紹介いたします。
TwitterのシェアURLの仕組み
基本的に、Twitterのシェアボタンはリクエストパラメータでツイートの内容を設定･･･
詳細を見る
Webコーディング
WordPressでサイト内検索フォームを実装しよう
Webサイトでコンテンツが増えてきた時にユーザーが探しているコンテンツを見つけるのに時間がかかるなんてことは多々あります。
そこで、サイト内検索フォームの導入を検討してみてはいかがでしょうか？
サイト内検索フォームを実装することで、サイト回遊率もアップすることでしょう。
テーマフォルダにsearchform.phpとsearch.phpを用意。
「/{ルートディレクトリ}･･･
詳細を見る
Webコーディング
MAMPでWordPressローカル開発環境を作ろう
今回はMAMPでローカル仮想環境を作ってそこにWordPressを設置する方法を紹介いたします。
開発環境
デバイスMacBook Pro 14インチ 2021（M1 Pro）OSMac OS Monterey（ver 12.6）必要なアプリケーションMAMP、ターミナル、その他テキストエディター
開発用のディレクトリを作成
まずは開発用のディレクトリを作･･･
詳細を見る
Webコーディング
無料で使えるおすすめフォトストック「Unsplash」がすごい
「フォトストック」とはWebサイトなどに使う画像素材を取り扱うサイトです。
有料のものが質が高く使いやすいものが多いですが、無料のものでも充分にWeb制作で使用することができます。
Unsplash
とりあえず無料で高画質な画像素材が欲しいのであれば「Unsplash」一択です。UIもおしゃれでシンプルなので使い勝手がいいサイトです。
ちょ･･･
詳細を見る
Webコーディング
【Mac OS】MAMPでWordPress仮想環境を作成する方法
今回はMAMPでWordPress仮想環境を作成する方法 についてご紹介します。
前提として以下の条件を満たす方に読んでほしい内容となっております。
MAMPがインストールされているMAMPでバーチャルホスト設定が済んでいるエディターやターミナルの利用に慣れているデータベースを触ることができる
プロジェクトフォルダ作成
自身のPC内にプロジェクトフォルダを･･･
