半年間もの間このブログを更新することが出来ず申し訳ございませんm(_ _ )m

半年前に約束しました「3D6M」通り帰ってまいりました。

元ネタが分からないという方はクリリンの声で体が伸びる海賊が主人公の漫画をご参照くださいませ。

クリリンの声で分からない方は天空の城ラピュタのパズーの声でご判断下さい。

（問題はそこじゃない）

さてさて。前回自身のHP「使用者目線情報局」をレスポンシブデザインにしたということで話が終わっていたかと思いますが、それから半年の間はちょこちょこ記事を更新するのと、早くも新たなサイトを立ち上げておりました。

そうです。へっぽこ管理人の分際で二足の草鞋を履くつもりなのです。

その名も「住宅ローン.com」。

以前から住宅ローンに関わる様々な情報をまとめたいという想いがあったのですが、私のメインサイトである「使用者目線情報局」に載せるにはちょっとボリュームが多過ぎたので今まで諦めていましたが、今年の3月頃に一念発起しまして専門サイトを立ち上げました。

更新は月に一回、各銀行の金利情報が更新された段階で行うだけなので基本放置のサイトですが、そこそこ役立つ情報を載せることができているかと思いますので是非一度足を運んで頂ければ幸いです。

へっぽこ奮闘記についてのブログなのですが、今回はクリリンに時間を取ってしまったのでそれはまた次回！

ここまでご覧頂きありがとうございました。

■使用者目線情報局の最新記事

・ゆで卵を作るのに便利なエッグタイマー

・話題のiQOS

これらの実体験レビューをしております。皆様のご来場お待ちしております♪

以前「モバイルフレンドリーなサイトを目指す」にてご紹介させて頂きましたが、現代ではパソコンだけでなくスマホからも見やすいホームページ作りが必要不可欠です。

方法は何個かありますが、単一のファイルだけど、ページを読み込む機器の画面サイズに合わせて表示するレイアウトを制御して最適化する方法、というのが望ましいです。

これを「レスポンシブデザイン」と言います。

この方法ですと、複数のページを用意して読み込む機器に応じて開くページを変更させる方法と異なり、更新するときに一つのファイルを更新するだけで済みますし、検索エンジンやアクセス解析で

レイアウトが若干異なるだけで同じ内容のURLが重複して出現するのを防ぐことが出来ますので、Google先生も推奨しております。

私のサイトでもこのレスポンシブデザインを目指そうということで、過去記事のとおりGoogleが提供するモバイルフレンドリーテストを無事乗り切りましたが、一部目を背けている部分がありました。

それをちょこちょこ時間があるときに直してはいたのですが、一つだけ完全に諦めかけていた部分がタイトルにあります「ナビゲーションバー」になります。

ナビゲーションバーとは、通常ホームページの上部にありますメニュー欄（製品情報やお問合せなど）のことで、私のサイトでは元々パソコン閲覧向けに作成した画像を5ヶ並べて表示する形で対応していたので、スマホで開くと画面が小さくなりますから勝手に改行されてメニューが大変なことになってしまっていました。

モバイルフレンドリーテストを受けた際、スマホから開いた場合はこの画像を全て表示しない形にして応急対応しており、結果今までスマホからのアクセスからですとナビゲーションバー不在で非常に不便な状態となってしまっていました。

（サイドバーの一部抜粋記事からたどって行ったりすれば一応全記事見れましたが・・・笑）

これを直す方法を探してみましたが、ドロップダウンするなどの動的なシステムを導入する方法が多く出てきますね。でも、私自身がサイト閲覧をする際に動的なページがあまり好きではないといった完全な私情により、リストを使用して作成する方法を取りました。

私が実施した方法・・・

【パソコンでの閲覧向け】

①ヘッダー幅100％の<ul>リストを作成

②CSSにて、各<li>の幅を、メニューが5ヶなので20％に設定し、HTML欄にはそれぞれメニューの文章とリンクを設定

③CSSを活用して、マウスのポインタがメニューに被ったときに色が若干変わるように（これはオシャレ感を出す為です。。。）

【スマホでの閲覧向け】

①メディアクエリにて、画面が480px以下になった時に各<li>の幅が100％になるように記述

②あとは上記のまま

