暮らしと学び– category –

昨年、もっと動きのあるサイトを作れるようになりたくて、アニメーションについて勉強していました。 普段は、ボタンのマウスオーバー、ナビゲーションメニューなど、利便性のためにシンプルな動きを取りいれるくらいです。しかし、そのたびに、基本となる...

WordPressは記事などデータをデータベースに保存しています。 普段は意識しませんが、プラグインを作っていると、「WordPressデータベースには、どのようにデータが保存されているのか？」テーブル構成を気になってきました。 今回は、データベースの中身...

プラグインを作りながら、WordPressのカスタマイズを学ぶシリーズ。今回は、記事ごとにメモをつけるプラグインです。 【プラグインでWordPressをカスタマイズ】のバックナンバー プラグインでやりたいこと 投稿の備忘録を残すため、管理者のみが閲覧、編集...

サーバーにWordPressをインストールするときに、フォルダ（サブディレクトリ）を指定してインストールできます。 ここではblogの中にwordpressがインストールされます。 WordPressはインストールすると、20弱のフォルダやプログラムができます。インストー...

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

Flexboxは、CSSはWebページのレイアウトを設定できるモジュール。 Flexboxを使うと簡単に整列したり、配置できるようになるので、ヘッダーなどのレイアウトに使われています。 今回の記事では、Flexboxを使ったヘッダーの作り方を紹介します。 よくあるヘ...

ホームページでよく出てくるパーツ「ハンバーガーメニュー」。 今回は、ハンバーガーメニューの作り方を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、スマホなどでのクリックすると開くメニューのこと。この３本線が、ハンバーガーの...

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

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"&g...

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

仕事で、LivedoorブログからWordPressへ引っ越し作業を行ないました。 引っ越しの手順と注意点をまとめます。 ・ライブドアやWordPressの仕様変更により、このやり方の通りに動かないこともあります。 WordPressへの移行手順 引越しの手順 データのエクス...