2015年02月の記事一覧



●ページの公開時間や更新時間はGoogleの検索結果に表示される

早速本題ですが、ページの公開日時や更新日時をHTMLタグでページ内に書いておくと、Googleで検索する際に表示されますよ、というお話。

パッと見で、新しい情報か、古い情報かがすぐ分かって便利ですね。


以下の画像は「授与品袋」で検索した結果。

スニペットの部分に「2010/50/21」と日付が表示されています。

20150227-HTML5のtimeタグでページの更新日時-01


これは、授与品袋・手提げ紙袋・たとう紙(吉田印刷所)のページのフッター部分にある「公開時間」が反映されています。横に更新時間もありますが、そこの日時はGoogleの検索結果では出てきていません。

つまり、検索結果をコントロールすることができるのです。

20150227-HTML5のtimeタグでページの更新日時-02


そのために使うのが、HTML5のtimeタグです。

timeタグは日付を表す際に使用します。それだけで特に公開日時や更新日時を表すものではありません。


細かなtimeタグの話は上記ページをご覧頂くことにして、記事タイトルにある「ページの更新日時をHTML5のtimeタグを使用して表現」してみましょう。

記事の続きを読む




Facebookのニュースフィードで、商売・ビジネスの参考になるブログ記事が流れてきた。

それは大阪南船場のC'ERA UNA VOLTA(チェラウナボルタ)というセレクトショップ(いわゆるファッション店)のオーナーが書いた「2年通い続けてくれた決して買わないお客さん」という記事。


タイトルだけで、おっ?となりますね。買わないお客さんの意図や正体は何なのだろうかと。

登場する「2年通い続けてくれた決して買わないお客さん」はこんな感じ。

週末になると入店して

店内を巡り

商品を手に取り

1人で「なるほどな」と満足されて

最後は「ありがとう」と言って帰って行かれる

2年通い続けてくれた決して買わないお客さん|C'ERA UNA VOLTA 加藤いさお

これを2年続けられている。ある意味すごい。

冷やかしか!と思うわけですよ。

記事の続きを読む



20150208-SVG・SVGZ画像がブラウザーで表示されない-06

会社のウェブサイトをリニューアルする際は、Internet Explorer 8以下(≒Windows XPユーザー)はあまり対応しない方向で、リニューアルを行っています(最低限の表示は可能にする程度)。(Internet Explorer 8での閲覧者も10%以下ですし)

会社では様々なサイトがあり、ウェブ制作に携わっている人数が私を含め、1、2名しかいないので、次のリニューアル・サイトの見直しが数年後になることもあるので、長く使えるもの、また、できればモバイル対応(スマートフォン対応)も可能にしていきたく思っています。

Internet Explorer 9(以下IE9)ユーザーであれば、SVGの画像フォーマットが使用できます。



●目次



●SVG画像利用のメリット