これにより、目を背け続けてきましたナビゲーションバーもレスポンシブデザインとなり、スマホ閲覧でも記事が検索しやすくなりました。

ただ、スマホ版でのレイアウトはまだ気に入っていないところもありますので、まだまだ修正していきたいと思うドコえもんなのでした。

コツコツ着実に記事を増やしております「使用者目線情報局」にも是非お立ち寄りください！

最新の記事は「おふろの防カビくん煙材」についての実演＋レビューです。

サイト名での検索か、プロフィール欄のホームページリンクからアクセスして頂ければ幸いです♪

リンクフリーですのでお気に召して頂ければ是非ご紹介下さいませ！

本日は「サイト内検索」についてお話させて頂きます。

サイト内の記事数が増えてきた場合、いくらカテゴリー別に分けていてもユーザーの皆様方が欲しい情報を簡単に探し当てることは難しくなってきます。

例えあいうえお順に並べたとしても、ユーザーが考えるキーワードとサイト管理人が考えるキーワードが若干でも違っていれば、探し当てるのは困難になりますよね。

そんな時、GoogleやYahooの検索エンジンのようにサイト内の記事をキーワード入力で簡単に検索出来れば便利ではないでしょうか？

企業さんのホームページなどではよくそういった機能が付いていたりしますので、素人のサイトでも使えないかなぁと考えたのがきっかけで調べてみました。

（・・・探し当てるのが大変なほど記事数が多いわけでもないくせに）

有料サービスではなく、お小遣い制サラリーマンとしては勿論無料サービス一択です！（笑）

結果、無料ですとGoogleかYahooが提供しているサービスがヒットしました。

それぞれ機能に違いがありましたので、一概にどっちの方が良いとは判断しにくいところがありましたが悩んだ末、Google先生の「カスタム検索」を選択！

Yahooなら無料でも広告が表示されなくて魅力的なのですが、ここまでGoogle先生にお世話になりまくってますので、義理堅い日本男児としてはGoogle先生を裏切れません。

ちなみに使い方は簡単です。

簡単に必要事項を入力したら、後はいくつか用意されているレイアウトを選択してコードを取得し、そのコードをサイトのHTMLにコピペするだけ。

これだけで自身のホームページに検索機能が追加されます。

レイアウトを選択したりカスタマイズするときも、画面右側にプレビューが出てきて実際にキーワード検索するとどのような動作をするのかまでアクティブに表示されますので便利です。

そんなこんなで前回の記事でご紹介しましたテキストエディタにて全ページのサイドバーに検索バーを追加しました。これでこれから記事をガンガン書いてもユーザーの皆様が記事を簡単に検索できるので安心です。むしろ検索しないと大変なほど記事を書けるのかが不安で毎日枕を濡らしております。

皆様に愛されるサイト作りを目指して今後も改善を重ねていきたいと思うドコえもんなのでした。

コツコツ着実に記事を増やしております「使用者目線情報局」にも是非お立ち寄りください！

最新の記事は「カーボンヒーター」についての説明と簡単な実験＋レビューです。

サイト名での検索か、プロフィール欄のホームページリンクからアクセスして頂ければ幸いです♪

リンクフリーですのでお気に召して頂ければ是非ご紹介下さいませ！

今回は「サイドバーの修正方法」についてお話させて頂きます。

ホームページのサイドバーに関連記事や人気記事を載せることで、特にパソコンからアクセスした場合に利便性が高まると同時に、他の記事にも興味を持ってもらうことにより滞在時間を長くする効果があるかと思います。

このサイドバー。全てのページにそれぞれ同じ文言で記述していくとなると、記事数が少ないうちならまだしも、記事が増えてくると更新するのにどえらい手間が掛かってしまいます。

というのも、例えばサイドバーに「新着記事」という項目があった場合、新しい記事を書いたらその記事の紹介とリンクを新たに貼ることになりますが、一つ一つのHTMLに直接記述していた場合、サイト内全てのページに同じ変更を記述しなくてはいけなくなるからです。いくらコピペしていったとしても、ページ数が膨大ですと大変な時間を要します。

私のホームページでも、全てのHTMLに直接記述する方式をとっており、最近までは地道にコピペしていました。

