デザインを開発するという視点でお伝えするクリエイティブBLOG
今回紹介する「WP-AddQuicktag」はWordPressで記事を書くときにかなり便利なプラグイン。このプラグインを使うと投稿画面に任意のQuicktagを追加できるようになり、よく使う処理や、定型文を登録しておけば間違いなく記事を書く労力は削減されます。
1.「WP-AddQuicktag 」からプラグインをダウンロード(.txtになっているのでリネームしてください)
2.「wp-addquicktag.php」を「wp-content/plugins/」へアップロード
3.管理画面からプラグインを有効化
AddQuicktagタグの設定タグは以下の通り
Buttontext：ボタンに表示するテキスト
Start tag(s)：開始タグの中身
End tag(s)：終了タグの中身(空要素タグの場合は空白)
タグセットを作るもよし、定型文を作っておくも良しと色々な使い方ができるプラグインだと思いますので、頻繁に更新する方は押さえておいても損は無いかと思います。
WordPressでお問い合わせフォームを作りたいけど面倒だと言う方は、今回紹介するWordPressプラグイン「WP Contact Form III」がおすすめです。こちらのプラグインを導入すれば、すぐさまお問い合わせフォームをブログに設置できます。
1.「WP Contact Form III」からプラグインをダウンロード
2.ローカルで展開後フォルダごと「wp-content/plugins/」へアップロード
3管理画面から[WP Contact Form III]を有効化
下記のコードをフォームを設置したい場所に記述
[contactform]
表示は英語ですが、「wp-contactform.php」で該当の箇所を修正すると日本語で表示することができます。またデザインは「contactform.css」で制御されておりデザイン表記の文字もカスタマイズ可能です。お問い合わせフォームで悩んでいた方にはオススメのプラグインになっています。
WordPressでYouTubeを貼付けるとなぜかフォーマットが崩れてしまい困っていました。調べてみるとYouTubeの埋め込みタグをリッチテキストエディタのソース編集でコピペするとどうもタグの一部がカットされてしまうようで、正常に表示されなかった模様です。
解決方法としてユーザー設定からリッチテキストエディタの使用をOFFにすればいいのですが、リッチエディタもたまに使うからともう少し調べてみるとYouTube動画を簡単に貼付けられるプラグイン「Noembedder」を見つけましたので紹介したいと思います。
1.「Noembedder WordPress Plugin」からプラグインをダウンロード
2.ロ−カルで解凍後フォルダごと「wp-content/plugins/」へアップロード
3.管理画面から[Noembedder]を有効化
詳しくは以下
記事が増えてくると当然人気がある記事、無い記事とあるわけで、運営者サイドとしては非常に記事の人気が有る無しは気になる所です。そこで大体の人気の目安として活用できる、記事の閲覧数を表示してくれるプラグイン「wp-postviews」を今回紹介したいと思います。
投稿した時期や話題によっても異なるので完全にこれで人気を測る事はできないかもしれ舞えんが目安には指標には十分なってくれると思います。
1.「wp-postviews」よりプラグインをダウンロード
2.解凍してできたフォルダごと「wp-content/plugins/」へアップロード
3.[wp-postviews]を有効化
導入方法は以下から
当サイトのアクセス解析にはgoogleさんが提供しているGoogle Analyticsを利用しています。もうご存知の方がほとんどだと思いますが、GoogleAnalyticsとは月間500万PVまでは無料（その以上のPV数の場合は、解析してくれないだけで、有料化するわけではない）で解析してくれて、滞在時間やリピートユーザー率などかなり細かいデータまで解析してくれますのでメインの解析ツールとして十分な機能を持っているアクセス解析です。
GoogleAnalyticsの解析にはテーマ内にトラッキングコード埋め込む必要があるのですが、テーマに直接記述してしまうとテーマを変えた時に面倒になりそうなので導入支援プラグインを「Ultimate Google Analytics」使いたいと思います。このプラグインを使えば簡単にGoogleAnalyticsをWordPressに導入できます。
インストール方法は以下から
通常のWordPressのページナビゲーションは「« Previous Page Next Page » 」として表示され、今何ページ目にいてどのくらい続きがあるかが直感的に分かりません。
そこでそんなインターフェイスの不便利を解決してくれるのが今回紹介するプラグイン「WP-PageNavi」です。
プラグインを導入すればページナビゲーションが上記のように表示され、今何ページ目にいるのかが瞬時に分かるようになります。ほんの少しの事ですが、閲覧する側を考えれば当然の配慮かと思います。
１．WP-PageNaviからプラグインをダウンロード
2.ローカルで展開後フォルダごと「wp-content/plugins」へアップロード
3.「WP-PageNavi」プラグインの有効化
以上です。
これだけではページナビゲーションは反映されませんので下記の手順を踏んでください。
導入方法は以下
(さらに…)
国内でもフリーランスの方でも、新規取引先との仕事を始めるに当たり、ポートフォリオやポートフォリオサイトの提出が求められるシーンも増えてきたのでは無いでしょうか？WEBに精通されている方であれば自分で簡単に制作という事もあると思いますが、そのポートフォリオサイトにもクオリティは求められるもの今日紹介するのはクリエイターのためのポートフォリオサイトテンプレートのベースとなる「Free Personal Portfolio Website Template」です。
このテンプレートはシンプルで洗練されたデザインとなっており、ポートフォリオに必要な内容は予め組み込まれた形になっています。テンプレートの全体のデザインは以下からご覧ください。
詳しくは以下
作り込まれたPhotoshopブラシはデザインのクオリティを上げるには非常に便利。アナログ感をプラスしたり、光の線や煙などphotoshopならではのリアルな描写が簡単に利用できます。今日紹介するのは、様々なブラシセットをまとめたエントリー「40 Awesome Photoshop Brushes for Designers」です。
アナログから自然現象までジャンルを問わずハイクオリティなphotoshopブラシセットが公開されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
洗練されたデザイン、可愛いデザインなどデザインのテイストは様々ですが、今日紹介するのはレトロでビンテージ感のあるデザインに最適なフリーフォントを集めたエントリー「30 Fonts Perfect for Vintage and Retro Style Design」を紹介したいと思います。
レトロ、ビンテージといっても色々な種類があり、そのなかでも、キレイめな書体、ガッチリした書体など様々なデザイン感の書体がまとめられていました。今日はその中から気になったものを紹介したいと思います。
詳しくは以下
■Fusty Saddle
装飾が施された重めのフォント。見本のように、古びた紙のテクスチャなどと相性が良さそうです。
■Ballpark
キレイめでシンプルな筆記体書体。レトロデザインに関わらず使えそうな汎用性の高い書体です。
■Rocket Script
食品のパッケージ担っていそうな、特徴ある書体。ロゴのタイプフェイスなどにも使えそうです。
上記のほかにも様々なフォントが紹介されています。基本的にすべてフリーでダウンロードできますが、各々のフォントで利用規約が定められていますので、商用でご利用になる方はフォントのダウンロード元でご確認ください。
スマートフォンサイトではすっかりお馴染みのメニューアイコン、ハンバーガーボタン。最近ではスマートフォンだけではなく、PCサイトもメニューとして利用されているのもよく見ますが、今回紹介するのは、ハンバーガーボタンにアニメーションを簡単に与えることができる、「Tasty CSS-animated hamburgers」です。
こちらはCSSのアニメーションを利用してスムーズにアニメーションするハンバーガーボタンを簡単に実装可能です。
詳しくは以下
グラフィックやWEBサイトなどのデザイン制作にはもちろん、CG制作などさまざまな分野で利用されているテクスチャ素材は、レパートリーの多さがオリジナリティの高いデザイン制作のための重要なポイント。そこで今回紹介するのが、さまざまな雰囲気を表現できる比較的最近発表されたテクスチャまとめ「Useful New Textures To Download And Use – 41 Items」です。
自然の風景を切り取ったテクスチャからデザイナーが制作したテクスチャまで、さまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
webサイト上で、クリックして決定する動作を行ってもらうために必要なボタン。できるだけ分かりやすく、押しやすくするためには、デザインが重要な鍵になってきます。今回はそんなクリックエリアを分かりやすくデザイン的に見せるためのフリーボタン素材「40 Free Web Design Buttons For Web Designers」を紹介したいと思います。
Download Buttons PSD | Free PSD Files
さまざまなクリックシーンで利用できる、いろいろな種類のボタンがセットになってまとめられています。
詳しくは以下
街の壁面や建物の壁材などに利用されているレンガ。年月が経ったことによる味のある色合いは、アンティークでヴィンテージな雰囲気を感じさせてくれます。今回はそんなレンガ壁のテクスチャセット「8 Brick Wall Textures」を紹介したいと思います。
シンプルかつ、さまざまな色合いのミックスされたレンガテクスチャが8種セットになっています。
詳しくは以下
webサイトを一からデザインするとどうしても時間がかかってしまうもの。時にはフリーで配布されている素材を使用することで、効率的に仕上げることができると思います。今回はそんな時に参考にしたい、フリーフラットUIキットまとめ「30 Free and Flat UI Kits for November 2014」を紹介したいと思います。
L Bootstrap Freebie – UI Kit Inspired by Android L on Behance
いろいろなタイプのフラットテイストなフリーUIキットがまとめられており、便利に活用することができるようになっています。
詳しくは以下
旅行を計画している時に参考にするトラベル系サイト。情報が豊富なだけに、見やすさや分かりやすさには気を配りたいものです。今回はそんな時に参考にしたい、観光と旅行をテーマにしたフリーアイコンセットまとめ「13 Tourism & Travel Icon Set For Free Download」を紹介したいと思います。
Dribbble – Free Circle Icons: Transportation Add-on by Kenny Sing
乗り物や旅行アイテムなど、旅を感じさせてくれるアイコンセットが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
たくさん配布されているフリーフォント。常にチェックし、いろいろなタイプを実際に使用されている方も多いかと思いますが、今回紹介するのは、非常に個性的なデザインで主張するフリーフォント10選「10 Unusual Free Fonts for Graphic Designers」です。
BitSyringe: Letter set. on Behance
10種という厳選された数ではありますが、どれも単体での個性が強く感じられるインパクトのあるものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
