無料かつお洒落な海外発WordPressテーマ配布サイト3選

無料でお洒落なWordpressテーマを配布している海外サイトを3つご紹介します。

「wordpress theme free 2017 」というようなキーワードで検索すると、各種ブログやサイトがおススメ30選、50選などと詳しい説明・キャプチャ付きで紹介してくれてるですが、手あたり次第に「これいいな」と思ったものを詳しく見てみると、大抵同じデザインスタジオや会社が作っているテーマに行きついていることが多かったりします。

それだったら、最初から大元のデザイン会社のテーマ配布ページをブックマークしておけば、次に探すとき楽だな~と思い、この記事にまとめておくことにしました。

純国産のテーマもいいですが、海外発のテーマは種類も断然多いし、フリーなのにデザイン面でも優れているものがたくさんあります。(多すぎて全部チェックするのが大変なくらい?)

海外発の無料テーマを探すならまずは以下の3サイトをぜひチェックしてみてください。

 

使いやすさも抜群で様々な用途にしっくりくるデザインThemeGrill

無料テーマ配布ページ

ThemeGrillのテーマは以前サイト運営用に使ったことがあるのですが、無料版でも充実したカスタマイズ設定ができ、固定フロントページのレイアウトもウィジェットベースで簡単にきれいな構成でできるのが魅力でした。

シンプルでもちょっとした細部のデザインにこだわっていたり、何よりも見やすくて色んなカテゴリーのサイトに使いやすいデザインのテーマが多いです。管理画面側の使いやすさもおすすめポイント。

2017年版のベストWordpressテーマとして、ThemeGrillのFlashというテーマがいろんなところで紹介されています。ランディングページ、一般サイト、ブログ、ショップなど様々な用途に使えます。

SiteOrigin Page Builderプラグインに対応しており、ドラッグ&ドロップでページコンテンツを作っていけることや、フリー版でも11ものカスタムウィジェットが使えたり、スライダーが設定出来たりと、シンプルなサイト作成には充分な機能が備わっています。

Flashテーマのデモ・ダウンロード: https://demo.themegrill.com/flash/

 

 

洗練されたモダンなデザインATHEMES

ATHEMESが提供しているテーマは、ミニマルでモダンなデザインのものが多く、個人的には一番好みのテーマ配布サイトです。個人ブログやニュースサイト、ポートフォリオサイトにもいいし、ショップやビジネスサイト向けんテーマもあります。現時点で当ブログが使っているテーマもこのATHEMESの無料テーマの一つ。

無料テーマ配布ページ

 

ニュースサイト用のテーマGREATMAGが最近は色んなところで紹介されているのを見かけますが、。少し前はマルチパーパスのテーマSYDNEYもよく紹介されていました。

GREATMAGのデモ・ダウンロード

カテゴリーごとに新着情報を分類してトップページに表示できるニュースサイト向けのテーマですが、個人ブログでも使いやすそうなデザイン。

 

SYDNEYのデモ・ダウンロード

パララックス(視差)バックグラウンド画像や、スライダーなど、ランディングページが簡単に魅力的なものになる設定も可能。

 

様々なスタイルの良質な無料テーマを配布しているThemeIsle

「ThemeIlseのテーマは○○な感じです」と一言で言い表せないくらい、いろんなスタイルのテーマを配布しています。ポップなものからエレガントなもの、シンプルなもの、カッチリした感じのものなど、30ほどのテーマがダウンロードできるので自分の好みに合ったテーマを見つけやすそう。

管理画面側のデモも見ることができる(要登録)ので、気になったものは同時に使い勝手を試して見れるのもいい感じ。

無料テーマ配布ページ

 

中でもマテリアルデザインが特徴のHESTIAというテーマが最近のイチ押しのようです。

無料のPage Builderプラグインを使ってドラッグ&ドロップで組み立てられたり、WooCommerceにも対応しているなど、機能面でも充実しているのが魅力。メニューにアイコンが設定できたりメガメニュー対応だったりするところとかも、さりげなく充実しています。

HESTIAのデモ / ダウンロードはこちら

 

個人的にはAmadeusというブログ用テーマがいいなと思っています。モノトーンのシンプルなテーマですが、レイアウトとかちょっとした動きがオリジナリティがあっていいなと。

Amadeusのデモ /  ダウンロードはこちら

 

 

クオリティが保証された有料テーマサイトThemeforest

ちょっとした小規模サイトや個人ブログなら無料テーマで十分ですが、本格的なサイトを面倒なコーディングなしに作りたい場合は有料のテーマを使うのが早道かつ安心です。

ThemeforestのテーマはVisual ComposerやRevolution Sliderといった直感的にコンテンツを配置していけるプラグインとセットになっているものが多いので特におススメ。Visual Composer、Revolution Sliderは最初扱いに慣れるのに数日苦労するかもしれませんが、一度覚えてしまえば、デザイナーやサイト制作者の仕事をかなり楽にしてくれます。

