はてなブックマーク

All in One SEO Pack をインストールして一般設定が終わったら、次は XML サイトマップを生成する設定を行いましょう。 この記事は以下の記事の続きになります。プラグインインストール後の一般設定が終わっていない方は、以下の記事を読んで設定を行ってください。 WordPress – All in One SEO Packの使い方＆設定を徹底解説！翻訳付き XML サイトマップとは？ 運営しているブログにどんなページがあるのか（URL）、ブログ内の優先順位、更新頻度はどれくらいか、最終更新日、そういった情報を検索サイトに伝えるためのファイルのことです。 通常は sitemap.xml というファイルを自分で作成して、検索サイトに登録しなければならないのですが、All in One SEO Pack にはそれを自動で生成する機能がついています。この機能を使えば、後は検索サイトに生

ブログの記事は検索サイトでできるだけ上位に表示させたいですよね。そのために必要なのが SEO：Search Engine Optimization（サーチ・エンジン・オプティマイゼーション）です。日本語に直すと検索エンジン最適化になります。 WordPress の初期状態では SEO が十分に行われているとは言えません。そこで利用してもらいたいのが、All in One SEO Pack というプラグインです。 すでに100万以上の WordPress にインストールされており、実績も十分です。All in One SEO Pack はとても高機能なのですが、その分、設定項目も多く、各項目の理解が非常に難しくなっています。プラグイン自体は日本語化されているのですが、公式サイトの解説が英語になっているため、各設定がなにを意味しているのかわかりにくいのです。 そこでこの記事では、All in

WordPress の記事に追加した画像をクリック（タップ）すると、ブラウザに画像が読み込まれて大きく表示されますよね？ その際、画像をクリックする → ブラウザに画像が読み込まれる → 元のページに戻るという経緯をたどりますが、元のページに戻った時に、再度ページの読み込みが発生するので、ページの表示に時間がかかってしまいます。 パソコンからのアクセスの場合は回線が速いので、あまり気になりませんが、スマートフォンからアクセスしたときに、再度ページを読み込むと、時間がかかるので読者にストレスを与えることになってしまいます。 そこでおすすめしたいのが、モーダルウィンドウでの画像表示です。 モーダルウィンドウってなに？ 触ってもらうとわかりやすいと思います。以下の画像をクリック（タップ）してみてください。 黒い背景になって中央に画像が表示されましたね。これがモーダルウィンドウです。モーダルウィン

当ブログでサイドバー（スマホの場合はページ下部）に表示しているアイキャッチ画像（サムネイル）付きの人気記事ランキングと新着記事を表示する方法を紹介していきます。 この記事の解説に従って設定すると、トップページではブログ全体の人気記事ランキングが表示され、個別の記事ページではその記事が所属しているカテゴリーの人気記事ランキングが表示されるようになります。 プラグインをインストールして、コードをコピペするだけで、このブログと同じランキングを利用することができます。 HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。 必要なプラグインをインストールしよう 人気記事ランキングを表示するには、WordPress Popular Posts、WPP Plus

アイキャッチ画像とは各記事の看板画像のことです。WordPress では、個別の記事ページだけでなく、記事が一覧で表示されるときにも利用されています。 テーマ Twenty Seventeen の個別記事 人気記事ランキング テーマ Wallstreet の記事一覧 画像は一例ですが、さまざまな場面で記事を強調する画像として利用されているのがわかると思います。文字だけの記事よりもずっと魅力的に感じますよね。 アイキャッチ画像は特別です 当初、このブログはアイキャッチ画像を使っていませんでした。記事の一番上に大きな画像を載せるのと大して変わらないだろうと思っていたのですが、WordPress の利用経験が長くなってくると、やはり特別な画像なんだなと感じることが多くなりました。 世の中には数多くのテーマがありますが、アイキャッチ画像を上手に利用しているテーマもたくさんあります。ブログトップペー

