Webマスターツールにサイトを追加する

今や検索エンジンとしてその名を知らない人の居なくなった Googleは技術力を以て知られもする処です。 なんとなれば検索エンジンを全世界のWebサイトに適用しようと思えば 途轍もないコンピュータパワーを必要とするからで それを制御し得ていることで技術者から注目される存在であるのです。

そのGoogleの凄まじいとも言えるコンピュータ資源は一般にも多く開放されており、 その一つが今回自己管理化にあるWebサイトの登録方法を紹介する Webマスターツール となります。 登録すればGoogleに蓄積された様々なデータが閲覧可能となり 以前本ブログに紹介したようなブログシステムの不具合なども知って対応が可能にもなります。

Webマスターツールに登録するサイト

Webマスターツールには自らが管理しているホームページやブログしか登録出来ません。 Webマスターツールと言うのはGoogleが検索エンジンを運営するに当たって 収集したデータの内、その管理するホームページに関する部分だけ垣間見せてくれるツールです。 他人のホームページのデータが見えてしまってはプライバシーの問題もありますし、 登録したホームページに関してはクローリングボット(検索エンジンデータ収集プログラム)の調整も可能ですから 悪用される可能性がないとも言えず実に都合が悪いからです。

今回は本ブログ運営者が本ブログとは別に 前世紀1999年から運営しているサイトをWebマスターツールにずっと登録しないままでいましたので、 そのサイト うさ犬ランド を登録試験に供したいと思います。

サイトを追加ボタンのクリックから開始

WebマスターツールはGoogleアカウントを所有していれば誰でも利用可能です。 Webマスターツール にアクセスして赤い なるボタンをクリックすれば下の図の様な画面に遷移するでしょう。

Twitterボタンの表示位置をデザイン的に調整してみた

ブログにソーシャルボタンを表示するのは当たり前になりました。 勿論本ブログにもソーシャルボタンを備え付けています。

備え付けているソーシャルボタン

本ブログに備え付けたるソーシャルボタンは以下。

  • Twitter ツイートボタン
  • Facebook いいねボタン
  • Google+ Plus One ボタン
  • はてなブックマーク ボタン

これらは全て提供元が別ですからサイズがバラバラで ブログに表示するとみっともないことになってしまいます。

文字(フォント)サイズ切替機能のブログへのjQueryを使った設置

普段ホームページの指導などを余所様にするときに 成るべく見る人のことを考えれば 文字(フォント)のサイズは切り替えられる方が好いですね、 などと言いながら紺屋の白袴、 己のブログにはその機能を今だ設置しておりませんでしたので 今回本ブログにも文字サイズを見る人の都合に依って 切り替えられるようにカスタマイズしてみました。

文字サイズ切替機能の現物確認

論より証拠、百聞は一見に如かずとも申します。 既に文字サイズ切り替え機能は実現していますので、 先ずは実際にどのような動きをするか試して貰った方が早いでしょう。 但し、お手持ちの環境に依っては想定通りの動きをしない場合もありますので あらかじめご了承下さい。

さて大変申し訳ないながらフォントサイズの切り替え用のボタンは 取敢えずのレイアウトの都合上今回は本ブログは左サイドメニューのず…っと下の方、 HP作成浜松TipsRSSリーダー登録 の間に 文字サイズ切替 と銘打って配置してあります。 右の図と同様のものが其処には配置されており、 それが今回設置した 文字(フォント)サイズ切替機能ボタン、大、中、小の3種になります。 孰れまたレイアウトの変更の際には ユーザービリティ上、画面上部に持って行く積りではいますが、 今はブログに設置を試みた、と言うことでこの不都合な位置になっています。

標準が小さ過ぎたWeb業界のフォントサイズ

ボタンを見付けられた方は…

Favicon(ファビコン)の作り方とブログへの設置方法

ホームページを開いたときに ホームページアドレスの左に小さな画像が表示されていることがあります。 これは Favicon(ファビコン) と呼ばれるものでFavorite icon(フェイバリット・アイコン)、即ち お気に入りのアイコンと言う意味の英語を略したものだと言われます。

本ブログのファビコン

勿論ホームページだけでなくブログでも設置可能です。 本ブログでもマスコットキャラクターのはなまる君を ファビコンに仕立て上げてみました。 右上の図がブラウザのIE(インターネットエクスプローラー)で 本ブログを開いたときに見られるはなまる君ファビコンです。

