WordPressの記事の一部を折りたたんで表示する方法 – ネタバレ防止

WordPress の記事を書いていて、ここの説明長くなっちゃうから折りたたんで必要な人だけに表示したいな、と思うことありませんか?

このブログは解説系のブログなので、慣れている人には必要ないけど、初心者の人に向けた情報などを掲載したいときに、記事の一部を折りたたんで表示しています。

初心者用の情報を掲載。

 

みなさんどこかで一度は見たことがあると思いますが、「もっと読む」「続きを読む」と書かれたリンクが同じタイプの機能になります。今回はそれを記事のどこにでも好きなように設置できるようになる方法を解説していきます。

続きを読むボタンなんていらない!という方もおられると思いますが、これはいろんなことに使えるテクニックなので、ぜひ自分なりに使用方法を考えてみてください。

例えばこんなふうにも使えますよ。なにかネタバレを含む記事を書いた時にネタバレを読みたくない人のために、クリックしないと見られない記事を載せておくと、読者に対して親切なブログだと感じてもらえるのではないでしょうか。

なんとラスボスは●●だった!こんな感じで、本・映画・ゲームなどのネタバレ防止に使えます。

最初の準備


スタイルシートと JavaScript を利用してこの機能を実現します。コードをコピペするだけで簡単に利用できるように解説していますので、まずは Simple Custom CSS and JS というプラグインをインストールしてください。インストールしたことがない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

1. スタイルシートを追加するページに移動する


ダッシュボード > Custom CSS & JS > Add Custom CSS を選んでください。スタイルシートを追加するページに移動します。

2. スタイルシートを貼り付ける


タイトルのフォームに Slide Contents CSS と入力し、下のコードを入力するフォームの /* */ 赤文字で囲まれた英文をすべて削除してから、以下のコードを貼り付けて 公開 ボタンを押してください。

これは隠されている部分のデザインを決めるスタイルシートです。デザインが気に入らない方はこのスタイルシートを編集してください。編集する場合は display: none; この記述だけは消さないようにしてください。これは最初に非表示にしておくという指定です。

3. JavaScriptを追加するページに移動する


続いて ダッシュボード > Custom CSS & JS > Add Custom JS を選んで、JavaScript を追加するページに移動します。

4. JavaScriptを貼り付ける


さきほどのスタイルシートと同じ手順で、タイトルを Slide Contents JS にして、以下のコードを貼り付けて 公開 ボタンを押してください。

slideToggle(400); と書かれている部分を見てください。これは隠されている部分を表示する(非表示にする)速度を表しています。もっと速く表示したい場合は数字を 400 未満に設定してください。例えば 100 を設定すると、0.1 秒で表示が行われます。逆に大きな数字を設定すると、ゆっくりと表示が行われます。1000 を設定した場合は 1 秒かけて表示が行われます。半角数字で好みの速度を設定してください。

5. 記事にHTMLのタグを追加する


記事の新規追加ページ、または編集ページを開いて、以下の HTMLタグをテキストエディタで貼り付けてください。ビジュアルエディタでは機能しませんので、必ずテキストエディタを開いてください。

貼り付け終わったら プレビュー ボタンを押してチェックしてみましょう。

6. プレビュー


スライドリンク

テストコメント

記事をプレビューすると、このような表示になっています。ボタンとリンクのそれぞれで表示・非表示の切り替えが行えます。

7. 重要なポイント


HTMLタグは、折りたたむ部分ごとに文字を変えなければならないところがあります。以下のコードの赤文字部分を見てください。

<button data-slide-contents="slide-contents-1">スライドボタン</button>
<div id="slide-contents-1" class="slide-contents">
テストコメント
</div>

ボタンを利用する場合は、<button>タグの赤文字部分と、<div>タグの赤文字部分を同じ文字列にしてください。

 

<a href="#" data-slide-contents="slide-contents-1">スライドリンク</a>
<div id="slide-contents-1" class="slide-contents">
テストコメント
</div>

リンクを利用する場合は、<a>タグの赤文字部分と、<div>タグの赤文字部分を同じ文字列にしてください。

この文字は半角英数字で折りたたむ場所ごとに違う文字列を指定する必要があります。記事が変わったからといって、同じ文字列を使わないようにしてください。同じ文字列がブログ内に存在する場合は、正常に動作しなくなりますので、必ず折りたたむ場所ごとに、被らない唯一の文字列を設定するようにしてください。

後は スライドボタン / スライドリンクテストコメント と書かれている部分をそれぞれ好きな文字に書き換えてみてください。扱い方がわかると思います。

最後に


「おっ!このブログ、ギミックがあって面白いな」と思わせられるテクニックなので使ってみて損はないですよ。

長い解説を折りたたむ時や、ネタバレ防止以外でも使えると思うので、ぜひいろいろなシーンで活用してみてください。

WordPressのパーマリンクおすすめ設定

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 の設定を行うことが可能です。

パーマリンクおすすめ設定


長々と記事を読みたくない方のために、結論からお伝えすると以下の設定を選んでおけば間違いありません。

投稿名  https://gameusers.org/dev/blog/sample-post/

そして記事の投稿時にパーマリンクを半角英数字で設定してください。各単語の区切りは – (半角ハイフン)で行いましょう。

これが SEO(検索サイト) 的にも、将来的な記事管理の上でも、無難で扱いやすい選択です。

 実はこのブログ、過去にパーマリンクの設定に失敗して後悔しました


WordPress を導入してこのブログを始めたときに、あるブログの記事を参考にして、パーマリンクの設定を行いました。そのブログの記事にはパーマリンクにカテゴリー名を含めようと書かれていたので、それをそのまま参考にさせてもらって WordPress を運営していました。

過去のパーマリンク設定

しかしブログの記事が増えていくに従って「あれ、この設定失敗したかな…。」と後悔するようになりました。

記事のカテゴリーを変えたい!

ある時からそう思うようになったのです。WordPress ではカテゴリーを設定でき、記事を分類することができます。当初、このブログはプログラム関係の話題しかなかったのですが、WordPress のプラグインを開発してから、WordPress についての記事も掲載したくなりました。