が！そろそろ面倒で限界だ！ということで簡単にサイドバーを修正する方法を調べてみました。

①コンテンツ（本文）とサイドバーを別々に作成し、フレームを使ってそれぞれを組み合わせて1つのページとして表示させる方法

⇒SEO的にアウト。これは問題外です。

②SSIやPHPなどのプログラミング言語を使用する

⇒ページがもっさり重くなったり、閲覧するメディアによっては表示に支障をきたすこともあるようです。そもそも、難しそうで素人には荷が重いです。。。

③テキスト置き換えエディタを使用し、修正したいHTMLを一括選択して、同じ部分を同じ内容にまとめて置き換えてしまう

⇒個人的にはこれがベストです！これならページは重くならないし、SEO的にも問題ありません。

現在、③の方法でサイドバーやヘッダー・フッターなどの共通部分を修正していますが、一つずつチマチマコピペしていた頃と比べて格段に作業が楽になりました。

作業時間も一分と掛からないのでお勧めですよー！

ただ、間違った形で置き換えてしまい後で後悔するのも怖いので、必ず全ページのバックアップを取ってから使用している、小心者（慎重と言って欲しい・・・）なドコえもんなのでした。

コツコツ着実に記事を増やしております「使用者目線情報局」にも是非お立ち寄りください！

最新の記事は「カーボンヒーター」についての説明と簡単な実験＋レビューです。

サイト名での検索か、プロフィール欄のホームページリンクからアクセスして頂ければ幸いです♪

へっぽこブログですが「ペタ」や「いいね」を付けてくれる方々に感謝です。ありがとうございます。

さてさて、今回はこのブログ自体に関係する内容のお話です。

衝撃的なタイトルで始まりました（そうか？）が、ホームページ運営の奮闘記を書かせて頂いている都合上、最近はブログ記事の末尾に自分のサイトへのリンクを張っていました。おかげさまで、以前よりも少しずつアクセス数が上昇傾向にあり、非常に嬉しく思っていましたが、本日ネットで衝撃的な記事を見つけてしまいました。

「ブログ記事で、毎回ホームページのトップページにリンクを張る行為は、現在問題なくても将来的には検索順位が下落するなど問題に繋がる可能性がある」

・・・マジっスか？！

サイトが外部よりリンクしてもらうことを「被リンク」と言い、自然にそれが増えていけばGoogle先生に評価して頂けます。そうすると、サイトの検索順位が上昇し、皆さまに記事を読んで頂けるチャンスが増えていくわけで、それ専門の業者さんが存在するくらいです。

ただ、悪徳業者パワーで明らかにおかしなリンクが大量に張られたり、自分のサイトにリンクを張る「自作自演」をすると逆に評価が下がったり、最悪ペナルティを受けて検索結果からサヨナラすることになることもあるようで細心の注意が必要になります。

私としてはただ、このへっぽこ奮闘記から自分のホームページの進化具合を皆様に見守って頂きたいのと、情報がお役に立てば嬉しいと思っているだけなので、そんなこたぁ気にする必要がありません。読者の皆様がアクセスしやすければそれでいいんです！

というわけでひとまず過去の記事全てのリンクを削除しました。

申し訳ございません。。。とりあえず長い物にまかれるのはサラリーマンの性でしょうか？

Google先生の評価に反映されなくするnofollow属性を使えば良いとのコメントがあったり、それもやめた方が良いとか書いてあったりで私は既にブロークンハートです。クリスチャン・スレーターが出ているのはブロークンアローなのです（ネタが古い）。

お手数おかけしますがプロフィールのホームページ欄からのアクセスか、「使用者目線情報局」で検索して頂ければ幸いです。

久しぶりにフラッド（あれはモーガン・フリーマンが主演だっけ？）が見たくなるドコえもんでした。

ということで、本日はひたすらホームページの記事を書いていました（泣）

いえね、別に遊びまくりたかったわけでもないし、記事を書くのも楽しみながらですからいいんですけどね。。。Google先生に気に入られるために当面は極力更新を頻繁に行うようにしたいところで、それを考えるとノルマに追われているみたいで精神的に休まらなかったり・・・

