
【JIN】アイキャッチ画像の適切なサイズは?適切なサイズでの作り方も
2021-09-18 オレンジ webの自由帳
ブログのアイキャッチ画像の大きさって、どれくらいにすればいいのか悩みませんか? アイキャッチ画像はブログ記事を書くたびに作ることが多 …
【アドセンス】サイドバーに広告を設置する方法
2021-09-17 オレンジ webの自由帳
Google AdSenseに合格したら、自分のブログにさっそく広告を貼ってみたいですよね。 今回はWordPressブログのサイドバーにアドセンス広告を設置する方法につい …
【テンプレートファイル名を表示してくれる】Show Current Templateプラグインの使い方
2021-09-16 オレンジ webの自由帳
WordPressはテンプレート階層のルールにに基づいて、どのテンプレートファイルを表示するかが決められていますよね。 今回はどのテ …
【LOCAL】WordPressのローカル開発環境を作る方法
2021-09-15 オレンジ webの自由帳
今回は「LOCAL」で、WordPressのローカル環境開発の作成方法をまとめたいと思います。 以前、MAMPでの環境構築方法をまと …
【CSSアニメーション】@keyframesの使い方
2021-09-11 オレンジ webの自由帳
今回はCSSアニメーションの1種、keyframesの使い方についてまとめたいと思います。 @keyframesは他のアニメーション …
【シンタックスハイライタープラグイン】Highlighting Code Blockの使い方
2021-09-07 オレンジ webの自由帳
今回はシンタックスハイライターのWordPressプラグイン「Highlighting Code Block」をブロックエディタで使う方法 …
【JIN】ブロックエディタでシンタックスハイライターを使う方法
2021-08-18 オレンジ webの自由帳
本ブログではWordPressテーマJINを使用しています。 JINでは標準でソースコードを綺麗に表示してくれるシンタック …
【CSS】ルートフォントサイズを10pxに設定する方法
2021-08-17 オレンジ webの自由帳
デフォルトのルートフォントサイズは16pxですが、CSSを書くときに16pxだと計算がしにくかったりしますよね。 今回はこれを10p …
フォントを学べるおすすめ本を紹介してみます
2021-08-12 オレンジ webの自由帳
今回はフォントを学べる本を「和文フォント」「欧文フォント」とカテゴリ別に紹介してみたいと思います。 フォントや書体の本を探してる方の参考になれば嬉しいです! フォント …
【WordPressテーマ作成】カスタム3兄弟の使い方まとめ
2021-06-28 オレンジ webの自由帳
今回はWordPressのカスタム3兄弟についての記事が
少したまってきたのでまとめてみたいと思います。
WordPressのカスタム3 …
JavaScriptでクラスを操作する方法
2021-05-26 オレンジ webの自由帳
今回はJavaScriptでクラスを操作する方法についてまとめたいと思います。
クラスの操作では下記のようなメソッドがあります。 Element.classLi …
【スクリーンショットが簡単に】GoFullPageの使い方【Google拡張機能】
2021-05-24 オレンジ webの自由帳
サイト全体のスクリーンショットを撮りたいってことありますよね。
全体像をみたいときにもとても便利です。
今回は画面のスクリーンショットを …
【JavaScript】アコーディオンメニューの作り方
2021-05-21 オレンジ webの自由帳
今回はJavaScriptでのアコーディオンの作り方をまとめてみたいと思います。
こんなかんじのデモを作ってみました。
See the …
JavaScriptでHTML要素を選択する方法
2021-05-18 オレンジ webの自由帳
今回はJavaScriptからHTML要素を選択する方法について
簡単にまとめてみたいと思います。
JavaScriptからHTML要素 …
【JavaScript】モーダルウィンドウの作り方
2021-05-17 オレンジ webの自由帳
今回はJavaScriptでモーダルウィンドウを作る方法についてまとめたいと思います。 こんなサンプルを作ってみました。 …
CodePenをWordPressブログに埋め込む方法
2021-03-21 オレンジ webの自由帳
今回はCodePenで作ったソースコードを
WordPressのブログに埋め込む方法について簡単にまとめたいと思います。 CodeP …
【CSS】要素をど真ん中に配置する方法【3つ紹介】
2021-02-18 オレンジ webの自由帳
要素をど真ん中に配置したいことってありますよね。
ヒーローイメージでも文章などのコンテンツが、
ど真ん中に配置されていることも多いのでは …
【Advanced Custom Fields】カスタムフィールドで背景画像を表示する方法【備忘録】
2021-02-16 オレンジ webの自由帳
Advanced Custom Fields(略:ACF)を使ったカスタムフィールドで
登録した画像を背景画像として出力したいことがありま …