Category : WebNote

WebNote

デザインのドリル⑤ トレースで、複雑なレイアウトを学ぶ

「トレース&模写で学ぶ デザインのドリル」を使って、デザイントレースの練習した記録です。 写真の効果的な使い方 Lesson 27 雑誌の特集記事 学んだこと/気づいたこと 模写中は気づかなかったけれど、グリッドでレイアウトをしているので、まとまりがよく見える Lesson2…

August 28, 2020
WebNote

【CSS】Box-Sizingの使い方

CSSプロパティのBox-sizingの説明です。 Box-sizingはdivやpなどのボックスサイズの計算方法を指定してくれる。 ボックス幅の計算方法 デフォルトのcontent-boxだと、 ボックスの幅=コンテンツ幅(width)+内側の余白(padding…

August 09, 2020
WebNote

【CSS】Flexboxのプロパティまとめ

Flexboxは、CSSはWebページのレイアウトを設定できるモジュールです。 今回の記事では、Flexboxでよく使うプロパティをまとめました。 Flexboxの使い方 Flexboxを使う時は、整列させたいアイテム(item)をまとめて格納するコンテナ(conteiner…

August 09, 2020
WebNote

Flexboxで作るヘッダーのサンプル集

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

July 31, 2020
WebNote

CSSとJavaScriptで作るハンバーガーメニュー

ハンバーガーメニューとは スマホなどで、ホームページを表示した時に見える3本線のこと。 この3本線が、ハンバーガーのように見えることから、ハンバーガーメニューと呼ばれています。 クリックすると、メニューが表示されます。 参考サイト:The Virginia…

July 25, 2020
WebNote

【Gatsby】ブログのカテゴリー画像を表示させる

ブログ記事にカテゴリーのアイコンを表示させました。 【やりたかったこと】 各記事にはカテゴリーが一つ設定されている 記事一覧にカテゴリー画像を表示する gatsby-imageで画像を表示させたい 【参考記事】 パスを渡せばgatsby-image…

July 18, 2020
WebNote

WordPressからGatsby.jsにブログを変えました

ブログをWordPressからGatsbyに変えました。 Gatsbyとは? GatsbyはWebサイトのHTMLファイルを生成してくれるツールです。 静的サイトジェネレーターと呼ばれています WordPressなどのCMSでは、データベースで記事を管理しています。 URL…

July 04, 2020
WebNote

【初心者向け】MySQLの基本コマンドまとめ

MySQLデータベースの操作でよく使う基本的なコマンドをまとめました。 まだMySQLをインストールしていない場合 MySQLの環境構築 インストールされているとバージョンが表示されます。 MySQLサーバーの起動 パスワードを入力してEnter…

May 16, 2020
WebNote

【gitでバージョン管理】ブランチの使い方とSourcetreeでの操作

バージョン管理では変更履歴を分けて管理できます。(「ブランチ」といいます。) 知っておくと便利!実際どう使うの?🤔を解説します。 バージョン管理でのブランチって何? 個人開発をするときの、ブランチの使い方 Sourcetreeを使ったブランチの作成、切替え、マージ方法 git…

April 11, 2020
WebNote

WordPressでやっておきたいセキュリティ対策

この前、WordPressブログのハッキング被害に合いました😢 カスタマイズを加えようかと、FTPソフトを開いてみると、ファイルリストの中に見知らぬフォルダがあったんです。 フォルダを消しても、またしばらくすると同じファイルができてしまう…。 調べてみると、WordPress…

WebNote

エックスサーバーを使ったWordpressブログの始め方

エックスサーバーでWordPressブログをはじめる手順を説明します。 サーバー(ホームページを置く場所)を借りる ドメイン(URL)を取得する ドメイン(URL)とサーバーを紐づける サーバーにWordPressをインストールする サーバーを借りる まずはHP…

November 13, 2019
WebNote

【Mixhost】WordPressにBasic認証でパスワードをつける

Basic認証とはIDとパスワードを知っている人だけがサイトへのアクセスできるようにする仕組みのこと。 Basic認証がかかっているサイトにアクセスすると、こんなポップアップ画面が出てきます。 このBasic認証を使って、WordPress…

September 18, 2019
WebNote

MixhostのWordpressブログ始め方

この記事では、MixhostでWordPressブログをはじめる手順を説明します。 【WordPressをインストールする手順】 サーバー(ホームページを置く場所)を借りる ドメイン(URL)を取得する ドメイン(URL)とサーバーを紐づける サーバーにWordPress…

August 27, 2019
WebNote

イラレでシステム手帳用のカレンダーを作ったよ

イラストレーター、ずっとマスターしたいと思いながら、「難しそう」「デザインセンスないしなぁ」と手を出せずにいました。 実際に自分で使うものを作りながら、ちょっとずつレベルアップしていきたいと思います! 今回は月間スケジュールを作ってみます 月間スケジュールの作り方 A…

February 05, 2019
WebNote

箇条書きリストをおしゃれにするCSS10個【女性向け】

ブログ記事を書いていると頻繁に登場するのが、箇条書き。 項目を並べたり、まとめるのに便利で、わたしもよく使います😄 今回は、CSSコピペでできる、おしゃれなリストのデザインをご紹介します。 リストのHTMLの書き方 リストには「番号付き」と「番号なし」の…

November 29, 2018
WebNote

【CSSコピペOK】おしゃれな引用blockquoteデザイン10選

記事を書く時に、他のホームページやブログの文章を一部紹介したいことって、けっこうありませんか? ただ、ブログテンプレートに使われているオリジナルの味気なかったりする。 コピペで使えるCSSのサンプルを5つ用意しました。 ブログやWordPressで引用符(blockquote…

September 13, 2018
WebNote

CSSで作れるシンプルな飾り枠デザイン

見出しデザインに続いて、CSSのコピペだけで反映できる、飾り枠のデザインを用意しました。 フォントのサイズや色はご自由に変更ください。 基本の飾り枠 この記事で紹介するデザインでは、HTML…

August 24, 2018
WebNote

CSSで作れるかわいいブログ見出しのデザイン

CSSのコピペだけで反映できる、簡単な見出しデザインを用意しました。 フォントのサイズや色はご自由に変更ください。 見出しデザインを設定するには この記事で紹介するデザインを使う時には、HTMLに見出しタグ(h…

August 22, 2018
WebNote

WordPressのテーマにcssとjsを読み込む書き方

cssやJSの読み込みを行うときは、WordPressが自動で読み込むファイルと重複しないよう、functions.phpにまとめて記述します WordPressテーマにCSSファイルを読み込む functions.phpで読み込みたいcss…

August 03, 2018
WebNote

WordPressで使っているプラグインまとめ

プラグインはWordPressにインストールできる追加機能です。 私がWordPressに入れているプラグインを一覧化しました。 私自身あのプラグインなんだっけ〜っと忘れるので備忘録です よく使うプラグイン Akismet…

June 26, 2018
WebNote

Webの画像形式(JPEG,PNG,GIF,SVG)使い分け

Webでよく使われる画像には、JPEG,PNG,GIF,SVGと種類があります。 ファイルの特徴を理解して使いわけることで、高画質のまま、ファイルサイズも小さくおさめることができます。 Webで使う画像形式の種類 ざっくりまとめると、こんな風に使い分けます。 JPEG…

June 21, 2018
WebNote

WordPress子テーマの作り方

WordPressでは、たくさんのデザインがテーマとして公開されています。 テーマのデザインを一部だけカスタマイズしたいときには、子テーマを使います。 テーマのカスタマイズに、子テーマを使う理由 子テーマは、WordPress…

June 18, 2018