テーマには数多くのデザイン済みのコンポーネント(パーツ)が用意されていますし、動きのあるスライダーやアニメーション、パララックス効果・アニメーションなども取り入れたりして、充実したサイトコンテンツを作っていけます。

ThemeforestのWordpress人気テーマ一覧

フラットデザイン・ワンページのお洒落な無料HTML5テンプレート8選

こんにちは!最近のWebデザインの主流になっている「フラットデザイン」、そして一ページで完結する縦長(LP、ランディングページ)のHTMLテンプレート。お洒落なデザインはたくさんあるのですが、何十個も何百個も見ていると、特に無料のものはどれも似たような感じだな~と飽きてくることがあります。今回は色々見ていくなかで、「お!?」と興味をひかれたものを一覧にしてみました。記事の最後で無料のHTML5テンプレートがダウンロードできるサイトもご紹介しているのでよかったらそちらからも探してみてくださいね。

一画面に収まったアプリっぽい使い勝手のテンプレート

Screenshot of www.templatemo.com

 

一ページの縦長サイトが結構流行っていますが、こちらは左サイドが固定されていて右側がメニューに合わせてスライドしていく感じです。なので、一画面で完結しているようなアプリっぽい感じの印象になります。縦長のサイトに飽きたらこういうのもいいかもしれませんね。

HTML5 + CSS3 + Bootstrapフレームワークで作成されたレスポンシブ対応のテンプレートです。

デモ

ダウンロード

 

ファーストビューの色使いとレイアウトが大胆なテンプレート

Screenshot of www.templatemo.com

 

なかなか無いカッティングのレイアウトで、ファーストビューのインパクトがすごい一枚モノのテンプレートです。ポートフォリオ向け。色を自分でカスタマイズすれば印象がガラッと変わりそうですね。HTML5 で作られ、レスポンシブ対応。

デモ

ダウンロード

 

 

シンプルだけど色使いがお洒落なテンプレート

Screenshot of templates.websitetemplatesonline.com

 

かなりシンプルなフラットデザインですが、色使いがお洒落だったので載せてみました。

デモ

ダウンロード

 

 

ふわふわっと表示されるのが今風のテンプレート

Screenshot of pixelhint.com

 

スクロールに合わせて表示されるコンテンツがふわふわっと浮かび上がる感じになっているのが今風のテンプレート。HTML5 + CSS3。

デモ

ダウンロード

 

斜めのカッティングがアクセントになったテンプレート

Screenshot of www.gt3themes.com

 

斜めになっていなかったら、何でもないよくある一枚モノのテンプレートですが、斜めにカッティングされているのがアクセントになってお洒落感が増していると思いました。木の質感とフラットデザインの組み合わせもいいですね。

デモ

ダウンロード

 

スクロールとホバー時のエフェクトがいい感じのシンプルなテンプレート

Screenshot of templates.websitetemplatesonline.com

 

テンプレートに含まれるのはトップページだけであとは作りこみが必要になりますが、ホバー時のエフェクトがよかったので載せてみました。ホバー時やスクロール時のアニメーションを取り入れるのも最近流行っているので参考になりそうです。

デモ

ダウンロード

 

スクロールとホバー時のエフェクトがお洒落なテンプレート

Screenshot of webthemez.com

 

こちらもスクロールとホバー時のエフェクト(アニメーション)がとてもお洒落だったので載せてみました。

デモ・ダウンロード

 

ナビゲーションメニューの位置が一工夫あるテンプレート

Screenshot of webthemez.com

 

ナビゲーションメニューは普通ページの上のほうにありますが、このテンプレートの場合、ファーストビューでは画面下に表示されるようになっています。その後スクロールすると上に固定されるので使い勝手も悪くありませんし、第一印象をパシッと決めたいときに使えそうなレイアウトだなと思いました。

デモ・ダウンロード

 

無料でレスポンシブ対応のHTML5テンプレートがダウンロードできるサイト

この記事に載せたのはほんの一部で、以下のサイトではHTML5の無料テンプレートが多数そろっているので、お気に入りのテンプレートを見つけてみてください。

Templatemo

WebThemez

WebsiteTemplateOnline

ThemeWagon

 

商用OK!無料で使えるアイコンフォントでブログ・サイトを楽しくお洒落に

最近、地元のマタニティウェアショップから依頼されたサイト制作で初めてアイコンフォントというものを使ってみたのですが、なかなか使い勝手が良かったので、今後の覚書ということでまとめてみました。

アイコンフォント(シンボルフォントとか言い方は幾つかあるよう)とは、Webサイトなどでよく使われるアイコンのセットをフォントとして使えるようにしたもののことです。

画像アイコンとは違ってベクター形式なので画面の解像度によらずきれいに表示されることや、cssで色、サイズなどを調整できるメリットがあります。

 

今回アイコンフォントを探してみて、商用利用も自由な無料のものでもかなり充実した内容のものがあるな~という感じでした。アイコンって探し始めると本当にあっという間に時間が過ぎて行ってしまいますが、今後はアイコンを探す手間も減るんじゃないかなと期待^^

