Blog

ブログ記事に「関連記事」を用意し、同カテゴリーの記事を表示します。 【関連記事を表示するコード】 今回は投稿ページのテンプレートファイル（single.php）に、関連記事を表示させます。 <?php if(has_category()){ // ①サブクエリを取得する //①-1 ...

いろいろな手帳術のアイデアが世の中にはあるけれど、あれもこれも、全部とりいれなくていいと思います。 バレットジャーナルの基本はその名の通り「・（中点：バレット）」が並んだシンプルさ。 その書き方のコンセプトには「断捨離（＝大切なものを選ぶ...

技術系ブログだと記事にプログラムの説明はつきもの。できれば、表示するプログラミング言語にあわせて、色を変えたり綺麗に表示したいですよね。 今回はブログ記事にソースコードを綺麗に表示させる方法を３つ紹介します。 この記事でわかること WordPres...

WordPressにはいろんなプラグインがあって、どれを使ったらいいのか迷ってしまうことありませんか？ 私がWordPressでサイトを作るときによく使うプラグインを一覧化しました。 私自身「あのプラグインなんだっけ〜(;´・ω・`」っと忘れるので備忘録です。 ...

全ブロガーさんにオススメしたい！マークダウン（Markdown）記法の書き方をご紹介します。 WordPressでブログを書くときにも使えます！ この記事の内容 マークダウン記法とは？マークダウン記法を使うメリットとは？マークダウン記法の書き方 【そもそも、...

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

WordPressでは、たくさんのデザインがテーマとして公開されています。管理画面からカスタマイズできる以外にも、一部デザインを変更したいときもありますよね。 その際、子テーマを使うと、とっても便利です。 【テーマのカスタマイズに、子テーマを使う理...

ブログのアイキャッチを手軽に作りたい方にオススメ。画像作成サービスCanvaと、写真ギャラリーUnsplashを活用して、無料でおしゃれなアイキャッチを作りますよ。 【おしゃれな高品質写真はUnsplashから】 Unsplashという高画質な写真を無料提供しているサ...

記事を書く時に、他のホームページやブログの文章を一部紹介したいことって、けっこうありませんか？ この記事ではコピペで使える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-ke...

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

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

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

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

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

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

見出しデザインに続いて、CSSのコピペだけで反映できる、飾り枠のデザインを用意しました。フォントのサイズや色はご自由に変更ください。 【基本の飾り枠】 この記事で紹介するデザインでは、HTMLを以下のように記述しています。<div>~</div>の中の...

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

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

2020年の夏から、ブログをWordPressからGatsbyに変えて一年ほど運用していました。 2021年9月現在は、ブログ自体はWordPressに戻しましたが、ポートフォリオはGatsbyJSで制作しています。 この記事では、はじめてGatsbyJSをブログを完成させるまでの手順を...