そこで「ブログ」という新たなカテゴリーを追加し、その中に「WordPress」「WordPressプラグイン」などのサブカテゴリーを作りました。そしてこれまでに書いた記事をその中に仕分けしていくことになったのです。

でもパーマリンクの設定でカテゴリー名を URL に含めてしまっていたので、それを行うと、各記事の URL も変わってしまうことになりました。

パーマリンクの設定を変えると何が起こるのか?


  1. 記事の URL が変わる
  2. SNS のシェア数がリセットされる
  3. 検索サイトからの評価が下がる

1. 記事の URL が変わると、URL を貼ってくれていた他のサイトのリンクがリンク切れになってしまいます。せっかく記事を面白いと思ってリンクを貼ってくれていたのに貼り直しをしてもらうことになり、ご迷惑をかけることになってしまいます。

2. これもダメージが大きいのですが、SNSのシェア数が 0 に戻ります。SNS のシェアは URL ごとに行われているので、その URL が変わってしまうと、新たなページとして認識され、これまでカウントされていたシェア数は無効化されます。

3. 検索サイトはブログのクロールを行って各記事の URL を保持していますが、それも再度やりなおしになります。SEO 的にもマイナスに働くことはあってもプラスに働くことはありません。

WordPress は過去の URL から新しい URL へ自動で飛ばしてくれる(リダイレクトされる)ので、ブラウザでアクセスした人がページを見つけられなくなることはありません。しかしこれだけのマイナス要素がサイトに降りかかるので、パーマリンクの設定だけはしっかり行っていた方がいいです。

WordPress を導入してすぐの方は、今後のことも考えながら間違いのない設定を行いましょう。またすでに WordPress でブログを運営されている方で、パーマリンクの設定が気に入っていない方は、できるだけ早く手を打った方がいいと思います。傷が浅いうちに設定を見直しましょう!

 どんなURLがベストなのか


  1. できるだけ短いURL
  2. 人間が内容を予測しやすいURL
  3. 日本語ではなく、英数字を使ったURL
  4. 単語の区切りを _ ではなく – で行っているURL

パーマリンクを設定する上で意識した方がいい、4つの項目を挙げてみます。

1. できるだけ短いURL


一般的なウェブサイトの構成を考えてみてください。トップページがあって、その下に各ページがあってという構成になりますよね。

トップページ
https://www.example.com/

記事のページ
https://www.example.com/page1
https://www.example.com/page2
https://www.example.com/page3

通常はこういう構成でウェブサイトが成り立っていると思います。ここで考えてみて欲しいのですが、基本的に URL が短い方が重要なページである確率が高いと思いませんか?トップページは URL が一番短く、重要なページはその次くらいの短さになっています。

この法則に従うと、URL は無駄に長くないほうが重要なページであると認識されやすくなります。また単純に URL が長いと、リンクを貼った時に見栄えもよくなかったりします。ですので、パーマリンクを設定するときは、あまり階層が深くならないようにした方がいいのです。

◎ 投稿名  https://gameusers.org/dev/blog/sample-post/

パーマリンクの設定で、投稿名を選択することをおすすめしているのは、階層が深くならず、記事の URL が短くなるからです。

2. 人間が内容を予測しやすいURL


以下の URL が表示されているとした場合、どちらをクリックをしたくなりますか?

  1. https://www.example.com/page1
  2. https://www.example.com/wordpress-setting

ただの URL ですが、2はなんの内容について書かれているのか予測しやすいので、WordPress を利用されている方はこちらに興味を持ちやすいのではないでしょうか。

サイトの URL 構造はできる限りシンプルにします。論理的かつ人間が理解できる方法で(可能な場合は ID ではなく意味のある単語を使用して)URL を構成できるよう、コンテンツを分類します。たとえば、航空機(aviation)に関する情報を探している場合、http://en.wikipedia.org/wiki/Aviation のような URL であれば、見ただけで必要な情報であるかどうかを判断できます。http://www.example.com/index.php?id_sezione=360&sid=3a5ebc944f41daa6f849f730f1 のような URL 自体は、ユーザーの関心を引くことはほとんどありません。

引用: シンプルな URL 構造を維持する – Search Console ヘルプ

Google も推奨していますので、それにならった形でパーマリンクを設定するように心がけましょう。

3. 日本語ではなく、英数字を使ったURL


画像は記事を新規投稿する際のフォームです。赤線の場所で各記事のパーマリンクを設定できますが、日本語のタイトルを入力すると、タイトルがそのままパーマリンクの URL として利用されます。

この設定で投稿した場合の記事のURL
https://gameusers.org/dev/blog/wordpress%E3%81%AE%E3%83%91%E3%83%BC%E3%83%9E%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E8%A8%AD%E5%AE%9A/

日本語は URL として使用できないので、URL エンコードという処理がかけられて URL に変換されます。そのため意味不明な文字列に変換されて、こんなに長い URL になってしまうのです。

ちょっと長すぎますよね。例えば掲示板で記事の URL を紹介してくれた方がいたとして、これだとなんだか怪しいサイトに見えてしまいます。

URL は短い方がいいのでパーマリンクの設定は、短めの英数字で表現するようにしましょう。

ちなみにこの記事の URL はこうなっています。WordPress のパーマリンク設定ページの URL を参考にさせてもらいました。シンプルな英単語で記事の内容が予測しやすい URL になっています。

パーマリンク設定ページ

https://gameusers.org/dev/blog/wp-admin/options-permalink.php

この記事のURL

https://gameusers.org/dev/blog/wordpress-options-permalink/

4. 単語の区切りを _ ではなく – で行っているURL


みなさん URL の単語の区切り記号はなにを使っていますか?_(アンダーバーまたはアンダースコア)  -(ハイフン)このどちらからを使っている方が多いのではないでしょうか。

なぜ -(ハイフン)を勧めているのか。これは単純に Google がハイフンの使用を推奨しているからです。

URL では区切り記号を使うと効果的です。http://www.example.com/green-dress.html という URL の方が、http://www.example.com/greendress.html という URL よりずっとわかりやすくなります。URL にはアンダースコア(_)ではなくハイフン(-)を使用することをおすすめします。

