カテゴリー: コーディング

最近レスポンシブサイトが主流になってきて、スマートフォンで見る文字の最適値などを考慮してコーディングしなければならなくなってきました。

一般的にフォントサイズの指定の仕方は「px、em、%」を使います。
pxで指定しないとすると、emや%が出てきて、どれがいいのかわからないなんて人も多いと思います。

「px」で指定があまり良くされない理由

Webサイトを拡大できる機能がありますが、

「Chrome」や「Firefox」、「Safari」では、ページ拡大とともに文字も大きくなります。
ですがIEだけ文字サイズそのままでページが拡大されてしまう自体があったからです。

ですがスマートフォンだと、
emや%で指定だと、親要素の影響を受けて、文字サイズの調整に時間がかかる場合がるので、

「rem」を使用したほうがいいでしょう、なぜなら、remは、常に（html）要素を基準に文字サイズを指定できるからです。

web広告をはじめとする、インターネット広告や自社のウェブサイトなどで使用するバナーは、ユーザーにクリックされるような価値のあるバナーであなければいけません。
そこで、ユーザーにクリックされるようなバナーには、文字を載せるポイントがあります。

1.情報の優先順位を決める

どんな情報を伝えたいか、ユーザーにとってメリットのある情報を整理し、強調したい文字の優先順位を決めます。

2.文字の位置を決める

人の視線の移動する向きを考え、文章を読ませることを前提にするなら左揃えのほうが良いでしょう。
ですが、長い文章をバナー上に載せることは作成する上であまり良くないでしょう。

3.文字や背景に装飾を付ける

文字や背景に装飾を施すことで、目立ちやすさや、相手の関心、興味を引き出すことができます。
また、要素間にメリハリが生まれ、情報などが強調されやすくなります。

4.文字の対比

これは文字の装飾と同じことですが情報に大小の優劣をつけることで、メリハリが生まれますので、
値段などの数字を目立たせたいときなど、使用できます。

Webデザイン重要な要素のひとつであるものである配色パターン。
一度配色に悩んでしまうと中々デザインが決まらなかったりします。

ですがWeb上には配色に関するヒントになる、サイトが数多く公開されています。

「ColorHunt」たくさんのカラーパレットが用意

ColorHunt

様々カラーパレットが登録されています。
カラーパレットを選択するとプレビューが表示されます。
リアルタイムで色のイメージを確認できまるので便利です。

配色はデザインをする上でとても重要なものなので、参考サイトを元に、自分の頭の中のデザインパターンを多く持っておくと、
デザインスピードが上がるかもしれません。

カテゴリー情報を収得して、カテゴリー一覧を作成したり、記事一覧など作成したりすることが多いと思います。

今回はそんなカテゴリーの情報を収得する方法を紹介します。

下記を利用することで、カテゴリーの情報を収得し、
取得したカテゴリー情報から、IDやカテゴリー名などの情報にアクセスすることが可能です。

特に、ブログなどのサイトではカテゴリー毎に紐付けて記事を管理したり、カテゴリータイトルに画像を付けたり等、色々なことができるので、
収得方法に関する知識を身につけておくと便利です。

キャッチコピーによって、サービスを利用する消費者に与える印象は大きく変わってきます。

そこで、よく議論になる制作のポイントが「キャッチを短いほうがよいか、長いほうがよいか？」というところです。
サービスの詳細までキッチリ書いて、魅力を伝えるべきか、スグに頭に入ってくるようなキャッチを目指すべきか悩むところです。

キャッチコピーに関しては、やはり、基本的に短い方がいいそうで、
主に重点を3つに絞って制作することです。それは、

1.サービスの利点が多いならば、広告はそれに合わせて長くする
2.消費者の求める情報(ほしいと考えている情報)が多いなら、情報を多く入れる
3.相手の購入に至るようなプロセスがあるかどうか。

です。

いずれにせよ、商品のイメージをどれだけ端的に、わかりやすく説明できるか、というのが大切でね。

WPで特定の拡張子のファイルをアップロード可能にする

WordPressがデフォルトの状態でどのファイルがアップロード可能なのかを確認したい時、
wp-includesにあるfunctions.phpの情報で確認することができます。

