スマホ対応の WordPress テーマや HTML テンプレートを使っていても、広告や表が画面からはみ出してしまったり、ぐらぐらと横揺れしてしまうことがありますよね。 レスポンシブ web デザインはそうならないように設計されていますが、HTML タグの使い方や CSS の指定によっては表示が崩れてしまいます。 よくある横揺れの原因と具体的な対策方法、一発で解消できる CSS コードを見ていきましょう。 スマホの横揺れがおきる原因 横揺れは、Web サイトの幅（≒ スマホの画面幅）より大きな要素があるときに発生します。 枠内におさまっているように見えても、はみ出している要素のぶんだけ横スクロールが発生してしまうわけです。 どの要素が飛び出しているか探るときは、以下の CSS を追加してみてください（色や太さはお好みで）。

CSS だけで作れるおしゃれなボックス（枠線・囲み枠）のデザインサンプルを紹介します。 ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。

ブログの収益や PV 数を伸ばすには、何度もテストを重ねて結果が良かったものを採用していくのが一番です。そのテストのひとつに「A/B テスト（スプリットランテスト）」というものがあります。 たとえば、「通常のテキストリンクとボタン型のリンクではどちらのクリック率が高いのか」を検証する、という感じですね。 WordPress プラグイン「My WP A/B Testing」を使えばだれでも簡単にテストできますので、ぜひお試しください。使い方を解説していきます。

WordPress サイトの HTTPS 化（常時 SSL 化）は、そう難しい作業ではありません。 でも、サーバーによっては「.htaccess」の編集が必要になるなど、初心者にとってはやや難しい部分もあります。 そんなときはプラグイン「Really Simple SSL」がおすすめ。クリックするだけで簡単に SSL 化できます。使い方を解説していくので、手順どおり進めてみてください。

WordPress で目次を自動的に表示してくれる Table of Contents Plus（ TOC+ ） は、初期設定のままだとちょっと味気ないデザインですよね。 設定画面から横幅や背景色を変更しても、ちょっと物足りないと思います。そこで、CSS でおしゃれなデザインにするカスタマイズしてみましょう。 サンプル付きで具体的な手順を解説していきます。 カスタマイズ前の設定 Table of Contents Plus の基本的な使い方は以下の記事をご覧ください。 「Table of Contents Plus」の設定方法・使い方 設定画面で、横幅・フォントサイズ・背景色などを指定できます。 初期設定のままだと、以下のようなデザインです（テーマ：Twenty Twenty-One）。 シンプルすぎるので、サイトのテイストに合わせてカスタマイズしたいところですね。 プラグインが出力してい

テキストリンク（<a>）は、CSS でいろいろなデザインができます。 CSS で何も指定しない状態だと、青文字＋下線というスタイルになりますよね。 Naifix｜ブログ初心者向け無料ノウハウ集 この状態から、色をつけたり枠をつけたり、テキストの前にボタンを入れたり、いろいろアレンジしてみましょう。あなたのサイトに合わせておしゃれなリンクを作ってみてください。 リンクの色に迷ったときは、主要サイトの比較データをもとにアレンジするのがよいと思います。 主要サイトのテキストリンク色比較

会員制サイトの概要 会員制サイトを作るときは「どんな仕組みにするか」をざっくりでもよいので決めておいたほうがよいです。 とくに WordPress での会員制サイト作成は複数プラグインを組み合わせますので、仕様が定まっていないとプラグイン同士の機能干渉なども起こり得ます。 以前運営していた会員制サイトの概要は以下のとおりです。 完全非公開の会員制サイト（有料・匿名可） 会員サイトにアクセスすると必ずログインページへリダイレクト 各ユーザーに個別の ID とパスワードを発行する ユーザー一覧は CSV で出力できる ユーザーのパスワードは管理者からわからない（強制変更は可能） 登録ページから申し込みがあったら、管理者が確認して承認作業を行う ニックネームやアイコンを自由に設定してもらう 掲示板に投稿すると、ニックネームとアイコンが表示される 掲示板のほか、会員専用の個別記事にも画像投稿機能付

WordPress のお問い合わせフォーム用プラグイン「Contact Form 7」は検証機能が備わっており、メジャーアップデートなどのタイミングで以下のメッセージが表示されます。 間違った設定があるとメール配送の失敗やその他のトラブルにつながります。コンタクトフォームの設定を検証しましょう。 » Contact Form 7 の設定を検証する 検証するまで左メニューには ❶ という赤色の丸数字が表示されますが、何を指しているのかわからず放置している管理者も多いようです。 本記事で検証機能の使い方と修正方法を解説していますので、ご参考になればと思います。 Contact Form 7 検証機能の使い方 Contact Form 7 を最新版に更新したときなど、検証が必要なタイミングで以下のように数字とメッセージが表示されます。 そのまま「» Contact Form 7 の設定を検証する