ちなみに、Wordpressブログでアイコンフォントを使いたい場合も、ちょっとした設定だけで利用できるようになりますので、ぜひこの記事を参考に使ってみてください。記事の後半では、アイコンフォントをサイトで利用するときに便利なWebサービスも二つ、使い方も併せて紹介していきます!

 

初めての利用におススメなアイコンフォントFontAwesome

公式サイトhttp://fontawesome.io/

商用利用にもライセンス表記なしで自由に使える無料のアイコンフォントです(ライセンスの詳細はこちらを確認)。479個(記事執筆時)のシンプルで使いやすいアイコンが揃っていて、取りあえずこれがあれば事は足りるという感じの定番アイコンフォント。以下、使い方の手順です。

 

フォントを利用するHTMLで読み込む

まずはFontAwesomeのフォントを、自分のプロジェクト(サイト)のHTMLで読み込めるように設定していきます。方法は二つあって、フォントファイルをダウンロードせずに本家サイト(BootstrapCDN)から読み込む方法と、フォントファイルをダウンロードして自分のプロジェクト内に設置する方法があります。好きなほうを利用してください。

 

方法1.ダウンロードしないでBootstrapCDNからCSSを読み込む

以下のコードをHTMLファイルのheader内にコピペするだけでOK。

参考http://fontawesome.io/get-started/

 

方法2.フォントファイルをダウンロードして利用する

公式サイトにアクセスします。ダウンロードボタンが分かりやすい位置に表示されているのでクリックしてダウンロードを開始。

Font Awesome サイト

 

ダウンロードしたzipファイルを解凍。以下のような構成になっています。

downloaed font

cssフォルダ内のいずれかのファイル(推奨:font-awesome.min.css)とfontフォルダ内の全てファイルを自分のサイトのcssフォルダとfontフォルダにそれぞれコピーします。

注:cssとfontフォルダは同じ階層にあるようにしてください。

 

フォントを利用するHTMLを開き、header内で以下のようにコピーしたcssファイルを読み込みます。

※href=””内は自分のサイトの構成に合わせて適宜変更

 

ここまででフォントの読み込み設定が完了です。では実際にサイト内にアイコンを配置しましょう。

 

サイトにアイコンを配置

公式サイトにアイコンの一覧があるので以下よりアクセスします。

http://fortawesome.github.io/Font-Awesome/icons/

icons in FontAwesome

 

ずら~~っと並んでいますね^^; 使いたいアイコンが見つかったらクリックします。

select icon

すると、選択したアイコンのタグが表示されますのでコピーします。

copy code

HTML内に貼り付けます。

htmlに貼り付け

こんな感じにボタンに使ってみました。

fontawesome適用結果

 

アイコンのスタイルを変更するのに既に用意されたcssクラスも併せてチェックしておくと役立ちそうですね。

http://fontawesome.io/examples/

 

 

WordPressでFont Awesomeを使う設定

WordPressに何かの機能を追加するとなると、ついついプラグインを使う方向に頭が向いてしまいますが、今回はプラグインは使いわない方法でやってみました。

(実は、使おうとしたんですが、どれもうまく動作しなかったんです・・・。Worpress本体のバージョンとの互換性が微妙だったよう)

 

プラグインを使わずにFont Awesomeを導入する方法はいくつかあるようですが、私はfunction.phpに以下のコードを追加する方法にしてみました。

参考Add Font Awesome Icons To WordPress

 

ダッシュボードで外観>テーマ編集の画面に行き、function.phpを開き、以下のコードを追加してください。

※4.2.0の部分は公式サイトに表示されている最新バージョンに合わせると、最新のアイコンが使えます。

function.phpを保存したら、あとは、投稿画面のテキストモードで、必要な場所にiタグを設置すればOK。

例) <i class=”fa fa-angellist”></i> ⇒ 

 

簡単ですね

iタグに記述する各アイコンのクラス名は前述のようにサイトで確認してください。

 

このブログでは記事タイトルの先頭にあるマークを画像からアイコンフォントに変更しました。

Before: スマホなど画面幅の狭い画面で見た場合にタイトルが縦長になってしまっていました。

wp2

wp3

 

After:幅が狭くなっても改行が少なく見やすくなったかなと思います。色の変更とかもCSSだけで調整できるのもいいです。

wp4

wp5

 

March.15.2015追記:ブログデザインのカスタマイズに伴って上記のような記事タイトルの先頭のマークは消えました。代わりにFontAwesomeを使ってShareボタンやFollowボタンを表示させたり、グローバルメニューにもアイコンを表示させています。

 

さてここまではFont Awesomeというアイコンフォントのみの利用方法でしたが、それ以外にもフリーで使えるアイコンフォントは幾つも存在します。

そんなアイコンフォントのなかから好きなもの利用したいという場合に役立つサービスを二つご紹介します。

 

複数のアイコンフォントを簡単な設定で使えるWebサービスWE LOVE ICON FONTS