引用: シンプルな URL 構造を維持する – Search Console ヘルプ

さきほどと同じページからの引用になりますが、Google がこう言っていますので、検索サイトのおすすめに従ってパーマリンクを設定していきましょう。

最後に


パーマリンクの設定は本当に重要です!

URL はコロコロと変えるものではないので、しっかりと考えて設定を行ってください。いい加減に設定すると、このブログのように後で泣きを見ることになります。

このブログがかつてパーマリンクにカテゴリー名を含めていた件ですが、最初は後で変えることなんてないと思っていました。しかし人間の考えや気持ちは変わるものです。違ったジャンルの記事を書きたくなったり、記事が増えるとサブカテゴリーを用意したくなったりするのは、仕方のない成り行きなのかもしれません。

今、分類しているカテゴリーも時間が経つと、きっと違うものになっていると思いますので、みなさんも気まぐれに影響されるようなパーマリンクを設定するのはやめておきましょう。自分のように失敗する人が増えないように、下から目線のアドバイスをさせてください。

WordPress – Webフォントの使い方

綺麗なフォント、おしゃれなフォント、面白いフォントを使いたい!でも OS に備え付けられているフォントにはいいものがない。そういった方におすすめしたいのが Webフォントです。Webフォントは日々、世界中で新しいものがデザインされており、有名なフォントサイトのものを軽く数えるだけでも、数百、数千に達します。

この記事では、外国製の英数字 Webフォントから日本製の日本語 Webフォントまで、WordPress での使い方を詳しく解説していきますので、ぜひ参考にしてください。

実はこのブログでも Webフォントを使わせてもらっています。サイドバーに今週の人気記事ランキングという欄がありますが、そこの No.1 と書かれているランキングの数字部分を Webフォントで表示しています。カッコイイフォントなので、ブログのイメージアップに大きく貢献してくれているのではないでしょうか。

今週の人気記事ランキング

こんな感じでちょっとしたポイントに使う方法や、WordPress の記事に使われているフォントを Webフォントに置き換える方法なども解説していきます。

WordPress で Webフォントを使うために


WordPress で Webフォントを使うには、HTML タグを挿入しなければなりません。そのために Simple Custom CSS and JS というプラグインを利用します。インストールしたことがない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには?

Webフォントの使い方


1. Google Fonts を使ってみよう!

Webフォントで最も有名な Google Fonts を試しに利用してみましょう。800 を超えるフォントがあり、さまざまなデザインのものが揃っています。

Google Fonts

上記サイトにアクセスしてみてください。画像のページが表示されると思います。

 

2. 使用するフォントを選択する

今回は例として Bangers というフォントを使用してみます。なんでもいいので、気に入ったフォントを選択して右上の + ボタンを押してみてください。

 

3. <link> タグをコピーする

+ ボタンを押すと、ページの下の方に 1 Family Selected と書かれた黒い帯が表示されますので、そこを押してみましょう。そして赤線部分のコードを選択してコピーしてください。

 

4. <link> タグを貼り付ける

WordPress のダッシュボード > Custom CSS & JS > Add Custom HTML を選択して、画像のページに移動してください。タイトルに Web Fonts と入力し、下のフォームの <!– –> で囲まれた赤文字の英文をすべて削除してから、さきほどの <link> タグを貼り付けます。そして右側にある 公開 ボタンを押しましょう。

これで選択した Webフォントが WordPress 内に読み込まれます。

 

5. 記事内で Webフォントを利用してみる

新しく記事を作成する、既存の記事を編集する、どちらでもいいので記事投稿ページに移動してください。そしてそこでテキストエディタを開きましょう。開いたら以下のコードを入力してください。

<p style="">Yeahhhh!!</p>

 

次に Google Fonts のページに戻って、画像赤線のタグをコピーしてから style=”” の中に貼り付けてください。

 

<p style="font-family: 'Bangers', cursive;">Yeahhhh!!</p>

上記のようなコードになったら記事を公開して Webフォントが適用されているかチェックしてみましょう。プレビューでも構いません。

 

6. Webフォントが適用されました

記事をチェックすると Webフォントが適用されているのがわかると思います。フォント:Bangers は漫画の擬音文字みたいでなかなかカッコイイですね!

※ 画像ではわかりやすくするために、フォントのサイズを大きくしています。

こんな感じで、style=”” の中に、font-family:~; をコピーすると、その部分だけ Webフォントが適用されて表示されます。

Google Fonts の場合は英数字だけになってしまいますが、強調したい部分に Webフォントを適用してみると、記事のアクセントになって面白いと思いますよ。

WordPress で日本語 Webフォントを使う方法


Google Fonts では日本語の Webフォントも試験的に提供してくれています。日本語はアルファベットと違い、ひらがな、カタカナ、漢字に対応しなければならないため、まだまだフォント数は少ないのですが、面白いフォントが揃っています。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access

上記サイトにアクセスしてみてください。個性のあるフォントが用意されていると思いませんか?

 

1. <link> タグをコピーする

今回は例として、ニクキュウという変わったフォントを WordPress で使ってみます。HTML と書かれた部分にある <link> タグをコピーしましょう。画像赤線の部分です。

<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />

このタグをさきほど追加した HTMLタグの Web Fonts に貼り付けてみましょう。

 

2. Web Fonts を編集する

ダッシュボード > Custom CSS & JS > All Custom Code を押して、このページに移動したら、Web Fonts 欄にある 編集 ボタンを押しましょう。

 

3. <link> タグを貼り付ける

通常の Google Fonts のコードの下に、日本語 Webフォントの <link> タグを貼り付けてください。そして右側にある 更新 ボタンを押しましょう。

これで 日本語 Webフォントが WordPress に読み込まれます。

 

4. スタイルシートを追加して Webフォントを適用する

ダッシュボード > Custom CSS & JS > Add Custom CSS から画像のページに移動してください。このページでスタイルシートを追加します。

タイトルに Font と入力し、下のフォームで /* */ に囲われた赤文字の英文をすべて削除してから、以下のコードを貼り付けてください。

