WEB屋の「なえ」が運用するWEB屋のメモ帳です。WEBエンジニア、WEBデザイナー、WEB広告運用者として、WEBやITの基礎知識、プログラミング、デザイン、広告のことを書いていきます。他にも読書記録として書評も書いたり。

【読書】知識を操る超読書術

本を読んではいるけど、読んで終わりになっている本の内容が、知識として定着している気がしない読んだあと活用できるようになりたい「知識を操る超読書術」概要リンク本を読んだのにすぐ忘れてしまう自分自身に取り入れられず、読んだだけで終わってしまう「知識を操る超読書術」は、そんな問題を解決することができるでしょう。まず読書に関して多くの人が感じている、思い込みを取り除いてくれます。本を読むスピードを上げる必要もないし、本は1ページ目から読む必要もない。大切なのは、自分がその本を読む目的をはっきり ...

ツール

Macでデュアルキーボードやってみた

肩こり解消のためセパレートタイプのキーボードを考えてたんだけど、どんなもんかわからないので、とりあえずデュアルキーボードを試してみることに！環境 PC: MacBook Pro (13-inch, 2018, Four Thunderbolt 3 Ports) OS: macOS Big Sur 11.2.3 キーボード: Anker ウルトラスリム Bluetooth ワイヤレスキーボード (AK-A7726121) リンク接続両方のキーボードをBluetooth接続すれば、どちらも正常に入力でき ...

IT/WEBの基礎

【IT基礎】ビット, バイトとは

キーワードコンピュータの最小単位は1ビット(1b) 8ビット集まると1バイト(1B) 1ビットで表現できるのは0, 1の2個さらっと解説コンピュータの最小単位は1ビットといい、ビットは小文字bで表す。全てをビットで表すと大変なので、8ビット=1バイトという塊がある。バイトは大文字B。 1ビットで表現できるのは、0, 1の2個だけ。そもそもコンピュータは0, 1しか理解できない。ビット数が増えていくとこんな感じ。 1ビット = 2個 2ビット = 4個 = 2^2 3ビット = 8個 = 2^3 ...

IT/WEBの基礎

【IT基礎】分散とは

キーワードばらつき具合度数分布グラフヒストグラムさらっと解説「分散」とはデータのばらつき具合を表すもの。度数分布グラフでは、データのばらつきが大きく、広範囲にデータがあるものを「分散が大きい」という。逆にデータのばらつきが小さく、データの範囲が狭いものを「分散が小さい」という。ここでいう広範囲とは、横軸のことで、縦軸に伸びているかどうかは関係ない。また、縦軸のことを「度数」、横軸のことを「階級」という。度数分布グラフのことを正式には、「ヒストグラム」という。

WordPress

【WordPress】スパムコメント対策・削除

概要こんな感じで大量のスパムコメントが発生していたので対策していきますスパムコメント削除コメントページの一括操作で「ゴミ箱へ移動」、その後ゴミ箱で「完全に削除する」を選択して削除するだけです。ただ、自分は464件あり、少しずつやるは大変なので、「表示オプション」から表示件数を変更しました。 999件とかにも設定できるんですが、うまく削除できなかったので、100件ずつ試みたところ問題なく削除できました。スパムコメント対策削除してもまた増えたら困るので対策しておきましょう。今回はGoogle r ...

Ruby

【Rails】文字コードのエラー対処法 ActionView::Template::Error