FontAwesomeを含め、幾つかのアイコンフォント(すべて無料かつオープンソース)を使いたいという時に便利そうなWebサービスを見つけました。ファイルのダウンロード不要でさくっと設定して使えます。

サイトにアクセスhttp://weloveiconfonts.com/

we love icon fonts

 

表示されているフォントの中から使いたいものをAddをクリックして追加します。

フォントを追加

 

ページの下のほうにスクロールすると、Use selected font(s)というセクションがありますので、そこに表示された内容をコピーして、自分のサイトのcss内に貼り付ければ、フォントの読み込み設定が完了です。

例)typiconsとzocialという二つのフォントを選んだ場合

we love icon fonts 使い方

 

次に使いたいアイコンをサイト内で選んでクリックし、ページ下に現れるアイコンのクラス名をコピーし以下のようにspanタグで設定すればOKです。

we love icon fonts 使い方

例)Zocialフォントのdribbbleを選ぶ場合 <span class=”zocial-dribbble”></span>

 

 

使いたいアイコンだけを選んで一つのフォントファイルにしてくれるサービスFontello

前述のサービスとは違って、cssやアイコンファイルをダウンロードして使うタイプのサービスですが、かなり使えそうです。幾つものアイコンフォントの中から、自分が使いたいアイコン(フォントではなく)だけを選ぶことができ、しかも選んだアイコンだけを新たなフォントとしてまとめなおしてくれるんです

数あるアイコンの中でも実際に一つのサイト内で使うものは限られていますし、ファイルサイズを最小限に抑えながら自分の好きなアイコンをセットにできるのはありがたいですね。

 

サイトにアクセスhttp://fontello.com/

一覧の中から使いたいアイコンをクリックして選んできます。 fontello

 

アイコンを選んだらページ右上のDownload Webfontをクリックしてファイルをダウンロードしましょう。

※ボタンのカッコ内は選んだアイコンの数です。

download webfont

ファイルを解凍すると以下のような構成になっています。

fontello ファイル

  • cssフォルダ : cssファイルがあります。
  • fontフォルダ : fontファイルがあります。
  • config.json : このファイルをfontelloサイト内でImport(レンチボタン内の機能)して作業を継続できます。
  • demo.html : ダウンロードしたアイコンとそのクラス名を確認できます。
  • README.txt : 使い方と注意事項。
  • LICENSE.txt : アイコンのライセンスを確認しておきましょう。

 

 

使い方は、css、fontフォルダを自分のプロジェクト内に追加し、cssフォルダ内のファイルをHTML内で読み込みます。

基本的には以下の二つのcssファイルを読み込めばOKです。

 

その他のcssファイルは必要に応じて利用してください(README.txtを参照)

 

アイコンはiタグのクラスにアイコン名を設定して利用します。自分が選んだアイコンの一覧とクラス名はdemo.htmlを見ると確認できますよ。

例) <i class=”icon-home-outline”></i>

fontello4

無料HTMLテンプレート8選-最近流行りのお洒落なデザインを集めました

最近、自分のサイドビジネス用にひとつWebサイトを立ち上げようと思い、色々なテンプレートを探してたのですが、無料でも今どきのフラット系デザインとか、なかなかお洒落なHTMLテンプレートが見つかったので、備忘録も含めてこの記事で皆さんとシェアしたいと思います。

Treviso

Treviso Responsive HTML5 Template

最近人気のタイプのHTML5テンプレート。下の全体像を見ていただくとわかりますが、すべての情報が1ページに長~く記述されていて、ページ最上部のメニューをクリックすると、その内容の位置までスクロールダウンされ、あたかもページ移動したかのようになります。(このテンプレートでは少し下にスクロールすると最上部にメニューが表示されます)。

Treviso Responsive HTML5 Template

別ページに遷移するよりも表示がスムーズなので格好いいですし、閲覧者側としては下にどんどんスクロールするだけですべての情報が見れるのも魅力ですね。ただ情報が多くなる場合はページを分けるタイプのほうがいいかなという気がします。

ダウンロードはコチラ

デモはコチラ

 

 

Juntos

こちらも1ページにすべての情報が収まっているタイプのHTML5テンプレート。チャリティー関連の組織向けに作られたテンプレートで「寄付」ボタンもついています。もちろん他のジャンルにもカスタマイズ可能。レスポンシブ対応、コンタクトフォームがちゃんと機能するPHPファイルもありという非常にありがたいテンプレートです。ドキュメンテーションもしっかりしています。

Juntos - Charity Association Template

 

ダウンロードはコチラ

デモはコチラ

 

NOVA

NOVA 無料HTML5テンプレート

こちらもHTML5で作られていますが、ページ遷移するタイプのテンプレートです。様々なジャンルに応用できそうなシンプルなデザイン。ブログ形式やポートフォリオ、ギャラリーのページなど使いやすい形のページが揃っています。コンタクトフォームもちゃんと動くのでコーディングに自信がない人も安心して使えますね^^

