ホームページ
2022年7月3日
ホームページ（トップページ）からFacebookのフレーム（小窓）を削除
ホームページからFacebookフレームを削除した理由としては特になく、
ただちょっとページの変化が欲しかっただけ。
それとパソコンで観覧すると、ちょっとレイアウトが崩れていたこともありますかね。
ですがSEO的に良いこともありました。
それはwebページの表示スピードが少し早くなりました。
表示速度を計測するには、「PageSpeed Insights」がオススメです。
今回の件を例に、実際にPageSpeed Insightsで当ホームページを診断しました。
Facebookフレームを削除する前
Facebookフレームを削除した後
微妙ではありますが表示スピードが向上しました。
これだけのことですからSEO効果はそう期待できないでしょうが、
何事もコツコツと言うことで。
しまい
2019年1月28日
Categories | ホームページ ブログ（WordPress) SEO
WordPressの投稿記事を自動的にホームページ（HTMLサイト）へ表示させたいと
思ったことはありませんか？ 「ブログはWordPressで運営しているけれど、
別で作っている企業ホームページ（HTML）にも最新記事を表示したい」
「外部サービスに頼らず、自分でカスタマイズして実装したい」
「WordPress側の記事を更新したら、自動で静的サイトにも反映させたい」 そんな
悩みをずっと抱えていましたが、この方法を使えば外部サービスを使わずに、
jQueryだけでWordPressの記事を取得してHTMLサイトに表示することができます。
しかも、実装は意外と簡単です。
この記事では、WordPressの投稿記事をHTMLサイトへ自動表示する方法を、
できるだけ分かりやすく解説します。後半では、サムネイル画像の表示方法や
functions.phpの注意点など、実際にやってみないと気づけないポイントもしっかり紹介します。
WordPressの記事をHTMLサイトに表示する方法を長い間探し続け、
いろいろ試してきました。ですが、どれも決定打に欠けていました。
まずはその代表例を紹介します。
Google Feed API を利用する方法（過去の定番）
かつてブログのRSSフィードを扱う方法としてよく使われていたのが、
この「Google Feed API」。しかし残念ながら、2017年1月11日でサービスが廃止され、
現在は使えません。
FeedWindを使う方法（外部サービス）
ウィジェットコードを貼り付けるだけでRSSを読み込んで表示できる便利なサービスでした。
実装も非常に簡単でしたが、 表示されるコードが長くて管理が面倒 広告が表示される
ようになった。 無料で使うには制限がある 登録制になった などの問題があり、
サイトのデザインにも合わず採用を断念。
jQueryでRSSを読み込む方法（軽量）
最終的にこのjQueryを利用した方法が一番シンプルでした。
外部サービスに依存しないカスタマイズしやすい。表示は自由に調整可能。
ただし欠点が一つありました。サムネイル画像が表示できない。
そこで、「サムネイルも含めて表示する方法がないか？」と試行錯誤し、
最終的に完成したのが今回紹介する方法です。
ここからは実際の手順を説明します。
基本的にはjQueryを使ってWordPressのRSSフィードを読み込み、
HTMLに出力する仕組みです。 やることは次の8ステップです。
WordPressには標準でRSSフィード機能が備わっています。通常は以下のようなURLになります。
https://あなたのサイトURL/feed/もし分からない場合は、以下のサイトですぐに確認できます。
https://berss.com/feed/Find.aspx ↗
以下の2つのファイルを使用します。
こちらからダウンロードできます。 ➡ rss.zip（サイズ：1.05KB）
※ rss.jsは最新版2025.10.11です。
rss.js をテキストエディタ（TeraPad等）で開き、WordPressのRSSフィードURLに書き換えます。
変更前：
url: ‘http://www.example.com/blog/feed’,
変更後（例）：
url: ‘https://あなたのサイトURL/feed/’,
※ ここには「1」で調べたRSSのURLを入れてください。
rss.cssの内容を、そのまま自分のHTMLサイトのCSSファイルにコピペします。
コピペが終われば、rss.cssは削除してOKです。
WordPressの記事を表示したいHTMLファイルの内に以下を追加します。
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="js/rss.js"></script>※ rss.js を「js」フォルダに入れている場合の例です。
記事一覧を表示させたい位置に、次のタグを追加します。
<div id="feed"></div>これでひとまず、RSSの記事（タイトル・本文の一部）がHTMLに表示される状態になります。
※6.までは以前の記事で説明したことと同じです。→（記事参照 2017年1月20日）
記事中のテキスト文だけの貼り付けだったら以上でOK。
ここまでの手順では記事タイトルや本文は表示できますが、
サムネイル画像（アイキャッチ画像）は表示されません。
これは、WordPressのRSSフィードにはデフォルトで画像が含まれない設定になっているためです。
そのため、WordPress側の設定を少しだけ変更します。
WordPressテーマ内にある functions.php に以下のコードを追記します。
functions.phpの場所はブログテーマ内。
/wp-content/themes/テーマ/functions.php
function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '
<div>' . get_the_post_thumbnail($post->ID) . '</div>
' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail')これで、RSSフィードにサムネイル画像も含まれるようになります。
※ functions.php を編集するときは必ずバックアップを取ることをおすすめします。
記述ミスをするとサイトが表示されなくなる場合があります。
ここまでに編集したファイルをアップロードします。
※ アップロードの際はファイルの置き場所を間違えないよう注意してください。
サムネイル画像が異常に大きくなる
RSSフィードにサムネイル画像を含める設定を行った後、HTMLサイトに貼り付けた画像がやたら大きく表示されることがあります。
原因は、functions.php 内でサムネイルサイズを固定指定している場合です。
set_post_thumbnail_size(500, 400, true);この場合、画像が500×400ピクセルで強制表示されるため、大きく見えてしまいます。
functions.php の指定を変更して、HTMLサイトに合わせたサイズに調整します。
例：
set_post_thumbnail_size(150, 150, true);WordPress管理画面のダッシュボード > 設定 > メディア設定
にあるサムネイルサイズも関係します。
functions.php にサムネイルサイズの指定をしない場合、こちらの設定が優先されます。
functions.php の一部を変更して、メディア設定で決めたサムネイルサイズを使用することも可能です。
例：
get_the_post_thumbnail($post->ID, 'thumbnail')こうすることで、オリジナル画像ではなく、設定したサムネイルサイズで表示されます。
サムネイルを左側に配置したいという要望がある場合は、CSSでfloatを指定することで対応できます。
ダウンロードファイル内のCSSもそのように更新済みです。
この記事では、WordPressの投稿記事をHTMLサイトに自動表示させる方法を紹介しました。
ポイントは以下の通りです。
これらの手順を踏めば、外部サービスに依存せずに、WordPressで更新した記事が自動でHTMLサイトに反映されるようになります。
サムネイルの配置やスタイルはCSSで自由に調整可能です。
HTMLサイトに貼り付けた記事の見た目を、自分のサイトデザインに合わせてカスタマイズしてください。
2018年11月14日
HCZ.JP（ホームページ）トップページをプチリニューアル
プチリニューアルとは、
ホームページのフッター部分がイマイチ中途半端な感じだったので、
アドセンス（関連コンテンツ ユニット）を、追加しただけのこと。
Google AdSenseにはカスタマイズ法がちょっと載ってますが、
当HPでは使えそうもないので、バックグラウンドだけ変更しました。
しいて言えば、
広告どうしのマージンをもう少し広くしたいのですが、
アドセンス側のカスタマイズじゃ無理そう。
関連コンテンツ系の記事は、過去にも記事ってるので、
気になる方はそちらもチェックしてくんなましょ。
あ！
関連コンテンツユニットを実装したことで、
広告費が増してる。ｳｯｼｯｼｰ
しまい
2017年1月12日
Categories | ホームページ ブログ（WordPress) SEO
昨日からホームページに貼り付けたブログ（rss）が表示されなくなった。
どう言うことかと言うと、ワードプレスの最新投稿記事を断片的に抽出し、
ホームページ（html）に自動表示させていたものが表示されなくなった。
この手法は「Google Feed API」を利用することで可能になるのですが、
どうやらその提供が中止されているっぽいです。
去年もこんなことがあったのですが、
その時は確か1週間程で何事もなく表示されるようになりました。
メンテナンスか仕様変更でもあったんでしょうかね。
今回も1週間程様子を見て、それでも非表示のままであれば、
ページ（html）に何かしら手を加えようと考えています。
追伸
ネット検索してみたら「Google Feed API」は2017年1月11日をもって終了したらしい。
よって、こちらの方法をお試しください。
2016年11月17日
Categories | ホームページ
Googleドライブでアンケートを作りホームページに貼り付ける方法 応用編
回答（ライブ回答）をグラフ化し、ホームページ（HTML）に貼り付ける
Googleドライブのフォームでは、アンケートを作成しホームページ（HTML）に埋め込むことは
出来ますが、集計された回答（ライブ回答）をHTMLに貼り付けることはできません。
そこで、Googleスプレッドシートを利用してグラフを作成し、タグ化（iframe）したものを
ホームページ（html）に貼り付ける方法を説明します。
Googleスプレッドシートってなんぞやぁ？
Googleドライブ内にあるツールで、表計算エクセルみたいなものです。
小難しいものではありません。
まず作成したアンケートフォーム編集画面を開きます。
最上部「質問・回答」のボタンの「回答」をクリック。
円グラフが表示されますが、右上の「スプレッドシートアイコン」をクリック。
「作成」をクリック
コレだけで、アンケートフォームと紐付けされたスプレッドシートが作成されました。
作成したスプレッドシートを開きます。
アンケートフォームのデータがインプットされている。
ツールバー → 挿入 → グラフをクリック
グラフエディタがオープン 左下の「挿入」をクリック
グラフが作成されました。このグラフのタグを生成します。
右上の三角「▼」をクリック
「グラフを公開」をクリック
「埋め込む」をクリック
注）「公開」のボタンを押さないとタグは生成されない。
タグ（iframe）が生成されるので、これをホームページ（html）にコピペする。
コピペしたページは、サーバーにアップしなくてもオフラインで確認できます。
ライブ回答のグラフなので、回答が増えるつどグラフもオンタイムに更新されます。
追伸
重複投票を防ぐ機能を設定すると、 Google へのログインが必要になります。
多くの回答を得たいがためのアンケートが、Googleアカウント（gmail）を取得した、
特定の人のみが回答できるアンケートになってしまいます。
いったい日本にはどれだけgmailのシェアがあるのか？興味あるところですね。
2016年11月13日
Categories | ホームページ
放置プレイしていたリサーチカテゴリのリニューアルを行うため、
ヨサゲなアンケートツールが無いものかと探していたらところ、
「Googleドライブ」内の「フォーム」が使えそうだったので、当サイト（ホームページ）
に導入してみた。
「Googleフォーム」の設定方法 備忘録です。
※GoogleドライブはGmailアカウントを取得すれば、必然的にくっついてくるサービスです。
Googleドライブ：https://drive.google.com/drive
で、まずログインする。
左上の新規 → その他 → Googleフォームを選択（クリック）
Googleフォームの使い方ガイドが表示されますが「スキップ」しましょう。
すると、まっさらなフォームが表示されます。
※ 以前はテンプレートを選択する画面が表示されていたようですが、現在はこのようなページが表示されます。
一つのフォームには幾つもの質問が作れますが、今回は1つの質問で回答を5択用意し、
その内3択には画像を付けました。
※ 編集画面の最下部の右に「必須」のスイッチがあります。これをオンにしておくこと。
出来上がったらプレビューで確認してみる。
プレビューボタンは右上の目玉のアイコン。
プレビューするとこんな感じ・・・
プレビューの「送信」ボタンを試しにクリックしてみると、どう回答結果が表示されるか
確認できる。テスト回答は一括でも簡単に削除できるので、公開時にはクリーンにしておく。
確認を終えたら最後に編集画面上部右にある「送信」ボタンをクリック。
3つの項目があるのだが、
1.アンケートを告知したい方にメールを送る
2.アンケートのＵＲＬ
3.アンケートをHTML（ホームページ）に貼り付けるタグ
必要に応じて利用する。使わなければ「キャンセル」で閉じる。
次回は
「Googleドライブでアンケートを作りホームページに貼り付ける方法 応用編 その1」
を説明いたします。
2016年9月15日
Categories | ホームページ
サーバーのメンテナンスを行うため、実施中はホームページが表示されません。
と、レンタルサーバー会社から連絡がありました。
■メンテナンス日時
2016年9月15日(木) 午前01時00分 ～ 午前06時00分
[2016/09/15 02:30] 作業が完了いたしました。ご迷惑をおかけし申し訳ございませんでした。
最近良くホームページが表示されないことがありましたが、
メンテすることにより、その症状が解消されますかね。
困ったもんだ。
2016年8月10日
Categories | ホームページ
ホームページ（HCZ.JP）が100万アクセスに到達しました！
11年掛かりました。
ってか、11年間も良く続けられたと我ながら関心。
緩やかではありますが、右肩上がりに推移しています。
そして現状の推移だと、200万回に到達するのは2020年と予想される。
しまい
2016年7月30日
何故この時期に解析（アクセス）レポートを作成したのかと言いますと、
いよいよ来月辺りにホームページ（HCZ.JP）のアクセス数が100万に到達します。
そこで過去を振り返り、更新情報（WHAT’S NEW）を元に記録に残しておこうと思いまして。
そして序に「YouTube（HCZ TV）の解析レポート」も作成したって訳なんです。
HCZ TVは、今のとことろ飛びぬけた人気動画がないので視聴回数の伸びも低迷。
初投稿（2012/10/29）から4年掛けてやっと、先月1万円の広告収入をゲットしまた。
ドメインの更新とレンタルサーバー代に使っちゃいましたけど。
こちらの視聴回数は、来月30万に到達予定。
両リンクは当ブログのサイドバー下に作りました。
ウェブサイト（HCZ.JP） アクセスレポート / YouTube チャンネル解析レポート
どちらにせよ、これからも飽きずにはぐくんでいこうと思います。
しまい
2016年6月16日
Categories | ホームページ ブログ（WordPress) DW Question Answer
「DW Question Answer」のネタは何回目か忘れましたが、
こんなことも出来るので紹介しておきます。
DW Question Answerの質問記事を自動的に抽出し、
ホームページ（トップページ等）に貼り付けする方法です。
どう表示されるかは当サイトトップページをご覧ください。
HCZ.JP：https://www.hcz.jp/ ↗
「Google Feed API」を利用した手法でしたが、
2017年1月11日をもって廃止されました。
↓
よって、こちらの方法をお試しください。
↓
