この記事を読むのに必要な時間は約 3 分です。

記事下にバナーを追加しました。

さて、先週から毎週の課題としてバナーを作成していただいたいたのですが、早速各記事の一番下にそれぞれが作成したバナーがランダム表示されるようにWordPressをカスタムしました。

ちょっとWordPressのカスタムになるのですが、single.phpにコード入れればそれで終了・・・!と思いきや、「この記事を書いた人」の上に表示させたかったため、フィルターフックを使うことになりました。

フィルターフックなにげにはじめてだったのですが、悪戦苦闘してなんとか実現できました。

この経緯については改めて記事にしようと思っています。

バナー画像をランダム表示については、今回はWordPressのプラグインを使用しました。
Ads by datafeedr.com

設定方法についてはこちらの記事を参考にいたしました。

WPで広告をランダム表示させるプラグイン「Ads by datafeedr」【WPプラグイン】
https://keywordfinder.jp/blog/etc/wp-plugin-ads-by/

Photoshopのテクニック

そして、今週でサポートとして運営の手助けをしてくれていたHarakitさんが、一区切りで終りとなります。

いろいろお手伝いいただき、また細かいところも機転が利いてサポート頂きました。ありがとうございました!

さて、今週はPhotoshopの機能である「コンテンツに応じた拡大・縮小」をデモンストレーションしました。

WEB制作をしていると画像の比率的にもっと横のものが欲しい場合や、画像のサイズが足りないときがあります。

もちろん、画像をそのまま横に伸ばすなどすれば縦横比が崩れてしまい、おかしな画像になったします。

しかし、Photoshop CCで追加された「コンテンツに応じた拡大・縮小」を使用すれば、縦横比を変更しても違和感のないようにPhotoshop補完しながらサイズの変更を行うことが可能です。

そして、変形の際に保護しておきたい領域も決めることが可能です。
※極端に大きく縦横比を変えるとさすがに、おかしな画像になります。

詳しくはこちらを参考にして下さい。
https://helpx.adobe.com/jp/photoshop/using/content-aware-scaling.html

いよいよWizcoのWEB制作コースのデザインカンプ制作フェーズも区切りが見えてきて、5月頃からHTML/CSSコーディングに入ります。

最初はHTML/CSSは、わけがわからないと思いますが受講生が理解できるよう、いろいろ考えたいと思います。

 

The following two tabs change content below.
WEBDAデザイン 岡田
枚方市在住のフリーランスWEBデザイナー。 様々な業種のWEBサイトの制作から印刷物、スマートフォンアプリのUIデザインも手がける。 ITコミュニティースクール Wizcoの主宰。 WEBDAデザイン