NOVA 無料テンプレート

ダウンロードはコチラ

デモはコチラ

 

Infusion

レスポンシブ対応のHTMLテンプレート。お洒落なエフェクトがあちらこちらに使われていて、クオリティの高さを感じます。残念ながらこちらはトップページのみのテンプレートですので、メニューをクリックしても別のページは表示されません。残りのページは自分で作成する必要があります。

Infusion 無料HTMLテンプレート

ダウンロードはコチラ(要登録)

デモはコチラ

 

 

Starnight App

こちらもHTML5+CSS3で作られた人気の一枚型テンプレート。右上のボタンをクリックするとメニューが現れ、メニューを選択するとそのコンテンツの位置までスクロールします。スクロールの仕方がふわ~っとしていい感じです笑

Starnight - 無料 HTML5 CSS3 テンプレート

ダウンロードはコチラ(要登録)

デモはコチラ

 

Picku

ギャラリーやポートフォリオサイトに使えそうなお洒落で個性的なテンプレート。ページを全画面に拡大するボタンなど、普通のテンプレートにはなかなかついていない機能があります。画像の「Open」の文字をクリックしたときの動きにも注目です。こちらもテンプレートになっているのはトップページのみなので他のページが必要な場合は自分で作成する必要があります。

Picku 無料HTMLテンプレート

ダウンロードはコチラ

デモはコチラ

 

 

Zeences Dark

無料HTMLテンプレート Zeences Design

 

 

中央部分にスライドがあるのと同時に、バックグラウンドもホワホワと変化するのがお洒落です。トップページも色んな要素がたくさん詰まっていますが、各メニューからアクセスできる様々なタイプのページもよく作りこまれたテンプレートになっています。実際このテンプレートをベースにデザインにも手を加えてサイトを作っているところなのですが、ソースコードも綺麗ですし、非常にカスタマイズしやすい。トップページの全体像は以下のような感じです。

無料HTMLテンプレート Zeences Design

 ダウンロードはコチラ

デモはコチラ

※こちらのテンプレートはFree for only personal use(個人利用のみ無料)です。

 

Obscura

無料HTMLテンプレート Obscura

 

こちらも上とおなじサイトからのHTMLテンプレートになります。WordpressようのテンプレートをHTML対応したもののようで、ブログっぽい雰囲気のサイトをHTMLで作りたい方にお勧めです。レスポンシブ対応というのもうれしいですね。全体像は以下のような感じ。

無料HTMLテンプレート Obscura

ダウンロードはコチラ

デモはコチラ

※こちらのテンプレートはFree for only personal use(個人利用のみ無料)です。

 

 

センスある画像・アイコン・ロゴがざっくざく!WEB素材無料配布サイト10選

大分前ですが人は見た目が9割」という書籍が一時流行りましたよね。

 

タイトルがタイトルなだけに一瞬ムッと来た人も少なくないと思いますが(私もその一人ですっ)、人間が相手から受け取る情報の大部分は身だしなみ、しぐさ、表情といった【見た目】にかかわる部分だというのがその話の筋。

顔立ちがどうこうっていうよりも、清潔感があって、はつらつとした表情で丁寧なしぐさの人と話すのと、不潔な感じで表情もぱっとせずしぐさも乱暴な人と話すのでは【同じ内容】のことを言われても【残る印象】は全然違ってしまう。

 

さらには、見た目が良ければ内容も良いように【思えてくる】ということだってある。

化粧品の広告に綺麗な女優やモデルが使われているのも、そういう効果があるからこそですよね。

 

 

ではWEBサイトやブログの見た目はどれほど重視すべきか。

内容と見た目のどっちが重要かっていったら、それはやっぱり内容だと思います。

 

綺麗なデザインかどうかはSEO(検索結果の上位表示)とは全く無縁。将来的にGoogleのアルゴリズムがさらに進化してサイトやブログの見た目まで評価されるときが来るのかわかりませんが、今のところ検索エンジンが評価するのは記事の質・オリジナリティ、ブログの内部構造といった中身です。

 

でも、見た目を無視していいかというと、そうじゃない。

だってサイトやブログを見るのは人間ですからね。

当然ながら企業や団体の公式サイトなら、ブランディングは非常に重要で、企業イメージにふさわしいデザインが必要になります。この場合はたぶん、専門のWEBデザイナーに依頼してオリジナルなデザインをゼロから作ってもらうことになると思います。

じゃあ個人レベルのブログはどうか。凝ったデザインは必ずしも必要ではないですが、見ていて「読みやすいな~面白いな~」と感じる有名ブロガーさんたちのブログは以下の5点が揃っていると感じます。

  1. 見やすいコンテンツ配置と配色
  2. 見やすいフォントと背景
  3. 見やすい文字サイズと行間
  4. センスある写真や画像
  5. センスあるロゴやアイコン

最初の3点はプログラミングができなくても、良質なテンプレートを使うことでスグに実現できますね。