でも、会社の拘束時間が長いブラックなゼネコン業界（同業の方、失礼しました）ですから、平日や休日出勤日はあまり記事を書き進める気力が湧きにくいので、今日みたいな完全休日ですと絶好のチャンスでもあるんですよね。

情報サイトなので実物の写真を撮ってレビューしていきたいんですけれども、あまり頻繁に高い物を買えるほどのお小遣いは貰っておりませんし、コツコツ地道に更新していくしかありませんねー。

心の支えはアクセスしてくれるユーザーの皆様方です。多いときは数十人の方が覗いてくれているようで、それが一番嬉しいです。

当面の目標は一日平均3桁のアクセス・・・いえ、とりあえず50にしときましょう！（笑）

一歩ずつ着実にSTEPアップしていこうと思うドコえもんなのでした。

要約しますと・・・

パソコンでの閲覧向けに作られたサイトは、広い横幅を最大限生かすためにサイドバーなどを活用して見やすく・記事を選択しやすくレイアウトされています。また、文字サイズもパソコンで見た時に見やすい大きさに指定されています。

それをスマホなどの縦長で画面が小さい端末でそのまま閲覧すると、文字が読めないわ画面が見切れて縦に横にスクロールしながら読まなくてはならないので不便なわけですね。

メディアクエリとは、そういった問題を解決するため、そのページを開いた端末の画面環境に応じて、適用するスタイルを切り替える機能のことで、CSSに記述していきます。

例えば、横幅（Width）が480px以下であればこのスタイルを読み込みますよーと記述すれば、パソコンなどのそれ以上大きな画面では反映されないし、それより小さいスマホ画面などであれば反映されるわけです。

@media screen and (max-width: 480px) { p { font-size:10px } }

@media screen and (min-width: 481px) { p { font-size:14px } }

こう書けば、

スマホ・・・・480px以下なので文字サイズが10pxになる

パソコン・・・481px以上なので文字サイズが14pxになる

というわけですね。うんうん、ここまでは分かりますわ。

じゃあさっそくやってみますか！

・・・・・・アレ？全く反映されないぞ？？

何かアルファベットの打ち間違えでもあるのかと思って何度も修正してみるのですが、一向に反映される気配がありません。

こいつぁお手上げということで、もっと調査したいところですがその日は酒を飲んでバタンキュー。

自分のやりたい事がしたいから明日は会社サボってやるぜ！と言いながら出社するのが正しい会社の奴隷なのです。

翌日、帰宅後調べてみたら「ビューポートタグを設置しないといけかった」みたいです。

<meta name="viewport" content="width=device-width">

こういうやつですね。こいつが端末画面の幅に合わせる指定になりますので、これを忘れると反応しないわけなのです。前日1時間以上格闘して諦めたのに、こんな簡単なことが抜けてただけだとは・・・

まぁ世の中そんなもんですよね（悟ったように言ってみる）

試しに記述を終えたページをプレビューしてみて、ウインドウサイズを変更してみると・・・

反映されたー！やったー！！

それからその他様々なレイアウトを弄り、パソコン用とスマホ用のスタイルを設定してみてアップロード。因縁のモバイルフレンドリーテストを再受講してみました。

結果・・・合格！なんとかモバイルと仲良くなれたみたいです。

でも取り急ぎ合格したくて書き上げているので、自分のスマホでページを見てみたらまだまだ歪なレイアウトです。これを更に改良して、噂のレスポンシブデザインなサイトにしたいと思うドコえもんなのでした。（※1）

※1　とりあえず横文字を使って出来る男を演出してみたかったことは秘密です。

　　　というか改良しないと現状はかなりマズいレイアウトなのでまだまだ頑張らねばなりません

前回までは過去を振り返る記録でしたが、本日は「ほぼ」リアルタイムな記事となります！！

前回が12月末のお話なのに飛びすぎじゃね？というツッコミはやめましょう。

～先日～

アクセス数を増やすのであればスマホ対策は欠かせない、というような記事を読みましたので、遅ればせながら自分のサイトをスマホで見てみたら・・・

文字も画像も全体的に小さっ！！文字が変な所で改行されてる！？

調べてみると、PCサイトをそのままスマホで見ると、文章の右側に結構な空白が出来てしまうということで、私が何かしらを間違ったわけではなかったようです。