body {
  font-family: , sans-serif !important;
}

 

そして Google Fonts のページに戻り、画像赤線の部分に書かれている、””に囲まれたフォント名を選択してコピーしてください。

今回の例の場合は “Nikukyu” になります。

次はそのフォント名をこのように貼り付けます。フォント名の後には , (半角のコンマ)が必要です。

body {
  font-family: "Nikukyu", sans-serif !important;
}

貼り付けられたらフォーム右側にある 公開 ボタンを押してください。これで Webフォントが WordPress に適用されます。

 

5. 記事で確認してみましょう!

完成!ニクキュウはカタカナだけのフォントなので漢字と混じり合って、なにが書いてあるのかパッと見ではわからない暗号のような文章になりました。

ここまで個性的にする必要はないと思いますが、Webフォントを使えば、他とはちょっと違った雰囲気のブログにすることも可能です。日本語の Google Fonts にはいくつかフォントが用意されていますので、いろいろ試してみてください。

Webフォントを使う際の注意点


Webフォントを利用する場合、大量にフォントを読み込むのはやめましょう。1~3つくらいが限度だと思います。それ以上読み込むと、ブログ全体が重たくなってしまうので、必要なフォントを絞って利用するように心がけてください。

フォントの変更についてはこちらの記事でも解説しています。フォント変更時に利用するスタイルシートについてもっと詳しく知りたい方は、以下のページを参考にしてください。

WordPressのフォントを変更して印象をガラッと変えてみよう

WordPressのフォントを変更して印象をガラッと変えてみよう

WordPress の見た目を変えるときに、まず思いつくのはテーマの変更ですが、その次にはなにが思い浮かびますか?

特にこれといったものは思い浮かばないですよね。

そこでおすすめしたいのがフォントの変更です。フォントを変えるとブログの印象もガラッと変わります。WordPress のフォントについて詳しく書かれている記事はあまり見たことがないと思いますので、今回は WordPress のフォントについての情報を集めてみました。

フォントを変更するために


通常は ダッシュボード > 外観 > テーマの編集 で、style.css を編集することでフォントを変えることができますが、この方法はテーマに依存してしまう上に、間違った部分を変更してしまうとブログのデザインに影響を与えてしまうことがあります。

子テーマを用意して編集を行うと安全ですが、どうにもめんどくさい!というわけでこの記事ではテーマに依存せず、独自の CSS を追加する形で、簡単にフォントの変更が行える方法を紹介します。

Simple Custom CSS and JS というプラグインを利用しますので、インストールしたことがない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには?

フォントを変更する


1. フォントを変更してみよう

Simple Custom CSS and JS をインストールしたら、ダッシュボード > Custom CSS & JS > Add Custom CSS を選んでください。

画像のページに移動したら、タイトルに Font と入力して、下にあるフォームの /* */ に囲まれた赤文字の英文はすべて削除、そして以下のコードをコピーして貼り付けてください。

そして右側にある 公開 ボタンを押すと、ブログのフォントが変更されます。これは WordPress のフォントを 游ゴシック というフォントに変更して、文章の行間を広げるスタイルシートです。

 

デフォルトのフォント

遊ゴシック

他のフォントに変更してみよう!


1. さきほど入力した CSS を編集する

ダッシュボード > Custom CSS & JS > All Custom Code で、Font 欄の 編集 を押してください。

 

2. フォントを変更する

フォームが再度表示されますので、’游ゴシック’, ‘Yu Gothic’, を削除して、’MS UI Gothic’ を代わりに入力してみましょう。

 

MS UI Gothic

また違ったフォントになりましたね。こんな感じで変更したいフォントに変えることが出来ます。フォントは以下のサイトからピックアップしてください。

font-familyで指定できるフォント名一覧

フォントを指定するときのコツ


フォントはどの環境でも同じものが表示されるというわけではありません。Windows と Mac それぞれでしか表示できないフォント、iOS と Android のスマホでも違いがあるので、アクセスする人によってブログのフォント表示が変わることはよくあります。

Windows と Mac の両方に対応しているフォントもあるのですが、同じフォントなのに名前が変わっていたりするので、それぞれの名前を指定しなければならなかったりします。

例えばメイリオというフォントですが、’メイリオ’, Meiryo, この2つを記述しなければなりません。片方だけだと、どちらか片方の環境でしか表示されなくなります。

フォントはそれぞれの環境で独自に発展しているので、すべての環境で文字を綺麗に表示したい場合はちょっとした知識が必要になります。

font-family というワードで検索サイトを調べてみてください。詳しい方がおすすめのフォント指定法を掲載してくれています。

このブログのフォント指定


このブログでは現在、以下のようなフォント指定になっています。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif !important;
}
.entry-content p {
  line-height: 1.8em;
}

-apple-system, BlinkMacSystemFont, は Apple の純正フォント San Francisco が表示される設定で Mac や iOS 環境でアクセスした場合は、優先的にそれを表示してくださいと指定しています。font-family は先に記述したフォントが優先で表示されます。

そして ‘メイリオ’, Meiryo, ‘ヒラギノ角ゴ ProN W3’, ‘Hiragino Kaku Gothic ProN’, これらは Windows と Mac の環境で人気のあるフォントで、とりあえず綺麗に表示するための無難なフォント指定といえます。

sans-serif これは最後の砦のようなフォントで、先に指定したどのフォントもない場合は sans-serif (ゴシック体)をとりあえず表示してくださいという表記です。必ず最後に載せておきましょう。

!important WordPress でフォントを指定するときに重要になるのが、この表記です。他のスタイルシートよりも、このスタイルシートのフォント指定を優先してくださいという指定になります。強引にこれを使って!と勧めているような感じですね。

.entry-content これは WordPress の記事に使われているスタイルシートのクラス名です。その後に p と書かれていますが、これは <p> タグを表しています。WordPress では文字を表示するときに <p> タグで囲んで表示します。よってこの表記は、記事内の <p> タグだけにスタイルシートを当ててくださいという意味になります。

line-height: 1.8em; これは文章の行間を設定する記述で、この数字が大きいほど行間が広くなります。16px こんな風にピクセルでも指定できます。数字を変えながら適切な行間を見つけてください。