SVG画像のメリットはざっくり言うと以下のものが挙げられます。

  • 拡大してもキレイ
  • 高解像度ディスプレイでもエッジが滑らかな表示が可能

  • SVGの画像は、いわゆるベクトルデータなので、拡大してもキレイ(滑らか)な曲線で描かれます。繊細な表現の画像には嬉しいですね。

    また、拡大してもキレイということは、実質的にピクセル数が多い高解像度ディスプレイのデバイス(Windows・Mac・スマートフォン・タブレットなど)でも、ドットの粗さが目立たずに表示されるので、解像度に応じた複数の画像を用意しなくても良いので便利です。1つのファイルで完結すれば、ファイルの管理も簡単ですから。



    ●使ったことがない人が分かりやすいSVGの使い方

    そんなSVGですが、使い方が難しいのかというと、そうではありません。

    画像ファイル扱いなのでimgタグに使えます。

    つまり、

    <img src="logo.png">

    と書いていたところを、

    <img src="logo.svg">

    とsrcの部分のファイル指定を変更するだけです。簡単ですね。(.svgもしくは.svgzのファイルを指定します)


    ですが、こう指定しただけでは表示されない場合もあるのです。(ようやく本題)

    記事の続きを読む



    会社のサイトを開いてFirebugのネットワークの項目を見ていたら気がついた。


    TwitterのBootstrapのファイルをMaxCDNからダウンロードして使うことはよくあるかと思います。(Bootstrapのページにも書いてあるしね)

    そのファイルのレスポンスヘッダに「X-Hello-Human」という見慣れない項目が…。

    そこに書いてあるメッセージは…

    20150206-MaxCDN-X-Hello-Human-Message-01


    You should work for us! Email: jdorfman+theheader@maxcdn.com or @MaxCDNDeveloper on Twitter

    一緒に私たちと働きましょう!というリクルート的なメッセージかな…?

    えっと…、レスポンスヘッダってこういう使い方していいの?(汗)

    記事の続きを読む



    20150205-MovableType-TinyMCEでBootstrapアイコン-01

    ●リッチテキストエディタでBootstrapのアイコンが消える

    Movable Type 6にて標準搭載されているリッチテキストエディタのTinyMCEがあります。

    このTinyMCEのエディタを使用し、HTML編集モードにして以下のHTMLを記述します。

    <p><span class="glyphicon glyphicon-circle-arrow-right"></span></p>

    <span class="glyphicon glyphicon-circle-arrow-right"></span>はBootstrapのアイコンの記述です。


    その後、リッチテキストエディタ(WYSIWYGモード)に切り替えると、HTMLのタグが消えて以下の様になってしまいます。

    <p><br /></p>

    これでは本文中にBootstrapのアイコンを入れることができません! なんてこった!

    記事の続きを読む



    Value Domain(バリュードメイン)でドメイン名を管理されている方は要注意です。

    既に1月にバリュードメインからお知らせが出ていますが、2015年2月17日からドメインの価格が大幅に値上げされます。

    平素はバリュードメインをご利用いただき誠にありがとうございます。

    誠に恐縮ながら、この度2015年2月17日より一部ドメインの価格を変更させていただくことになりました。

    経緯としましては、昨今の為替相場の円安傾向による影響と、com/netなどの卸元である海外レジストリでの値上げのため、価格決定当時よりも、仕入原価が大幅に上昇していることにあります。
    価格維持のため努力してまいりましたが、仕入原価が売価を上回るなど、自助努力の範囲で対応できない状況が続いております。
    つきましては、誠に不本意ながら、2015年2月17日より、一部ドメインの価格を変更させていただくことになりました。

    VALUE DOMAIN:バリュードメイン


    どのくらい価格が変更されるのかと思って見てみたら、なんと価格は最大2倍の大幅値上げ!


    以下の表は同じページに表示されている価格表ですが、よく使われる「.org」「.info」「.biz」などは50%値上げ。たまに見る「.ws」は100%値上げ、つまり2倍の価格に!

    (以下の表の黄色の塗りは筆者による)

    20150204-Value-Domain-ドメイン料金大幅値上げ-01

    画像出典:VALUE DOMAIN:バリュードメイン

    記事の続きを読む



    20150202-MovableTypeで指定文字数を抜き出す-01

    画像出典:CMS プラットフォーム Movable Type(Six Apart)


    Movable Typeでサイト構築をしていて、トップページにブログの最新記事のタイトル一覧を付けたり、パンくずリストを設置する際に問題になるのが、「やたらタイトルが長い記事をどうするか」というもの。

    タイトルが想定したものより長いと、リスト要素で配置した場合(ul>li>)に、2行になってしまい体裁が崩れてしまうことがあります。

    はみ出た分はCSSで「overflow: hidden」してしまう方法もありますが、ここは出力時に指定した文字数で出力するようにしてみましょう。

    ついでに指定した文字数を超えていた場合は省略しましたと「…」を付けるようにしてみます。



    ●trim_toのグローバル・モディファイアを使う

    タグの中身から指定した文字数を先頭から抜き出すグローバル・モディファイアが標準で用意されています。

    なので、ブログの記事タイトルから先頭の20文字を抜き出す場合には以下の様に書きます。

    <$mt:EntryTitle trim_to="20"$>

    簡単ですね。

    記事の続きを読む




    ブログ著者

    名前:(Google+のプロフィール)

    ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

    お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

    ブログ著者について

    サイト内検索