よく読まれている記事一覧
-
CSSでスクロールバーのデザインをカスタマイズする。
2017/07/12スクロールバーのデザインをCSSだけでカスタマイズする方法を具体例を挙げながらまとめていきます。すごく、簡単です。 普通にブラウザの右側に出てくるスクロールバーはまだいいですが、コンテンツの中でスクロールさせる要素のスクロールバーがダサすぎて、なんとかしたい人向けです。 ちなみに、今回メモするTipsは、-webkit系でのみ有効です。ご了承ください。（ ... 続きを見る
-
$(window).on ('load')関数が動作しない時はjQueryのバージョンをチェック！
2017/05/12先日、load関数 $(window).on('load') がページの読み込みごとに動作したりしなかったりする謎の現象に悩まされました。 どうやらキャッシュをクリアした時は正常に動作するのに、普通の更新では全く動作しない。コンソールを見てもエラーログは出ていない。これまで通り記述しているのにconsole.log()さえ動かない…。 という内容でした。 ... 続きを見る
-
背景画像も遅延読み込み可能。万能Lazyloader、lazysizesの使い方
2017/05/25画像の遅延読み込みをしたいとき、何を使用しますか？ 私は「lazysizes」を発見してからというもの、ずっとこいつにお世話になっています。 個人的に、画像をimgタグではなくbackgroundに指定するのが好きなのですが、lazysizesだと背景画像も簡単に遅延読み込み可能ということで愛用するようになりました。 また、jQueryなどのフレームワ ... 続きを見る
-
もう迷わんよ。WordPressで固定ページや投稿ページが持つ様々な情報を取得する方法まとめ[基本情報・投稿タイプ・カスタムフィールド・カテゴリ・タグ・タクソノミーなど]
2017/07/22WordPressをいじっていると、投稿ページや固定ページなど、そのページが持つ情報を取得するというのは日常茶飯事かと思います。 しかし、ひとつの情報に対し、取得する方法が複数あってなにかとややこしい。 テンプレートタグや関数を使えばいいってのはわかるんだけど、綴りとか覚えきれなくて同じことを何度も調べなおしてしまったり。ていうか、似たような関数いっぱい ... 続きを見る
-
游ゴシックのfont-family指定方法2018年度版！@font-faceは絶対NG！WindowsのChromでかすれる問題徹底検証
2018/04/02游ゴシックは素晴らしい。まず前提としてこれは間違いのないことです。 ただ、面倒くせぇ。問題が多すぎるのです。 かねてより議論されている「WindowsのChromで見にくいんすけど」問題。 調べればわかるのですが、@font-faceで解決している人がかなり多いです。僕もそうしていました。 しかし、この@font-face、もう効かなくなってますよ！ ... 続きを見る
-
スクリーン・ウインドウ・画面サイズをjavascriptで取得する方法まとめ
2017/07/24JavaScriptでスクリーン ・ウインドウ・画面サイズなどを取得しようとすると、 screen.widthや window.innerWidthなど、候補がいくつか出てきませんか？ どれを使用するかでどこのサイズを取得するかが変わったり、デバイスによって結果が変わったりしてややこしいので、少し整理してみようかと思います。 * 以下、Mac,Win,i ... 続きを見る
-
プラグインなしでSNSシェアボタンを自作するための基本知識と実装コード、アナリティクス解析方法
2017/05/30SNSシェアボタンをプラグインなしで実装した時の備忘録です。（このブログのシェアボタンはこの記事の方法で実装しています。） PHPだけで実装するパターンと、html(php) + javascriptで実装するパターンの二種類をメモしていきます。アナリティクスとの連携もわかる範囲で合わせてメモ。 今回対応していくのは、 Facebook Twit ... 続きを見る
-
CSSで複数行に渡るテキストにマーカーを引いたようなエフェクトを付ける
2017/05/28以前、テキストにマーカーを引いたようなエフェクトを付ける方法をメモしたのですが、今回はその別バージョンです。 [in_link 192] 前回は、擬似要素をテキストの下部に配置する方法でした。 しかし、この方法にはメリットとデメリットがあります。メリットはアニメーションが付けれること、そしてデメリットは複数行に渡るテキストには対応できないということです ... 続きを見る
-
新作iPhone8, iPhone8 Plus, iPhone X の画面サイズは？メディアクエリの横幅に指定するピクセルについて
2017/09/20新しいiPhoneが出ました。iPhone8, と iPhone X。 いろいろ気になることはあるものの、Webをやっていると画面サイズ（横幅）が気になって仕方ない。 解像度なんてどうでもいい、知りたいのは実質的な表示領域のサイズ。メディアクエリで指定する時のあのサイズ…。 ということで調べてみました。 結論から言うと、メディアクエリ ... 続きを見る
-
スマホ・タブレット( iPhone/iPad/Android ) でスクリーンの縦・横判定方法と画面回転時の発動イベントのまとめ。およびそれらの組み合わせによる不具合・最適解の考察
2017/08/15スマホやタブレットでスクリーンの縦横の向きを判定する方法と、画面回転時にどんなイベントが発火するのかを整理していき、どの方法で向きを判定してどのイベントにその判定処理を登録すればよいのか、その組み合わせを考察していこうと思います。 ちゃんと調べてみて初めて分かったのですが、iOSとAndroidで挙動が違ったり、それぞれのバージョンやブラウザでも色々異なる ... 続きを見る
-
サーチコンソールでインデックスステータスが0件の時にまず確認すること
2017/05/18サイトを運営する上で、サーチコンソールやGoogleアナリティクスなどを使いこなすことはは非常に重要ですよね。 私もこのブログを公開したことで使用し始めましたが、まだまだわからないことだらけで苦戦中です。 今回は、サーチコンソールを見ているとGoogleのインデックスステータスが０件だったことに気づいたので、インデックスステータスについていろいろ調べたこ ... 続きを見る
-
いっつも忘れるWP_Queryの使用方法とパラメータ一覧。がっつり整理してみた
2017/06/14取得したい記事をかなり自由に指定できるWP_Query。WordPressで必須知識と言っても過言ではないでしょう。 しかし、WP_Queryは万能だからこそ、覚えることが多すぎる！全部は覚えてはいられず、いつもググりながら使用していました。指定したIDのタグのいずれかを含む投稿を取得できる。 そこで、一旦整理してみようと思って色々調べたことをまとめてい ... 続きを見る
-
WordPressでカテゴリ・タグ・タクソノミーに登録している全てのターム情報を一覧で取得する方法まとめ。WP_Term_Queryが超便利！
2017/09/22サイドバーなどでカテゴリやタグ一覧などを表示させたい時に、カテゴリ・タグ・タクソノミーで登録済みのターム情報を全て取得する方法をまとめていこうと思います。 主に以下のような方法があります。 get_categories(), get_tags(), get_terms()といったget_〇〇s関数を使用する WP_Term_Queryを使用 ... 続きを見る
-
Visual Studio CodeをほぼSublime Textのように使う方法
2018/01/06長らくお世話になっていたSublime Text (以下、Sublime) からVisual Studio Code (以下、VS Code) へ乗り換えました。 2018年心機一転で別のエディタを使ってみたかった。 VS Codeはターミナルを動かせる。 新しくgulpやgitの導入を考えており、VS Codeがそれらとうまく連携もできるらしい ... 続きを見る
-
[href^=#]とはなんぞや。ページ内リンクをスムーススクロールさせる時に記述しているあれ
2017/05/16ページ内部でのリンク（目次など）を押した時に、スクロールアニメーションでリンク先まで移動するスクリプトありますよね。 ソースコードをググるとコピペで使えるコードがたくさん出てきますが、その記述の中に、 a[href^=#]だとかa[href^="#"]とあります。 これなんだろう。 href属性が#から始まるものを探すためのものってのは説明してくれるん ... 続きを見る
-
[bxsliderあるある] 最後のスライダー画像が最初に表示されてしまう！そんな時に考えられる要因と対処方法３つ！
2017/08/12スライダーを実装中するならとても便利なbxsliderですが、使用しているとこんな現象に遭遇しませんか？ 最後のスライダーがなぜか先頭にセットされてしまう。 特に、初心者の頃はこの現象がよく起こります。この現象が起こるとき、定番の解決方法というものがあるのですが、それでは対処しきれないケースも出てきます。 そうなるともう焦ってしまって大変。 というこ ... 続きを見る
-
WP-PageNaviの基本的な使い方と、不具合を出さないために覚えておきたい設定方法まとめ
2017/11/21Web制作していると実装することの多いページャー（ページ送り）機能。 WordPressでページャーといえば WP-PageNavi という有名なプラグインがあります。が、思い通りに動いてくれないことがよくあり、その度にグーグル先生に質問しているととても時間の無駄になってしまいます。 なので今回は、WP-PageNaviで不具合を出さないために覚えておく ... 続きを見る
-
WordPressで読み込むCSSやJSファイルにクエリパラメータを付与し、ブラウザキャッシュは有効のまま変更箇所をすぐに反映させる方法。
2017/06/04CSSなどを変更してクライアントに確認してもらう時、「変わってませんよ？」と言われ、「すみません、キャッシュです。お手数ですが削除してから…」という不毛なやり取り。経験ありませんか？ サイト制作中もFTPなどでファイルをアップしたらブラウザ側で「キャッシュの消去とハード再読み込み」をいちいち選択して確認してました。（Chromのデベロッパーツールの表示中は ... 続きを見る
-
VS Codeの配色テーマ、Monokaiをカスタマイズしてみた
2018/02/09先日、「VS CodeをSublime Textのように使う」というメモを公開したのですが、VS CodeのMonokaiが少しSublime Textのものと違うことに気づきましたので、今回もできるだけSublimeに寄せていきます。 流れとしては以下。 デフォルトテーマのMonokaiを元に自作テーマを作成する 色が気にくわない部分を探し、変更 ... 続きを見る
-
Dreamweaver CCのコードカラーリングをカスタマイズしてSublime Text風にアレンジする方法
2017/05/12今回はDreamweaver CCのコードカラーリングをカスタマイズ方法をメモしていきます。 CCになってから格段と使いやすくなったDreamweaverですが、コードカラーリングが以前のバージョンまでのようには自由に変更できない、という点だけ残念だと感じている方は多いんじゃないでしょうか。 CS6ではネット上に転がっているコードカラーリング用のファイル ... 続きを見る
-
Koala最新版(ver.2.2.0)へアップデートすると発生するコンパイル時のエンコードエラーの原因
2017/07/08先日、sassコンパイラ Koala を最新版（ver.2.2.0）にアップデートしたところ、急にscssファイルがコンパイルできなくなってしまいました。 その際のエラーメッセージは以下。 Z:\Dropbox\クライアント\...\style.scss ArgumentError: invalid byte sequence in UTF-8 ... 続きを見る
-
SASS・SCSSのコンパイル時にエンコードエラー？Dreamweaverで気をつけたい以外な原因と対処法
2017/06/16SCSSを使い始めたころ、「Error: Invalid US-ASCII character "\xE3"」 とかいうエラーが出まくったことがあります(Dreamweaver CC使用時)。 ちなみに、Sublime Text（コンパイルはKoalaを使用）では以下のようなエラーメッセージになります。 Encoding::CompatibilityEr ... 続きを見る
-
WordPressでログイン中のユーザー情報を取得する方法と取得できる情報一覧。取得できる値はvar_dumpで吐き出される構造と一致しないものがある？
2017/08/06WordPressで現在ログイン中のユーザーの情報を取得する方と、その時に得られる情報の中身を調べてみたのでメモしておきます。 また、調べているときに気づいたのですが、var_dump()によって出力された情報と、実際に取得できる情報がなぜか一致しない点がいくつかあったので、その辺に関してもメモしておきます。 ... 続きを見る
-
HTML5で個人的に最低限必要だと思う記述・タグまとめ。head内に何を書いておけばいいのか？
2017/05/07初めまして。この記事が初投稿です。 初回なので、軽くHTML関係のことから。ついつい忘れてしまって、いつもGoogle先生にお世話になってしまうHTMLの基礎についてまとめていこうと思います。 冒頭に書くべきmeta要素とかあの辺の、難しくは無いけどなんだったっけ、ってなるやつ。 ... 続きを見る
-
[コピペで使える] WordPressでプラグインを使わずにパンくずリストを自動で作成し、好きな場所に表示させる方法
2017/06/25WordPressでプラグインを使わずにパンくずリストを作成してみようと思います。function.phpにコードをコピペし、好きな場所で関数を呼び出すだけでOK。 もちろんプラグインを使ってお手軽に実装できるものの、カスタム投稿などを使用すると結局コードをいじることになりませんか？ だったら自分でfunction.phpにコードを記述しておく方がカスタ ... 続きを見る
-
スマホ(iOS)でoverflowのスクロールをスムーズにするCSS、-webkit-overflow-scrolling
2017/05/29overflow:scroll で横に長い文章をスクロール可能にしたりする場合、iOSだと挙動がカクカクしますが、-webkit-overflow-scrolling の指定で慣性スクロールが可能に。 -webkit-overflow-scrolling: touch; overflow-scrolling: touch; *追記(2018. 1/3) ... 続きを見る
-
ABSPATHとはなんぞや。WordPressのインストールされたパスが定義されたグローバル定数らしい。
2017/07/25はい、タイトルだけでほぼ解決してしまっていますが、今回はWordPressで定義されている定数、「ABSPATH」についてのメモです。 初見では何者なのか全く分からなかったので。笑 ... 続きを見る
-
brタグで改行すると行間が何故か広くなってしまい、pタグのline-heightでも調節できない時の原因と対処法
2017/05/14brで改行した時に何故か行間が広くなってしまい、cssでline-heightとかで調節してもうまくいかない時、ありませんか？ 自動改行ではちゃんと行間が調節されているのにbrタグで改行しているところだけ何故か行間が変わらない…。 そんな現象に悩まさることがたまにありました。 その場しのぎとして、brタグでは改行せずにpタグを分けたり、spanタグをb ... 続きを見る
-
WordPressでスラッグ名からIDを取得する方法。投稿・固定ページ・カテゴリ・タグ・タクソノミーごとの違いを整理。
2017/10/28投稿IDやカテゴリIDから、投稿やカテゴリの情報を取得することは多いと思うのですが、今回はそのためのIDをスラッグから取得する方法について。 というのも先日、カテゴリスラッグからIDを取得する必要があり、調べてみると「スラッグからIDを取得する方法」は、投稿・固定ページ・カテゴリ・タグ・カスタムタクソノミーでそれぞれ方法が異っていて、なかなかややこしかった ... 続きを見る
-
[プラグイン不要] WordPressで記事を人気順(ページビュー数順)に表示させるためのソースコード
2017/08/11WordPressで記事を新着順ではなく人気順・ページビュー数順で表示するためのソースコードをメモしていきます。プラグインを使用しなくてもかなり簡単に実装できちゃいます。 ざっくりとした実装の処理内容は以下の流れとなります。 記事が初めて読まれた時にビュー数をカウントするメタデータ(カスタムフィールド)を、add_post_meta()で作成 記事 ... 続きを見る
-
[WordPress] - 投稿・固定・アーカイブなど各ページへのパーマリンク・URLを取得する方法まとめ
2017/07/22Wordpressでは特定のページまでのパーマリンク・URLを取得するためのテンプレートタグが複数あってややこしいので、各関数の役割や使い方を簡単にまとめてみました。 ちなみに、このメモは以下の延長線上の話になります。 [in_link 400] ... 続きを見る
-
the_post_thumbnail()なんて使わない。無駄なソースを吐き出さずにアイキャッチ画像を表示する方法
2017/05/21WordPressでアイキャッチ画像を表示させる時、the_post_thumbnail()という関数を使用していませんか？ 関数を呼び出すだけで簡単にアイキャッチ画像が表示できるのですごく便利ですが、この関数を使用するとかなり無駄なソースを出力をしてしまいます。 そこで今回は、the_post_thumbnail()に代わる新しい関数を自分で作ってしま ... 続きを見る
-
親情報を取得するget_post_ancestors() と get_ancestors() の違い [WordPress]
2017/07/23WordPressで親IDを取得するテンプレートタグ、get_post_ancestors() とget_ancestors() の何が違うのか？ と気になったので調べてみました。 get_post_ancestors() get_post_ancestors( $post ) 引数はひとつだけ。投稿IDまたは投稿オブジェクトを指定すると、指定した投 ... 続きを見る
-
Sass・SCSSで使えるコメントアウト、「/* */」と「//」のコンパイル時の違い
2017/05/21Sass(SCSS)でコメントアウトしたい時、CSSと同じく/* */で挟んだ部分をコメントできるのはもちろん、他のプログラム言語のように//でもコメントアウトできますよね。 この２種類のコメントスタイルは、ただ複数行に使用できるかどうかの違いだけではなく、コンパイル時に違いが見られることに気づきましたので、メモしておきます。 ... 続きを見る
-
WP_Term_Queryではカテゴリ並び替えプラグイン「Intuitive Custom Post Order」の設定が反映されないらしい件
2017/10/01カテゴリや記事を好きな順番に並び替えることができる便利なプラグイン、「Intuitive Custom Post Order」。 よくお世話になっているのですが、先日カスタムタクソノミーの並び替えが反映されない現象に遭遇しましたので、その時のメモ。 ... 続きを見る
-
iPhone(iOS)でセレクトボックスのoptionタグのフォントサイズが大きすぎてテキストが省略されてしまう時に、全て表示させる方法
2017/06/25iphoneなど、スマートフォンでセレクトボックスを使用すると、選択肢のoptionタグ内の文字サイズがデフォルトでは大きすぎて、プルダウンのテキストが省略されて全部見えないことがあります。 でも、optionタグにフォントサイズを指定してもフォントサイズは変わらないし、selectにフォントサイズ指定してもプルダウンの中身は変わらないし、どうしたもの ... 続きを見る
-
レスポンシブルの単位には％よりもvw, vhが便利！フォントサイズの指定にも使える
2017/06/15レスポンシブデザインを取り入れたサイトを制作するとき、widthの幅やpaddingの数値などをpxではなく%で指定することが多いかと思います。 ですが、%指定だとかゆくて届かない場合に役立つ、vw,vhという単位があることを知ったのでメモしておきます！ ... 続きを見る
-
WordPressでファイルを読み込むためのwp_enqueue_styleとwp_enqueue_scriptの使い方と引数の意味を理解しておこう。
2017/05/23webサイトでcssやjsファイルを読み込む時、普通ならheadタグ内にlinkタグなどを記述しますが、WordPressではwp_enqueue_style()やwp_enqueue_script()といった関数を使用してファイルを読み込むことが推奨されています。 WordPressを使用する上で必須知識となるこれらの関数の具体的な使い方や引数の種類と意 ... 続きを見る
-
WordPressでサイト情報を取得する bloginfo() の非推奨パラメータと、それに対応する代替関数まとめ
2017/06/04WordPressで作成したサイトの様々な情報を取得できるbloginfo()関数ですが、色々と非推奨になったりしてて注意が必要です。 bloginfo()の現状確認と、非推奨パラメータの代わりとなる関数についてメモしていこうと思います。 ... 続きを見る
-
PHPのnull・空の判定・存在チェック方法5種の比較。 isset()、empty()、is_null()、== null、 ===null
2017/07/02PHPでとある変数がnullや空か、いわゆる存在チェックをしたい時、よくisset()やempty()をよく分からないまま使用していて不具合があったので、詳しく調べて見たときの備忘録。 実際に自分で出力を確かめながら調べ直してみました。 比較するのは以下の5つ。 isset() empty() is_null == null === nu ... 続きを見る
中の人です。WEB制作や映像制作をやっています。趣味はダンスとダブルダッチ。
Twitter : @ddryo_wemo
新着メモ
Top