とりあえず上のコードをコピペして、他に気に入ったフォントが見つかったら、font-family の前の方に追加していく方法が簡単だと思います。

最後に


フォントはもちろん行間を調整するだけでも、ガラッと印象が変わりますので、ぜひ試してみてくださいね。

どの環境でも同じフォントを表示したい場合は、Webフォントを使うという選択肢もあります。こちらのページで詳しく解説していますので参考にしてください。

WordPress – Webフォントの使い方

WordPressのリスト(箇条書き)をCSSで綺麗に表示しよう!

WordPress で記事を書いていると箇条書きで表現したい項目が出てきます。この時に利用できるのがリストです。投稿ページのビジュアルエディタで、番号なしリスト番号付きリストを選ぶと画像のようなリストを入力することができるようになります。

ビジュアルエディタ

テーマによって若干表示は変わりますが、なんかオシャレじゃないですよね。記事の中で強調したい部分なのにすごく地味というか。

この記事では CSS を利用して WordPress のリストを綺麗にする方法を紹介しますので、ぜひみなさんのブログでも試してみてください。

ちなみにこのブログではこんな感じになっています。爽やかなデザインでなかなかいいと思いませんか?

スタイルシートを追加するために


まずはスタイルシートを追加できる環境を作りましょう。このブログではテーマに依存しない形でスタイルシートを追加・編集するために、Simple Custom CSS and JS というプラグインの利用を推奨しています。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには?

もしなんらかの理由があってプラグインのインストールをしたくない場合は、ダッシュボード > 外観 > カスタマイズ内にある 追加 CSS を開いてスタイルシートを入力するようにしてください。

CSS で綺麗にする方法


1. スタイルシートを入力するフォームを開く

ダッシュボード > Custom CSS & JS > Add Custom CSS を選んでください。

 

2. スタイルシートのタイトルを入力する

画像赤線のフォームにスタイルシートのタイトルを入力します。この例では Stylish List というタイトルにします。これは自分が管理するためのタイトルなのでなんでも構いません。覚えやすいタイトルを入力しましょう。

 

3. スタイルシートを入力する

まずタイトルの下にあるフォームの /* */ に囲まれた赤文字の英文はすべて削除しましょう。そして以下のコードをコピーして貼り付けてください。

 

すごく長いですが、これはこのブログで使っているリストのスタイルシートです。スタイルシートを貼り付けた後、右側にある 公開 ボタンを押すと、あなたのブログで使っているリストのデザインが変更されます。

 

4. とりあえず完成!

ブログの記事内にリストを入力してみてください。このような表示になっていたらデザインの変更は成功です。

もっと他のデザインはないの?


すごくたくさんのリスト用スタイルシートを提供してくれているサイトがあるので、それを使わせてもらいましょう!実はこのブログで使っている青いデザインのリストも、以下のサイトのスタイルシートを使わせてもらっています。

上記のサイトにアクセスしてみてください。綺麗なリストが画像付きで紹介されています。自分のブログで使ってみたいと思うデザインがあったら、さきほど作成したスタイルシートを編集して貼り付けてみましょう。

 

ダッシュボード > Custom CSS & JS > All Custom Code

画像のページに移動したらさきほど作成したスタイルシートの欄にある 編集 と書かれた部分を押してください。入力フォームが出てきますので、現在入力されているコードをすべて削除して、気に入ったリストの CSS を代わりに貼り付けてください。

 

WordPress でリストのスタイルシートを利用するコツ

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}

ol.sample1 li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}

ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

例えばこのスタイルシートを WordPress で利用する場合、そのまま貼っても使えません。以下のように編集する必要があります。

 

.entry-content ol{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}

.entry-content ol li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}

.entry-content ol li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

一番最初に .entry-content を追加して、ol.sample1.sample1 を削除しました。.entry-content というのは、WordPress の記事に使われるスタイルシートのクラス名で、その内部にある <ol> タグのデザインを変更するという意味になります。

.entry-content を追加しないと、テーマに使われているリストのデザインも一緒に変更されてしまうので、ブログのデザインが崩れてしまうことがあります。

また .sample1 を削除したのは、これがついているとスタイルシートを適用するときに、毎回 <ol class=”sample1″> という書き方をしなければならないためです。リストを表示する度にテキストエディタでそのコードを入力するのは大変なので、スタイルシートのクラス名は削除しています。

この説明はスタイルシートの知識がないと、ちょっと難しいかもしれませんね。とりあえず最初に .entry-content を追加して、.sample1 と書かれている部分を削除すると覚えていてください。これを行うだけで、WordPress で 上記サイトの CSS が使えるようになります。

最後に


リストのデザインはうまく変更できましたか?

リストのデザインを変更しておくと、リストがアクセントになって記事が華やかに見えるので、これはできるだけやっておきたいテクニックです。

もしどうしてもわからないことがあったらコメント欄で聞いてください。自分にわかることならお答えします!

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

WordPress を利用していると、ここの見た目を変更したい、こんな機能を追加したいなどなど、さまざまな変更や機能追加をしたくなってきますが、そんなときに必要になるのが CSS(スタイルシート)や JavaScript です。

この記事では自作の CSS・JavaScript・HTLM を WordPress に追加する方法について解説していきます。

 

追加 CSS

WordPress には CSS を追加するための機能が最初から用意されており、画像のように、ダッシュボード > 外観 > カスタマイズ内の 追加 CSS という場所で、スタイルシートを追加することができるようになっています。

しかし、この機能はテーマに依存してしまうので、テーマを変更したときに追加したスタイルシートが効かなくなってしまうという問題があります。テーマは絶対に変えない!という方はそれでいいと思いますが、部屋の模様替えをするように、時々見た目を変えたくなったりしますよね?

そういった場合に備えて、日頃からテーマに依存しない形で CSS や JavaScript を追加していきましょう。

Simple Custom CSS and JS


このプラグインを利用すると、テーマに関係なく、CSS・JavaScript・HTMLのコードを追加していくことができるようになります。

