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

WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

割り切れない数値もCSS「calc関数」でぴったりに

上の3分割を例にcalc関数を使って書くと以下のようになります。

100%の部分は、pxなど固定の値でも計算してくれます。

また演算子は複数書けるので、例えば「7カラムで、それぞれボーダー8px分だけ小さい幅にする」といったとちょっと複雑なことも以下のように書くことが出来ます。

注意点

calc関数を書く上で気をつけないといけないのが、演算子の前後には必ず半角スペースを入れてください。

また使うことの出来る演算子は以下になります。

+ 加算
 – 減算
 * 乗算
 / 除算

ベンダープレフィックス

IE8以下とAndroid 4.3以下の標準ブラウザではcalc関数は使えないので、以下のような書き方をしておくと安心かもしれません。

今回、widthだけ紹介しましたが、marginやpadding、background-positionなどでも使うことが出来ます。それぞれ状況に合わせて試しに使ってみてください。

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

Wordpressログイン画面

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

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

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

続きを読む

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

サムネイル

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

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

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

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

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

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

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

2,  サムネイルを付ける

サムネイル

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

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

表示時間

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

まとめ

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

CSSで高さを固定せずli(div)を正方形にして並べる方法

CSSで正方形を作る

写真をきれいに並べたい時は、僕はスクエア型(正方形)の枠を作って並べる時があります。

理由は縦長の画像と横長の画像が混在している時、段違いになってずれたりするからです。

普通、CSSで正方形にしようと思ったら横幅と高さを固定にしないといけません。レスポンシブみたいに横幅が変わったする時、高さを固定にしていると正方形じゃなくなってしまいます。

「高さ=横幅」みたいな感じで一行でかけるCSSが存在してたら楽なんですが、今のとこそのような書き方は無いので、ちょっと複雑ですがレスポンシブタイプで正方形を並べる方法をご紹介します。

CSSで正方形を作って並べる

それでは実際に書いていきます。

デモ

HTML

ポイントとしてはリストの中にspanを書いていることです。具体的な説明は後ほどします。

CSS

【3〜8行目 ul】
等間隔に並べるためなので正方形にするのに必要はありません。

【20、21行目 li】
heightはデフォルトでもautoである必要があります。
positionは後にspanのabsoluteに関係します。

【24〜28行目 li:before】
27行目のpadding-top: 100%が正方形になります。paddingは%で指定した場合、width の値を基準にします。今回の場合、liで指定したwidthが基準になります。

【32〜37行目 li span】
padding-top: 100%にすると擬似要素がすべてpaddingで埋まってしまいます。そこでabsoluteでそれを回避します。

【49行目以降】
49行目以降は画像を縦中央に配置するための処置です。table-cell+vertical-align:middleでも縦中央配置になりますのが、その方法だとdiv(もしくはspan)がもう一階層増え、個人的に好きじゃないのでこの方法で書きました。ここは完全に好みです(笑)

以上、正方形にして並べる方法でした。