WEB／システム／IT技術ブログ

リッチスニペット（構造化データ）でGoogle検索結果にパンくずリストを表示させる

最近話題のリッチスニペット（構造化データ）ですが、Googleも採用に積極的のようで、SEO的観点からも注目されています。
そこで、今回、導入編としてGoogleのガイドラインに習ってパンくずリストを装飾して、Google検索結果への影響を試したい思います。
Breadcrumbs | Structured Data | Google Developers

例えば、以下のようなパンくずを装飾します。

HOME > Structured Data > sample1 > sample2 > リッチスニペット（構造化データ）でGoogle検索結果にパンくずリストを表示させる

装飾にはJSONやRDFAが使えるようですが、今回は比較的導入が容易なMICRODATAをhtmlソースに組み込みます。

以下、これまでのhtmlコードです。

<ol class="breadcrumb">
<li><a href="http://web.helog.jp">HOME</a></li>
<li><a href="http://web.helog.jp/category/structured-data/">Structured Data</a></li>
<li><a href="http://web.helog.jp/category/structured-data/sample1/">sample1</a></li>
<li><a href="http://web.helog.jp/category/structured-data/sample1/sample2/">sample2</a></li>
<li>リッチスニペット（構造化データ）でGoogle検索結果にパンくずリストを表示させる</li>
</ol>
「リッチスニペット（構造化データ）でGoogle検索結果にパンくずリストを表示させる」のつづきを読む

Microsoftの無償コードエディタ「Visual Studio Code（VSCode）」のインストールと設定

以前から気になっていたMicrosoftの「Visual Studio」ですが、「Visual Studio Code」として無償公開されることになってから、かなりお世話になっています。

Visual Studio Code – Code Editing. Redefined
「Visual Studio Code」はWindows、Linux、OS Xで動作する軽量のコードエディタソフトウェアです。
HTML、CSSやJavaScriptなどWebフロントから、Java、PHPやC++などサーバサイドのプログラムまで、幅広いフォーマットに対応しています。

実務に導入してみた感触などをメモとして残して、評価したいと思います。
導入環境は

  • Windows 11 Home 64bit
  • Windows 10 Home 64bit
  • Windows 7 Professional 64bit
「Microsoftの無償コードエディタ「Visual Studio Code（VSCode）」のインストールと設定」のつづきを読む

jQueryプラグインjquery.tile.jsで横並びの要素の高さをそろえる

横並びの要素の高さがバラバラの場合、表示崩れの原因になることがしばしばあります。
テーブルにしてしまえば楽なのですが、要素をfloatさせてレスポンシブ対応していたり要素数を動的にしている場合などは、一筋縄ではいきません。

そのような場合はjQueryプラグイン「jquery.tile.js」が便利です。
jquery.tile.js Demo page

上記のデモページを見れば分かりますが、例えば以下のようなコードの場合、

.sample{
	clear: both;
}
.sample p{
	float: left;
}

<div class="sample">
<p><img src="sample-height-100.jpg"></p>
<p><img src="sample-height-200.jpg"></p>
<p><img src="sample-height-100.jpg"></p>
<p><img src="sample-height-300.jpg"></p>
<p><img src="sample-height-100.jpg"></p>
...
</div>
「jQueryプラグインjquery.tile.jsで横並びの要素の高さをそろえる」のつづきを読む

WinSCPポータブル版で設定情報を引き継いだままアップグレードする方法

WinSCPで設定情報を引き継いだままアップグレードする方法です。

WinSCPとは、FTPの他、SFTPやSCPでファイルをダウンロード、アップロードできるソフトウェアで、気軽さと高機能を備え、セキュリティ的にも比較的強いという事で、私も重宝しています。
もちろん、ソフトウェアのバージョンを最新版に保つことがセキュリティ的にも重要なのですが、特にポータブル版のWinSCPは自動アップグレードの機能がなく、手動でアップグレードする必要があります。また、ポータブル版をそのまま上書きすると、設定情報が消えてしまうので注意が必要です。

そこで今回はアップグレードの手順メモです。

ちなみに私が確認した環境は「Windows 7 Home Premium 64bit」で、WinSCPはバージョン5.1.7から現時点の最新版5.7.5へアップグレードします。

「WinSCPポータブル版で設定情報を引き継いだままアップグレードする方法」のつづきを読む

既存のWordPressサイトを常時SSL化させる手順

WordPressを常時SSL対応させます。

先日、GoogleがSEOの観点でSSLを導入したページを優遇することを発表しました。
ただ、明確な効果があるほど重点はおいていないともいわれていますが、特に大きな弊害もないので、全コンテンツSSL化を実施してみます。

WordPressのSSL化については「お問い合わせフォームのみSSL化する」や「管理画面のみSSL化する」のは難しいといった話題がよく聞かれます。
そこで、今回はシンプルにオープンなコンテンツも含め「常時SSL化」します。

設定変更

WordPressの管理画面にログインします。

メニュー「設定」⇒「一般」を開き、以下の「http://～」となっている項目を「https://～」に変更します

WordPress アドレス (URL) : http://～
サイトアドレス (URL) : http://～

WordPressの設定は以上です。

「既存のWordPressサイトを常時SSL化させる手順」のつづきを読む