ファビコン用の画像を用意する

本記事ではこのはなまる君ファビコンの作り方と設置方法を記します。 先ずは画像を用意します。 この時用意する画像は…

HamaZoランクチェック!立ち上げ趣意とブログリニューアル

本ブログは2010年9月10日に投稿した記事 はまぞうTop200ブログランキング推移表 とともに開始され爾来約1年と半年、20万ページもの閲覧をいただきました。 まことにありがたく思っています。

本ブログ立上げ当初の趣意

しかし不易流行とはよく言ったもの、立ち上げ時の思惑とは少々形態が異なってきました。 9月10日の最初のに見られるように当初は HamaZoブログシステムに於いてランキングが当日のものしか見られないため、 それをデータベースに登録していつでもランキングに興味のある方にご覧いただけるようなシステム HamaZoランクチェック! を開発し、その使い方を解説するために開設したのでした。 そのため本ブログのタイトルも HamaZoランクチェック!Blog としたのでした。

実は開設より暫く経て、 本ブログの立上げ趣意を記事にせんものとして下書きのままに放置していた稿が眠っています。 寝た子を起こす真似をすれば以下が当該文章になります。

ブログで使えない文字をHTMLエンティティを利用して表示する

HTMLエンティティサンプル文字列大なり3D画像 時々初心者を抜けて中級者になろうとするぐらいのブロガーさんから ブログに書けない文字を書きたい時にはどうすれば良いの?と質問を受けます。 例えば >< がそうですね。 ブログはホームページと同じ理屈でパソコン画面上に表示を行います。 その時のルールを HTML と言い、 >< は重要な役割を果たす為に、 ブログで文字として入力した積もりでも表示される時には 文字として扱われないので表示されなくなってしまうのですね。 剰え意図せぬルールが適用されて表示が崩れてしまいます。

処が本記事ではご覧の通り、ちゃんと表示されています。 これを実行するには…

はまぞうでブログ記事のカテゴリを複数一括して変更する方法

一覧表示モードと一括設定モードのトグルリンク ブログで記事を投稿し続けていれば記事数も段々と増え、 記事の少ない頃に設定したカテゴリーが適当ではなくなってくるケースも少なくないのは ベテランブロガーと謂わずとも経験されているのではないでしょうか? 本ブログ運営者もこの処総記事数が増え、 例えば取敢えず その他 にカテゴリー分けしておいた記事が或る別カテゴリーとして纏まりを見せ始めるにつけ、 別カテゴリーを立てて該当する記事を移動したいと思っていました。 処が上手い方法を知らないと、 いちいち変更しようと思う記事を編集するようにしてからカテゴリーを再設定して再投稿することを 総ての該当する記事に於いて実行しなければいけません。 いくらなんでもちょっとこの作業は滅入ってしまいます。

そんなことを思っていた処、 浜松西部ブログ村 でビンゴ!の質問と解説がありました。 余りにも便利な割りに知られてないと思われるこの機能、 今回は特別、教えちゃいましょう! ブログ村に出掛けてもいないのに知ることが出来るとてもお得な記事となっております(笑)。

その方法とは…

javascriptでブログに自前バナー

うさ犬ランドランダムリンクランダム表示バナー5種

本ブログ運営者は本ブログの他に うさ犬ランド と称すオリジナルキャラクターによるホームページを運営しています。 本ブログにも漸次アクセスされる方も増えてきましたので 出来ることならオリジナルキャラクターサイトの存在も知って貰うが吉と、 自前のサイト向けに自前のバナーで謂わば広告を設置することにしました。 設置場所としては2011年7月3日に ブログからFacebook Comments機能を取り外す ことをしたその後釜に据えています。 この位置に大きくカラフルなイラストバナーを配置することで 記事の独立性の認識の向上が図られるとも考えています。