ブログの記事タイトルはとても奥が深く、たった数文字の変更で SEO（検索順位やクリック率）に大きく影響します。 ユーザーの目的を達成する質の高い記事を書くことは大前提ですが、どんなに素晴らしい記事を書いても、記事タイトルの付け方によっては読まれる確率がガクンと落ちてしまうのです。 では、どのようなタイトルを付ければユーザーの目を引き、検索上位に入れるのか。本記事では 4 つのコツを解説しています。具体的なサンプルも掲載しているのでぜひご覧ください。 読まれるブログ記事タイトルを付ける 4 つのコツ 効果的なブログ記事タイトルを付けるために、次の 4 つをおさえておきましょう。 40 文字を目安に「見せる」ことを意識する 記事タイトルはキャッチコピーと考える ユーザーを具体的にイメージする どこに焦点を当てるのか考える 01. 40 文字を目安に「見せる」ことを意識する 記事タイトルは 32

Naifix で公開していた以下のページは削除されています。 WordPress プラグイン関連 以下の記事で紹介・解説していたプラグインは何年も更新されておらず、最新版の WordPress で検証したところ正常に動作しないことが確認されたため削除しました。 WordPress のちょっとしたカスタマイズに便利な WP Theme Test https://naifix.com/wp-theme-test/ WordPress テーマカスタマイズに便利な「Theme Test Drive」の使い方 https://naifix.com/theme-test-drive/ ツイート数やはてブ数を取得して高速表示できる SNS Count Cache の使い方 https://naifix.com/sns-count-cache/ Facebook の「いいね！」が激増する WordPres

Windows Internet Explorer 8（IE8）は、Windows XP や Windows Vista で使われていたブラウザです。 HTML5 や CSS3 に対応していないため、レスポンシブ Web デザインのサイトを正確にレンダリングすることはできません。 今（2020 年）となっては切り捨ててよいブラウザだと思いますが、JavaScript を使って IE8 でもレスポンシブ Web デザインのサイトを表示させる方法をご紹介いたします。 Googleも推奨するレスポンシブウェブデザイン レスポンシブ Web デザインとは、スマホでも PC でも同じ HTML を配信し、CSS で表示方法を変更する方法のことです。 端末によって URL やページの内容を切り替えることがないため検索評価の分散を防ぐことができ、Google も推奨しています。

ブログのメインは記事本文。どんなにタイトルで惹きつけて訪問者を増やしても、肝心の記事が読みづらければ最後まで読まれないうちに離脱してしまいます。当然、シェアもしてくれないしリンクもしてくれません。 では読みやすいブログとはどのようなものでしょうか。そのひとつは、「流し読みしやすい文章」です。 読みやすいブログ記事を書くための基本とライティングテクニック 文章の改善はいますぐできることではありませんが、読み疲れさせないデザインにするのはすぐに実行できるかもしれません。 本記事では、記事本文が表示されるメインコンテンツの幅と、周囲の余白設定に焦点を絞って解説していきます。 有名どころ 18 サイトを調べて、各サイトがどれくらいの幅で記事を表示し、どのくらい余白をとっているのか調べてみました。ぜひご参考に。 2014 年に調査・公開した数値のため、参考サイトの内容が変わっている場合があります。

WordPress は、本体にファビコン設定機能があります（WordPress 4.3 から「サイトアイコン」という名称で実装されました）。 設定はテーマに依存せず、専用のプラグインも必要ありません。画像サイズと形式だけ注意して設定してみましょう。 手順を解説していきます。 WordPress サイトアイコン設定手順 01. 512px 以上の画像を用意する サイトアイコンの推奨サイズ・画像形式は以下のとおり。 サイズ：横 512px / 縦 512 px 以上（正方形） 形式：PNG / JPEG / GIF 横または縦のどちらかが 512px 未満だと、サイトアイコンが表示される部分によっては画像が粗くなるので注意しましょう。 Internet Explorer は JPEG 形式に対応していなかったので PNG 形式必須でしたが、Internet Explorer 終了に伴い考慮しな

先日、お客様の AdSense アカウントで無効なトラフィックが検出されました。Google ではこの事態を受け、お客様のアカウントでの広告配信を制限いたしました。今後もお客様のサイトのトラフィックは継続的にモニタリングされ、配信制限は Google 側で自動的に見直しおよび更新されます。 Google AdSense から届くメールの例 「無効なトラフィック ＝ AdSense 狩り」というわけではなく、いくつかの原因が考えられます。 AdSense 狩りかどうかに関わらず、上記のようなメールが届いた場合、残念ながらすぐに広告配信を再開させる手段はありません。無効なトラフィックが継続しないよう改善し、Google AdSense 側の再開許可を待ちましょう。 無効なトラフィックとは 無効なトラフィックに関して、Google AdSense では以下のとおり説明されています。 無効なトラフ

