ダウンロードカテゴリ 全40ページをレスポンシブに更新
2016年4月25日
Categories | ホームページ
ダウンロードカテゴリ内の全ページをレスポンシブに更新しました。
ダウンロードトップページは数ヶ月前にレスポンシブ（モバイル対応）に更新してましたが、
残り40ページを作り直すのは大変な作業でした。
当サイト（HCZ.JP）のレスポンシブ化は、残す所リサーチとリンクのみ。
その前に新たなコンテンツを立ち上げよと計画しています。
でもいつになることやらって感じ。
ホームページ
ブログ（WordPress）やホームページにGoogleアドセンス広告を設置する方法
2016年2月27日
Categories | ホームページ ブログ（WordPress) SEO
ブログ（Wordpress）やホームページに、Googleアドセンス広告を設置する方法を、
図解入りで簡単に説明します。
1. Google AdSenseにサイトを登録
2. 広告のスタイルを決めてコードを取得
3. ブログ（Wordpress）やホームページに所得したコードを貼る
4. 広告を設置したことをAdSenseに知らせる
5. 承認されると広告が表示される
※ 今回Google AdSenseのアカウント取得ははしょります。
1. Google AdSenseにサイトを登録する手順
Google AdSense にログイン
①. 右上の歯車マークから
②. [設定]をクリック
③. 左メニューの[サイト管理] をクリック
④. ドメイン（URL）を入力して[サイトを追加] をクリック
注）「自分のサイトのみ自分の広告コードの使用が許可されています」にチェックを入れる
⑤. 左メニューの[アクセスと認証] をクリック
注）チェックを入れておかないと、後で通知が届き・・・
「このたびサイトの認証機能と管理機能を統合しました。つきましては、設定に誤りがないかご確認ください」
と、設定変更を促される。変更後は、48 時間以内に反映される。
このチェックボックスにチェック入れるのは必須。
2. 広告のスタイルを決めてコードを取得
Google AdSense にログイン
①. [広告の設定] クリック
②. [新しい広告ユニット] クリック
名前： 適当
広告サイズ： オススメは、カスタマイズしやすい「自動サイズ（レスポンシブ）」
「保存してコードを取得」
広告ユニットは取得後でも簡単に変更できるが、広告サイズは変更出来ない。
3. ブログ（Wordpress）やホームページに取得したコードを貼る
広告ユニットで取得したコードをページに貼り付ける（コピペ）。
必須なことは、トップページ（サイトの最上のページ）に貼る。
・Wordpressがトップページの場合、取り合えず最新の投稿記事内か、
（ビジュアルじゃなくテキストページでね）
サイドバー（ウェジェット）に取得コードをコピペ。
・ホームページの場合、ドメイン/index.html に。
仮に下層のページに設置すると、初期設定中はAdSenseが認識してくれない。
4. 広告を設置したことをAdSenseに知らせる
①．右上の歯車マークから設定を選ぶ
②．アクセスと認証のサイトの認証をクリック
③．広告掲載先のURLを記入（「/」スラッシュなしのドメインだけを記述）
④．「送信」をクリック
数分で確認され、その旨の内容が画面に表示される。
登録申請の作業は以上です。
後は待つだけ。
この時点で、広告はまだ表示されません。
5. 承認されると広告が表示される
２日後、登録申請が承認されたことのメールが届く。
「 AdSense 広告掲載に伴うウェブサイト承認完了のお知
設置したページを確認すると、無事広告が表示された。
しまい
HCZ.JPは10周年を迎えました
2015年10月25日
Categories | ホームページ
「HCZ.JP」は、2015年10月25日に１０周年を迎えました。
設立のきっかけは、メモっていたパーツのお小遣い帳（KAKAKU-LIST）を,WEBに
乗せ換えたことでしたが、色々とコンテンツも増え、１０年間も良く続けられたと
思います。
いよいよ来年あたりに、念願の100万アクセスを突破しそうで、
何かしらイベント的なことを出来ればいいかなーって考えています。
今後とも「HCZ.JP」をよろしくお願いします。
ホームページの表示を高速化・最適化に取り組んでみました
2015年9月13日
ここのところ、ホームページの表示を高速化・最適化に取り組んでます。っていうか、
色々な方法があり過ぎて、ど壷にはまりまくってます。まずはブログ（ワードプレス）
から取り組み、以前に記事りましたが、ある程度プラグイン使えば簡単にやっつけられ
ました。で、今回はホームページ(html)を手掛けてみました。
高速化・最適化の必須ツールとして、
PageSpeed Insights
を参考にやっつける。 備忘録です。
ブラウザのキャッシュの設定
圧縮を有効にする
画像の圧縮（ロスレス圧縮：可逆圧縮）
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
JavaScript を縮小する・CSSを縮小する
HTML を縮小する
サーバーの応答時間を短縮する
■ 圧縮を有効にする
下記を「 .htaccess 」に記述。
AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
■ 画像の圧縮（ロスレス圧縮：可逆圧縮）
ロスレス圧縮とは？データの欠落がまったく起こらない圧縮方式。圧縮された画像は、
圧縮前のデータを完全に復元できる。
利用ツール ： kraken.io (https://kraken.io/web-interface)
ウェブ上で圧縮・ダウンロードする。jpg/gif/pin 圧縮可
■ スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
「レンダリングを妨げる JavaScript を削除する」の対処
head内「 <head> ～ </head>」の JavaScript を </body> の直上に移動させる。
「CSS の配信を最適化する」の対処
複数のcssを出来るだけ少数にまとめる。
■ JavaScript を縮小する・CSSを縮小する
PageSpeed Insights で分析した結果には、最適化された画像、JavaScript、CSS リソース
がダウンロード出来る。それをサーバーにアップするだけ。
■ HTML を縮小する
PageSpeed Insights では、最適化された「HTML」は作ってくれない。ケチッ
色々ググッみたけどヨサゲなものがない。いつも使っているホームページ制作ソフト
Dreamweaver（ドリームウェーバー）CS3
で簡単にやっつけられた。
ツールバーのコマンド → ソースフォーマットの適用 →
Ctrl+Ａ（全てを選択） → Shift+Tab（左揃え）
※ ソースコードをキレイに並べ替え、左側の余白をなくす。
無料のホームページ制作ソフト「 Expression Web 4 」でも同じようなことができるので、
ツール → HTMLの最適化
お試しあれ。
■ サーバーの応答時間を短縮する
Google 詳細
Google のテストでは、お使いのサーバーは 1.6 秒で応答しました。サーバーの応答時間が遅くなる要因はたくさんあります。サーバーが多くの時間を費やしている箇所を監視し、測定する方法については・・・
日によってサーバーエラーが連発することが。
当方が利用するXREAサーバーの回線が込み合うと、消化不良的な症状になる。
思い切って別サーバーに越してみたら、エラーなくなりサクサク。
XREA内でのサーバー移動・移行の手順 備忘録
しまい
ホームページ（HCZ.JP）をレスポンシブwebデザインに更新
2015年3月1日
Categories | ホームページ
去年の秋ぐらいからレスポンシブwebデザインの勉強を始め、
試行錯誤し、何とか見れるようにまでなってきたので、
本日レスポンシブへと更新しました。
自分のスマホ（Android）では確認しましたが、iPhoneでは未確認。
なので何か不具合等がありましたらお知らせください。
また微調整が必要なところも数箇所発見したので、修正し次第
今度はほったらかしていた「HCZ TV」のリニューアルに着手予定。
ホームページ（HCZ.JP）をリニューアル 2015
2015年1月1日
Categories | ホームページ
もうディスプレイも横長が当たり前になってきたし、スマホ・タブレットで
ネットする方もかなり多くなってきてる。そんなことで、ガラッとリニューアル
しました。まだトップページだけですが、基本的なコンテンツはそのままです。
大きな変更点は
・ ページ幅を800px → 960px
・ ドキュメントタイプをXHTML 1.0 Transitional → HTML5に。
・俺のＫはフラッシュ止めてジャバに変更。
・各SNSいいねボタンをフッターに設置。
いざアップして見ると、微調整しなければいけないところが結構あるので、
正月休みに仕上げる予定です。で、次にスマホ対応にレスポンシブにする予定。
ホームページをスマホ用に改良
2014年3月19日
スマホを買い替えして間もない私ですが、自分の作ったホームページを見てみたんで
す。そしたらトップページの下の部分にみょーにバックグランドが表示されてる。
でしょ。
パソコンでも、以前のスマホでもこんなことはなかったのですが、多分スマホ画面が
大きめの5インチになったことで、普段見えないところが出てきちゃんでしょうね。
そこで少し改良をしました。真ん中辺りのバックグラウンド（ゼファーの画像）↓を、
メインに使っているＢＧに差し替えました。この画像は４年半前に作ったもので、
お気に入りでしたが、今後どこかのページに使おうと思います。
あと私の新しいスマホには元々Flash Playerがインストールされていないので、
トップページの俺のＫが表示されません。近々インストールしなきゃ。
スクロールしながらページトップに戻るボタン
2013年12月15日
Categories | ホームページ
最近チョイチョイこんなページ見かけるので、自分のページに実装してみました。
でぇ、どんなホームページかと言うと、帯状に長いページ下に良く見かける、
「PAGE TOP」
コレをクリックすると、ページがスクロールしながらトップに戻るんです。
サンプルページはこちら↓
https://www.hcz.jp/what/2010.html
ちょっとした演出効果ですね。
どこかのサンプルページを参考にし、自分なりにカスタムしてみました。
超簡単に作れるので、あなたもやってみたら？
実装方法をココに残しておきます。
まず、head内にこう記述
<script type="text/javascript" src="gotop.js"></script>
それからページ一番下にこう記述
<a href="#header" title="ページトップ" onclick="Scr_updown();return false;" >↑PAGE TOP</a>
ただそれだけです。簡単でしょ。
gotop.jsは自分でファイル作ってください。
中身は
function Scr_updown() {
var Doc=document;
var Scr_y=Doc.body.scrollTop || Doc.documentElement.scrollTop || Doc.scrollY || 0;
Scr_y= Math.ceil(Scr_y*0.1);
scrollBy(0,-Scr_y);
if(Scr_y>0){
var Tout=setTimeout("Scr_updown()", 20);
}else{
clearTimeout(Tout);
}
}
TeraPad（フリーソフト）など使って上記をコピペし、保存する時ファイルの種類を
「JavaScript」選択し、ファイル名を「gotop.js」にして保存するだけです。
それからリンク先「#header」は自分仕様に変更してください。
LightBox風にテキスト文を表示させるModalbox(モーダルボックス)
2013年11月23日
Categories | ホームページ
当サイト（HCZ.JP）では、画像を拡大する演出としてLightBoxを使用しています。
これは画像に関しての動作であり、テキスト文でも同じような表示が出来ないもの
かとググッてみたら、ヨサゲなものあったので実装方法等紹介します。
あ！その前にLightBox風（背面をグレーアウトさせて画像などを表示）みたいな
表示法をモーダルウィンドウって言うこと、皆さん知ってました？
私は今まで知りませんでしけど（汗）
ライセンス｜Open Source
ダウンロードした圧縮ファイル( jquery.modalbox-1.5.0.zip )を解凍します。
現状配布は1.5.0バージョンです。
まずhead内に下記の３行記述
<head> <link rel="stylesheet" href="css/jquery.modalbox.css" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.modalbox-1.5.0-min.js"></script> </head>
あとは下記をそのままコピペして、文字の変更をして下さい。
<a class="openmodalbox" href="javascript:void(0);" title="実装方法"> 実装方法 <span class="modalboxContent"> 実装方法はこうだ！！ テキスト文字をここに記述するのだ！ </span> </a>
小難しいことでもないので、簡単に出来ると思います。
もしうまく動かない場合は、先ほど説明したhead内３行の href=”×××” と
sec=”×××” チョメチョメの部分（ファイルの置いてある場所）の記述を間違えてる
かも。再度確認して下さい。
ボックス表示の設定を少しいじってみました。
参考まで
Modalbox(モーダルボックス) 設定方法
背面グレイアウトの明暗
js > jquery.modalbox-1.5.0-min.js
上記ファイルをテキストエディター（TeraPadがオススメ）等で開き、
下記内容の２行目３箇所の数字を変更する。
black:"background-color:#000; filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;"
デフォルトは「40 / 0.4 / 0.4」に設定してあるが、「4」の数字を大きくすると
暗くなり、少なくすると明るくなる。3箇所とも同じ数字に。
どこに記述されているか分からない場合、「ctrl + F」 を押すと検索窓が出現する
ので、「black:”background-color:#000;」で検索する。
ボックスの横幅サイズ
css > jquery.modalbox-basic.css
56行目 デフォルトは600px
div#modalBox {
width:600px; /* default wide */
}
ボックス内の白ベース 内側の余白
css > jquery.modalbox-skin-precious-white.css
７行目 デフォルトは15px
div#modalBox div#modalBoxBody div.modalBoxBodyContent {
background-color:white;
padding:15px;
}
つづく
facebookページにページタブ「俺のK」を追加
2013年9月20日
ホームページのコンテンツ「俺のK」を、フェイスブックページ内にも作りました。
フェイスブック側にちょっとした制限があり、全部を移植ともいかず、元ページの
ヘッダー付近をコピペしました。”プチ俺のK”とでを言っておきましょ。
入り口はFBページのページタブをポチっとすれば、そのページに飛びます。
あ！ 「俺のK」のページタブはフェイスブックにログインしてないと出現しない
みたいです。何でか分かりませんけど。
FBに設置したプチ俺のKは、いちお現在掲載中（100数十台）のページに
アップデート情報から全てリンクしています。