ダッシュボード > プラグイン > 新規追加で、Simple Custom CSS and JS を検索してインストール&有効化してください。

プラグインのインストール方法がよくわからない方は、以下のページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

使い方


1. スタイルシートを追加してみる

インストールが終わると、ダッシュボードに Custom CSS & JS という項目が表示されていると思います。そこから Add Custom CSS を選んで、スタイルシートを追加してみましょう。

 

2. スタイルシートのタイトルを入力する

画像赤線の ここにタイトルを入力 と書かれているフォームに、スタイルシートのタイトルを入力してください。これは自分で管理するためのタイトルなので、覚えやすいタイトルを入力しておくといいでしょう。

 

3. スタイルシートを入力する

タイトルを入力したら、下のフォームに /* */ で囲まれた英文がありますので、これをすべて削除して、代わりにスタイルシートを入力してください。画像では <strong>タグを赤くするスタイルシートを入力しています。

入力が終わったら、右にある 公開 ボタンを押してください。公開ボタンを押すと、ブログにスタイルシートが適用されます。

 

4. 管理画面で確認する

メニューの All Custom Code を押すと、先程入力したスタイルシートが表示されています。この画面では、入力した CSS・JavaScript・HTML を管理することができ、星マークを押して、公開・非公開を切り替えることができます。

★は現在公開中で、☆は非公開の状態です。不要になったコードがある場合は、このページで非公開に設定しておきましょう。

今回は例としてスタイルシートを入力してみましたが、同じような形で JavaScript と HTML のコードも入力することができます。

Options について


スタイルシートや JavaScript を入力するフォームでは、オプションを設定することができます。そのオプションの各項目について解説します。

Linking type

External File: 入力した CSS・JavaScript を外部ファイルにして、以下のような形で読み込みます。

<link rel='stylesheet' id='1235-css' href='https://gameusers.org/dev/blog/wp-content/uploads/custom-css-js/1235.css?v=9179' type='text/css' media='all' />

Internal: ソースのタグ内にそのまま表示されます。

<style type="text/css">
strong {
 color: red;
}
</style>

Where on page

Header: HTMLのソースの上部、<head>タグ内に表示されます。CSS は上部に表示されるのが普通なので、CSSの場合は Header を選択しておくといいでしょう。

Footer: HTMLのソースの下部に表示されます。JavaScript の場合は、Footer を選んでください。上の方に JavaScript のコードがあると、JavaScript をすべて読み込んでから HTML の読み込みが始まりますので、ページの表示が遅くなってしまいます。特別な場合を除いて、基本的には Footer を選んでおくのが正解です。

Where in site

in Frontend: ブログのトップページや記事のページなど、誰もが見れるページに表示されます。

in Admin: ダッシュボードなど、管理者用のページに表示されます。

On Login Page: ログインページに表示されます。

このプラグインでなにができるの?


この記事を見ただけではなにができるのかよくわからないと思いますが、このプラグインを利用すれば、本当にいろいろなことができるようになります。

このブログでは Simple Custom CSS and JS を利用して、リストの見た目を変更する方法、スクリプトを利用して便利な機能を追加する方法、Web フォントで文字を綺麗にする方法などを解説していきますので、ぜひそちらもチェックしてみてください。

WordPress プラグインのインストール方法を詳しく解説

WordPressにはたくさんの便利なプラグインが用意されています。こんな機能があったらいいのになと思うものは、だいたい存在していると言っても過言ではありません。

今回はプラグインのインストール方法について詳しく解説していきます。WordPressを導入したばかりでよくわからない方は、この記事を参考にしてインストール方法を覚えてください。

プラグインのインストールには大きく分けて3つの方法があります。

  1. プラグインを検索してインストール
  2. プラグインファイルをアップロードしてインストール
  3. サーバーに直接プラグインファイルをアップロードしてインストール

1の方法は、WordPress プラグインディレクトリに登録されているプラグインをインストールする時に使う方法で、一番簡単にインストールが行えます。WordPress プラグインディレクトリというのは、WordPressの関係者が行うチェックを通過したプラグインだけが登録することのできる公式のプラグイン置き場です。

2の方法は、公式に登録されていないプラグインを利用する際に使います。プログラマーが個人的に開発した便利なプラグインを自分のウェブサイトなどで提供してくれている時に、この方法を使ってインストールすることができます。

3の方法は、プラグインのファイルを自分で修正してからインストールを行う人が利用する方法で、バグの修正や細かいカスタマイズなどが行えますが、Web制作の知識が必要になります。

基本的には1と2の方法を知っているだけで問題なくインストールを行えます。

1. プラグインを検索してインストール


1.  プラグインページに移動する

WordPressのダッシュボードで、プラグイン > 新規追加 を選択してください。

 

2. インストールしたいプラグインを検索する

右上の方にプラグインを検索するためのフォームがありますので、そこでインストールしたいプラグインの名前を入力してください。

 

3. プラグインをインストールしましょう

フォームにプラグインの名前を入力すると、プラグインが表示されます。画像では例として Game Users Share Buttons を検索して表示しています。プラグインが表示されたら 今すぐインストール と書かれたボタンを押しましょう。

インストールが始まるのでしばらく待ってください。インストールが終わると、さきほどのボタンが 有効化 に変わります。有効化ボタンを続けて押してください。

 

4. インストール完了!

画面が切り替わって プラグインを有効化しました。 と表示されたら、プラグインのインストールは完了です。簡単ですね!

2. プラグインファイルをアップロードしてインストール


1. プラグインファイルをダウンロードする

開発者が自分のウェブサイトなどでプラグインを公開してくれている場合、そのプラグインファイルをまずダウンロードする必要があります。

今回は例として、WordPress プラグインディレクトリから、Game Users Share Buttons のプラグインファイルをダウンロードしてインストールしてみます。

 

2. プラグインのアップロードページに移動する

ダウンロードしたプラグインファイルはZIPという圧縮ファイルになっています。それを ダッシュボード > プラグイン > 新規追加 からアップロードします。プラグインのアップロード と書かれたボタンを押して、アップロードページに移動してください。

 

3. プラグインファイルをアップロードする