残りの2点もタダで使えるハイクオリティな素材が今はネットに山ほどありますので、ちょっとひと手間かけて記事に画像を入れたり、ロゴやアイコンをお洒落なものに変更するだけで、かなりブログの印象は変わります。

 

 

私はまだまだ発展途上なので偉そうなことは言えませんが…

記事のアップと併せて少しずつブログの見た目も進化させていっています。

 

いつも重宝している素材サイトを10コ挙げておきますので良かったら参考にしてみてください。

 

背景画像やアイキャッチに使える無料写真・イラストサイト

センスある写真が豊富な有名サイトPhotopin

http://photopin.com/

クレジット表記が必要ですが無料のいい写真が沢山あるのでよく利用しています。

具体的な使い方は以下の記事に図解しています↓↓

30秒でブログ記事センスアップ!無料画像サイトPhotopinの使い方

 

パブリックドメインだけど結構センスのいい画像を集めたサイトPixabay

http://pixabay.com/

こちらもよく利用しています。パブリックドメイン(著作権フリー)の写真ってどうしてもイマイチな写真が多かったりするのですが、Pixabayで探すと、意外に使える写真が良く見つかります。特にWordpressプラグインを導入すると、わざわざ画像をダウンロードしてWordpressにアップロードして…という手間が省けるのが非常にオイシイ。プラグインの使い方は以下の記事で図解しています。

Pixabayプラグインでアイキャッチ画像をさくっとWordPressブログ記事に

 

クレジット表記不要、商用利用OKのフリー画像が沢山あるサイトPhoto AC

Photo AC

photoAC

 

会員登録が必要ですが、クレジット表記も必要なし、改変も自由ですし、いい写真が結構揃っているので登録しておいて損はないと思います。

 

背景画像に使いたいお洒落なパターンが沢山あるサイト3選

※どのサイトも無料でダウンロードして使えます。センスのあるパターン画像が豊富にそろっています。

 

クレジット表記不要のお洒落な高解像度の写真がダウンロードできるサイト

kaboompics

kaboompics

 

先日コリスさんのサイトで紹介されていました。数はPhotopinなどと比べてあまり多くないかもしれませんが、クレジット表記もいらないですし、見ているだけで惚れ惚れしてしまうセンスのある画像が多いのがかなり良いです。

使えばブログのセンスが上がること間違いなし!な写真ばかりですし、高解像度でクレジット表記も不要なのでぜひ使ってみてください。

 

使えるWEB素材が必ず見つかる無料アイコン・ボタン・ロゴ配布サイト

 無料で使えるアイコンサイトを一気にまとめたサイトIcon Finder

Icon Finder 

このページ一つだけでアイコン探しには困らないくらいです。使えるアイコンサイトが一気にまとめられて一覧表示されているのでとても重宝します。ライセンスタイプによってはクレジット表記の必要なものもありますが、Free for commercial useのライセンスを選べばクレジット表記も必要なく商用利用できます。

 

商用利用可・クレジット表記不要のハイセンスなロゴが見つかるサイト「ロゴマルシェ」

ロゴマルシェ

ロゴマルシェ - LogoMarche

いつもクオリティが高くこだわりのある美しいデザインのWordpressテンプレートを提供している「デザインプラス」さんが運営するロゴ配布サイトです。会員登録(無料)すると、洗練されたロゴを好きなだけ無料でダウンロードできます。色味やタイプでロゴを検索することができるので、自分のサイトにあったロゴが見つけやすいのもうれしいですね。

 

商用利用可・クレジット表記不要のハイセンスなボタンが見つかるサイト「ボタンマルシェ」

ボタンマルシェ

ボタンマルシェ - ButtonMarche

 

ロゴマルシェの姉妹サイトで、同じく「デザインプラス」さんが運営されているボタン素材配布サイトです。こちらも無料会員登録をすれば好きなだけクオリティの高いボタン素材をダウンロードすることができます。私もよく使わせてもらっていますが、写真配布サイトはたくさんあっても、クオリティが高くて無料でクレジット表記なしで使えるロゴやボタンの配布サイトってなかなかないんですよね。デザインプラスさんのサイトは本当に助かっています。

 

番外)作りたいボタンの条件をサイト上で指定してオリジナルボタンが作れるWEBツール

Button Maker

自分で色味やボタンサイズ、背景の模様・エフェクト、テキストなどを指定してオリジナルのボタンが簡単に作れるボタンメーカーサイトです。国産サイトなので日本語OKで使いやすいと思います。

たったの5分で設置!! シンプルかつクールな無料の問い合わせフォームBetter Contact Form

WEBサイト制作をしていると必ずと言っていいほど必要になるのが「お問い合わせフォーム」の設置。「僕のサイトにちょっとカッコイイコンタクトフォームをサクッと付けてほしいんだけど」と我が旦那様に頼まれて色々探してみた結果、最近流行りのフラットデザインのクールなコンタクトフォームがほんの5分でサクッと作れちゃう無料のWEBサービスを見つけたのでご紹介しようと思います^^ やりかたも非常に簡単なのでぜひ使ってみてください。

