デザインを開発するという視点でお伝えするクリエイティブBLOG
動的なページな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!ブックマークで不具合が出ているようです。
導入方法は以下
(さらに…)
googleにはGoogle Sitemapsというサービスがあり、こちらを使えばgoogleさんが効率的にページをインデックスしてくれるようになります。しかしこのGoogle Sitemapsを利用する為にはsitemap.xml を作成する必要があります。手動でsitemap.xmlを作るのは一仕事なので今回はプラグイン「Google Sitemap Generator 」に頼りました。
プラグイン自体は日本語に対応していますが、インストール手順が日本語で同封されていませんでしたので今回は「Google Sitemap Generator 」導入までを紹介したいと思います。ちなみに当ブログはwordPress2.3で動作していますが問題なく利用できました。
念のために書いておきますが、「Google Sitemaps」の利用にはGoogleアカウントを取得する必要があります。
インストール手順は以下
テクスチャの中でも汎用性がありもっとも使いやすい素材の一つ、紙のテクスチャ。紙といっても柔らかい印象のものからハードな印象のものまで、様々なものがありますが今日紹介するエントリー「150+ Free Paper Textures for your Next Design」は紙をテーマにあらゆる紙のテクスチャを集めています。
様々なセットが公開されていますが、今日はその中からいくつか気になったテクスチャセットをピックアップして紹介したいと思います。
詳しくは以下
最近は特に温かみのあるデザインが好まれるようになっており、手書きや筆記体のようなフォントが人気を集めています。そんな中から今回は、フリーで利用できる手書きと筆記体のフォントを集めた「Free Handwriting And Script Fonts – 70 Examples」を紹介ししたいと思います。
さりげなさを感じるフォントから、ポップな可愛らしいフォントまで、さまざまなフォントが紹介されています。中でも特に気になった物をピックアップしましたので、下記よりご覧ください。
詳しくは以下
さまざまな画像加工を得意とするPhotoshopですが、効果的にエフェクトを利用するには技術と豊富な知識が必要になります。そこで今回紹介するのが、エフェクトを効果的に利用した画像加工チュートリアル集「10 Special Effects Photoshop Tutorial」です。
画像のテイストを変化させられるチュートリアルから、CG合成のようなチュートリアルまで、表現の幅を広げられる技術やアイデアが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
世界中で愛され続けている玩具の一つ、レゴブロック。組合せ次第でいろいろなオブジェクトを作り出すことができるクリエイティブ性の高い玩具として、子ども世代だけでなく大人からも人気を集めています。今回はそんなレゴブロックの質感を取り入れたグラフィックを作り出せるpsd「LEGOlize yourself Free PSD」を紹介したいと思います。
「LEGO」というロゴが入ったブロック状のビジュアルを簡単に作り出すことができるようになっています。
詳しくは以下
WordPressでYouTubeを貼付けるとなぜかフォーマットが崩れてしまい困っていました。調べてみるとYouTubeの埋め込みタグをリッチテキストエディタのソース編集でコピペするとどうもタグの一部がカットされてしまうようで、正常に表示されなかった模様です。
解決方法としてユーザー設定からリッチテキストエディタの使用をOFFにすればいいのですが、リッチエディタもたまに使うからともう少し調べてみるとYouTube動画を簡単に貼付けられるプラグイン「Noembedder」を見つけましたので紹介したいと思います。
1.「Noembedder WordPress Plugin」からプラグインをダウンロード
2.ロ−カルで解凍後フォルダごと「wp-content/plugins/」へアップロード
3.管理画面から[Noembedder]を有効化
詳しくは以下
Webが急速に発展しユーザーも年々増える中、デザインにもどんどんと変化していますが、毎日触れていることもあり、その変化を明確に感じることはあまりないかもしれません。今回はそんなデザインの移り変わりを感じられる「Button Design Over the Years – The Dribbble Timeline」を紹介したいと思います。
Webサイトで必ずといって良いほど目にする、ボタンデザインに注目して、その遍歴と共に比較されています。
詳しくは以下
印象的なWebサイトに仕上げるには、印象的な写真を取り入れるのが効果的ですが、思い描いている写真の質感を表現するためには、Photoshopの機能を駆使しなければならないことも。今回はそんな時に便利に活用できる、写真を簡単に印象的に仕上げてくれるPhotoshopアクションのまとめ「45 Amazing and Free Photoshop Actions」です。
Free HDR Photoshop Action – PhotographyPla.net
ヴィンテージテイストを中心に、シーンに合わせて選べるさまざまな加工アクションが用意されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
CSSのみで制作されるアニメーションは軽量でシンプルで非常に使い勝手も良く、国内でもブラウザの制限が商業レベルでも外れてきた今、数多く活用されはじめてきていますが、今日紹介するのはCSSのみで制作されたローディングアニメーションセット「CSS Loader」です。
ローディングアニメーションはWEB制作の現場でも比較的利用頻度が高く、最近の画像中心のWEBサイトでは必ずと言っていいほど実装するためCSSのみで利用できるのは非常に魅力的です。
詳しくは以下
デザイン制作シーンで欠かせない存在となっているPhotoshopブラシは、さまざまなコンセプトのものが発表されており、実際のデザイン制作に利用している方は多いのではないでしょうか？そんな中から今回は、Photoshopで利用できる鳥のブラシセットをまとめた「30 Cool Bird Brush Sets for Photoshop」を紹介したいと思います。
Bird Brushset by ~paranoidstock on deviantART
さまざまな種類の鳥が表現できるブラシ素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインを華やかにしてくれる背景素材。紙面でもWeb上でも非常に役に立ってくれます。だからこそ新しいものは常に所持しておきたいもの。今回ご紹介する「10 Fresh & Free Vector (AI, EPS Files) Background」では、最新のアイテムがまとめられています。
Beautiful Painted Floral Illustration Vector Graphic —
全てベクターで制作されているので、非常に使い勝手がよいものとなっています。気になったものをいくつかピックアップしているので、下記よりご覧ください。
詳しくは以下