こんにちは。菜笑[なえ] (@nae310_)です。今回はRailsの文字コードのエラー対処法についてです。エラー内容 ActionView::Template::Error (incompatible character encodings: UTF-8 and ASCII-8BIT): 対処法 .force_encoding("UTF-8") を使用して文字コードの情報をUTF-8に切り替えることで対応しました。 <%= display_meta_tags(default_meta_tag ...

Ruby

【Rails】migrationの書き方カラム追加・変更・削除

こんにちは。菜笑[なえ] (@nae310_)です。今回はRailsのmigrationファイルの書き方(カラム追加・変更・削除)についての備忘録です。カラム追加 def change add_column :users, :delete_flg, :boolean, null: false, default: false, comment: '削除フラグ', after: :name end ポイント add_column を使う基本形: add_column :テーブル名, :カ ...

ツール

ChromeでSVG画像が表示されない場合の対処法

こんにちは。菜笑[なえ] (@nae310_)です。今回はGoogleChromeでSVG画像が表示されないときの対処法についてです。解決方法今回表示されなかったコードはこちらです。 <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46"> <image x="0px" y="0px" width="46 ...

ツール

Chrome拡張機能フォーム自動入力の方法【AUTOFILL】

こんにちは。菜笑[なえ] (@nae310_)です。今回はGoogleChromeの拡張機能【AUTOFILL】についてです。この拡張機能があればフォームの自動入力を行なってくれます。以前こちらのJavaScriptを使った自動入力の方法を紹介しました。ですが拡張機能を使う方が手軽で便利ですね。今回は以下の順番で解説していきます。 AUTOFILLのインストール方法 AUTOFILLの使い方おわりに AUTOFILLのインストール方法 Chromeの拡張機能を使ったことある方は、特に問題ない ...

Ruby

【Rails】環境変数の設定・呼び出し方法 [Docker, AWS]

こんにちは。菜笑[なえ] (@nae310_)です。今回はRailsの環境変数をDockerとAWSへ設定する方法と、Railsでの呼び出し方法についてです。以下の順番で解説していきます。 Dockerでの環境変数の設定方法 AWSでの環境変数の設定方法 Railsでの環境変数を呼び出し方法 Dockerでの環境変数の設定方法 Dockerではdocker-compose.yml に設定していきます。 version: '3' services: web: environment: A ...

Git

【GitHub】CommitからPullRequestを特定する方法

こんにちは。菜笑[なえ] (@nae310_)です。今回はGitHubでCommitからPullRequestを特定する方法についてです。最初いろいろ設定してたけど、すっごく簡単な方法ありました！！以下の内容で書いていきます。【簡単】コミットからプルリクを探す方法ローカルにいろいろ設定して探す方法おわりに【簡単】コミットからプルリクを探す方法 GitHubでPullRequestのタブを開きます。そして検索ボックスにコミットハッシュを入力します。以上です！該当するコミットが含まれたプル ...

HTML&CSS

【HTML/CSS】ファイルパスの書き方

こんにちは。菜笑[なえ] (@nae310_)です。今回はファイルパスの書き方についてです。 HTML, CSSを勉強し始めた方が、最初につまずくポイントが「ファイルパス」だと思います。自分もプログラミング講師をしていて「画像が反映されません」「CSSを書いたのに何も変わりません」という質問をよく受けます。ほとんどの場合がファイルパスの書き方が間違っているんですね。なので、今回はこの「ファイルパス」について完全に理解していただこうと思います！大事なポイントは３つだけファイルパスを理解する ...

ツール

画像を圧縮してブログを軽くする方法【iLoveIMGがオススメ】

こんにちは。菜笑[なえ] (@nae310_)です。今回は画像を圧縮してブログを軽くする方法についてです。サイトの表示に時間がかかって困っている少しでも速くブログの記事を表示したいそんなお悩みを解決します。 iLoveIMGを使いましょうブログに画像をアップロードする場合は、そのままアップロードすると記事が重くなってしまいます。一手間増えてしまいますが、アップロードする前に必ずiLoveIMGを使って画像を圧縮する癖をつけましょう。 iLoveIMG iLoveIMGはJPG, PNG, GI ...

プログラミング

投稿記事リンク一括取得サービスの使い方

こんにちは。菜笑[なえ] (@nae310_)です。今回は先日自分で作った「投稿記事リンク一括取得サービス」についてまとめておきます。なにが出来るのか使い方初めて個人サービスを作ってみてまとめなにが出来るのか WordPressで投稿した記事のURLを一括で取得できます。固定ページは含みません。投稿記事のみです。なぜこれが必要で作ったのか？というと WordPressでパーマリンクを変更しようと思ったんですが、元々のURLから新しいURLにリダイレクト設定をする必要があることに気づき手動 ...

ツール

【VSCode】拡張機能おすすめ22選 [2021年最新]

2021年最新版 Visual Studio Code(VSCode) のオススメ拡張機能を紹介。
「VSCode拡張機能たくさんあるけど、どれを使えばいいの？」という疑問を解消するため、エンジニアとしての経験を元に使える拡張機能をオススメします。

ツール

【VSCode】カラーテーマを変更して好きな配色にする方法 [Mac]

こんにちは。菜笑[なえ] (@nae310_)です。 Visual Studio Code(VSCode) の配色をもっとカッコよく！見やすく！好きなものに変えたい！と思っていませんか？今回はVisual Studio Code(VSCode) のカラーテーマの変更方法について解説していきます。びっくりするほど簡単なので、ぜひ好きなテーマにして幸せな気持ちでプログラミングをしましょう。では、以下の内容で書いていきます。好きなカラーテーマを決める VSCodeのカラーテーマを変更するおすすめテーマ ...

ツール

【VSCode】インストールから初期設定の方法 [Mac]

こんにちは。菜笑[なえ] (@nae310_)です。今回はVisual Studio Code(VSCode) のインストールから初期設定までについての備忘録です。以下の内容で書いていきます。インストール手順日本語化の方法初期設定方法おわりに VSCodeのインストール手順こちらにアクセスすると自動的にダウンロードが始まります。 Documentation for Visual Studio Code もし始まらない場合はdirect download link. をクリックしてみてください ...

WordPress

【WordPress】.htaccess の書き方【簡単な方法あります】

こんにちは。菜笑[なえ] (@nae310_)です。今回は.htaccess についての備忘録です。リダイレクト設定などプラグインを使う方も多いと思いますが、.htaccess の編集方法がわかればプラグイン1つ不要になるので、ぜひ使えるようにしましょう。ただ.htaccess の編集は間違えるとページが表示されなくなったりという可能性もあリます。なので、・ .htaccess ってなに？・そんなファイルどこにあるの？という方はプラグイン使っておいた方が安全です。完成コード今回は例としてex ...

JavaScript

【jQuery】テキストをクリップボードにコピーする方法【コピペOK】

こんにちは。菜笑[なえ] (@nae310_)です。今回はコピーするボタンを押したときに、任意のテキストをクリップボードにコピーする方法についてです。完成図こちらのCopyというボタンを押すと「コピーするテキスト」という文章がコピーされます。どこかに貼り付けて実際にコピーされていることを確認してみてください。 See the Pen clipboard copy by NaeSato (@N310) on CodePen. 完成コード [コピペOK] コピーする文章、ボタン、コピーされた時のアラー ...

HTML&CSS

【CSS】レスポンシブ対応のステップナビの実装方法【コピペOK】

こんにちは。菜笑[なえ] (@nae310_)です。今回はレスポンシブ対応のステップナビの実装方法についての備忘録です。コピペ用コードはCSS用とSCSS用２種類用意しています。完成図今回はPC版のみ文字を表示して、SP版ではシンプルに数字だけにしました。 PC版（画面幅769px以上） SP版（画面幅768px以下）完成コード [コピペOK] HTMLはどちらも共通です。 CSS用 See the Pen step nav css by NaeSato (@N310) on CodePen. ...

1 2 3 Next »