設置するにあたり手法は javascript を採用しています。 バナーデザインとしては右上図にあるように横長のものを5タイプ用意していて、 表示の度に無作為にプログラムにひとつ選択させて、 見る方の目を飽きさせないように配慮しました。 またリンク先はただ一つではなく 季節をテーマとしたオリジナルキャラクターの特に 夏のページ55頁に対して、これもまたプログラムにランダムに一つ選択させて リンクを繋げるようにしています。 従って55×5=275種類のリンクが用意されることになります。 静的にこれだけのリンクを用意するのは容易ではありませんから 矢張り此処は動的にリンクを処理出来る javascript の登場となった訳です。 またリンク先のちょっとした確認が出来るように リンクには title属性 を設定してありますので、オンマウスでリンク先頁のタイトルが表示されるようになっています。

ブロガーさんなら分かって貰えると思いますが 毎度のブログ記事の投稿は結構大変なものですよね。 頑張って更新をしている自ブログですから 他の運営サイトを其処で紹介出来るというのも ブログ継続のちょっとしたモチベーションになるのではなるのではないかと思います。

追記のある時の「続きを読む」リンクのデザイン(本ブログ編)

はまぞう(HamaZo)ブログに於いては記事投稿画面で 追記 リンクをクリックして表示される文字入力画面に入力することで、 トップページには表示されないでいて個別ページは表示される内容を記すことが出来ます。 トップページでは記事の一覧性を良くして、 もう少し読みたい時には 「続きを読む」 リンクをクリックして貰うことで更に詳細を表示出来るメリットがあります。

追記については様々意見があり、 記事は短くしてなるべく使用するべきではない、などと言う意見も聞かれます。 姉妹ブログ ホームページ作成浜松Tips (※) では追記を利用することも多く、その為本ブログ2011年4月14日には 追記のある時「続きを読む」リンクのデザインを目立たせるCSS なる記事で問題に対応した旨、記しました。 その記事中に於いては以下引用

本ブログには基本的には 追記 しませんのでブログ記事に 続きを読む が表示されることはありません。
で記し、基本的には追記をなるべく使用せずに済まそうと思っているのですが、 漸次総記事数が増えるに連れ、時には記事が長くなり使わざるを得ない場合も増えてきました。 普段は使わない追記が時に現れるとなるとその判別性が悪ければ 頻繁に利用するブログに於いてより問題は深刻です。 其処で本ブログにも「続きを読む」リンクを目立たせるべくCSSの記述を追加しました。

七色(虹色)に輝くブログタイトル再び―javascriptライブラリ

本ブログの姉妹ブログ ホームページ作成浜松Tips に於いて 七色でブログ内検索する と得られる結果は、2008年7月11日の記事 七色に輝くブログタイトル で初めて実装して以来綿々と両ブログのタイトルに潤いを与えてきた機能である ブログタイトルの色を次々と七色に変化させていく為のその手法が記されている記事群であります。

七色(虹色)に輝くブログタイトル再び:うさ犬レインボー 検索結果記事群にも有りますことをここで再びもう少し噛み砕いて書けばこの機能は javascript と言うホームページに動きを持たせることの出来るプログラムを使って実現しています。 身近で有名な例で言えばインターネットの地図サービスの質を劇的に向上させた Googleマップ もこの技術を利用しています。 貴方のブログでも例えば画面上に雪を降らせたり紅葉を散らせたりする カスタムプラグインで利用しているかも知れません。 ここでも javascript が使われています。

さて javascript では様々なことが実現できますが、 実現するためには勿論プログラムを組まなきゃいけません。 例えプログラマーでも一から総てプログラムするのは大変です。 こんな時プログラマーは或る程度の基本機能を提供するように組まれた プログラムを利用してプログラムする負担を減らします。 これを ライブラリ と称し javascript のライブラリとしては jQuery が有名です。 更にこのライブラリの上で詳細に立ち入った機能を提供するプログラムを プラグイン と呼んでいます。

七色(虹色)に輝くブログタイトルでもライブラリ JQuery とそのプラグインの COLOR ANIMATIONS を利用してその機能を実現しています。

本ブログはブログとしては極端に多種多様な javascript を利用しており、 それが各記事に依存している状況もあったりしますので、 想定通りに動いてくれないこともまま有ります。 ブログタイトルの輝きもしばしば失われている状態でした。 其処で近日少しチューニングをしました。 ライブラリやプラグインを読み込ませる位置やタイミングによっても結果は異なってくるし、 クロスブラウザ(ブラウザによって動きが異なる)問題もあったりしますのでなかなか難しい処ですが、 貴方から見て本ブログタイトルは七色に輝いて見えているでしょうか?