スクロールが非常に長くて、上まで戻るのが大変！ブログトップはもちろん、文字数の多い記事や、カテゴリー、タグページなどでもそうなりがちですよね。読者に優しいブログにするために、ワンクリックでページトップに戻れるボタンをつけましょう。 この記事では、ページトップに戻れるボタンをつけられるプラグインについて詳しく解説しています。 完成品 WPFront Scroll Topをインストールしよう WordPress には戻るボタンをつけられる、いろいろなプラグインが存在していますが、特におすすめなのが、WPFront Scroll Top というプラグインです。 70 種類以上のボタンが使える デフォルトで 70 種類以上のボタンが使え、オリジナルの画像をボタンとして使用することも可能です。設定が細かく行えますので、カスタマイズ性もとても高くなっています。 ダッシュボード > プラグイン > 新規

WordPressのサイドバーを固定しよう！スクロールに追従させる – Q2W3 Fixed Widget 文字数の多い記事を書くと、サイドバーよりも記事が大幅に長くなることってよくありますよね。ブラウザでその記事を表示すると、サイドバーの部分になにもない空間が生まれてしまいます。 記事を読み終わった時に、サイドバーのメニューから他の記事も読んでもらいたいけど、読者がサイドバーをチェックするには、わざわざスクロールを行ってページの上まで戻ってもらわなければなりません。 これはちょっと気が利いてないですよね。ページの回遊率も下がってしまいます。 だからサイドバーの位置を固定しましょう。スクロールに追従させれば、常にメニューが表示されるようになって、他の記事も読んでもらいやすくなります。 この記事ではプラグインを利用してサイドバーを固定する方法と、スタイルシートを利用して固定する方法の2つを解

WordPress を設置したらまず最初にやっておきたい、パーマリンクの設定について説明していきます。これだけやっておけば間違いない！というおすすめ設定を紹介しますので、ぜひ参考にしてください。 パーマリンクってなに？ パーマリンク、あまり聞き慣れないワードだと思いますが、WordPress 上では各記事の URL を表します。 ブログトップのURL https://gameusers.org/dev/blog/ パーマリンク：各記事のURL https://gameusers.org/dev/blog/game-users-share-buttons/ https://gameusers.org/dev/blog/three-rules/ WordPress のダッシュボード > 設定 > パーマリンク設定で、記事の URL の設定を行うことが可能です。 長々と記事を読みたくない方のため

WordPress で記事を書いていると箇条書きで表現したい項目が出てきます。この時に利用できるのがリストです。投稿ページのビジュアルエディタで、番号なしリスト・番号付きリストを選ぶと画像のようなリストを入力することができるようになります。 ビジュアルエディタ テーマによって若干表示は変わりますが、なんかオシャレじゃないですよね。記事の中で強調したい部分なのにすごく地味というか。 この記事では CSS を利用して WordPress のリストを綺麗にする方法を紹介しますので、ぜひみなさんのブログでも試してみてください。 ちなみにこのブログではこんな感じになっています。爽やかなデザインでなかなかいいと思いませんか？ スタイルシートを追加するために まずはスタイルシートを追加できる環境を作りましょう。このブログではテーマに依存しない形でスタイルシートを追加・編集するために、Simple Cus

綺麗なフォント、おしゃれなフォント、面白いフォントを使いたい！でも OS に備え付けられているフォントにはいいものがない。そういった方におすすめしたいのが Webフォントです。Webフォントは日々、世界中で新しいものがデザインされており、有名なフォントサイトのものを軽く数えるだけでも、数百、数千に達します。 この記事では、外国製の英数字 Webフォントから日本製の日本語 Webフォントまで、WordPress での使い方を詳しく解説していきますので、ぜひ参考にしてください。 実はこのブログでも Webフォントを使わせてもらっています。サイドバーに今週の人気記事ランキングという欄がありますが、そこの No.1 と書かれているランキングの数字部分を Webフォントで表示しています。カッコイイフォントなので、ブログのイメージアップに大きく貢献してくれているのではないでしょうか。 今週の人気記事ラ

Twitter、Facebook、Google+など（全10サイト）をシェアすることが可能です。自由度の高いカスタマイズが行え、他にないオリジナルのシェアボタンを作成できます。