月別: 2016年5月

CSSで下線じゃなくマーカー風にテキストをハイライトする方法

テキストを目立たせたい時、よく文字サイズや文字色を変えたり、下線を付けたりします。
リアルの紙の場合、よく蛍光マーカーで色を付けたりしますが、あれをborderでは再現できません。

以前はbackground-imageを使って専用の画像を作っていましたが、CSS3の「linear-gradient属性」を使うことで、画像を使わずCSSだけで見せることが出来るので紹介します。

蛍光ペンでマーキングしたように見せることが出来る「linear-gradient属性」

transparentのパーセントを変えることで下半分だけマークすることも出来ます。

誤った情報を作らないために。WordPressの投稿に更新日を表示する方法

WordPress

togetterでこんなまとめを見つけました。

ネットの記事は今後「誤った情報」が爆発的に増えるかもしれない、というお話が話題に「確かに思い当たる」

当時では「正しい情報」が、時間が経つにつれて「誤った情報」になるのは当然かもしれません。Web技術の情報などは、バージョンによって使える使えないといったこともあります。

「正しかった情報」にならないために、なるべく記事を更新するようにすることは重要なことですが、更新日があるとユーザも投稿の信憑性を判断しやすくなります。

WordPressの投稿に更新日を表示する

WordPressで更新日を表示させる場合、以下のように書くことで投稿の最終更新日を表示させることが出来ます。

もし投稿作成日と投稿更新日が異なる場合、更新日が表示されるようになっています。

CSSで3カラムや7カラムなどの横幅をぴったりにできる「calc関数」

レスポンシブデザインはもはや当たり前になっている今日このごろ。
皆がスマホを使っている今の時代。どんなサイトでもスマホから見られる可能性はあります。
どんなにあなたのサイトのターゲットとしているトラフィックがデスクトップからであったとしても、スマホからのアクセスを無視していいわけありません。

これからホームページを作る場合、余程の理由がない限り、レスポンシブ、スマホ対応にするべきでしょう。

さて、そのレスポンシブで作る時、たまに遭遇する「3」や「7」といった割り切れない値のコンテンツを横に並べる時。今までだと例えばカラムが「3」の場合、

と書いていました。
ただこれだと1%余り、場合によっては1pxぐらい空白が出来たりします。
table-cellという方法もありますが、flexboxを使いたい場合はtable-cellは使えません。

そこでCSS上で計算式を書けるcalc関数が便利なのでご紹介します。
続きを読む

WordPressのログイン画面のロゴと背景を変える方法

Wordpressログイン画面

Wordpressログイン画面 Webデザイン

WordPressのログイン画面は通常、上のようなロゴ画像が表示されます。コーポレートサイトやお客様に渡すとき、上記のロゴだとデザイン的にもイマイチですし、コーポレートサイトであれば自社のロゴがあるので、デザインも合わせたいところです。

今回はロゴ画像の変更と合わせて背景の変更もしてみたいと思います。

続きを読む

jQueryのスライダーをホームページに取り入れる時に注意したいこと

サムネイル

トップページなどでよく使われるスライド式に自動で画像が切り替わるスライダー。ローテーションバナーやカルーセルと呼ぶこともあります。

スライダーを複数のコンテンツや写真を見せるのに便利で、かっこよくも見えます。
jQueryやWordpressのプラグインも充実しているので、設置もそこまで難しくありません。

しかし「設置が簡単でかっこよく見える」などという理由だけでスライダーを設置するとかえってユーザエクスペリエンスや滞在時間の低下になったりします。

スライダーを設置する時に注意しておいた方がいいポイントをいくつか紹介します。
なおここで紹介するのはある程度共通しているポイントではありますが、もちろん例外もあります。これがベスト!という答えはサイトの目的、目標によって変わってきますので、あくまで参考程度に思ってもらえればと思います。

1, バナーは3〜4枚程度に

ホームページによりますが、トップページに滞在する時間は長くてもせいぜい20秒程度です。ユーザはファーストビューの2秒程度で自分にとって価値のあるページか判断すると言われています。
この限られた時間の中で、バナーを何枚も設置しても、すべて見てもらえるどころか、存在しないも同然である場合がほとんどです。見きれない程のバナーを設置してもクリックもされず、画像の読み込みに無駄に時間を使ってしまうだけになります。

トップページのバナーは新鮮な情報を掲載し、時期が過ぎたら潔く外す方が他のバナーを見ても機会が増えるので外しておきましょう。枚数も3枚程度を目標にしましょう。

2,  サムネイルを付ける

サムネイル

順番が後ろにあるバナーほど、ユーザに見てもらえる確率は低くなります。
特に最後の方など、余程ユーザが興味を持って辛抱強く待ってくれない限り見てももらえないでしょう。
サムネイルがあることで、ユーザが直感的に見たいバナー(情報)を選ぶことが出来ます。
よくバナーの枚数だけがわかるように小さいアイコンだけがついたものもありますが、クリックもしづらく操作性も悪いです。
サムネイルも写真やイラスト、コピーなどを工夫して、ユーザがより直感的に判断できるものにすることで、クリック率アップにつながります。

3, 不快に感じない表示時間に

表示時間

なるべく多くのバナーを見てもらいたいがために、表示時間を短くし過ぎたり、逆にじっくり読んでもらいたいから表示時間を長くし過ぎたりと、どちらもユーザエクスペリエンスの低下になります。読むのにかかる時間はデザインの可読性や、人によって違うので、これといった秒数で表すことはできません。
マウスオーバでローテーションを停止できたり、ユーザが自分のペースで情報を見ることが出来るようにしてあげましょう。

まとめ

いかがでしょうか。
上記はスライダーを設置することを前提にしていますが、スライダーは必ずしも必要なものではありません。見栄えもするし、情報を多く掲載することが出来ますが、それがかえって不快に感じることもあります。スクリプトを使うのでブラウザによってうまく動かない場合もあります。
ユーザエクスペリエンスを下げないように、よく考えた上でスライダーは設置しましょう。