Blog
-
【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-ke... -
レンタルサーバー１つで複数のWordPressブログを作るには
WordPressブログを運営していると、２つ目のブログを持ちたくなることがあります。 例えば、ジャンルの違うブログを書いてみたくなったり、用途の違うサイトが必要になったり。 一度、WordPressでブログやサイトを立ち上げたことがあれば、二つ目以降のWor... -
デザインのドリルで30個トレースして学んだこと
トレースは、バナーや広告などの見本を、自分で再現しながらデザインを学ぶ練習手法です。 お手本通りに真似て作ることで、デザインの引き出しを増やしたり、ツールの使い方になれることができます。 【トレース＆模写におすすめの教材】 私は前に一度、ト... -
Flexboxで作るヘッダーのサンプル集
Flexboxは、CSSはWebページのレイアウトを設定できるモジュール。 Flexboxを使うと簡単に整列したり、配置できるようになるので、ヘッダーなどのレイアウトに使われています。 今回の記事では、Flexboxを使ったヘッダーの作り方を紹介します。 【よくある... -
CSSとJavaScriptで作るハンバーガーメニュー
ホームページでよく出てくるパーツ「ハンバーガーメニュー」。 今回は、ハンバーガーメニューの作り方を紹介します。 【ハンバーガーメニューとは】 ハンバーガーメニューとは、スマホなどでのクリックすると開くメニューのこと。この３本線が、ハンバーガ... -
Netlify経由で、Gatsby.jsブログを独自ドメインに公開する手順
Gatsby.jsブログの公開にはNetlifyというホスティングサービスを使います。 NetlifyとGitHubを連携することで、Gatsbyで作ったサイトがWeb上に公開でき、また更新も自動で反映してくれます。 使うもの GitHubNetlify 事前準備として、GitHubとNetlifyのア... -
Gatsby.jsでブログを作るための手順
2020年の夏から、ブログをWordPressからGatsbyに変えて一年ほど運用していました。 2021年9月現在は、ブログ自体はWordPressに戻しましたが、ポートフォリオはGatsbyJSで制作しています。 この記事では、はじめてGatsbyJSをブログを完成させるまでの手順を... -
ラジオボタン・チェックボタンの代わりに画像選択にする方法
HTMLとCSSで、フォームのラジオボタンやチェックボタンの代わりに画像選択にする方法の紹介です。 Before After 【HTMLとCSS】 <div> <input id="image_a" type="radio" value="image_a.jpg" name="image&quo... -
【Python】Livedoorブログのバックアップデータ（backup.txt）をWordPress用に置き換えるプログラム
Livedoorブログの記事データをWordPressへと移行する際に、いくつか記事データの内容を書き換える必要があります。 記事データの変更点 ①画像のURL旧： https://livedoor.blogimg.jp/ライブドアID/imgs/●/●/新： https://独自ドメイン/wp-content/uploads/... -
LivedoorブログからWordPressへのお引っ越し手順
仕事で、LivedoorブログからWordPressへ引っ越し作業を行ないました。 引っ越しの手順と注意点をまとめます。 【WordPressへの移行手順】 引越しの手順 データのエクスポート（記事、画像）記事データの変換WordPressのパーマリンクを設定データをアップロ... -
【Python】Livedoorブログの画像を一括ダウンロードするプログラム
LivedoorブログからWordPressに移行するときに問題になるのが、画像のこと。 Livedoorブログには画像をエクスポートする機能がないため、記事に掲載されている画像をスクレイピングツールなどで抽出する必要があります。 Mac用の画像取得ツールが見つから... -
Node.js+ExpressでMySQLに接続して一覧表示する
Node.jsとMySQLを接続して、データベースを動かす方法を説明します。 この記事でわかること MacでのMySQLの導入方法Node.js(Express)からMySQLデータベースに接続するプログラムデータベースから情報を取得して、表示するプログラム 前提 Macでの操作にな...