Better Contact Form

Better Contact Formの概要

公式サイト: http://bettercontactform.com/

一般的な問い合わせフォームの言語、必要な入力項目、配色とレイアウトの設定、問い合わせメールの送信先をオンラインで設定し、取得したコードをサイトのHTMLに貼りつけるだけで問い合わせフォームが設置できます。PHPの知識とか全然いらないです。スパム対策済みレスポンシブデザイン対応というありがたい機能もしっかりついていますよ。以下に具体的な使い方を図解します。

※上のリンクからサイトにアクセスすると雰囲気がよりリアルに分かると思います。

 

問い合わせフォームの作成と設置

サイトにアクセスすると以下のようなページが表示されますのでCreate Your Contact Formボタンをクリックします。

Better Contact Form公式サイト

 

 

以下のように問い合わせフォームを作成するページが表示されるので、自分のサイトのニーズに合わせて設定していってください。全部設定できたらSave Formをクリックします。

 

Better Contact Form設定

※言語は日本語も選択できますが、「おメールアドレス」みたいな感じで今のところ翻訳がちょっと面白いことになっている(?)ので英語のままの方がいいんじゃないかな?と思います^^; ウチの旦那のサイトはロシア語なんで問題ありませんでした(笑)

 

設定を保存するとHTMLに貼りつけるためのコードが表示されます。

Copy Codeボタンをクリックしてコピーし、自分のサイトのHTMLの一番最後(</body>の手前)に貼りつけます。このコンタクトフォームを表示させたいページのHTML全てに貼りつけてください。フッター用の共通HTMLがある場合はそこに貼りつけると一か所で済みそうですね^^

「後で編集したいかも」と思う場合は、アカウントを作成すると設定が保存されるので便利です。

Better Contact Formコード

 

というわけで、簡単に設置できるお洒落なコンタクトフォームBetter Contact Formのご紹介でした。

テンプレートを使ったブログやサイトでもオリジナリティ溢れる印象するちょっとしたカスタマイズ3つ

無料ブログでも、Wordpressで作った独自ドメインのブログでも、ブログを作るときには「テンプレート」(Wordpressならテーマ)を使うことがほとんどだと思います。

HTMLやCSS、Javascriptなどといったプログラミングの知識がほぼゼロでもテンプレートを使えば即、本格的なブログやサイトが出来上がるのが嬉しいところですね^^

 

このブログは賢威で作っていますが、賢威テンプレートのブログは非常に多い。

自分が使い始めたからよけいに気づくようになったのか、調べものをしていてたどり着いたブログやサイトが「賢威」で作られていたというパターンが最近本当によくあるんです。

「賢威のテンプレートをそのまんま使ってます!」みたいなサイトもありますが、パッと見では気が付かないくらい上手にデザインをカスタマイズしているサイトも多々あります

パッと見で「あ、これ賢威だ」っていうよりは記事を最後まで読んでいって、なんとな~く「このレイアウトとかデザインの雰囲気とかみたことあるな」って思うと賢威だった。っていう場合がほとんどです。

 

個人的に賢威というテンプレートを使っている感想としては、

  • コードが本当にきれいでカスタマイズしやすい
  • SEOに強いと謳っているだけあって内部構造がしっかり設計されている
  • デザインはもうちょっと頑張ってほしい

という感じです。

デザインだけの話だったら、個人ブログはStingerのほうがよっぽどいい感じに 仕上がっていく気がしますし、Wordpressの無料テーマでも「賢威よりいいな」と思うようなデザインはそこそこあるんです。

でも、やっぱりその内部構造の設計とかコーディングのほうを考えると、どうしても賢威から離れられない^^;

 

デザインのカスタマイズをするのと、内部構造を最適化するのとどっちが簡単かといったら、やっぱりデザインを変えるほうかな、と思うので。今のところ賢威をベースにデザインにカスタマイズしてくという方向でこのブログは進んでいます。(もう一つのブログのほうは、今は賢威を使っていますが、自分の勉強のついでにオリジナルテーマを現在作成中。)

 

ちなみに「賢威賢威って連発してるけど何それ?」と思った方は「賢威」公式サイトをご覧ください。アフィリエイトをやっている人は結構知っている人が多いですが、アフィリエイト専用というわけじゃなくて、企業サイトなんかにも結構採用されているテンプレートです。付属のSEO対策マニュアルもかなり勉強になりました。

 

ちょっと脇道にそれてしまいましたが、この記事では、ブログやサイトにテンプレートを使用していてもオリジナリティを出して印象付けたいときに、あまりCSSとかHTMLとかの知識が初歩レベルでもOKで、しかも時間もあまりかからない方法を3つ挙げてみます。(※CSS, HTMLの知識が全くないという方には以降、意味不明な説明になっちゃうかもしれませんm(_ _)m)

  • 背景色を変えたり背景画像を設定する
  • ブログのロゴやタイトルの文字をオリジナルにする
  • ヘッダー画像をオリジナルにする

