wp 記事一覧にページャーと現在ページ位置を表示


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

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

まず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画像検索でフリー画像を探す


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

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

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

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

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

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

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

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

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

フォントの検索サイト


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

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

WordPress カテゴリに画像をつける

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

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

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

<?php
$categories = get_categories();
//$categories = get_categories('parent=0'); 親カテゴリーのみ
foreach($categories as $category) :
$cat_id = $category->cat_ID;
$post_id = 'category_'.$cat_id;
  
$catimg = get_field('catimg',$post_id);
$img = wp_get_attachment_image_src($catimg, 'full');
?>
<div><?php echo $category->cat_name; ?></div>
<div><a href="category/<?php echo $category->category_nicename; ?>"><img src="<?php echo $img[0]; ?>" alt="<?php echo $category->cat_name; ?>" /></a></div>
<?php endforeach; ?>

フリー写真素材


バナーの制作やブログを制作するとき、フリー素材サイトをよく使うと思います。
商用利用できる画像で、デザインに使用する写真や素材を見つけるのは中々大変なことだと思います。
中には検索制限や、ダウンロード回数に制限が会ったりなどで複数のダウンロードサイトを知っておいたほうが、時間の節約になります。

カテゴリー別に検索する

フリー画像素材を提供しているサイトはたくさんあり、
それらのサイトはカテゴリー別に検索できるようになっています。
人物や物、自然・風景、建物・街並み、乗り物など。

2つの検索ワードを組み合わせて検索する

カテゴリーで検索しても、検索結果にたくさん画像が出てきて、探すのが大変、そんなときに検索部分で文字を掛け合わせて検索してみましょう。
例えば、ノートパソコンとスマートフォンが写っている写真なら。[パソコン][スマートフォン]という風にです。
このようにワードを2つ入れると探しているものにグッと近づいたものが見つかるでしょう。

3つ以上の文字の掛け合わせで検索しても絞り込まれすぎてあまり検索に引っかからない可能性があるため、2つまでが適しているでしょう。

海外サイトで検索

海外の写真素材サイトでは日本語検索に対応していない場合がほとんどですが、英語の単語で検索すれば、それに関連した画像も引っかかりますし、高品質なものが多いので、場合によっては海外の画像サイトを利用してみるのもありでしょう。

Adobe CC利用者はTypekitでモリサワが利用可能

Typekitでモリサワフォント利用可能

デザイン制作をする方にとっては、モリサワなどの購入したフォントを利用してデザインされていると思います。

ライセンスがフリーのフォントは数多く存在しますが、商用利用可能が不可のもの、書体のバランスがデザインにあまり使えなかったりだったりと、有料フォントを使ってこられた方がほとんどだと思いますが、学生などでデザイナーやweb制作に将来関わりたいと思っている方にとっては有料フォントが高くて中々購入できないといった方もいるのではないでしょうか。

ですが、Adobe Creative Cloudのメリットとしてフォントの制限はあるものの、提供書体数が多くあるので、デザインの練習用の書体数としては問題ないと思います。
モリサワフォントはDTPの利用やphotoshopでのデザインでよく利用され、書体も美しいのでAdobe製品と一緒に利用できるのはとても大きいですね。

Photoshop CC


Creative Cloud誕生から5年した今でも、cs6などの過去のバージョンを使用している人が多いはずです。

Creative Cloudは買いきりのパッケージと違ってなんだか手を出し図らいという人もいるかもしれませんが、今回はccの新機能について紹介すれば使用したくなる人もいるかもしれません。

クリエイティブクラウドは単に、PhotoshopやIllustratorが月額制になっただけではありません。

■フォントの便利機能
特にPhotoshop で可変フォントがサポートされます。可変フォントは OpenType フォント形式の一種で、太さ、幅、スラント、オプティカルサイズなどカスタムすることができます。

■部分補正によるか霧の除去・追加
Camera Rawフィルターという機能でかすみの除去のスライダーを調整しながら修正できます。

Photoshopだけでなく、いろいろな便利機能が日々アップデートされていっているのでこの際に利用してみるとデザインのクオリティアップに繋がるかもしれませんね。

Firewoks

Firewoks

FirewoksはAdobe Creative Cloudの環境では存在せず、cs6以降、単体販売は行っていないのが現状です。
仕事でfwを使用するといった方にとっては困った状況ですが

fwデータからのAiへのデータの移行方法は
FireworksからAdobe FXG書き出しをしてIllustratorで開くだけです。

ですがIllustrator CCではAdobe FXG書き出しができないのでAi cs6でしかできないので、FireworksからIllustrator 8形式で保存してIllustrator CCで開くという段階が必要なので、データの移行方法はとてもめんどくさいですね。

意外と知らない便利なサービス

一人暮らしに便利なサービス

インターネットが発達して、コミュニケーションやショッピングがとても便利になりましたよね、ですが、それだけにとどまらず世の中には、意外と知られていない便利なサービスが存在します。
今回はそんなサービスを紹介していきたいと思います。

配達クリーニング

一人暮らしの人にとってクリーニングにだしている暇がないという人もいますよね。
仕事が忙しければなおさらですよね、さらにアイロン掛けをしている暇がないという人も多いはず。

そんなときに便利なサービスがあります。それが、宅配クリーニングです。なんと家まで服を取りに来てくれて、クリーニングをして返してくれる便利なサービスがあります。
一人暮らしのかたにとってはとても便利なサービスです。

家事代行

なんと家事代行のサービスまであります。
共働きで仕事をしていて家事にまで手が回らない状態の人も多いと思います。
部屋の片付けから掃除までを代行してくれるので、いざというときに利用してみてもいいかもしれませんね。

インターネットには探してみると便利なサービスが存在しているので、いろいろ探してみると面白いかもしれません。

知識がなくても簡単にレスポンシブWEBサイトが作れる


最近、自動化が当たり前になってきていますね。
今回は、そんな知識が無くてもレスポンシブサイトをカンタンに制作できて、webにアップすることのできるサイトを紹介します。

それがこのサイトです。
https://webflow.com/

サイトにアクセスしてユーザー登録してテンプレートを選んでサイトを作成するだけです。とてもカンタンですね。
後から、編集画面でWEBサイトのデザインを編集することができるので、テンプレートだけでなく自分の好みのサイトにカスタマイズできます。

webサイトの開発経験が無くてもデザインを見ながらコーディングできるので非常に便利ですね。