searchカテゴリー選択
chevron_left

カテゴリーを選択しなおす

カテゴリーのご意見・ご要望はこちら
cancel
プロフィール
PROFILE

webabcさんのプロフィール

住所
未設定
出身
未設定

自由文未設定

ブログタイトル
ABCウェブエンジニアblog
ブログURL
https://webabc.hatenablog.jp/
ブログ紹介文
Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録。 主にHTML/CSS/JavaScriptの入門記事や、PHP/Wordpressについてのメモ記事を更新しています。
更新頻度(1年)

12回 / 17日(平均4.9回/週)

ブログ村参加:2021/01/09

本日のランキング(IN)
読者になる

新機能の「ブログリーダー」を活用して、webabcさんの読者になりませんか?

ハンドル名
webabcさん
ブログタイトル
ABCウェブエンジニアblog
更新頻度
12回 / 17日(平均4.9回/週)
読者になる
ABCウェブエンジニアblog

webabcさんの新着記事

1件〜30件

  • VScodeの設定を同期してWin/Mac拡張機能や設定を揃える

    VScodeの設定の同期機能を使えば、拡張機能やUI設定などを、新しいデバイスへまるごと移行出来ます。 簡単便利な機能をキャプチャを交えて解説した記事ですのでお役に立てれば幸いです。

  • 【検証・解説】Youtube埋め込みはサイト評価を下げる恐れ有り!要一工夫、読み込み遅延。

    Youtube動画を埋め込む際に、評価スコアへの影響を下げるように動画を読み込ませる方法を解説します。 data属性を利用したjavascriptによる遅延読み込みと、代替画像に置き換えてクリック後に読み込ませる方法を解説しています。

  • #2プラグイン無しでWordpressのマルチサイト化「導入実装マニュアル・XSERVERでの手順例あり」

    前回に引き続きWordpressのマルチサイト機能をご紹介したいと思います。 ▼前回Part.1ではマルチサイト化におけるメリット・デメリットをご紹介しています。 webabc.hatenablog.jp Part.2の今回は実際に導入する手順を解説していきます。 Wordpressの多言語対応などでマルチサイト化しようと今から実践・検討される方の参考になれば幸いです。 ではやっていきましょう。

  • #1プラグイン無しでWordpressのマルチサイト化「メリット・デメリット考察」

    Wordpressには標準でいくつもサイトを運営できるマルチサイトの機能が備わっています。 通常は無効化されているこのマルチサイト機能を使うと、ひとつのWordpress本体データと、ひとつのデータベース内に異なるサイトを複数持つことが出来ます。 今回はとあるご相談者がサイトのの多言語対応をしたいというご要望だったので、マルチサイト化による方法をとらせて頂きました。 マルチサイトはこれまであまり触ってこなかったので、今回調べてわかった導入の手順など記しておこうと思います。 手順以外にまずPart.1ではメリット・デメリットなど考察もしていきますので、マルチサイト化について検討されてる方のお役に…

  • 【Wordpress】記事ごとにhead内にタグを追加するカスタマイズ方法

    Wordpressのカテゴリーで分けた多言語化サイト化のご相談を頂きました。 その際に多言語に対応したメタタグを各記事ごとに挿入する必要があったので、調べた内容を記したいと思います。 多言語化とは関係なく、記事毎にheadタグ内に何かしら記述を挿入したい時に役立つ情報かと思いますので、ご参考頂ければ幸いです。 ではやっていきましょう。

  • #2 Wordpress独自テーマ作成によく使う関数や記述。「テンプレートタグ一覧」

    Wordpressのテーマファイルの各テンプレート内で使う独自の関数をテンプレートタグと呼びます。 例えば記事ループ内で本文を表示させる「the_content()」などもテンプレートタグ。 前回記事で「Wordpressの独自テーマ作成に良く使う関数や記述」ということで、テーマ作成の際のstyle.cssへの記述やfunctions.phpへ書く関数なども取り上げたので、今回は良く使うテンプレートタグのみピックアップして取り上げたいと思います。 ▼前回記事は独自テーマ作成の流れに沿った解説多めの内容となっています。 webabc.hatenablog.jp オリジナルのテーマ作成をしている方…

  • Wordpress独自テーマ作成によく使う関数や記述。カスタマイズ頻出文

    Wordpressの独自テーマ作成時、カスタマイズによくつかう関数や記述をまとめました。 自分もよく何だっけなと調べながら使用する事も多いので備忘録です。 独自テーマ作成の流れに沿って記述しているので、是非テーマの作成の際などお役立て頂ければと思います。

  • 【Webデザイン】#2 コーディングの思考の流れ。スマホサンプルサイト作成【参考】

    前回パート1から引き続きのコーディングの思考の流れを具体的に言語化して実践していく記事です。 ▼#1からご覧になられる方はこちらからどうぞ。 webabc.hatenablog.jp 模写コーディングにつまづく方向けに、より簡単なサンプルサイトデザインを作成しました。 そのサイトデザインの画像データを元に、実際にどういった思考の流れでコーディングしていくかを解説していきまず。 入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になってますので、高度な事を期待される方はご容赦ください。 では、やっていきましょう。

  • 【Webデザイン】#1 コーディングの思考の流れ。練習サンプルで実際にやってみた。【参考】

    以前、模写コーディング以上に簡単な練習用のデザインを作成し、記事にて公開しました。 webabc.hatenablog.jp webabc.hatenablog.jp 今回はこちらのデザイン画像から、実際にどういった思考の流れでコーディングしていくかを解説していきたいと思います。 入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になっているかと思います。 高度な事を期待される方はご容赦ください。 模写含め、コーディングのやり方など最初の一歩につまづく方のお役に立てば幸いです。 では、やっていきましょう。

  • 【Chrome拡張】ココナラビデオチャットに画面共有機能追加出来る拡張機能を開発しました。

    ココナラで提供されているビデオチャット機能では現在画面共有の機能がありません。 「得意を売るならココナラ♪」のCMでおなじみ。 ビジネス、趣味、ただ話し相手になりますといったものでも売り買い出来るアプリ・サービス、ココナラ。 私のようなWeb技術のオンラインレッスンにはもちろん、ビジネスの相談、占い、手芸、様々な場面において、画面をシェアして一緒に見ながら話せるのと話せないのは大違いです。 そこで独自にココナラのビデオチャットに画面共有機能を追加するGoogleChrome拡張機能を作成しました! coconala.com

  • 【PHP】文字の置き換え、str_replace()と正規表現置換preg_replace()

    PHPで文字列の置換えを実現する関数、str_replaceと、正規表現を使ったpreg_replace()についての解説記事です。 str_replaceは日本語でも置換え可能です。

  • 【コーディング練習用】スマホサイト版Webデザイン入門オリジナルデザインテンプレート

    ▼前回コーディング練習用のシンプルなPCサイトデザインテンプレートの公開記事を書きました。 webabc.hatenablog.jp 今回はそれに引き続き、そのデザインをレスポンシブでスマホ対応させたテンプレートを作りましたのでご紹介したいと思います。 よくある模写コーディングにおすすめのサイト以上に構造がシンプルになっていますので、是非Webデザイン入門、コーディング初心者の方のスキルアップにご活用頂ければと思います。

  • 【コーディング練習用】Webデザイン入門オリジナルデザインテンプレート

    模写コーディングに挑戦する前に、さらにシンプルなhtml/cssでコーディングできる練習用オリジナルデザインテンプレートを作成しました。 非常に簡素な構成なので、初心者の方のWebサイト作成入門に最適です。

  • 【Chrome拡張機能】模写コーディングのやり方が分からない方へ…必須な拡張機能5選+α

    前回、模写コーディングおすすめサイトを初心者向けのレベルを目安に3サイト+αご紹介しました。 ▼なるべくボリューム少なく、コーディングの難易度がシンプルなものをチョイスしておりますので初めて模写挑戦するという方にはご参考頂きたいと思います。 webabc.hatenablog.jp ただそれでも初挑戦するような方はやり方が分からないという人も多いと思います。 今回は模写コーディングをする上で役に立つ、必須ともいえるGoogleChromeの拡張機能を紹介させて頂きます。 これから模写コーディングに初挑戦するという方、行き詰ってる方のお役に立てれば幸いです。 ではやっていきましょう。

  • 難しくない!模写コーディング超初級おすすめサイト3選+α

    「模写コーディングって難しい」、「やり方が分からない」 と、HTML/CSSを学んだ次のステップでつまづく方は多いと思います。 まず、模写コーディングとは 「既存のサイトの見た目をそっくりそのまま、自力でHTML/CSS/JSなどコーディングをして再現する」 ことをいいます。 ▼これから独学でWebデザイン入門されるという方にもおすすめの勉強法です。webabc.hatenablog.jp Webデザイン脱初心者の登竜門として、模写コーディングは立ちはだかっています。 その原因として、模写でおすすめされるウェブサイトの多くが、0から入門された初心者にとってはレベルの高いものが多いせいだと思いま…

  • 【CSS】ハンバーガーメニューPart.3「動くアイコン5種、サンプルコード解説」

    CSSのみで実装したハンバーガーメニューの動きのバリエーション5種をサンプルコードとともに解説しています。 2本線のメニューアイコンから、定番の3本線ハンバーガー。ステンシル風、ブラインド風の動きなど紹介しています。

  • 【初心者】Webデザイン入門、独学で何から学べばいいか分からない人へ【未経験】

    Webデザインを独学で始める方で、まず何から手をつければ良いか分からない方がいらっしゃると思います。 HTML/CSS等のWebデザイン入門系の参考書を手に取って一通り読み終えても、そこから「独学を進めることが出来ない…」という相談も実際のレッスン生の方でいらっしゃいました。 今回はWebデザインを一から学ぶ方向けに、独学で何からどういう手順で学べばいいか、例を挙げてお話したいと思います。

  • 【HTML/CSS】Web制作入門記事まとめ、コーディング基礎固め!

    前回、2020年振り返りということで、アクセスの多い記事をまとめてご紹介しました。 webabc.hatenablog.jp 年明け初投稿の今回も、引き続きまとめ記事シリーズ第2弾。 Web制作を学ぶ上で役立つ記事をなるべく学習ステップ順にまとめていこうと思います。 入門したての方や、学習中の方などのお役に立てれば嬉しいです。 是非ご参考ください。 //

  • 2020年よく読まれた記事、エンジニアブログ運営50記事まとめ

    レッスンの質問への返答や、案件での調べ物などメモがわりに始めた、当ABCウェブエンジニアblog。 10月初旬から2020年の大晦日の当記事執筆時点まで約3ヶ月。ぼちぼち更新して50記事弱となりました。 3ヶ月のアクセス合計は5000弱。 始めた当初はアクセスも少なく、一時はてなブログからのアクセスが一瞬増えた時期がありましたが、現在の流入の85%ほどはGoogleから。Yahooやその他も合わせると約90%が自然流入となっています。 Web技術のブログを書いてるので、何か困った際に検索してお越しいただき、お役に立ててるなら書き甲斐を感じますし、非常に嬉しいです。 今後もお役に立てるように、こ…

  • 【Laravel】.envファイルの環境変数に半角スペースを含む方法

    Laravelで環境変数を設定する「.env」ファイル。 サイトの基本情報やデータベースの接続情報はじめ、サーバーごとに異なる変数設定を読み込むことが出来ます。 この.envファイルに設定した変数は以下のような使い方で他のファイルで呼び出して使用することが出来ます。 ▼.envに環境変数を定義する記述 APP_NAME=設定する値 ▼bladeファイル内で.envに定義した環境変数を呼び出す方法 <p>{{ config('app.name') }}</p> この環境変数に半角スペースを含む値を設定するとエラーが出てしまいます。 「APP_NAME」などは特にサイトのタイトルとして使いたかった…

  • IEではline-heightが効かない?!Internet Explorer対応の見解

    Webブラウザ界の問題児Internet Explorer、通称IE。 サイト納品の際に一安心したと思ったら後からIEでの表示がおかしいと、対応に追われるなんてことがよく起こります。 こういった問題が起きないよう、受注の際にブラウザ対応、特にIEについてどこまで対応範囲とするか、はっきりさせておくのが大事です。 今回はIE11においてline-heightが効かずデザインが崩れているという事例があったので、IEへの対応についての見解を含め、解説していきたいと思います。

  • 【HTML/CSS】中央揃えにしたい!!のに出来ない時に見る記事 Part.3「absoluteとcalc()でのセンタリング編」

    要素を中央揃えや自在に配置したい時の方法としてcalc()関数を使ったテクニックを解説しています。 positionと組み合わせて幅広いレイアウトが可能なので是非ご参考ください。

  • 【HTML/CSS】初心者向け!コーディングでよく使うタグ、プロパティまとめ

    今回はWebサイト制作・コーディングについて学習し始めて間もない方向けの基礎まとめです。 よく使う基本のHTMLタグやCSSプロパティについてざっとまとめてるので、初心者の方はもちろん 、久々のコーディングでブランクがあるという方にもご参考頂ければ幸いです。 模写コーディングなどする際にコーディングが捗るよう、いつでも見返せるようブックマークなどして是非活用してください。

  • 【Laravel】直接DBへ追加!php artisan tinkerでユーザー作成

    PHPフレームワークLaravelでは「tinker」という対話型のデバッグ機能が標準装備されています。 $ php artisan tinker こちらのコマンドを使ってターミナル等からLaravelアプリケーションに直接処理をすることが出来ます。 Eloquentクラスやその他のクラスの読み込むことも可能なので、動作確認をしたり、アプリケーション上にない処理をしたり、色々な事が出来ます。 今回実際に既に稼働済みのサイトで、ユーザーの新規追加が管理画面などで出来ない仕様にしてるサイトがあり、そちらのサイトへtinkerを使用してユーザー追加をしました。 その処理の流れを備忘録として記しておき…

  • 【SEO】ブログのサムネイルやSNSのOGP画像に最適な縦横アスペクト比・推奨サイズ

    TwitterやFacebookなど大手SNSのアイキャッチともいえるOGPに最適とされる画像の縦横比は何対何がベストなのか。 今回はOGPに設定すべき画像の縦横の比率(アスペクト比)について調査してみたので、記したいと思います。

  • 【SEO】URLの正規化、www有無・httpとhttpsの統一方法。エックスサーバー設定例有り

    SEOのひとつに、サイトのURLの正規化というものがあります。 サーバーによって初期設定では同じ内容で別のURLが混在してしまっているので、wwwの有無、SSL接続の有無を統一することを言います。 http://サイト名.com https://サイト名.com http://www.サイト名.com https://www.サイト名.com 上記のように1つのページに対していくつものURLが存在する状態のままだと、検索エンジン評価が分散してしまい、SEOに悪影響となってしまいます。 URLの正規化とはこういった同じ内容のページのURLを統一することを指します。 今回はこのURLの正規化の方法…

  • 【HTML】サイトにファイルのダウンロードリンクを貼る方法

    ウェブサイト上でユーザーに対して何らかのファイルのダウンロードを促す時があるかと思います。 今回はそういったダウンロードリンクを貼る方法について、記したいと思います。

  • 【CSS/Google Fonts】フォントが太字にならない場合の対処法。テキストシャドウ&ウェブフォント。

    font-weight: boldが効かない!そんな、思うように文字の太さを調整出来ない時、太字を適用させる対処法「text-shadow」を用いる方法と「ウェブフォント」を用いる方法、2つをご紹介します。

  • 【VScode】GitLensがサイドバーから消えた場合に復活させる方法

    動作が軽快かつ、様々な拡張機能が使えて便利なコードエディタ「Visual Studio Code」、通称VScode。 とても使いやすいですが、たまに予期せぬ動作で困ることもあったりします。 今回はGitLensがサイドバーから消えて困った時の対処法です。

  • レスポンシブのviewport設定とスマホの解像度の理解

    レスポンシブにスマホ対応する際にviewport設定が何故必要なのか、理解するためにはスマホの画面の解像度がどのようになっているか理解する必要があります。 この設定についての理解がおろそかなまま、レスポンシブなコーディングをしようとしていてつまづいている方がいらっしゃったので解説したいと思います。

カテゴリー一覧
商用