デザインを開発するという視点でお伝えするクリエイティブBLOG
現在「DesignDevelop」はWordPress2.3で動いています。WordPress2.2系からの大きなの変更点の一つにタグの標準化と言う物があります。いままでのWordPressはタグ標準では動作せずタグプラグインに頼っていましたが、今回リリースされたWordPress2.3からは本体に実装されています。
しかしこのタグ機能、細部までいじくれるわけではなく本当に最低限の機能しか持っていません。そこで今回はちょっと頼りないWordPress2.3のタグ機能を補ってくれるプラグイン「Advanced Tag Entry」を紹介したいと思います。
こちらのプラグインを使えば上記のような投稿編集画面でドロップダウンリストからタグの追加削除、タグの新規作成/編集、データベースからの未使用タグの削除、スラッグの編集ができる用になりタグの管理に非常に力を発揮してくれます。
インストール方法は以下から
(さらに…)
サイトの個性を出すためにもfaviconは重要な要素の一つです。通常WordPressでfaviconは表示させるには使っているテーマのheader.phpの部分にコードを記述すれば良いのですが、これではテーマを変えた時にまたfaviconの設定をしてあげなくてはいけません。
そこで今日はこの面倒な作業をなくすためのfavicon関連のプラグイン「Favicon Head」を紹介したいと思います。
1.Timblogからプラグインをダウンロード
2.ダウンロードしてきた「favicon-head.php」を「 wp-content/plugins/」へアップロード
3.「favicon-head」プラグインの有効化
4.管理画面 > [各種設定] > [favicon-head]でfaviconの位置を指定
以上です。
管理人はなぜか通常のヘッダにコードを挿入する方法が上手く行かなくてfaviconの表示をプラグインに頼ってしまいました。テーマをあまり変えない人には使い道が無いかもしれませんが、テーマを頻繁に変える方にはとってもお勧めなプラグインになっています。
動的なページなWordpressだけにしっかりとSEO（Search Engine Optimization、検索エンジン最適化）はやっていきたいですね。Wordpressdで運営していく上で気をつける点は多々あると思いますが、今回はSEOに便利なプラグイン「All in One SEO Pack」を紹介したいと思います。こちらのプラグインはAll in Oneと名乗っているだけあって、細かな所まで行き届いたSEO対策を簡単に設定する事ができます。
大きな特徴として、Titleタグ、MetaタグのKeywords、Descriptionを各投稿、ページにおいて設定することができます。Ultimate Tag Warriorのプラグインを使っている場合でも、TagとあわせてKeywordsに反映されるみたいなので安心です。
さらに嬉しいのはページタイトルの表示フォーマットも変更できる点です。一般的に「ブログ名｜タイトル」とするよりも「タイトル｜ブログ名」にしたほうがSEO的に良いとされていますが、そういったタイトルの表示もこちらのプラグインを使えば簡単に管理画面から設定できるようになります。
インストール方法は以下
(さらに…)
はてなブックマークを始めポータル系を中心にソーシャルブックマークサービスが運営されていて、効果的に利用されている方は記事の周辺に下記のようなボタンを設置して、人気の目安だったり、ブックマークを促してアクセス数アップにと利用されていますが、今回はそんなーシャルブックマークボタンを簡単に設置してくれるプラグイン「SBM Popular Entry」の導入から利用方法までを紹介したいと思います。
こちらのプラグインは上記のようにブックマーク数を表示するだけでは無く、ブックマーク数を基準としたランキングも生成してくれて、コード一行追加するだけで表示できるようになっています。
ソーシャルブックマークボタンを設置してみたいけど面倒だ、またはソースをいじる自信が無いと言う方にはオススメのプラグインです。ちなみにWordpress2.3でも問題なく動作していますが、現在Yahoo!ブックマークで不具合が出ているようです。
導入方法は以下
(さらに…)
日本では互換性を重視する傾向がつよくまだあまり、特殊なフォントをjavascriptなどで作り出すような手法はスタンダードではありませんが、中には、挑戦的なサイトもあり、フォントをjsやCSSで見せるそんなサイトもあります。今日紹介するのはWEBタイポグラフィ関係のjQueryプラグイン集「jQuery plugins for awesome web typography」です。
FitText – A plugin for inflating web type
フォントを加工するもの、テキストの組を特殊にしてくれるものなど、様々なフォント関連のjQueryプラグインが紹介されていますが、今回はその中から気になったものをピックアップして紹介したいと思います。
詳しくは以下
Lettering.js – A jQuery plugin for radical web typography.
自動的にclassを割り当てて、傾けたり、色を変えたり色々な処理が可能です。
It's Bacon! A jQuery plugin that allows you to wrap text around a bezier curve or a line.
オブジェクトにそって文字組を行なう事ができます。WEB上で紙のようなデザインが可能になります。
Arctext.js – Curving text with CSS3 and jQuery
文字をパスで並べたような、処理をjavascriptで可能にする。
上記の他にもいくつかのタイポグラフィ関連のjQueryプラグインが公開されています。文字をJS側で制御したいと言う方は是非原文もご覧ください。
POPで爽やかな印象から、グランジのようなハードな印象から様々な事を表現できるハーフトーン。デザイン制作では便利なものですが、今日紹介するのはそんなハーフトーンを集めたフリーベクターデータ集「28 Halftone Vectors 」です。
細かなものから、粗いものまで様々なハーフトーンパターンがベクターデータで紹介されています。収録されているハーフトーンのパターンは以下の通りです。
詳しくは以下
さまざまな種類の素材がインターネット上で配布されており、その種類の豊富さからどんな素材をピックアップして良いか迷ってしまうこともあるのでは？そんな時にチェックしておきたい、11種の最新素材まとめ「11 Best Design Resources Released This Week」を今回は紹介したいと思います。
iPhone 5s MockUp | GraphicBurger
アイコンやバックグラウンド、モックアップといった便利でクオリティの高い素材が揃っており、どれもダウンロードしたくなるデザインのものばかり。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。
一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。
詳しくは以下
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。
様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
私たちがWebサイトから何か情報を得る時に欠かせないのは、商品や記事の詳細を知ることができる写真ではないでしょうか。そんな写真を見せる演出に利用したい、360度回転するローテーションプラグイン「8 Best jQuery 360 Degree Image Rotation Plugins」を今回は紹介したいと思います。
360 Javascript viewer, 360 degrees JQuery image viewer
見せたいものの全景がぐるっと確認できる、リアルで見ることができない商品の全体像をブラウザ上で効果的に見せられるプラグインが紹介されています。
詳しくは以下
持っているといろいろな使い方ができることで、非常に重宝するアイコン素材。フリー配布されているものも非常に多く、お気に入りを見つけてはストックされている方も多いのではないでしょうか？そんなコレクションに是非加えたい、シンプルベースの多彩な種類のアイコン「40 New and Free Icon Sets」を今回は紹介したいと思います。
（Linecons Free – Vector Icons Pack – Designmodo）
シンプルという共通テーマの中にも、さまざまな表現で個性を発揮したアイコンがたくさん紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
CMSとしてもブログツールとしても国内外問わず人気の高いオープンソースwordpress。その魅力の一つに豊富なフリーで使えるテーマと言う点がありますが、今日紹介するのはクリエイティブでクオリティの高いwordpressのテーマを集めたエントリー「20 free WordPress themes with premium-like functionalities」です。
様々なwordpressのテーマが集められています。今日は今まで紹介した事がないテーマを中心に気になったwordpressのテーマをいくつか紹介したいと思います。
詳しくは以下
新しいデザインに合うように、使用する素材もどんどんと新しいものをストックしていきたいもの。今回はそんなシーンに是非参考にしたい、最新のデザインフリー素材まとめ「50 fantastic freebies for web designers, July 2014」を紹介します。
（10 Free Blurred Backgrounds | Free PSD Files）
いろんな種類の素材がまとめられており、さまざまなデザインシーンで活躍してくれそうです。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBを制作するにあたって、非常に便利な素材、アイコン。もちろんアイコンもフルオリジナルで作る時間と予算があれば良いのですが、毎回そうも言っていられない現場では、非常に重宝する素材の一つです。今日紹介するのは無料でダウンロードできるフリーアイコンセットをまとめたエントリー「24 Free Mini Icon Sets To Download」です。
ある程度数があるアイコンセットが全部で24個まとめられていましたので、今日はその中から気になったアイコンセットをピックアップして紹介したいと思います。
詳しくは以下
