ブログ

私は、4年ほど前にWordPressでブログを作り始めました。そこから、独学でカスタマイズなどを調べていくうちに、テーマを制作できるようになりました。今はプラグイン作りについても学んでいます。 今回は私がWordPressでホームページを作る上で、役に立っ...

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

2021年、お仕事で使い倒したサブスクリプションのサービスを紹介します。 サブスクリプションは、ソフトやアプリの一回買い切りではなく、使用期間に応じて料金が発生するサービスのシステムです。携帯料金などと一緒ですね。 デザイン Adobe Creative Clo...

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

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

前回に引き続き、プラグインを作りながらWordPressの知識を深めていきます。 WordPressのプラグインを自作する！バックナンバー 今回は記事をランダムに表示するウィジェットをプラグインで作ってみたいと思います。 記事をランダムに表示できると、埋もれ...

WordPressにSnow Monekey Formsでお問合せフォームを設置しました。 Snow Monkey Formsは、有料テーマSnow Monkeyに合わせて作られたプラグインですが、シンプルな機能、デザインで他のテーマでも使えます。 当HPで使用中の「SWELL」でも問題なく設定でき...

WordPressプラグインを作り方を調べるため、ハンドブックを読み始めました。 ドキュメンテーションなどを読みときながら、プラグインを実際に作る過程を記事にしていきます。 私の事前知識 HTML/CSS、JavaScriptとPHPの基本はわかるサーバー／ドメインを設...

WordPressのセキュリティプラグイン、Wordfence Securityの設定と使い方を紹介します。 Wordfence Securityは包括的にWordPressサイトのセキュリティ強化をしてくれる心強いプラグインです。しかしながら、英語のため、どんなセキュリティ対策をしているの...

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

WordPressサイトにインスタグラムの最新投稿を表示させるにはどうしたらいいですか？ 「Smash Balloon Social Photo Feed」を使うと簡単にインスタグラムのフィードをウィジットなどに表示できます！ この記事は、こんな方におすすめです！ Instagramの画...

WordPressサイトをコピーして、別ドメインに引っ越したい！簡単なやり方はないかな？ 現在運営中のWordPressサイトをリニューアルしたい！本番サイトはそのままで、テスト用にコピーしたサイトを別環境に作りたい！ WordPressサイトのお引っ越しやリニュー...

記事を書く時に、他のホームページやブログの文章を一部紹介したいことって、けっこうありませんか？ この記事ではコピペで使えるCSSのサンプルを５つ用意しました。 ブログやWordPressで引用符（blockquote)デザインを変える方法もご紹介します。 HTMLとC...

今回は、SourcetreeからのSSH接続するように直したので、その手順を記載します 私の環境(2021年8月時点) MacBook Pro (Retina, 13-inch, Mid 2014)MacOS Big Sur (ver 11.7)SourceTree(ver 4.1.2) ①公開鍵と秘密鍵を作る ターミナルを開いて、「ssh-keygen...

囲み枠は文章を枠でかこんだデザインのこと。 囲み枠は文章を枠でかこんだデザインのこと。 文章の中で囲み枠を設定すると、記事内で文章を目立たせたり、メリハリをつくることができます。 読者はふだん流し読みで記事を読んでいます。囲み枠で囲んである...

アメブロを、おしゃれにカスタマイズしたい！ この記事では、アメブロのデザインをおしゃれにカスタマイズする方法を解説しています。 テンプレートそのままではなく、おしゃれでテンションのあがるブログにカスタマイズしちゃいましょう。 パーツごとに紹...

Node.jsとMySQLを接続して、データベースを動かす方法を説明します。 この記事でわかること MacでのMySQLの導入方法Node.js(Express)からMySQLデータベースに接続するプログラムデータベースから情報を取得して、表示するプログラム 前提 Macでの操作にな...

HTMLとCSSで、フォームのラジオボタンやチェックボタンの代わりに画像選択にする方法の紹介です。 Before After HTMLとCSS <div> <input id="image_a" type="radio" value="image_a.jpg" name="image"&g...

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

この記事では、タイトル付きの囲み枠のデザインをご紹介しています。 ぜひ、サービス紹介やお知らせに使ってみてください♪ 各ブログでの囲み枠の使い方 掲載されているコードをHTMLタグ編集モードで貼り付けると囲み枠を使うことができます！ 詳しい使い方...

ヘッダーは、ブログやSNSを表示させた時にまず一番上に表示される大きな画像のこと。 そのアカウントの目印にもなる部分です。 プロに頼むほどではないけれど、自分でもおしゃれなヘッダーがほしい！という方のために、簡単＆無料でできるヘッダー画像の作...

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

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

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