ファイルを選択 というボタンを押して、ダウンロードしたプラグインファイルをアップロードします。プラグインファイルを選択したら、今すぐインストール ボタンを押してください。

注意:プラグインファイルはZIPのままアップロードしてください。ZIPファイルは解凍することができるのですが、インストールする時は解凍してはいけません。

 

4. プラグインを有効化してインストール完了!

アップロードが終わるとインストールが自動的に始まります。インストールが終わると画像のページに移動しますので、プラグインを有効化 と書かれたボタンを押してください。これでファイルをアップロードする方法でのインストールは完了です。

3. サーバーに直接プラグインファイルをアップロードしてインストール


1. プラグインファイルをダウンロードする

※ この方法は知識が必要になりますので、わからない方は行わないようにしてください。間違えると WordPress が正常に動かなくなったりしますので注意してください。

プラグインファイルをダウンロードしてきて、必要ならファイルを解凍してください。フォルダが出てきますので、それをFTPなどを利用してアップロードしましょう。

例えば https://www.example.com/blog/ というアドレスで WordPress を運営している場合、blog ディレクトリの内部に wp-content > plugins という構成のディレクトリがあります。そこに先程のフォルダをまるごとアップロードしてください。

Game Users Share Buttons プラグインの場合は、ZIPを解凍すると game-users-share-buttons というフォルダが出てきますので、それをそのままアップロードします。

blog > wp-content > plugins > game-users-share-buttons

上記のような構成になります。

 

2. プラグインを有効化する

ダッシュボードのプラグインページにアクセスすると、先程アップロードしたプラグインの項目が表示されていますので有効化してください。これでインストールは完了です!

最後に


プラグインのインストール方法について解説してみました。解説のとおりに操作すると簡単にインストールできますので、わからない方は画像を見ながらチャレンジしてみてください。

このブログでは WordPress の便利なプラグインを紹介していきますので、ぜひ他の記事もチェックしてみてください。

Game Users Share Buttons プラグインは特におすすめです!

WordPressのおすすめシェアボタンプラグイン、高速表示&好きなデザインに変更できます

Game Users Share Buttons

ブログをやっているなら絶対に設置しておきたいSNSのシェアボタン。公式が提供するボタンから、WordPressのプラグインで表示できるものまで様々なものがありますが、今回、ご紹介するのは、公式のものと比較すると表示速度は10倍!選べるテーマは無限大!世界中の素材サイトからアイコンをダウンロードしてシェアボタンの画像として利用できる画期的なプラグインです。絵を描いたりデザインが行える方なら、他にない世界でひとつのシェアボタンを作成することもできる、まさに夢のプラグインです!!

 

こんなシェアボタンが使えます

画像を見てください。これは世界中で提供されているSNSのアイコンを利用させてもらって作ったオリジナルのシェアボタンです。今回、紹介する「Game Users Share Buttons」を利用すると、誰でもこんなオシャレなシェアボタンをブログで使うことができるようになります。

これまではデザインに統一性のない公式のシェアボタンを並べて使うか、プラグインとして提供されている決まったデザインのシェアボタンを使うかで、見た目を変更する選択肢がほとんどなく、おしゃれなデザインのシェアボタンを設置しようとすれば、HTML・CSS・Javascript など Web 制作の知識が必要になったり、自分で画像を作る場合はデザインセンスが求められたり、誰でも簡単にできるというものではありませんでした。

しかし Game Users Share Buttons ならそれが可能です。誰にでも簡単にです!この記事ではインストール方法、使い方について詳しく解説していきますので、ぜひ一度、使って試してみてください。

対応テーマ


Twenty Seventeen Twenty Sixteen Twenty Fifteen
Simplicity2 STINGER PLUS+2 STINGER8
Xeory Extension Xeory Base

上記は表示に問題がないか確認済みのテーマです。基本的にはどんなテーマでも利用できます。

 

正常に表示されないテーマ

  • STINGER5

他にも表示に問題のあるテーマが見つかりましたら、ぜひ教えてください。

インストール方法


WordPress のダッシュボード > プラグイン > 新規追加ページで Game Users Share Buttons を検索してください。

1. ダッシュボードを表示する

ログインしている場合は、画像のように上部メニューからダッシュボードを選択してください。ログインしていない場合はログインすると自動的にダッシュボードに移動します。

 

2. メニューから プラグイン > 新規追加 を選択

ダッシュボードのメニューからプラグインを選び、次に新規追加を選んでください。

 

3. プラグインを検索する

ページ右上のフォームに Game Users Share Buttons と入力すると、黒ネコのアイコンのプラグインが出てきますので、そこに表示されている今すぐインストールボタンを押してください。

 

4. プラグインをインストールして有効化する

プラグインのインストールが終わると、有効化と書かれたボタンが表示されますので、押してください。

 

5. インストール完了

プラグインを有効化しました。と表示されると、インストールは完了です。次に使い方について解説しますので、記事を読み進めてください。

Game Users Share Buttons の使い方

1. 設定ページに移動する

ダッシュボードのメニューから 設定 > Game Users Share Buttons を選んでください。

 

2. テーマタブを選択する

Game Users Share Buttons の設定ページに移動しますので、そこでテーマタブを選んでください。

 

3. ブログで使いたいシェアボタンを選択する

シェアボタンがいくつか表示されます。これはシェアボタンのテーマになっており、好きなデザインを利用することができます。とりあえずどれか気に入ったものを選んで、編集タブに移動ボタンを押してみてください。

 

4. 編集タブに移動する

さきほど選んだテーマを利用するために、編集タブに移動します。上部メニューから編集を選んでください。

 

5. シェアボタンをブログに表示してみる

編集タブをスクロールしていくと、さきほど選んだシェアボタンのテーマが表示されています。そこの Top ボタンを押してみましょう。これはブログの記事の上にシェアボタンを表示するというボタンです。Bottom を押すと、記事の下にも表示されます。

 

6. ブログで表示を確認してみましょう!

ブログを確認してシェアボタンがどのように表示されているか、確認してみましょう。Top ボタンを押した場合、画像のように記事のすぐ上にシェアボタンが表示されているはずです。ただこのままだと、記事との間隔が狭すぎるので、もうちょっとスペースを空けたいところです。

 