この3つのどれかを変えるだけでもサイトの印象ってかなり変わるもんなんですよ。不思議と。

 

もちろん、ブログを運営する上ではコンテンツを充実させることが最重要 なので、デザインには最初からこだわらないでテンプレートをそのまま使ってもそれで十分だったりします

ただ、ある程度アクセスも集まってくるようになって「ブランディング」ということを考えた場合、単に読みやすいだけでなく印象に残りやすいものであったほうがいいですね。上に挙げたような方法でちょっと印象を変えるだけでも、読者さんの記憶に残りやすくなるなどブランディング効果を期待できます。

 

また、ブログがちょっと自分仕様になったりするだけでなんだか愛着もわいてきたりして「ブログをちゃんと育てていくぞ」とモチベーションアップになったりもします^^ (私は記事を書く気力がなくなってくるとカスタマイズに走ります笑)

 

記事が充実してきたら、あるいは、ブログのデザインがなんか気に入らなくて記事を書く気にもなれないときは、以下の3つの方法でブログやサイトをカスタマイズしてみてください。

ブログやサイトの背景色を変えたり背景画像を設定する

背景色を変更する

ベースの色(背景色)は、大抵の場合、テンプレートのCSSファイルで、サイト全体の背景を設定している部分の色コードを変更すると変えられます。例えば賢威テンプレートの場合、design.css内の#containerのbackground-colorの値を変更することでブログのベース色を変えることができます。具体的には以下の#fffff1の部分を変更します。

#fffff1というのは、色を16進数で表したもので、この6ケタの文字・数字を変えることで微妙な色合いも指定することができます。

 

背景の色を選ぶ時にはこんなオンラインツールもオススメです。↓↓

http://color.hailpixel.com/

色選択オンラインツール

非常にシンプルな機能で使いやすい。

表示されたページでカーソルを動かすとそれに合わせて色が変化するので背景色にしたいと思う色が出たらクリック!

 

するとCSSで設定するための色の値が表示されるので、それをコピーしてCSSファイルで、サイトの背景色を設定している部分を変更すればOKです。

15分もあればできちゃいそうですね^^

 

背景画像を設定する

もう少し上級者なら、背景色ではなく、背景画像を変えるという手もあります。私のこのブログも薄いタイル状の背景画像を使っています。以下のサイトではかなりクオリティの高い背景画像が無料でダウンロードできるのでオススメです^^

http://subtlepatterns.com/

背景画像

背景に使いたい画像をクリックすると以下のように詳細が表示されます。

Downloadボタンをクリックすればzipファイル形式で画像がダウンロードできます。

背景画像ダウンロード

ダウンロードした画像をサイトの背景に適用したい場合、一般的なHTMLテンプレートなら、imagesとかimageとかいう名前のついているフォルダ内に画像を追加しておきます。Wordpressの場合は、画像ファイルをメディアに追加してURLをコピーしておきます。

その後、CSSファイル内でサイト全体の背景を設定している箇所を見つけてbackgroundを設定します。賢威テーマの場合を例にとると、design.cssの#mainのカッコ内に以下のように設定します。

 

たったこれだけなのに、ブログの雰囲気が結構変わるから不思議^^ ぜひやってみてください。

 

ブログのロゴやタイトルの文字をオリジナルにする

最近見つけたプロ並みのロゴとタイトルが無料で作れるオンラインサイトをご紹介します。

http://www.squarespace.com/logo

以下のようなページが表示されたら、ロゴに使いたい文字を入力して→をクリックします。

ロゴ作成サイト

サイトのロゴを選べたり、タイトルやサブタイトルを入力できる画面が出てきます。それぞれ設定し配置なども調整してみてください。出来上がったら左下のSAVE LOGOをクリックします。

ロゴとタイトルの設定

ダウンロード画面が表示されるので左側の無料のダウンロードを選択します。

logo3

 

Png形式で即、作成したロゴとタイトルの画像がダウンロードされます。

※無料版の場合、ダウンロード画像の中にサイトの情報がウォーターマークで入ってしまうので画像エディタで消してから使ってくださいね。

 

賢威テーマで、ダウンロードした画像をブログタイトルに適用する方法は以下のサイトで分かりやすく解説してくれていますので参考にしてみてください。

賢威6.1 ヘッダーテキストを画像に変更する設定

 

 

ヘッダー画像をオリジナルにする

ブログタイトルをテキストから画像に変えるだけではなく、画像にブログタイトルを埋め込んでヘッダー全体を変更するという手もあります。ただ、色んなサイトやブログを見ていると、あまりヘッダー画像は使わないでロゴとタイトルだけ画像で使うほうが最近の主流なのかなという気がしました。

 

このあたりは好みの問題ですね。

ヘッダー画像を使いたい場合、使う画像を選ぶには以下の商用利用OK、クレジット表記なしでOKな無料素材サイトは結構オススメです^^