Web制作– category –
-
WinSCPのインストール方法
【インストール】 下記サイトよりhttps://winscp.net/eng/download.php 「DOWNLOAD WINSCP」をクリック ダウンロードしたインストーラーを実行 自分のみの利用の為、「現在のユーザー用にインストール」 使用許諾を「許諾」 標準的なインストール インター... -
LOLIPOPサーバーで「All-in-One WP Migration」のアップロードファイルサイズ変更方法
【ロリポップサーバー ユーザー専用ページ】 ▼ユーザー専用ページの「サーバーの管理・設定」→「PHP設定」を選択 ▼CGI版のPHPに変更 ▼設定項目のupload_max_filesizeが「2M」、「2M」しか設定できません そのため.htaccessに設定を追記する方法で行います ... -
【お名前.com】Googleサーチコンソールで「所有権を証明できませんでした」の対応
【起きていること】 ▼Googleサーチコンソールでプロパティを追加する際、下記の通り 【対応方法】 ▼お名前ドットコムにログインしドメイン設定を選択 ▼「DNS設定/転送設定」を選択 ▼該当ドメイン選択後、次へクリック ▼DNSレコード設定を利用するの「設定... -
ハンバーガーメニュー・グローバルナビゲーション
【テンプレートファイル編集】 ▼header.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" cont... -
ロリポップ！
【】 公開（アップロード）フォルダの設定で空欄なのですが、フォルダ名を指定すればそのフォルダが参照されるのでしょうか？ はい、公開（アップロード）フォルダの設定でフォルダ名を指定すると、そのフォルダがWebサイトの公開フォルダとして参照されま... -
「Googleタグマネージャー」アカウントを作る→「GA4」を設定する方法
【Google Tag Manager（GTM）とは】 Google Tag Managerで扱うタグとはWebサイトとマーケティングツール間で情報をやりとりするためのコードです Googleアナリティクス、Google広告など、、 <script></script>のような形式で記述される場合が... -
XML Sitemap Generator for Google不具合のダウングレード対応、代替プラグイン
【Googleサーチコンソールへの登録】 WordPressで作成したサイトの場合「Site Kit by Google」というプラグインで行うとスムーズです 【インデックス登録の方法】 GoogleにインデックスされていることでGoogleの検索結果にWebページを表示させることができ... -
Googleアナリティクス導入
【Googleアナリティクスとは】 無料で使用可能で、非常に高機能なツールです。 サイト全体のアクセス数、ページ別、流入元の状況など、数多くのデータが確認できます。 【UAとGA4】 GA4（第四世代）が2020年登場、UA（従来のGoogleアナリティクス）は2023... -
ホームページ制作の流れ
【ホームページ制作フロー】 ホームページ作成の依頼をうける 業務内容をヒアリングする サーバ契約、ドメインの取得 ワイヤーフレーム、デザインカンプ、参考のサイト、ロゴ、画像、テキストの有無 制作の流れを共有確認 デザインがない場合 既にWordPres... -
tailwindcss使い方
【tailwindcssメリット、デメリット】 メリット class名を付与する必要がない デメリット 事前にビルドの設定が必要 【導入方法】 npm経由でインストール CDNを利用https://tailwindcss.com/docs/installation/play-cdn scriptタグ1行コピーでOK CSSファイ... -
エンジニアとしてのデザインスキル
【メリット】 デザイナーやクライアントとのやりとり、専門用語を含めた伝達でミスをなくし→効率化 デザイナー不在でもエンジニアがプロトタイプの作成ができます。 エンジニアの市場価値が高まります。 【デザインの基本】 自分にはセンスがないといって... -
ワイヤーフレーム、デザインカンプとは
【ワイヤーフレーム】 ワイヤーフレームとはWebサイトのレイアウトを決めるものです。 デザインやコーディングに入る前に、作成し完成イメージを共有します。 【デザインカンプ】 デザインカンプとは「Design Comprehensive Layout」の略です。 サイト制作... -
Sass導入方法
Sass 【Sassとは】 Scssのメリット CSSを効率よく書けることや管理、メンテナンスが楽になることがあります。 変数 ネスト記法 mixin 関数 【Sass導入方法】 SassはCSSと違いHTMLファイルで読み込めないので、CSSファイルにコンパイルする必要があります。... -
Visual Studio Code
【ショートカットキー】 すべて折りたたむ Ctrl+K Ctrl+0 全て折りたたまれており一つずつ展開して使用すると素早く作業できます 【何の閉じタグかを分かりやすくする方法】 タグ名.クラス名|c -
CSSサンプルコードまとめ
【よく使うコード】 https://ntorelabo.com/?p=4671#co-index-68 【リスト 左寄せ揃えかつ中央寄せ】 リストを 左の書き出し位置は揃えつつ 画面中央位置に寄せたい場合 ▼ulの親要素、ulに下記のスタイルをあてる .list-center { text-align: center; } .... -
【WordPress】カスタムフィールド作成の仕方「ACF」Advanced Custom Fieldsの使用法
【そもそもカスタムフィールドとは】 Wordpressの投稿画面にはタイトル、本文、抜粋といった項目がもともとありますが、カスタムフィールド機能はさらに追加で新しい入力項目を設定することができます。 Wordpressに詳しくない人でも編集がしやすくなりま... -
WP_Queryとは
【WP_Queryとは】 WordPressにはWP_Queryクラスというものがあり、データベースから投稿データを取得するためのクラスです。 つまりSQL書かなくても色々な事ができるワードプレスで用意されているクラスです。 WP_Queryクラスを正しく理解することがWordPr... -
フロントエンドエンジニア注目フレームワーク、スキルセット
【TypeScript】 JavaScriptを使いやすくした言語で、JavaScriptのトランスパイラ（最終的にJavaScriptに変換）です 【React.js】 JavaScriptのフレームワーク・ライブラリの中でも、世界中で多く使用されいるのがReactです。 ReactはUIを作成するためのJav... -
My-Snow-Monkey使用例、子テーマによるカスタマイズ
【CSSファイルの読み込み】 my-snow-monkey.phpで下記コード記載 // CSSファイルの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'my-snow-monkey', MY_SNOW_MONKEY_URL . '/style.css', // my-snow-monkeyフォルダのstyle.... -
jQuery
【jQueryとは】 JavaScriptのためのライブラリです。 JavaScriptの長い記述を短く書くことができ、複雑なJavaScriptを簡単に使うことができます。 jQueryでできること HTML、CSSの操作 表示、非表示 アニメーション jQueryのデメリット jQueryの読み込みに... -
Git/GitHubとは
Gitとはプログラムやソースコードの分散型バージョン管理システムです。 【Gitでできること】 誤って削除してしまったファイルの復元 ファイルを過去のバージョンに戻す チームで共有できる（分散型、2人同時に編集） 【Gitに関する用語】 リポジトリ 日本... -
All-in-One WP Migration
【インポート容量を引き上げる方法】 All-in-One WP Migrationではインポートの容量制限があるため、ファイルサイズが1GB以上のものは、データ移行ができません。 インポート容量上限をあげるには以下の方法があります。 有料版を使う 無料版の容量を上げ... -
WordPress自作、カスタマイズ
【便利なプラグイン】 WP Multibyte Patch https://ja.wordpress.org/plugins/wp-multibyte-patch Show Current Template https://ja.wordpress.org/plugins/show-current-template 【テンプレートタグ】 テンプレートタグとはWordPressで用意されたカスタ... -
FTPソフトでホームページを公開
FTP（File Transfer Protocol） … ファイル転送プロトコル サーバにホームページのファイルをアップロードしたり、バックアップとしてダウンロードすることが可能 主なFTPソフト FileZilla FTPアカウント情報 FTPホスト名（FTPサーバー名） FTPユーザー... -
CSS
CSSの基礎知識 【セレクタ】 セレクタ { プロパティ名 : 値 ;} 【link要素】 <!doctype html> <html> <head> ..... <link rel="stylesheet" href="style.css"> </head> ..... 【style要素】 <!doctype html> <html... -
Web制作便利ツール
【ダミーテキスト】 https://webtools.dounokouno.com/dummytext/ この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章は... -
Twitter、Facebookのタイムラインを埋め込む
【Twitterタイムラインの埋め込み】 https://publish.twitter.com/# こちらのページに行き、タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキーを押します。 次に、左側の「Embedded Timeline」をクリックします。 コードが表示さ... -
WordPressプラグインを一覧・目的別紹介
【EWWW Image Optimizer】 「EWWW Image Optimizer」はインストールするだけで、画像サイズを圧縮してくれる手軽で便利なプラグインです。 ※インストールするとWordpressにアップロードする画像のファイルサイズを小さくします。アップロード済みの画像を... -
WordPressの固定ページ編集方法
サイトのページを修正・管理するには固定ページを編集します。 【固定ページとは〜例】 トップページ 会社概要 採用（リクルートページ） お問い合わせ 利用規約・プライバシーポリシー サイトマップなど 【固定ページを編集する】 WordPressの管理画面か...
1