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を利用してWebサイトを作成されているのであれば、SEOはカテゴリページにも気を使っていますか？ カテゴリページはトップページや記事ページよりもSEO的な面で軽視されがちなのですが、カテゴリページも検索結果に表示される大切なページです。単なる記事一覧が表示されるページだと考えて、しっかり手を入れないのは非常にもったいないですよ！ 以前にもカテゴリページ毎に異なるオリジナルコンテンツを入れることで、カテゴリページが検索結果に表示されやすくなり今以上のアクセスを獲得することが可能であると記載したことがあります。 カテゴリページのタイトルを自由に変更・設定するWordPressの場合、カテゴリページのタイトルは［カテゴリ名 – ブログ名］のようにかなり単調なものになってしまいます。例え検索結果に表示されてユーザーの目に留まっても、［カテゴリ名 – ブログ名］のような単調なタイト

WordPressサイトを制作している時に「このカテゴリーの一覧ページではボタンを表示させたい」とか「あのカテゴリーの記事ページだけこのテキストを表示させたい」とか、特定のカテゴリーに応じて変化を加えたいことってありますよね。 今回はそんな時に確認してほしいカテゴリーによる条件分岐の書き方をまとめました。 カテゴリーの記事一覧ページでよく使うis_categoryの条件分岐記事一覧を表示させるためにループをさせている箇所や、アーカイブページでは条件分岐のためにis_categoryというタグを利用することが多いです。 実際の書き方を見て行きましょう。 指定箇所がカテゴリーの記事一覧だった場合に条件分岐させる

参考：ドット絵やQRコードをボケさせたくないときに使えるCSS – Qiitaブラウザ依存が強く、2021年現在ではベンダープレフィックスで対応する必要があります。 今回使用した「image-rendering: -webkit-optimize-contrast;」は「image-rendering: crisp-edges;」のChrome用ベンダープレフィックスになります。 効果の確認方法当ページでChromeデベロッパーツールを開いて以下の画像を選択し、以下の画像のように「image-rendering: -webkit-optimize-contrast;」をオンオフ切り替えてみてください。 劇的な変化はしませんが、よく見ると画像が少しハッキリと表示されるのが見れるかと思います。 その他の対処法以前にも複数の解決法が提案されていましたが、どれも何かしらの問題がありました。 bac

前回ご紹介しました【制作Tips】https・wwwありに統一する方法のwwwなしバージョンをご紹介します。 今回参考にしたのも前回と同じくこちらのブログ、 .htaccessでhttps化かつwwwなしに統一するクールな方法 を参考にさせていただきました。 コードはこちら。 <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://%1/$1 [R=301,L] RewriteCond %{HTTPS} !on RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> このコードを.htaccessにコピペしてそのままサーバーへアップロー

こんにちは、福岡のホームページ制作シンス株式会社の越水です。 レスポンシブWebデザインでホームページ制作を行うとき、「スマホの時だけJavaScriptの処理を加えたい」なんてことあったりしますよね。 今回はそんな時によく使うJavaScriptの条件分岐について書きたいと思います。 レスポンシブWebデザインではウインドウ幅、またはUA（ユーザーエージェント）によって処理を分けることができる例えばスマホでホームページを見た時だけ動作させたい画像スライダーがあったとします。 何の情報をもとに条件分岐させればうまくスマホだけで動作させることができるでしょうか。主に2通りの方法があります。 ウインドウサイズの横幅によって条件分岐使用デバイスのUA（ユーザーエージェント）によって条件分岐前者はCSSのメディアクエリーを使うことでウインドウサイズによってレイアウトを変更させるのと似たような方法で

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){ //ここに書いた処理はスマホ閲覧時は無効となる }

スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレームワークのブレイクポイントの設定 レスポンシブの確認が簡単にできる最強ツール 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone, iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。 Simple CSS Media Queries デバイ

Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。 Q&A対応するとどうなるの？カルーセルに掲載されるモバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。 AMPのマークが付くモバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。 アクセスは増える？増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その

こんにちは。 今回は、IEの古いブラウザを使っている人に更新を促す「IE Alert js」を紹介したいと思います。 Web制作をしている方なら一度はIEの古いブラウザに悩まされたはず！ そんなあなたにぴったりなJQueryのプラグインです。 IEの古いブラウザ(IE6/7/8)でアクセスすると下記のようなアラートが表示されます。 Upgradeのボタンを押すとBROWSE HAPPYのページに行きアップグレードを促してくれます。 公式サイト:IE Alert js 公式サイトのdownload nowのボタンをクリックし、ソースをダウンロードします。 JQueryを読み込み、ダウンロードしたスタイルシートとjsを読み込みます。 iealertフォルダ内にスタイルシート、および必要な画像が入っていますので移します。 iealert.min.jsはjsフォルダにぶち込みます。 <link r

どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae

もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし

Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP

ちょっと前までGoogleマップをレスポンシブにするために、以下の方法を使わせていただいていました。 @media (max-width: 767px) { iframe { width: 100% !important; } } とても便利な方法なのですが、これだと横幅はちゃんとレスポンシブになるのですが、高さはPC版に埋め込んだソースをそのまま引き継ぐので、ちょっと間延びした印象になってしまいます。 何かいい表示方法はないかなあと探していた時、lifehackerさんの記事で以下のコードが紹介されていました。以下のコードの「75%」の部分を変更することで、地図の縦横比を変えることができます。 .google-maps { position: relative; padding-bottom: 75%; /*これが縦横比*/ height: 0; overflow: hidden; }

This page is also available in English. Jetpack は人気のあるプラグインで、WordPress.com が提供するたくさんの機能を通常の WordPress で利用可能にするものです。私自身も Jetpack を愛用しています。 ですが残念なことに、Jetpack 1.3 から新たに導入されたコンタクトフォームモジュールが、Contact Form 7 を含む他のコンタクトフォームプラグインと衝突してしまうことがわかっています。 典型的な問題としては、他のプラグインのコンタクトフォームのショートコードを Jetpack がハイジャックするというものがあります。この結果、あなたのカスタマイズしてあるコンタクトフォームが Jetpack の質素なコンタクトフォームに置き換えられてしまい、それから送信されたメッセージもどこか意図しない宛先に送られてし