7. 記事とシェアボタンの間隔を調整する

さきほどの編集タブ内で、Top 設定と書かれている部分を探してください。見つけたらその部分を押しましょう。

 

8. 余白を設定する

余白・個別投稿ページという欄に、と書かれたフォームがありますので、そこで余白を設定します。記事とシェアボタンの間隔を半角の数字で入力してください。使っている WordPress のテーマやデザインによって必要な間隔は変わりますので、いろいろ試しながら適切な値を見つけてください。

値を入力したら 保存ボタンを押しましょう。

 

9. 編集結果を確認、完成!

余白を設定したので、記事とシェアボタンの間にちょうどいいスペースができました。余白はよく設定する項目なので覚えておいてください。

その他にも設定できる項目はたくさんありますので、気になる部分が見つかったら、編集タブで設定を試してみてください。

最後に


自作自演で紹介記事を書いてみました。半年以上かけて頑張って作ったものなので、できるだけたくさんの人に使ってもらいたい!

使ってもらえばいいものだと感じてもらえると思うので、ぜひ一度試してみてください。もしわからないことがあれば、この記事のコメント欄で質問してもらえればいつでも答えるので、なんでも聞いてください。

リンク


ブログの記事を書く時に便利なChrome拡張機能を紹介します!

ブログの記事を書いていてリンクを貼る時ってみなさんどうしていますか?

自分は今までページのタイトルは、右クリック → ページのソースを表示 → <title>タグからコピー、URLはブラウザのアドレス部分からコピーして、WordPress にそれぞれ貼り付けてリンクを作成していたのですが、この作業を右クリックのメニューから一発でできるようになる便利な Chrome 拡張機能を発見したので、紹介させてもらいます

Lightning Blog Tools / 作者の解説ページ

 

Chrome上で右クリックしたところ

Lightning Blog Tools を Chrome にインストールしてから、Chrome 上で右クリックしてメニューを開くと、ライトニングツールという欄が出てくるので、そこでHTMLリンクという項目を選択すると、クリップボードに以下のタグがコピーされます(使うときはキーボードの Ctrl + V を押すか、右クリックで貼り付けを選びましょう)

<a href="https://gameusers.org/dev/blog/" target="_blank">Game Users 開発ノート – 一緒に開発しよう!</a>

なんとタグ付きで今見ているページのリンクがコピーされるのです。今までいちいち面倒なことをしてリンクを作成していたのが、一瞬で終わるこの便利さ!リンクは不要でページのタイトルだけ取得したい場合は、サイトタイトル抽出を選ぶとタイトルだけが取得されます。

さらに踏み込んだ使い方


右クリック > ライトニングツール > Options を選ぶと、画像のページが開きます。

難しそうに見えますが、慣れればすごく便利な設定が行えます。テキスト引用、HTMLリンク、サイトタイトル抽出は元から入っている設定で、<strong>赤色は自作した機能です。

 

自作した<strong>赤色を使ってみる

画像のように文字を選択してから、右クリック > ライトニングツール > <strong> を選ぶと、以下の内容がクリップボードにコピーされます。

<strong style="color: #ff0000;">Game Users Share Buttons</strong>

strong タグは文字を強調するときに使うタグなのですが、選択した文字が strong タグに囲まれてコピーされました。このように設定したタグを自在に扱うことができるようになります。

 

<pre>コード入力用

このブログではプログラム関係のコードを掲載することが多いので、黒色の <pre> タグをよく使っているのですが、Lightning Blog Tools で設定を行っているので、記事の投稿フォームで右クリックから簡単に貼れるようになっています。

<pre style="color: #ffffff; background-color: #000000;"></pre>

Options のページにコード挿入という欄がありますので、独自のコードを貼り付けたいときはここで設定を行いましょう。

タグ挿入コード挿入は予め設定しておいたコードを右クリックから簡単に貼り付けることができる機能です。

ブログの記事を書いているときに頻繁に利用するタグがある場合は、予め Lightning Blog Tools で設定しておくと、右クリックから簡単に貼り付けることができるようになってとても便利です。

最後に


プログラム関係の知識がない方には、ちょっと難しく感じるかもしれませんが、慣れれば誰でもできるようになりますので、ブログを持っている方はぜひ活用してみてください。

記事作成の時間が短縮できるのですごくいいですよ!

サーバーをNode.jsにしたい気持ちが高まる

現在、サーバー側はPHPで動いているのですが、いずれNode.jsにして、すべてをJavascriptで動く環境にしたいと思っています。結構な時間をかけてPHPの処理を書いていると、そのうちJavascriptに書き換えることになるのに、どうしてこんなに力を入れてPHPを書いてるんだろうという気持ちになってしまいます。

その思いが重なり重なり、いよいよNode.jsの本でサーバー側の処理を勉強し始めました。ちょっと読んだ感じでは、それほど難しい印象は持たなかったので、比較的簡単にNode.jsで動くページを作成できるかもしれません。しかし現在動いているログインやプッシュ通知など、手間のかかるシステムをNode.jsに置き換えるのは楽じゃないと思うので、サーバー側を短時間に一新することは現実的にできそうにありません。

そこで一部のページから徐々に置き換えていくことを考えたのですが、そうした場合にApacheとNode.jsを同居させなければなりません。この構成で運営されている方はすでにいるようなので、やり方については調べがついたのですが、問題はドメインやサブドメイン単位ではなく、ページ単位でサーバーを振り分けることができるのかということと、SSLが問題なく動くのかわからないという点です。

Node.jsにnode-http-proxyというパッケージがあって、それを利用すればサーバーを振り分けられることまではわかったのですが、ページ単位での振り分けについてはネットに書かれていませんでした。さらにこの前、設定したLet’s EncryptのSSLですが、これがNode.jsのサーバー上でも普通に動いてくれるのかわからないのです。

本当にもうわからないことだらけなんですが、そもそもの話、Web系って覚えること多すぎないですか?範囲が広いのに、一人であらゆることに対応しなければならないので、そろそろ頭がパンクしそうです。