Web制作関連の記事一覧



20160212-Webフォントを滑らかにするCSS-00

目次



●ブラウザーによってWebフォントの見え方が違う

今更ですが、日本語のWebフォントを会社のサイトで使い始めました。


元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォント - Wikipedia(Webフォント - Wikipedia)


意外と導入は簡単で、そんなに読み込みが重く(遅く)感じることは少ない気がします。

ただ、WebフォントはモリサワのTypeSquareを使っていますが、ブラウザーによって見え方が結構違うのだなと感じました。


Windowsのブラウザーでは、ざっくり言うと、

  • Internet Explorer 11:キレイ
  • Edge 13:そんなにキレイではない
  • Chrome 48:そんなにキレイではない
  • Firefox 44:そんなにキレイではない

と、こんな感じです。

※EgdeはEdgeHTMLのバージョン。ブラウザーのバージョンは25。


意外にもInternet Explorer 11はそのままでOKです(笑)。逆に純正のEdgeはまだ発展途上のためか、そんなにキレイではありません。

記事の続きを読む



ウェブ解析を頼まれたときに、いきなりGoogle Analyticsの画面を開いてしまう方(ウェブ担当者)に向けて、考えておきたいポイントを書いてみました。


●目次


●ウェブ担当者の悩みは「どこを改善すべきかわからないこと」

ウェブ担当者として、より良いウェブサイトを作ろうとして、まず悩むことは「どこを改善したら良いかがわからない」ことではないでしょうか。

改善のヒントとなるものとして、ウェブアクセスの解析ツールがあります。これはウェブサイトを閲覧した人がどのような行動をしたかを調べることができるので、ウェブ担当者であれば使っている人も多いでしょう。


●Google Analyticsを使っていればウェブの改善点がわかるのでは?

ウェブアクセスの解析ツールとして有名どころはGoogle Analyticsです。
無料で使用できるので、とりあえずウェブサイトに入れてある人も多いと思います。

「これがあればウェブ解析も簡単なはず! ここにヒントがあるはずだ!」ということで、Google Analyticsのレポートページを開くと様々な指標が踊っています。

この数字だらけのレポートページに戸惑ってしまうのではないでしょうか。

20151220-ウェブ解析入門を読んで-01

記事の続きを読む



20150920-MovableTypeでブログ記事の最後から指定文字数を表示-01

ブログ記事のタイトルやブログ記事の本文の「最初の20文字」を切り出すというのは、ブログ記事の一覧やパンくずリストなどで使用されるので、ご存じの方も多いと思います。



●先頭の▲▲文字を切り出す「trim_to」

グローバルモディファイアの「trim_to」を使用します。

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

上はブログ記事のタイトルの先頭20文字を表示、下は20文字を超える部分は「…」と追加して表示という意味です。


ブログ記事の本文なら以下の通りになります。グローバルモディファイアの「remove_html="1"」で、ブログ記事の本文からHTML記述を削除した後、「strip_linefeeds="1"」で改行を削除してから指定した文字数を切り出します(そうしないとタグだけで終わってしまうこともある)。

<$mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="20"$>
<$mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="20+…"$>



では、逆にブログ記事のタイトルやブログ記事の本文の「末尾から20文字」を切り出すのはどうしたらよいでしょうか?

なお、グローバルモディファイアの「trim_to」にマイナスの値を入れても、末尾からの切り出しにはなりません。

Movable Type 6.0.4 以降では、N に負の値を指定した場合は、文字列の末尾から N 文字取り除き、残った部分を取り出します。例えば、trim_to="-5" と指定すると、"サンプルの文章です" という文章は、"サンプル" と表示されます。

trim_to -(グローバル・モディファイアリファレンス)


記事の続きを読む




今回はMovable Typeで制作するときに、すぐにできそうでできなくてハマる「ブログの最新記事を全ページに表示するためのテンプレート」について書いてみます。



●Movable Typeのコンテキストという概念を理解しよう

「ブログの最新記事を全ページに表示するためのテンプレート」の前に理解しておかなければいけないことがあります。

それはMovable Typeの「コンテキスト」という概念です。


コンテキストは、文脈という意味で、Movable Typeでは、個別記事アーカイブのコンテキストやカテゴリーアーカイブのコンテキストなどがあります。

コンテキストについては以下のページがとても分かりやすいのでMovable Typeを使うユーザーはぜひご一読を。

コンテキストとは

直訳すれば「文脈」です。ここではテンプレートにおける前後の文脈のことをそう呼びます。自然言語における人間の会話や文章にも前後の文脈というものが存在しますから、会話を例に挙げます。

 Aさん:今日は天気がいいですね。

→「今日の天気」のコンテキスト


MTのテンプレートでは現在のコンテキストに適合しないMTタグを使おうとすると、エラーが出るようになっています。

20150912-Movable Typeでブログの最新記事を全ページに表示-01

人間の会話において、文脈に沿っていない話題や発言をすると会話が成立しなくなるのと同じです。

Aさん:今日は天気がいいですね。

→「今日の天気」のコンテキスト

Bさん:はい、僕はハンバーグが好きです。

→コンテキストに沿っていないのでエラー

MTのコンテキストについての考察と解説(Like@Lunatic)


このコンテキストの中でテンプレートタグの挙動が変わってきます。

