ホームページ
2022年7月3日
ホームページ（トップページ）からFacebookのフレーム（小窓）を削除
ホームページからFacebookフレームを削除した理由としては特になく、
ただちょっとページの変化が欲しかっただけ。
それとパソコンで観覧すると、ちょっとレイアウトが崩れていたこともありますかね。
ですがSEO的に良いこともありました。
それはwebページの表示スピードが少し早くなりました。
表示速度を計測するには、「PageSpeed Insights」がオススメです。
今回の件を例に、実際にPageSpeed Insightsで当ホームページを診断しました。
Facebookフレームを削除する前
Facebookフレームを削除した後
微妙ではありますが表示スピードが向上しました。
これだけのことですからSEO効果はそう期待できないでしょうが、
何事もコツコツと言うことで。
しまい
2019年1月28日
Categories | ホームページ ブログ（WordPress) SEO
WordPress（ワードプレス）の投稿記事を、
ホームページ（html）に自動貼り付ける
外部サイトのこの手のサービスを利用せず、独自にカスタマイズできないものかと、
長きににわたりモヤモヤしてました。
そして、この度やっとこの問題を解決することが出来ました。
小難しい説明は後にし、
WordPressの投稿記事を、自動的にホームページ（HTML）に表示させる方法
を説明します。
その前に、過去にこの手の小技的な構築を行なった例をズラズラッと紹介します。
「Google Feed API」を利用した方法。
「Google Feed API」は2017年1月11日をもって廃止。
実装が超簡単な「FeedWind」でしたが、記述するコードが長すぎ。
しかも、広告表示されるようになり、登録制になる。
「jQuery」を利用した、シンプルなコードで実装可能。
でもサムネイルが表示されないのがネック。
これからが本題です。
WordPressの投稿記事を、自動的にホームページ（HTML）に表示させる方法
「jQuery」を利用します。
超簡単に設置できるよう、サラッと解説します。
1. ワードプレスのRSSfeedのURLを調べる。
簡単な方法は、こちら↓で1発検索できます。
https://berss.com/feed/Find.aspx
2. 2つのファイル（ rss.css ・ rss.js ）を作成。
当サイトからダウンロードして下さい。
↓
rss.zip size 1.05KB
3. rss.jsをテキストエディタ（TeraPadなど）で開き、下記を変更する。
url: ‘http://www.example.com/blog/feed’,
↓ ↓
url: ‘ 1.で調べたURLです。 ’,
4. rss.cssの中身を自分で作成したホームページのスタイルシートにコピペ。
コピペしたらrss.cssは用済みなので削除。
5. 貼り付けたいホームページ（html）のbody内に下記2行を記述。
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <script src="js/rss.js"></script>
6. 貼り付けたい場所に下記コードをペースト。
<div id="feed"></div>
※6.までは以前の記事で説明したことと同じです。→（記事参照 2017年1月20日）
記事中のテキスト文だけの貼り付けだったら以上でOK。
7.はサムネイル画像も表示させる説明です。
7. 「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');
8. 更新したファイルを全てアップロードする。
アップロードする際、ファイルを置く場所を間違えると動かないので要注意。
以上でホームページに投稿記事を表示できたと思いますが、
今回の設定を小難しく、注意事項などを含め、私的に備忘録します。
表示が上手くいかなかった時など、参考にして下さい。
概要
WPの投稿記事（最新記事）を「html」に貼り付ける方法とは・・・
そもそも殆どのブログ等には「RSSフィード」が備わっていて、
こやつはブログ記事を簡略したようなページ。そのRSSから記事や画像情報を
「jQuery」を利用して抽出し、「JavaScript」ファイルで書き出す。
「jQuery」は5.の説明です。「JavaScript」は3.の説明です。
WPのデフォルトだと、RSSにはアイキャッチ（サムネイル）画像が含まれない
設定になっています。そこで「functions.php」ファイルに、
「RSSにはサムネイル画像も含む」と、指示文を記述します。
その作業が7.です。
ところで「functions.php」ファイルとは、なんぞや？
WPでは最重要ファイルであり、絶対的な司令塔みたいなファイル。
だから、少しでも誤った記述をすると、ブログが吹っ飛んでしまう。
全く表示されなくなってしまいます。いじるときは細心の注意が必要であり、
バックアップは必須です。
私が今回の設定で誤ったことをあげますと、
htmlに貼り付けた記事のアイキャッチが異常にデカくなってしまった。
原因を追究した結果、「functions.php」にこのような記述を見つけ、
set_post_thumbnail_size(500, 400, true);
↓ サイズ変更をしました。
set_post_thumbnail_size(150, 150, true);
そしたらいいサイズに表示されました。
でも、アイキャッチ（サムネイル）のサイズ設定はダッシュボードにもあるけど。
ダッシュボード＞設定＞メディア設定 サムネイルサイズ幅150、高さ150
では、「set_post_thumbnail_size(150, 150, true);」を削除してみました。
そしたら貼り付けたサムネイルがまたデカくなった。
これらを検証した結果、
「functions.php」にサムネイルサイズの指定をしてない場合、
ダッシュボード内のメディア設定（サムネイルサイズ）が優先される。
そして「7.」で記述した一部を変更すると問題なく表示される。
get_the_post_thumbnail($post->ID)
↓ 記述変更する
get_the_post_thumbnail($post->ID, ‘thumbnail’)
※オリジナル画像ではなく、メディア設定のサムネイルサイズの画像を使うコード。
追伸 2019年1月30日
ホームページ（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 のネタは何回目か忘れましたが、
こんなことも出来るので紹介しておきます。
質問を自動的にホームページに貼り付けする方法です。
※ Google Feed APIを利用します。
ジャバファイルをテキストエディター（TeraPad等）で作るのですが、
小難しい説明すると話が長くなるのですっとばして、
下記リンクをクリックして「rss-qa.js」をダウンロードして下さい。
ダウンロードファイル → rss-qa.zip
解凍した「rss-qa.js」ファイルをテキストエディター（TeraPad等）で開き、
5行目の example.com を「DW Question Answer」のトップページURLに変更し、
サーバーの好きな階層にアップロード。注）文字コードはUTF-8で保存
var feed = new google.feeds.Feed("http://www.example.com/question/?feed=rss2");
8行目は貼り付けする質問数。36行目 (0, 70) は質問の文字数。
質問内容を貼り付ける場合、36行目の「title」を「contentSnippet」に変更する。
質問を貼り付けたいホームページに下記記述。
<script src="http://www.google.com/jsapi"></script> <script src="ファイルをアップしたディレクトリ/rss-qa.js"></script>
記述場所はどこでもいいが、オススメはフッターの一番下あたりかな。
質問を表示する準備は以上。
次にホームページの表示したい場所に下記記述。
<div id="rss-qa"><span id="feed">Q & A</span></div>
スタイルシート(css)は参考まで
#rss-qa {
font-size: 12px;
margin: 0 -12px 0 -10px;
width: 400px;
height: 152px;
padding: 0;
overflow-y: scroll;
letter-spacing: 0.04em;
line-height: 16px;
}
#feed ul li {
list-style: none;
margin: 4px 0 8px -36px;
padding: 0 12px 8px 30px;
border-bottom: 1px solid #cccccc;
line-height: 22px;
}
しまい
追伸
「Google Feed API」は2017年1月11日をもって廃止されました。
よって、こちらの方法をお試しください。
