サイトを運営している人々の悩みの種、高速化。 私自身も、ブログ開設当時からかれこれ4年以上、サイトの高速化とバトルを繰り広げています。 さて、今回はGoogle Analyticsを遅延読み込みさせてサイトを爆速にできることがわかったので、高速化を目指す同士のために紹介しようと思います。 そもそもGoogle Analyticsがサイトの表示速度にどれほど影響しているのかですが、これはPage Speed Insightsで測ることができます。 Page Speed Insightsでグーグルアナリティクスの影響を見てみる 最近まで60点台くらいしか無かった当サイトですが、ここ数日で高速化を行い、現時点でも ある程度のスコアを獲得できています。 しかし、Total Blocking Time (TBT)だけオレンジ色。これでは見た目が悪いですよね。 TBTが何なのかは良く分かりませんが、対
でシェア content_copy 記事タイトルとURLをコピー Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方 - https://do.gt-gt.org/use-fullcalendar/ Googleカレンダーは、入力した予定を他の人と共有したり、カレンダーを複数人共同で編集できるとても便利なツールです。また、埋め込みコードを発行すれば簡単にサイトに埋め込むことができます。 埋め込みコードを利用した場合、カレンダーの見た目が固定でカスタマイズできないため、既存のサイトの見た目に合わせることができず使い勝手はよくありません。 しかし、フリー配布ライブラリであるFullCalendarを使えば、サイトにキレイな見た目のカレンダーを設置することができます。 Googleカレンダーとリアルタイムに連携 CSSでデザインを自由に変更できる 月ごとのカレンダー
アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます
WEB制作において、CSSについて調べているとSass（SCSS「以下Sass」）について紹介されている記事をよく目にします。 私自身もSassについては以前から知っておりましたが、なかなか導入には至りませんでした。 というのも、以前に導入を試みた際、うまくいかず途中で心が折れてしまった経緯があり、導入を先送りにしてきておりました。 そんな状況を打破するべく再度導入を試み、今回はうまく導入することができたので、同じようにSass導入に苦戦している方のお役に立てればと思い、私がつまずいた点をまとめておこうと思います。 導入のハードルが高そうなSassですが、スタイルを書く際の作業効率・メンテナンス性を上げる事が出来るので導入するメリットは大きいと思います。 今回はそんな導入メリットの大きい「Sass」についてご紹介していきたいと思うのですが、上述したとおり、今回はSassの仕様紹介ではなくM
こんにちは、Ryohei（@ityryohei）です！ 本記事では、スクロールに合わせて背景画像の位置を動かす方法をご紹介しています。 プラグイン等は使用したくないけれど、スクロール時にシンプルなパララックス効果を付けたい方におすすめです！ では、解説していきます。 スクロールに合わせて背景画像を縦方向に動かす 下記はスクロールに合わせて背景画像を動かした際のデモになります。埋め込みなのでわかりにくいかもしれないですが、スクロールすると背景画像が少しずつ動きます。 DEMO See the Pen Backgoround Image Scroll1-1 | jQuery by ryohei (@intotheprogram) on CodePen. 処理内容としては、スクロールした際に背景画像の表示位置を設定するbackground-positionの値を動的に変更することで 実現していま
動きがないサイトだと退屈に思われてしまうことがあります。 今回は、スクロールをして可視範囲になったら要素がふわっと表示されるアニメーションを簡単にjQueryで実装する方法をお伝えしますので、是非サイト作りに役立てて下さい。 DEMOはこちら 実装方法 以下のHTMLとCSSを用意します。 HTML <div> <img src="sample.jpg" class="fadein"> </div> CSS .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } jQuery $(function(){ $(window).scroll(function (){ $('.
[WordPress] 更新されたスタイルシート（CSS）を自動的に読み込ませたい 公開日:2021/12/25 更新日:2021/12/26 ウェブ業界で結構あるあるなやり取りだと思います。 こういった場合、キャッシュをクリアしてくださいとお願いすることになるのですが、お客さんからすれば「キャッシュなんて知らないよ」と言いたくなってしまいます。 お客さん以外にも、サイトを訪問する不特定多数のユーザーの中には、キャッシュの保存期間内に複数回アクセスする場合も十分にありえます。 このようなケースを防止するため、CSSファイルを更新したときだけ、最新版のスタイルシートを読み直すやり方を検討してみました。 header.phpに書く場合 <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style
WP_Queryによるサブループの基本の使い方 とりあえず、WP_Queryを用いたサブループの基本的な使い方から。いつもこれをコピペしてから引数をいじってます。 サブループの大枠となる雛形コード <?php //$argsのプロパティを変えていく $args = array( 'post_type' => 'post', 'posts_per_page' => -1, 'no_found_rows' => true, //ページャーを使う時はfalseに。 ); $the_query = new WP_Query($args); if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); /* ループ内の記述 */ endwhile; endif; wp_reset_
GoogleアナリティクスでWebサイトのデータを分析する際に、外部リンクのクリック数をKPIとして追っていたり、アクティビティの参考として確認したいケースはよくあります。 従来のGAはGoogleタグマネージャを使ってイベントとして外部リンクの計測を行うことが多かったですが、GA4ではGTMを使わなくても簡単に外部リンクのクリック数を確認することができるようになっています。 今回は、GA4で外部リンクのクリック数を「探索レポート」で確認する方法と、「カスタムイベント」として計測する方法をご紹介したいと思います。
Contact Form 7のメールフォームプラグインを有効化すると、contact-form-7/includes/css/styles.cssとcontact-form-7/includes/js/scripts.jsのファイルが、ブログ内のすべてのページで読み込まれます。 サイドメニューやフッターにコンタクトフォームがある場合は別なんですが、お問い合わせページだけでContact Form 7のフォーム使っている場合は、その固定ページが表示された時のみCSSなどをロードしたいものです。 ということで今回は、特定のページの時だけContact Form 7のCSSファイルなどを読み込ませる方法について解説していきたいと思います。 Contact Form 7のJavaScriptとCSSを、お問い合わせページにだけロードさせる方法 ざっくり、以下の流れになります。
WordPressでテーマをカスタマイズしていると、WP_Queryを用いて少し複雑な条件で投稿記事のリクエストをしたいことがあります。 例えば、物件の検索サイトなどでよくみられる「最寄駅」「間取り」「価格」といった複数の条件が一致した記事を絞り込む機能なども、WP_Queryに条件となるパラメーターを送ることで、わざわざ複雑なプログラムを自前で書かなくても、WP_Queryが一括して処理をしてくれるのでとても便利です。 呼び出したい記事の抽出条件がよほどイレギュラーでなければ、WP_Queryで大抵の条件にマッチした記事を呼び出せるのではないでしょうか？ WP_Queryは、多くの抽出条件をカバーしているだけあってパラメーターの組み合わせが豊富です。 新しい仲間とチームでWordPressのカスタマイズをすることが多くなってきたので、今回は、このWP_Queryのパラメーターをスニペット
‘order’ => ‘DESC’ // 昇順・降順 orderでは、orderbyで指定した項目を昇順（ACB順）で並べるのか、降順（ACB順の反対）で並べるのかを指定できます。 ASC： 昇順 DESC： 降順 ちなみに初期値は、'DESC'になっていますので、デフォルトで良い場合はわざわざ指定せずにまるごと行を削除してしまってもかまいません。 )); global $post; global $post;は、グローバル宣言と言われるものです。$postは、現在の投稿に関する情報が詰まった変数でWordPress全体で使用されています。 そのため、これを使用する際は前もって宣言が必要になります。テンプレート内で使用する文には宣言は必要がないみたいですが、一応、どこで使用してもトラブルがないよう宣言を入れてあります。 if($cat_posts): foreach($cat_posts
WordPressのcategory.phpとsingle.phpは通常、どのカテゴリに対しても同じテンプレートを読み込ませます。 例） カテゴリA → category.php・single.php カテゴリB → category.php・single.php カテゴリC → category.php・single.php これをカテゴリごとに別々のテンプレートを読み込ませる方法をご紹介します。紹介しているのはcategory.phpと書いていますが、archive.phpでも同じ結果を得られます。 例） カテゴリA → category-1.php・single-1.php カテゴリB → category-2.php・single-2.php カテゴリC → category-3.php・single-3.php category.php category.phpは中身を全部を消し
IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。 数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な使い方を紹介します。 min(), max(), and clamp(): three logical CSS functions to use today by Una Kravets CSSの関数のさらにいろいろな使い方は、下記をご覧ください。 CSSの比較関数 min(), max(), clamp()の使い方を詳しく解説 CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装
2024年04月06日非レスポンシブのサイトをレスポンシブ化いたしました。2024年04月05日テーマファイルが編集できない不具合を解消いたしました。2024年04月04日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。2024年04月03日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年04月02日お問い合わせフォームを再構築いたしました。2024年04月01日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月31日サーバー移管に共に表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月30日WordPressの操作方法をサポートいたしました。2024年03月29日サイドバーに人気記事を表示させる仕組みを導入いたしました。2024年03月28日テキスト等の簡易な修正を
WordPressを利用してWebサイトを作成されているのであれば、SEOはカテゴリページにも気を使っていますか？ カテゴリページはトップページや記事ページよりもSEO的な面で軽視されがちなのですが、カテゴリページも検索結果に表示される大切なページです。単なる記事一覧が表示されるページだと考えて、しっかり手を入れないのは非常にもったいないですよ！ 以前にもカテゴリページ毎に異なるオリジナルコンテンツを入れることで、カテゴリページが検索結果に表示されやすくなり今以上のアクセスを獲得することが可能であると記載したことがあります。 カテゴリページのタイトルを自由に変更・設定するWordPressの場合、カテゴリページのタイトルは［カテゴリ名 – ブログ名］のようにかなり単調なものになってしまいます。例え検索結果に表示されてユーザーの目に留まっても、［カテゴリ名 – ブログ名］のような単調なタイト
WordPressサイトを制作している時に「このカテゴリーの一覧ページではボタンを表示させたい」とか「あのカテゴリーの記事ページだけこのテキストを表示させたい」とか、特定のカテゴリーに応じて変化を加えたいことってありますよね。 今回はそんな時に確認してほしいカテゴリーによる条件分岐の書き方をまとめました。 カテゴリーの記事一覧ページでよく使うis_categoryの条件分岐記事一覧を表示させるためにループをさせている箇所や、アーカイブページでは条件分岐のためにis_categoryというタグを利用することが多いです。 実際の書き方を見て行きましょう。 指定箇所がカテゴリーの記事一覧だった場合に条件分岐させる
自分が運営している記事に Twitter カードを設定していると、自分が運営しているサイトやブログの記事の URL が Twitter で紹介された時に、あらかじめ設定したおいた画像や記事のタイトル、記事の概略を Twitter のタイムラインに表示させることができます。ここでは Twitter カードの設定方法と基本的な使い方について解説します。 Twitterカードとは 最初に Twitter カードを設定している場合としていない場合の違いについて簡単に確認しておきます。 Twitter カードを設定していないページに対するリンクを Twitter でツイートした場合、次のように単にリンクがツイートの中で表示されます。 それに対して Twitter カードが設定されているページに対するリンクをツイートした場合、次のようにツイートの下に Twitter カードが表示されます。 ここで表示
HOMEWordPress【WordPress】.htaccessファイルにブラウザキャッシュを設定してWebサイトの表示速度を改善する 【WordPress】.htaccessファイルにブラウザキャッシュを設定してWebサイトの表示速度を改善する WordPress ブラウザキャッシュとは？ ブラウザはWebサイトが表示されるたびに、CSS、JavaScript、imgなどのファイルをサーバーに読み込みにいきます。サーバーを経由するたびに時間がかかってしまうので、それなりにWebサイトを表示するのに時間がかかってしまいます。 キャッシュを設定しておくことで、1度読み込んだファイルをブラウザ側で保持することができます。 サーバーを経由する必要がないので、すばやくWebサイトが表示されます。 この表示速度が改善されることで、SEOの検索順位にも一定の影響がありますし、ユーザーの離脱を回避する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