アップロードができるファイルの制限を設けることでセキュリティの観点からも、ブログを更新する人が変わっても安全です。

■特定のファイルのアップロードを可能にする

function custom_mime_types( $mimes ) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

■特定の拡張子のアップロードを不可能にする

function custom_mime_types( $mimes ){
  unset( $mimes['psd'] );
  return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

固定ページを作成し、そのページに記事一覧や商品一覧など、投稿したページを一覧表示したインデックスページの紹介をします。
記事一覧を表示するだけではなく、ページャーと現在のページ位置を表示することで、ユーザーにとっても利用しやすいページになります。

今回はそんな記事一覧ページの製作の方法を紹介します。

まずpage-○○.phpというファイルを作り、記事一覧を作成し下記を記述

<!–アーカイブ–>

<div id=”list_box”>
<?php
$paged = (int) get_query_var(‘paged’);
$args = array(
‘posts_per_page’ => 24,
‘paged’ => $paged,
‘orderby’ => ‘post_date’,
‘order’ => ‘DESC’,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class=”post_list”>
<p><?php the_post_thumbnail(‘thumbnail’); ?></p>
<p class=”post_title”><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></p>
<div class=”post_text”><?php the_excerpt(); ?></div>
</div>
<?php endwhile; endif; ?>
<div id=”pager”>
<?php
if ($the_query->max_num_pages > 1) {
echo paginate_links(array(
‘base’ => get_pagenum_link(1) . ‘%_%’,
‘format’ => ‘page/%#%/’,
‘current’ => max(1, $paged),
‘total’ => $the_query->max_num_pages
));
}
?>
<?php wp_reset_postdata(); ?>
</div>
<!–アーカイブ–>
</div>

現在のページ位置を<!–アーカイブ–>の下に記述します

<p class=”page-area”>
<?php show_page_number(”); ?>
<?php
printf( esc_html__( ‘ページ/全’), get_search_query() );
echo ”, $the_query->max_num_pages, ‘ ページ中’;
?>
</p>

class=”page-area”はpositionで位置調整します。

ブログや商用サイトで商品のラインナップや、商品紹介、ブログの記事などで画像を使うことが多くあると思いますが。

そこで気になるのが著作権フリーかということです。自分で撮った写真なら問題は無いのですが、ネットにアップロードされている画像は著作権で保護されている画像がほとんどです。

ライセンスフリー画像の探し方

画像を検索したらツールバーの「検索ツール」をクリック、
そこから「ライセンス」をクリックします。
そこで、条件を指定して検索を絞っていきます。
・ライセンスでフィルタリングしない
（権利に関することは意識しない。公の場では使えない。）

・改変後の再使用が許可された画像

・再使用が許可された画像

・改変後の非営利目的での再使用が許可された画像

・非営利目的での再使用が許可された画像

・再使用が許可された画像はあくまでgoogleが著作権フリーと判断した画像なので、画像を掲載しているサイトの利用規約など確認する必要があるので、必ずチェックしたほうがよいです。

フォントが無いけれど、見本が見てみたいというときには、
入力した文字のフォント見本をシュミレーションできるサイトがあります。

それが>>FONT GARAGEです。
このサイトでは
1.フォントカテゴリを指定
2.メーカーを指定
3.太さの目安を指定
4.フォントタイプを指定
5.対応OSを指定
とフォントの種類が指定でき、それに関連した書体の見本が確認できるため、
デザインの参考やwebで使用する書体の選定などに使えるので活用していきたいですね。

WordPressのカテゴリに画像を登録して、固定ページにカテゴリー一覧として表示したいときがあると思います。

そんな時、カスタムフィールドを追加することでカテゴリに画像を設定することが可能です。
[Advanced Custom Fields]をインストールして
1.「フィールドグループ」という設定画面が表示されますので「新規追加」をクリック。
2.「フィールドグループ」にタイトルを入力「+フィールドを追加」をクリック。
3.カスタムフィールドの設定項目が表示されますので、位置 > ルールの設定をTaxonomy Term 等しい　カテゴリーに設定します。

カテゴリー一覧として画像を表示