さくらレンタルサーバで独自SSL（SNI SSL）でマルチドメインをHTTPS化する

ジオトラストのラピッドSSLを導入して、さくらレンタルサーバのSNI SSL機能で複数のドメインをHTTPS化してみます。

  • GoogleがSEOの観点でSSLを導入したページを優遇することを発表
  • 個人的に管理するCMSサイトの割合が増加しセキュリティの課題が増した

これらの理由から、SSLの導入を真剣に検討することにしました。
※GoogleのSEOについては、明確な効果が得られるほど重点は置かれていないとされていますが、将来を見越して導入しておいて損はないでしょう。

SSLの個人導入にはコストがかかる

これまでSSLの導入に踏み切れなかった最大の要因として、コストがあります。

多くの簡易レンタルサーバでは無料で共有SSLを利用することができますが、以下の理由から正直、ほとんど使い物になりません。

  • 独自ドメインを利用できない
  • 同一サーバ内にある他者とSSLを共有するといった意味で信頼性が薄い

そこで、共有SSLではなく独自SSLの導入を検討するのですが、年間数万円のコストがかかります。
マルチドメインで複数運用している場合、単純に掛け算で年間数十万円のコストがかかり、とても個人では導入できません。

「さくらレンタルサーバで独自SSL（SNI SSL）でマルチドメインをHTTPS化する」のつづきを読む

Windows 8.1でWi-FiプロセスのCPU使用率が上昇する問題

原因は分かりませんが、たまにWindows 8.1でWi-FiプロセスのCPU使用率が急に上昇することがあります。

はじめてこの現象に気が付いたのは、電源ケーブルなしでノートPCを使用している時です。
いつもよりバッテリーの消費が早い。本体がなんだか熱い。ファンがいつもより激しく回っている。
特に重い処理を実行しているわけでもなく、大容量の通信をしているわけでもありません。

タスクマネージャーを起動すると「Windows Wireless LAN 802.11 Extensibility Framework」という謎のプロセスのCPU使用率が急上昇しています。

win8wifi

取り急ぎ、この状況を回避するためには、コントロールパネルのネットワーク接続から、Wi-Fiを動かしているネットワークデバイスを無効化します。
ここでタスクマネージャーから上記のプロセスが消えるはずですが、もしも残る場合は、タスクマネージャー上から終了させます。
その後、再びネットワークデバイスを有効にすると、上記のプロセスが復活しますが、CPUの使用率上昇は0%になっています。

どうやら、このプロセス自身が悪いものではないようですが、何かをきっかけに暴走するようです。

いろいろ調べてみましたが、暴走の原因を究明することはできませんでした。。
私の場合、ノートPCを外出先で使用するとき、いくつかのアクセスポイントを切り替える過程で発生しているような気がします。

もう少し調べてみます。。。

「Windows 8.1でWi-FiプロセスのCPU使用率が上昇する問題」のつづきを読む

WordPressで「get_search_form」を使ったサイト内検索の実装

WordPressにはデフォルトでサイト内検索の機能があります。
今回はその検索フォームの設置、検索結果一覧ページの実装方法です。

検索フォームの設置

以下の関数をコールするだけで、検索フォームを設置することができます。

<?php get_search_form() ?>

ヘッダ、フッタやサイドメニューなど好きな所に「get_search_form」を記述するだけです。
すると以下のデフォルトコードが出力され、検索フォームが表示されます。

<form role="search" method="get" id="searchform" class="searchform" action="http://cms.helog.jp/">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>
「WordPressで「get_search_form」を使ったサイト内検索の実装」のつづきを読む

フォームセレクトを装飾するjQueryベースプラグイン「customSelect」

デザイン性からフォームの「select」を装飾することがしばしばありますが、CSSのみでの装飾には限界があります。
それがIE7やIE8など、古いブラウザに対応させるとなるとなおさらの事です。

装飾にJSを利用するのはあまり好きではありませんが、最終手段として重宝しているのがjQueryのプラグイン「customSelect」です。
jQuery Custom Select Box Plugin – jQuery.customSelect()

しくみとしては、スクリプトで既存のselect句の上に空のレイヤーを重ねて、それを装飾できるようにしています。
また、そのレイヤーを選択した場合にselectのような挙動をさせて、既存のselect句のvalueと同期するように制御してくれます。

導入方法については公式サイトにもありますが、いたって簡単です。

「フォームセレクトを装飾するjQueryベースプラグイン「customSelect」」のつづきを読む

WordPressのカテゴリ管理画面でID情報のカラムを追加する

WordPress のカテゴリ管理画面でID情報のカラムを追加して、ソート可能にする方法です。

デフォルトのカテゴリ管理画面では、リストにカテゴリIDは表示されていません。
「編集」のパスからIDを抜き取る方法がありますが、スマートではありません。

またWordpressはカテゴリ一覧の表示順を指定できないことがしばしば課題になりますが、
IDでソートする方法もあり、その場合にやはりIDを表示する画面は必要になります。

フックを設定してカテゴリIDカラムを追加する

まずは、function.phpなどに以下のフック処理を追加して、IDカラムを表示させます。

「WordPressのカテゴリ管理画面でID情報のカラムを追加する」のつづきを読む

Monthly Archives