MENU
  • プロフィールprofile
  • サービスService
    • WordPress個人レッスン
    • 起業女性に寄りそうWEBお悩み相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact

    カテゴリー

    • ホームページ個別レッスン
    • Web・SNS集客
    • Web系プログラミング
    • WordPressプログラミング
    • フリーランスの小技
    • Web活用相談
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • 自分で作れるおしゃれデザイン
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPress・HP・ブログレッスン
    自分で作れる優しいホームページレッスン
    • プロフィールprofile
    • サービスService
      • WordPress個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    自分で作れる優しいホームページレッスン
    • プロフィールprofile
    • サービスService
      • WordPress個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact

    ブログ

    1. ホーム
    2. ブログ
    • CSSとJavaScriptで作るハンバーガーメニュー

      ホームページでよく出てくるパーツ「ハンバーガーメニュー」。 今回は、ハンバーガーメニューの作り方を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、スマホなどでのクリックすると開くメニューのこと。この3本線が、ハンバーガーの...
      2020-07-252022-12-19
      Web系プログラミング
    • Netlify経由で、Gatsby.jsブログを独自ドメインに公開する手順

      Gatsby.jsブログの公開にはNetlifyというホスティングサービスを使います。 NetlifyとGitHubを連携することで、Gatsbyで作ったサイトがWeb上に公開でき、また更新も自動で反映してくれます。 使うもの GitHubNetlify 事前準備として、GitHubとNetlifyのア...
      2020-07-102022-12-19
      Web系プログラミング
    • Gatsby.jsでブログを作るための手順

      2020年の夏から、ブログをWordPressからGatsbyに変えて一年ほど運用していました。 2021年9月現在は、ブログ自体はWordPressに戻しましたが、ポートフォリオはGatsbyJSで制作しています。 この記事では、はじめてGatsbyJSをブログを完成させるまでの手順を...
      2020-07-042022-12-19
      Web系プログラミング
    • ラジオボタン・チェックボタンの代わりに画像選択にする方法

      HTMLとCSSで、フォームのラジオボタンやチェックボタンの代わりに画像選択にする方法の紹介です。 Before After HTMLとCSS <div> <input id="image_a" type="radio" value="image_a.jpg" name="image"&g...
      2020-06-132022-12-19
      Web系プログラミング
    • 【Python】Livedoorブログのバックアップデータ(backup.txt)をWordPress用に置き換えるプログラム

      Livedoorブログの記事データをWordPressへと移行する際に、いくつか記事データの内容を書き換える必要があります。 記事データの変更点 ①画像のURL旧: https://livedoor.blogimg.jp/ライブドアID/imgs/●/●/新: https://独自ドメイン/wp-content/uploads/...
      2020-05-302022-12-19
      Web系プログラミング
    • MySQLの基本コマンドまとめ

      MySQLデータベースの操作でよく使う基本的なコマンドをまとめました。 -- MySQLのバージョン確認mysql --version まだMySQLをインストールしていない場合MySQLの環境構築 MySQLサーバーの起動 -- MySQLサーバースタートmysql.server start [prism class="s...
      2020-05-172022-12-19
      Web系プログラミング
    • LivedoorブログからWordPressへのお引っ越し手順

      仕事で、LivedoorブログからWordPressへ引っ越し作業を行ないました。 引っ越しの手順と注意点をまとめます。 ・ライブドアやWordPressの仕様変更により、このやり方の通りに動かないこともあります。 WordPressへの移行手順 引越しの手順 データのエクス...
      2020-05-102022-08-30
      WordPressプログラミング
    • 【Python】Livedoorブログの画像を一括ダウンロードするプログラム

      LivedoorブログからWordPressに移行するときに問題になるのが、画像のこと。 Livedoorブログには画像をエクスポートする機能がないため、記事に掲載されている画像をスクレイピングツールなどで抽出する必要があります。 Mac用の画像取得ツールが見つから...
      2020-05-092022-12-19
      Web系プログラミング
    • Node.js+ExpressでMySQLに接続して一覧表示する

      Node.jsとMySQLを接続して、データベースを動かす方法を説明します。 この記事でわかること MacでのMySQLの導入方法Node.js(Express)からMySQLデータベースに接続するプログラムデータベースから情報を取得して、表示するプログラム 前提 Macでの操作にな...
      2020-04-252022-12-19
      Web系プログラミング
    • 【はじめてのNode.js】環境構築からプログラムを動かす手順をていねいに解説!

      Node.jsをはじめてさわってみました。 動かすまでに色々疑問がでてきたので、Node.jsの基本と自分のPCでプログラムを書いて動かせるようになるまでに必要な知識をまとめました。 この記事の内容 そもそもNode.jsとは?Node.jsを始める前の基礎知識Node.js...
      2020-04-182022-12-19
      Web系プログラミング
    • 【Git】ブランチを使うと何がいいの?目的とSourceTreeでの使い方

      バージョン管理では変更履歴を分けて管理できます。(「ブランチ」といいます。) 知っておくと便利!実際どう使うの?🤔を解説します。 バージョン管理でのブランチって何?個人開発をするときの、ブランチの使い方Sourcetreeを使ったブランチの作成、切替...
      2020-04-112022-12-19
      Web系プログラミング
    • GitHubの基本の使い方〜導入からいつもの運用まで〜

      大規模な開発なら必ず行なっているバージョン管理。 とはいえ、個人開発でも、プログラムの変更記録を管理したいこともあるのではないでしょうか。 でも、バージョン管理って専門用語ばかりでわかりにくいんですよね… 今回は、初心者がgitを使うための知識...
      2020-04-042022-12-19
      Web系プログラミング
    1...34567...9
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選

      記事を書く時に、他のホームページやブログの文章を一部紹介したいことって、けっこうありませんか? この記事ではコピペで使えるCSSのサンプルを5つ用意しました。 ブログやWordPressで引用符(blockquote)デザインを変える方法もご紹介します。 HTMLとC...
      2018-09-132022-12-19
      WordPressプログラミング
    • 【Mac】SourcetreeからGitHubへSSH接続する

      今回は、SourcetreeからのSSH接続するように直したので、その手順を記載します 私の環境(2021年8月時点) MacBook Pro (Retina, 13-inch, Mid 2014)MacOS Big Sur (ver 11.7)SourceTree(ver 4.1.2) ①公開鍵と秘密鍵を作る ターミナルを開いて、「ssh-keygen...
      2021-08-052022-12-19
      Web系プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選

      囲み枠は文章を枠でかこんだデザインのこと。 囲み枠は文章を枠でかこんだデザインのこと。 文章の中で囲み枠を設定すると、記事内で文章を目立たせたり、メリハリをつくることができます。 読者はふだん流し読みで記事を読んでいます。囲み枠で囲んである...
      2018-08-242022-12-21
      アメブロカスタマイズ
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ

      アメブロを、おしゃれにカスタマイズしたい! この記事では、アメブロのデザインをおしゃれにカスタマイズする方法を解説しています。 テンプレートそのままではなく、おしゃれでテンションのあがるブログにカスタマイズしちゃいましょう。 パーツごとに紹...
      2022-11-042022-12-19
      アメブロカスタマイズ
    • Node.js+ExpressでMySQLに接続して一覧表示する

      Node.jsとMySQLを接続して、データベースを動かす方法を説明します。 この記事でわかること MacでのMySQLの導入方法Node.js(Express)からMySQLデータベースに接続するプログラムデータベースから情報を取得して、表示するプログラム 前提 Macでの操作にな...
      2020-04-252022-12-19
      Web系プログラミング
    • ラジオボタン・チェックボタンの代わりに画像選択にする方法

      HTMLとCSSで、フォームのラジオボタンやチェックボタンの代わりに画像選択にする方法の紹介です。 Before After HTMLとCSS <div> <input id="image_a" type="radio" value="image_a.jpg" name="image"&g...
      2020-06-132022-12-19
      Web系プログラミング
    • CSSとJavaScriptで作るハンバーガーメニュー

      ホームページでよく出てくるパーツ「ハンバーガーメニュー」。 今回は、ハンバーガーメニューの作り方を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、スマホなどでのクリックすると開くメニューのこと。この3本線が、ハンバーガーの...
      2020-07-252022-12-19
      Web系プログラミング
    • ブログで使えるタイトル付き囲み枠のCSS

      この記事では、タイトル付きの囲み枠のデザインをご紹介しています。 ぜひ、サービス紹介やお知らせに使ってみてください♪ 各ブログでの囲み枠の使い方 掲載されているコードをHTMLタグ編集モードで貼り付けると囲み枠を使うことができます! 詳しい使い方...
      2022-12-21
      アメブロカスタマイズ
    • 大人かわいいブログヘッダーの作り方

      ヘッダーは、ブログやSNSを表示させた時にまず一番上に表示される大きな画像のこと。 そのアカウントの目印にもなる部分です。 プロに頼むほどではないけれど、自分でもおしゃれなヘッダーがほしい!という方のために、簡単&無料でできるヘッダー画像の作...
      2022-11-09
      自分で作れるおしゃれデザイン
    • 箇条書きリストをおしゃれにするCSS10個

      ブログ記事を書いていると頻繁に登場するのが、箇条書き。項目を並べたり、まとめるのに便利で、わたしもよく使います😄 今回は、CSSコピペでできる、おしゃれなリストのデザインをご紹介します。 リストの基本の書き方 リストには「番号付き」と「番号なし...
      2018-11-292022-12-19
      Web系プログラミング
    • Flexboxで作るヘッダーのサンプル集

      Flexboxは、CSSはWebページのレイアウトを設定できるモジュール。 Flexboxを使うと簡単に整列したり、配置できるようになるので、ヘッダーなどのレイアウトに使われています。 今回の記事では、Flexboxを使ったヘッダーの作り方を紹介します。 よくあるヘ...
      2020-07-302022-12-19
      Web系プログラミング
    • デザインのドリルで30個トレースして学んだこと

      トレースは、バナーや広告などの見本を、自分で再現しながらデザインを学ぶ練習手法です。 お手本通りに真似て作ることで、デザインの引き出しを増やしたり、ツールの使い方になれることができます。 トレース&模写におすすめの教材 私は前に一度、トレー...
      2020-08-202022-03-29
      自分で作れるおしゃれデザイン