WordPress【Advanced Custom Fields】他のページでカスタムフィールドの値を表示する方法
2021-02-14 オレンジ webの自由帳
カスタムフィールドを編集するのは特定の固定ページであっても、
他のページでフィールドの値を表示させたいことってありますよね。
今回はWo …※当サイトではアフィリエイト広告を利用しています
WordPress
その他ブログを始めてみて思った5つのこと
2020-12-10 オレンジ webの自由帳
今回はブログを始めて思ったことをつらつら書いていこうと思います。
今まではweb制作のティップス系の記事しか書いてきませんでしたが、
せっかくなので思ったことも残しておこうかなと。 …
WordPress【WordPressテーマ作成】全体の流れをまとめてみる
2020-11-27 オレンジ webの自由帳
今回はWordPressでテーマを作るときの全体の流れをまとめてみたいと思います。 各テンプレートファイルの作り方など細かい部分をそれ …
その他【Webデザイン】ギャラリーサイトまとめ
2020-11-14 オレンジ webの自由帳
今回はWebデザインのギャラリーサイトをただただ挙げていきます。
最後の2つ、「bookma!」さんと「Responsive Web Design JP」さんはPC以外の端末で …
WordPress【WordPressテーマ作成】404ページの作り方
2020-11-13 オレンジ webの自由帳
今回はWordPressの404ページの作り方について
簡単にまとめていきたいと思います。 そもそも404ページってなに？
そもそ …
jQuery【jQuery】モーダルウィンドウの作り方
2020-11-05 オレンジ webの自由帳
今回はjQueryでモーダルウィンドウを作る方法についてまとめたいと思います。 このようなシンプルなモーダルウィンドウのサンプルを作ってみました。 See th …
WordPress【WordPressテーマ作成】よく使うテンプレートタグ & 関数まとめ
2020-11-03 オレンジ webの自由帳
今回はWordPressで自作テーマを作るときに使う テンプレートタグや関数をまとめてみたいと思います。
共通
基本のループ処理
…
WordPress【WordPressテーマ作成】ウィジェットの作り方
2020-10-28 オレンジ webの自由帳
今回はWordPressのテーマ作成で
ウィジェットを作成する方法をまとめてみたいと思います。
おおまかな全体の流れはこんなかんじです。 …
WordPress【パンくずリストプラグイン】Breadcrumb NavXTの使い方
2020-10-16 オレンジ webの自由帳
今回はWordPressで簡単にパンくずリストを作ってくれるプラグイン
「Breadcrumb NavXT」の使い方についてまとめたいと思 …
WordPress【アーカイブページの表示件数を出し分ける】pre_get_postsの使い方
2020-10-13 オレンジ webの自由帳
今回は各アーカイブページで表示件数を出し分けることができるアクションフックpre_get_postsの使い方についてまとめてみたいと思います …
WordPress【カスタムタクソノミー】をCustom Post Type UIで作る方法
2020-10-13 オレンジ webの自由帳
今回はWordPressのカスタムタクソノミー / カスタム分類を
「Custom Post Type UI」というプラグインで作る方法を …
WordPress【カスタム投稿タイプ】をCustom Post Type UIで作る方法
2020-10-06 オレンジ webの自由帳
今回はWordPressのカスタム投稿タイプを
「Custom Post Type UI」というプラグインで作る方法をまとめていきたいと思 …
WordPress【カスタムフィールド】をAdvenced Custom Fieldsで作る方法
2020-10-05 オレンジ webの自由帳
今回はWordPressのカスタムフィールドを簡単に作ることができるプラグイン
Advanced Custom Fieldsの使いかたをま …
WordPress【手順まとめ】HTMLサイトのWordPress化
2020-10-02 オレンジ webの自由帳
今回はHTMLサイトをWordPress化する際の手順をまとめてみようと思います。 なお前提としてすでに静的にコーディングされたHTM …
WordPress【WordPressにテーマと認識させるために】必要な手順 & ファイル【最低限】
2020-08-15 オレンジ webの自由帳
今回はWordPressにテーマとして認識されるために必要な手順、そして必要なファイルについてまとめてみたいと思います。
ただ最低限W …
WordPress【MAMP】WordPressのローカル開発環境を作る方法 【2つ目以降】
2020-08-06 オレンジ webの自由帳
今回は「MAMP」で2つ目以降の
WordPressローカル開発環境を作る方法をまとめてみたいと思います。
おおまかな手順の流れ
おお …
その他【Photoshopからコーディング】画像の書き出し / 要素の取得方法
2020-07-17 オレンジ webの自由帳
今回はAdobeのPhotoshopからコーディングをする際の
画像の書き出し方法、値の取得方法を簡単にまとめてみたいと思います。 …
jQuery【jQueryスライダープラグイン】slickの使い方
2020-07-16 オレンジ webの自由帳
サイトをみていると、かなりの高確率でスライダーが使われていますよね。 今回はjQueryで動くスライダープラグイン、
「slick」 …
HTML / CSS【CSSアニメーション】@keyframesの使い方
2021-09-11 オレンジ webの自由帳
今回はCSSアニメーションの1種、keyframesの使い方についてまとめたいと思います。 @keyframesは他のアニメーション …
HTML / CSS【CSS】ルートフォントサイズを10pxに設定する方法
2021-08-17 オレンジ webの自由帳
デフォルトのルートフォントサイズは16pxですが、CSSを書くときに16pxだと計算がしにくかったりしますよね。 今回はこれを10p …
HTML / CSS【CSS】要素をど真ん中に配置する方法【3つ紹介】
2021-02-18 オレンジ webの自由帳
要素をど真ん中に配置したいことってありますよね。
ヒーローイメージでも文章などのコンテンツが、
ど真ん中に配置されていることも多いのでは …
HTML / CSS【HTMLフォーム】セレクトボックスの作り方
2020-07-10 オレンジ webの自由帳
今回はお問い合わせフォームなどでよく見る
セレクトボックスの作り方についてまとめてみたいと思います。 こんなかんじのサンプルをつくってみました。
See the Pen …
HTML / CSS【HTMLフォーム】チェックボックスの作り方
2020-07-09 オレンジ webの自由帳
今回はお問い合わせフォームなどにある
チェックボックスの作り方についてまとめてみたいと思います。 こんなかんじのサンプルを作ってみました。
See the Pen
q …
HTML / CSS【HTMLフォーム】ラジオボタンの作り方
2020-07-08 オレンジ webの自由帳
今回はお問い合わせフォームなどで見られる、
ラジオボタンの作り方をまとめてみたいと思います。 こんなかんじのサンプルを作ってみました。
See the Pen
OJM …
HTML / CSS【CSSのみでスムーススクロール】scroll-behaviorプロパティの使い方
2020-06-29 オレンジ webの自由帳
1ページのサイトなどではナビゲーションの項目をクリックすると、
該当箇所までぐいーんと飛ばしてくれる
スムーススクロールが導入されること …
HTML / CSS【box-shadow】内側の影inset / 複数の影の指定方法
2020-06-19 オレンジ webの自由帳
影をつけるCSSプロパティのbox-shadowですが、
insetで内側に影をつけることができたり、
カンマで区切ると複数の影を作るこ …
HTML / CSS【背景を文字の形に切り取る】background-clip: text;の使い方【CSSプロパティ】
2020-06-14 オレンジ webの自由帳
今回は背景の画像や色を文字の形に切り取ることができるCSSプロパティ、
background-clip: textの使いかたをまとめてみた …
HTML / CSS【2パターン紹介】画像にCSSでオーバーレイをつける方法
2020-06-13 オレンジ webの自由帳
オーバーレイを画像に重ねることってありますよね。 画像の上にテキストを配置する場合、可読性を維持するため
画像とテキストの色のコント …
HTML / CSS【縦書きにするCSSプロパティ】writing-modeの使い方【和風】
2020-06-11 オレンジ webの自由帳
和食や旅館のホームページなどで文字が縦書きになっていると、
一気に和風な雰囲気になりますよね。 今回はCSSで縦書きにすることができ …
HTML / CSS【tableタグ】基本的な表の作り方【HTML】
2020-05-29 オレンジ webの自由帳
HTMLのtableタグってがなんだか独特ですよね。。 今回はHTMLのtableタグを使った基本的な表の作り方をまとめてみたいと思い …
HTML / CSS【CSS擬似要素】::before ::afterってなに？
2020-05-28 オレンジ webの自由帳
装飾でよく使われる::before, ::after擬似要素についてまとめてみたいと思います。 今回はデザインの作り方ではなく、
定 …
HTML / CSS【CSS擬似クラス】:nth-child() と :nth-of-type() のちがい
2020-05-26 オレンジ webの自由帳
n番目の要素を選ぶ :nth-childと:nth-of-type、
似ていますがちがいはどこにあるのでしょうか？ 今回はCSSの2 …
HTML / CSS【第5のpositionプロパティ】stickyの使い方【CSS】
2020-05-23 オレンジ webの自由帳
今回はCSSのpositionプロパティの1種、
stickyの使い方についてまとめたいと思います。 relative, absol …
HTML / CSS【CSSのborderと擬似要素で作る】吹き出しの作り方
2020-04-01 オレンジ webの自由帳
サイトで吹き出しの装飾ってよく見かけますよね。 どうやってできているのか気になったことはありませんか？
特に吹き出しの三角部分。。
…![【CSSセレクター】自在に使いこなそう【> + ~[]】](https://orange-log.com/wp-content/uploads/2020/03/css-selector_ic-640x360.jpg)
HTML / CSS【CSSセレクター】自在に使いこなそう【> + ~[]】
2020-03-24 オレンジ webの自由帳
今回は少し複雑なCSSセレクターをいくつかご紹介してみたいと思います。
使いこなせるようになるとコードの量もコンパクトにできそうですね。
…
HTML / CSS【Photoshopの効果をCSSだけで】filterプロパティ
2020-03-20 オレンジ webの自由帳
今回はCSSのfilterプロパティの使い方についてまとめたいと思います。 filterプロパティは、
CSSプロパティの1種で、C …
JavaScriptJavaScriptでクラスを操作する方法
2021-05-26 オレンジ webの自由帳
今回はJavaScriptでクラスを操作する方法についてまとめたいと思います。
クラスの操作では下記のようなメソッドがあります。 Element.classLi …
JavaScript【JavaScript】アコーディオンメニューの作り方
2021-05-21 オレンジ webの自由帳
今回はJavaScriptでのアコーディオンの作り方をまとめてみたいと思います。
こんなかんじのデモを作ってみました。
See the …
JavaScriptJavaScriptでHTML要素を選択する方法
2021-05-18 オレンジ webの自由帳
今回はJavaScriptからHTML要素を選択する方法について
簡単にまとめてみたいと思います。
JavaScriptからHTML要素 …
JavaScript【JavaScript】モーダルウィンドウの作り方
2021-05-17 オレンジ webの自由帳
今回はJavaScriptでモーダルウィンドウを作る方法についてまとめたいと思います。 こんなサンプルを作ってみました。 … jQuery【jQuery】モーダルウィンドウの作り方
2020-11-05 オレンジ webの自由帳
今回はjQueryでモーダルウィンドウを作る方法についてまとめたいと思います。 このようなシンプルなモーダルウィンドウのサンプルを作ってみました。 See th … jQuery【jQueryスライダープラグイン】slickの使い方
2020-07-16 オレンジ webの自由帳
サイトをみていると、かなりの高確率でスライダーが使われていますよね。 今回はjQueryで動くスライダープラグイン、
「slick」 …
jQuery【jQuery】アコーディオンメニューの作り方
2020-06-26 オレンジ webの自由帳
サイトのQ & Aセクションなどをみていると、
質問部分のクリックで、回答の表示・非表示が切り替わるメニューがありますよね。
…
jQuery【簡単に拡大ポップアップが作れるプラグイン】Lightboxの使い方
2020-06-16 オレンジ webの自由帳
画像などをクリックすると、
ポップアップ で拡大写真が表示されることってありますよね。 今回はライトボックスを簡単に導入できるプラグ …
JavaScript【スクロールに合わせたアニメーションプラグイン】wow.jsの使い方
2020-05-27 オレンジ webの自由帳
サイトをみていると、
スクロールに合わせてコンテンツがふわっと現れたり、スライドしてきたりしますよね。 今回はスクロールに合わせてア …
JavaScript【スライダープラグイン】Swiperの使い方
2020-05-25 オレンジ webの自由帳
サイトではほとんど必ずと言っていいほどスライダーが使われていますよね。
スライダーはいちから作ることもできますが、便利なプラグインもたくさんあります。 今回はプラグインのひ …
JavaScript【最短1行で導入できる】smooth-scroll.jsの使い方
2020-04-06 オレンジ webの自由帳
メニューを押すと、指定したセクションまで
ぐいーんと移動してくれるナビゲーションってありますよね。 CSSのIDのみでも場所を瞬間的 …
jQuery【クリックでページトップへ】スクロールトップボタンの作り方【jQuery】
2020-04-05 オレンジ webの自由帳
サイトをスクロールしていると、
途中で下のあたりからふわっと現れるボタンってありますよね。 押すとページのトップまで、ぐいーんと戻っ …
JavaScript【スクロールでデザインが変わる】ヘッダーの作り方
2020-04-02 オレンジ webの自由帳
スクロールするとデザインが変わるヘッダーってよく見かけますよね。背景の色が変わったり、ヘッダーの高さがせまくなったり。。 ヘッダーナ …
WordPress【テンプレートファイル名を表示してくれる】Show Current Templateプラグインの使い方
2021-09-16 オレンジ webの自由帳
WordPressはテンプレート階層のルールにに基づいて、どのテンプレートファイルを表示するかが決められていますよね。 今回はどのテ …
WordPress【LOCAL】WordPressのローカル開発環境を作る方法
2021-09-15 オレンジ webの自由帳
今回は「LOCAL」で、WordPressのローカル環境開発の作成方法をまとめたいと思います。 以前、MAMPでの環境構築方法をまと …
WordPress【シンタックスハイライタープラグイン】Highlighting Code Blockの使い方
2021-09-07 オレンジ webの自由帳
今回はシンタックスハイライターのWordPressプラグイン「Highlighting Code Block」をブロックエディタで使う方法 …
WordPress【JIN】ブロックエディタでシンタックスハイライターを使う方法
2021-08-18 オレンジ webの自由帳
本ブログではWordPressテーマJINを使用しています。 JINでは標準でソースコードを綺麗に表示してくれるシンタック …
WordPress【WordPressテーマ作成】カスタム3兄弟の使い方まとめ
2021-06-28 オレンジ webの自由帳
今回はWordPressのカスタム3兄弟についての記事が
少したまってきたのでまとめてみたいと思います。
WordPressのカスタム3 …
WordPressCodePenをWordPressブログに埋め込む方法
2021-03-21 オレンジ webの自由帳
今回はCodePenで作ったソースコードを
WordPressのブログに埋め込む方法について簡単にまとめたいと思います。 CodeP …
WordPress【Advanced Custom Fields】カスタムフィールドで背景画像を表示する方法【備忘録】
2021-02-16 オレンジ webの自由帳
Advanced Custom Fields(略：ACF)を使ったカスタムフィールドで
登録した画像を背景画像として出力したいことがありま … WordPress【Advanced Custom Fields】他のページでカスタムフィールドの値を表示する方法
2021-02-14 オレンジ webの自由帳
カスタムフィールドを編集するのは特定の固定ページであっても、
他のページでフィールドの値を表示させたいことってありますよね。
今回はWo … WordPress【WordPressテーマ作成】全体の流れをまとめてみる
2020-11-27 オレンジ webの自由帳
今回はWordPressでテーマを作るときの全体の流れをまとめてみたいと思います。 各テンプレートファイルの作り方など細かい部分をそれ … WordPress【WordPressテーマ作成】404ページの作り方
2020-11-13 オレンジ webの自由帳
今回はWordPressの404ページの作り方について
簡単にまとめていきたいと思います。 そもそも404ページってなに？
そもそ … WordPress【WordPressテーマ作成】よく使うテンプレートタグ & 関数まとめ
2020-11-03 オレンジ webの自由帳
今回はWordPressで自作テーマを作るときに使う テンプレートタグや関数をまとめてみたいと思います。
共通
基本のループ処理
… WordPress【WordPressテーマ作成】ウィジェットの作り方
2020-10-28 オレンジ webの自由帳
今回はWordPressのテーマ作成で
ウィジェットを作成する方法をまとめてみたいと思います。
おおまかな全体の流れはこんなかんじです。 … WordPress【パンくずリストプラグイン】Breadcrumb NavXTの使い方
2020-10-16 オレンジ webの自由帳
今回はWordPressで簡単にパンくずリストを作ってくれるプラグイン
「Breadcrumb NavXT」の使い方についてまとめたいと思 … WordPress【アーカイブページの表示件数を出し分ける】pre_get_postsの使い方
2020-10-13 オレンジ webの自由帳
今回は各アーカイブページで表示件数を出し分けることができるアクションフックpre_get_postsの使い方についてまとめてみたいと思います … WordPress【カスタムタクソノミー】をCustom Post Type UIで作る方法
2020-10-13 オレンジ webの自由帳
今回はWordPressのカスタムタクソノミー / カスタム分類を
「Custom Post Type UI」というプラグインで作る方法を … WordPress【カスタム投稿タイプ】をCustom Post Type UIで作る方法
2020-10-06 オレンジ webの自由帳
今回はWordPressのカスタム投稿タイプを
「Custom Post Type UI」というプラグインで作る方法をまとめていきたいと思 … WordPress【カスタムフィールド】をAdvenced Custom Fieldsで作る方法
2020-10-05 オレンジ webの自由帳
今回はWordPressのカスタムフィールドを簡単に作ることができるプラグイン
Advanced Custom Fieldsの使いかたをま … WordPress【手順まとめ】HTMLサイトのWordPress化
2020-10-02 オレンジ webの自由帳
今回はHTMLサイトをWordPress化する際の手順をまとめてみようと思います。 なお前提としてすでに静的にコーディングされたHTM …