WordPress おすすめプラグインに「All in One SEO」などの SEO プラグインが含まれているのをよく見ますが、本当に必要なのでしょうか。 実のところ、ほとんどのサイト・ブログでは導入する意味がなく、むしろ悪影響となっています。少なくとも、SEO プラグインを入れるだけで検索上位に入りやすくなる、ということはありません。 プラグインの役割や注意点を解説すると共に、導入が必要なサイトに向けて 2024 年時点でのおすすめ SEO プラグインをご紹介していきます。 SEO プラグインの役割 SEO プラグインの役割には、以下のようなものがあります。 ページタイトルとして使われる <h1> と <title> を別々にできる 各ページの meta description を設定できる OGP を出力・制御できる 各ページの noindex / nofollow を制御できる ペ

「カスタマイズで CSS を書いたのに反映されない」とお悩みですか？ CSS が効かない原因は、おもに以下の 4 つです。 キャッシュが効いている 書き方を間違えている CSS を書く場所が違う 優先順位が間違っている それぞれ詳しく解説していきますので、デザインが反映されないときは順番にチェックしてみてください。 キャッシュをクリア（削除）する CSS が反映されないとき、わりと見落としがちなのがキャッシュです。 キャッシュはサーバーまたはブラウザで一時的に記憶されているデータのことで、カスタマイズ前の古い CSS データが残っている可能性があります。 「CSS を調整したあとはキャッシュをクリアする」のを忘れないようにしておきましょう。 サーバーのキャッシュ サーバーのキャッシュ機能は、そのサーバーによって効き具合が異なります。 CSS を更新するとキャッシュがすぐにクリアされる場合も

ブログ記事は「検索上位に入れば安泰」というわけではありません。放っておけばライバルブログに抜かされるかもしれませんし、Google のアップデートで順位が大きく変わることもあります。 全体的にアクセス数が減少しているなら、新記事の公開だけではなく過去記事のメンテナンスも必要です。定期的に過去記事をリライトし、競合サイトに負けない品質を保ちましょう。 本記事では、ブログ初心者向けに過去記事リライト・修正のコツを解説していきます。 過去記事をリライト・修正すべき理由 ここで言うリライトとは、「自分が書いた記事を書き直して改善する」という意味です。「ほかのブログの記事を書き直して自分の記事として公開する」という意味ではありません。 ほかのブログを書き直すのは著作権侵害であり、れっきとした違法行為なので絶対にやめましょう。そんなことをしてもアクセス数は増えませんし、訴訟に発展して失うもののほうが大

読みやすいブログデザインを目指すなら、余白と配色がポイントです。 以下の記事でブログ記事本文の横幅と左右の余白に関して解説しています。 これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開 本記事は横ではなく縦の余白に着目してみたいと思います。つまり、1 行目と 2 行目の行間、段落ごとの余白ですね。 加えて、余白に深く関わってくる文字のサイズや色をどのようにすれば読みやすくなるのか、サンプルと合わせてご覧ください。 余白が必要な理由 ブログ記事は小説と違い、読者が一字一句逃さないよう読むことはほとんどありません。 よほど文才があってぐいぐい引き込まれる記事、または惚れこんでいるブログなら別ですが、たいていはざっと流し読みしていきます。 そのうえで、自分に必要な情報があると判断したらもう一度読み直したり、あとで読み返すためにブックマークやシェアといった行動に移ってくれます。

WordPress の SEO プラグインは、「All in One SEO」と「Yoast SEO」が有名どころです。 では、この 2 つのうちどちらを使うのがよいのでしょうか。また、インストールすることでどのような SEO 効果が得られるのでしょうか。 人気度と機能を詳細に比較してみましたのでご覧ください。最後に、どちらがおすすめかをまとめてあります。

CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。 画像編集ツールで加工してもよいのですが、CSS で表現すると画像の上に表示されているテキストを検索エンジンが認識してくれるので SEO 効果が期待できる、というメリットがありますね。 それでは position:relative と position:absolute の使い方を見ていきましょう。 position プロパティの使い方基本 positon プロパティで聞いたことがあるのは「相対配置」と「絶対配置」という言葉だと思います。 何となくイメージはできるものの、検索して解説を読んでもイマイチわからず…という状態ではないでしょうか。 position プロパティで使える値をおさらいしておきましょう。 static