これ、なんと文字の背景に透明な画像を入れてやれば解決するとのこと。cssに

p , li { background-image:○○○;}　※○○○は透明な画像ファイル名（サイズは1pxでOK）

を追加してやれば・・・あら不思議！簡単に直ってしまいました。

これでぼくのサイトはスマホ対策バッチリだぜ！とか思って安心しきっていましたが、あるサイトの記事に、Googleが提供している「モバイルフレンドリーテスト 」をやればスマホ対策が出来ているかどうかが分かるとの情報があるではありませんか。

どれどれ、試してみるかいなということでアドレスを入力してGo！

・・・・・・フレンドリーじゃない！？

文字が小さいだのリンクが近すぎるだの罵詈雑言の嵐。。。まぁ確かにその通りよね（笑）

というわけでモバイルと仲良くなるために調査開始！

結果、ページのスタイル（レイアウト）を指定しているCSSファイルにメディアクエリを活用すれば解決するとのこと。ふーん、そっか。なるほどねー。メディクリね。はいはい。

なにそれ（どーん）

それからしばらく奮闘しまして昨日ようやくモバイルと仲良くなれたのですが、そのお話は次回に続きます。。。

今日は全国的に天気が悪かったようですね。私なんか寒くて涙が凍りました。嘘です。

【～2015年12月末頃のお話～】

ホームページを公開して検索エンジンにも申請をかけて・・・

他にも出来ることはないだろうか？ネットでお勉強したところ「ウェブマスターツール」に登録しましょう、ということでウェブマスターツールにアクセスしたら画面に「Google　Search　Console」と出てくるではありませんか。

幾らぼくの英語力が絶望的だとはいえGoogle（ウェブ）Search（マスター）Console（ツール）とは読まんわ！なめんなよ！

とか思っていたら、ウェブマスターツールが新しくなってサーチコンソールになったのね。アルファベットで打つのが面倒になったのでカタカナになりましたがお気になさらず。

初耳な方にご説明しますと、このサービスは自分のウェブサイトがGoogle先生からどのように見えているのかを教えてくれる便利なものなんです。

例えば、サイトの問題点やどのような検索キーワードで表示されたか、何回クリックされたかなどを教えてくれます。また、サイトマップを送信することで自分のホームページが検索エンジンにいち早くインデックスされ、結果としてアクセス数UPが期待できます。

※インデックスされないと、検索しても検索結果に出てこないのです

ホームページ運営者には必須のツールというわけですね。早速登録しましょう！これを使いこなせば私もバリバリのサイト運営者じゃー、やったるでー！

・・・？あー。うん。えーと、専門的な用語が多くて難しいね、コレ。。。

説明サイト見ながらちょっとずつ覚えていけば良いかな？大丈夫だよね？きっと大丈夫さ！

と自分を甘やかし、少しずつ学んでいくことを誓うドコえもんなのでした。

12月5日にようやく念願のホームページ公開までこぎ着けました。ただ、ド素人あるある勘違いですが、公開すればすぐにYahooやGoogleで検索して出てくるわけではないのですね！

検索エンジンでヒットさせるには、「登録」する必要があるんです。皆さま知ってましたか！（え？知ってる？マジで？）

ということで、まずはGoogle先生に登録することに（※1）。

登録方法は簡単です。まずはURLを入力して、「私はロボットではありません」にチェックを入れるだけ。会社のロボットではあっても戸籍上は人間なのでここは遠慮なくチェックを入れて構いません。

尚、ネットで「検索エンジン　登録」とでも検索すればやり方も登録ページも出てきますので、これからホームページを作られる方は公開後すぐに試してみてください。

続いてbingにも登録・・・しようと思ってたのに忘れてた！！今さっき登録申請しときました。笑

しばらくして検索してみると・・・フルネームを打てばすぐに出てきました！やったぜ！

ただ、ワードをちょろっと打ったくらいではまだまだ圏外か相当奥の方に出てくるんですね。これからの努力次第ですので頑張りたいと思うドコえもんなのでした。

使用者目線情報局にも是非お立ち寄り下さい！

※1　普段はYahoo愛用者なんですけれども、Yahooの検索はGoogle先生を使用しているということなので