例えば、インデックステンプレートのコンテキストであれば、最新のブログ記事10件の出力は、普通に最新のブログ記事10件の出力がされます。ですが、カテゴリーアーカイブのコンテキストであれば、最新のブログ記事10件の出力は、そのカテゴリー内の最新のブログ記事10件の出力となります。

この挙動のために、ブログのサイドバーに「最新のブログ記事」を表示させようとすると、コンテキストによって異なった結果が表示されてしまいます。コンテキストの意味からすれば間違いではありません。


ただ、この仕様が、カテゴリーアーカイブを含めた全ページに「普通に最新のブログ記事10件の出力」しようとすると、障害になってしまうわけです。


ここまで理解できましたか?

それではブログの最新記事を全ページに表示するためのテンプレートを作ってみましょう。

記事の続きを読む



20150909-BootstrapとGoogleカスタム検索のCSS-00

みなさん、Bootstrap使っていますか?

私はこれがないともうWeb制作ができないほど毎回使っています(笑)。



●BootstrapとGoogleカスタム検索は相性が悪い?

Bootstrapは非常に便利なのですが、Googleカスタム検索(Custom Search Engine:CSE)を使うと、こんな表示になりませんか?

20150909-BootstrapとGoogleカスタム検索のCSS-01

入力フォームは崩れ、虫眼鏡アイコンが入った検索ボタンは縦に潰れてアイコンが見えない…!


今回はこうした表示のトラブルを解消する方法を紹介します。

記事の続きを読む



20150831-Jimdo-サブドメイン名はwwwのみ-01

みなさん、クラウド型CMSのJimdo使っていますか?

Jimdoでサイトを構築について調べていて、こんな記述に出会いました。

Jimdoで利用できるサブドメインはwwwだけです。残念ながら、それ以外のサブドメインを利用することは出来ません。

Jimdoで出来ること出来ないこと - JIMDO研究所(Jimdoで出来ること出来ないこと - JIMDO研究所)


ここでの話はJimdo ProやJimdo Businessで使用できる独自ドメインの話です。

独自ドメインを設定するときにblog.example.com や m.example.com みたいな形は使えず、www.example.com の形しか使用できないということです。

この仕様は外部のDNSで使いたいサブドメインを指定して、CNAMEでJimdoのサーバーに行き先を指定すれば、何とかなるのでは?と思ったので、Jimdoの日本担当であるKDDIウェブコミュニケーションズに問い合わせてみたので、内容をシェアします。

記事の続きを読む



asahi.comが登場して20周年記念で、開設当時の様子を再現したページが公開されています。

トップページでリンクしているニュース記事は2015年8月10日の最新のものだが、ページデザインは横480ピクセルに収まるサイズで作られており、背景色はシルバー(bgcolor="#c0c0c0")で、「HTML 3.0をベースにデザインしています。Netscape 1.x の使用を推奨します。」との注意書きもある。

Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch(Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch)

20150822-BlinkタグをCSS3で再現-02

画像出典:Asahi NewsPaper Index(Asahi.com)


懐かしいですね。灰色の背景とか、バナーの感じとか、微妙に英語とか。



●昔よく使われていた文字を点滅させるタグ「blink」

このNetscape 1.0ネタではないですが、テキストを点滅させるblinkタグが昔のウェブブラウザーにあって、ホームページでよく使われていました。

こういうものですね。(アニメーションGIFです)

20150822-BlinkタグをCSS3で再現-01

何か懐かしさを感じる表現ですね。

最近のブラウザーではこのblinkタグに対応していないものがほとんどですが、これを新しい技術(CSS3)を使って再現してみます。

記事の続きを読む



みなさん、Photoshop CC 2015の新しい画像書き出し(※)を使っていますか?

※:メニューから「ファイル」→「書き出し」→「書き出し形式」


新しい画像書き出しでJPEGはかなり高性能って話を「ファイルサイズは半分に。Photoshop CC 2015のJPEG保存を検証/JPEGmini不要という結果に」の記事で書きましたが、この画像書き出しのウインドウで不満点があります。



●不満点はプレビューが縮小表示されてしまうこと

それは、大きな画像から画像を書き出そうとすると、プレビューが縮小表示されて細部がすぐに見ることができないこと。

実例としては、1600×1020ピクセルの画像を書き出そうとすると、中央のプレビュー表示が以下のように縮小表示されてしまいます。

今回は25%の縮小表示になっています。

PNG-8などで減色している場合やJPEGで品質を下げているときには100%表示(dot by dot)で見ておかないと心配ですよね。

20150819-Photoshop-CC-2015-画像書き出しの倍率変更-04


今回はこれを一発で100%にする方法を紹介します。

記事の続きを読む



Yahoo!BBのページをスマートフォンで見ていたときに、この電話受付はなかなか良いな、参考にしようと思ったのでブログでシェアします。


●ウェブからの電話対応

そのページはYahoo!BBの ADSLのキャンペーンページです。

「お電話で今すぐお申し込み・ご相談」の下に「tel:」で始まるリンクが仕込まれた「電話をかける」ボタンがあります(なぜか「受付時間」という言葉がダブっていますが…)

「電話をかける」ボタンをタッチすると、電話アプリが立ち上がって電話が掛かります。


「電話をかける」ボタンのすぐ横に目立つ緑のカラーで「折り返し電話予約」ボタンがあります。

今回、いいなと思ったのはこの緑色のボタンです

20150802-Yahoo_BBのウェブから電話をかける-01

記事の続きを読む



ブログ著者

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

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

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

ブログ著者について

サイト内検索