:2013年8月26日DEMOデモサイトを見てみるDownload配布元サイトを見てみるいつの頃からか「ポートフォリオサイト」という言葉をよく聞くようになりました。クリエーター系の方にはピ&hellip;WordPressでポートフォリオサイトを作る機能が山盛り!「Enclosed」WordPressでポートフォリオサイトを作る機能が山盛り!「Enclosed」2013-08-27Nishinoharaデザイン機能・簡単カスタマイズSEO対策87総合評価いつの頃からか「ポートフォリオサイト」という言葉をよく聞くようになりました。クリエーター系の方にはピンと来る「横文字ワード」でしょうが、正直わかりづらいし人に説明しづらい言葉だなぁと思っています。「ポートフォリオを組む」なんていうとまた別の意味合いを帯びてくるので尚さらですね。ギャラリー一覧」、あるいは「プロジェクト一覧」などのコンテンツがあるWebサイトのことです。説明すると、なぁんだ、そんなことかみたいな顔をされますね。本日ご紹介するのがその「ポートフォリオサイト」用のWordPress無料テーマ「Enclosed」。ポートフォリオを載せたい企業・会社・フリーランスの方などのホームページ、ビジネスサイトにおすすめのテーマです。カスタマイズメニューが豊富で自由度も高いため、WordPress初心者の方には若干難しいテーマかもしれませんが、こちらの記事をお読みいただければ問題ありません。(笑)これまでにも優良無料テーマはいくつも登場してきましたが、今回の「Enclosed」も大変できる子ですので(紹介記事を作るのにもかなり時間がかかってしまいました)ぜひ最後までお読みいただければうれしいです。英文マニュアル:こちらからどうぞ英語サポート:配布元サイトのサポート欄から質問可能2.テーマのデザイン・レイアウト2−1)トップページのデザイントップページのデザインから確認していきましょう。上部はヘッダーにタイトルロゴとカスタムメニューが2つ、そしてスライドショー。中段には特徴などを伝えるためのパーツエリア、ポートフォリオの一覧。下部にはフッターウィジェット(4カラム)、クレジット表記、カスタムメニューとなっています。2−2)ポートフォリオページのデザインそれでは、本テーマのポイントとなる「ポートフォリオ」ページを確認します。下のキャプチャはポートフォリオの一覧ページ。ページタイトルにカテゴリフィルター、アイキャッチ画像とそれぞれのタイトルが4列に並びます。ポートフォリオ個別ページにいくと、サイドバーなしの全幅ページとなり、画像が横幅目一杯に広がっています。2−3)ブログ一覧・投稿ページのデザインこちらはブログの一覧ページです。右サイドバー、左がコンテンツエリアとなっており、アイキャッチ画像とともに記事が並びます。ブログ投稿個別ページも同じレイアウトで、アイキャッチ画像が上部に差し込まれます。2−3)固定ページのデザインポートフォリオサイト、ビジネスサイト用に固定ページのテンプレートが用意されています。デフォルトページデフォルトのページテンプレートを使うと右サイドバー、左コンテンツエリアとなっています。この固定ページのサイドバーはブログページのサイドバーとは別に設定することができます。サイドバーなし全幅ページ先ほどご紹介したポートフォリオページのように、横幅フルの1カラム全幅ページを作ることもできます。ちなみにこちらのページはわたしがデモ用に作ったページのキャプチャです。コンタクトページさすがにビジネス用途だけあってコンタクト(問合せ)ページのテンプレートまで用意されています。プラグインなどを使わずにメール送付先を設定するだけで、フォーム付きのページが出来てしまうので非常に助かります。3.テーマの導入方法3−1)テーマのダウンロードそれではテーマの導入方法に入りましょう。「Enclosed」は無料テーマですが、ファイルをダウンロードするにはテーマ配布サイトでメンバー登録をする必要があります。Download】ボタンをクリックします。Account】をクリック登録メールアドレス宛にログインパスワードが送られてきます。下のリンクから改めてサイトを訪問します。Free】をクリック。ポップアップが立ち上がります。Theme】ボタンを押します。これで【enclosed_201302191025.zip】というテーマファイルをダウンロードすることができました。ダウンロードするよりも手間がかかりますが、その手間をかけるだけの価値はあるテーマです。3−2)テーマのインストールこのファイルをWordPress管理画面(ダッシュボード)からインストールし、有効化しましょう。テーマの有効化これで準備は完了、テーマが無事にインストールされました。サイトを表示させるとこの通り何もありませんので、次からはテーマのカスタマイズに入っていきましょう。Optionsサイトタイトルはロゴ画像がテキストタイトルか選ぶことができます。新規追加』から予めロゴ画像を登録しておきましょう。ちなみにこの設定画面では、アナリティクス解析タグを貼り付けることもできます。Styling背景色と背景のテクスチャ(柄)を設定します。このメニューではトップページ真ん中あたりにキャッチコピーを挿入することや、トップページ中段にある「ポートフォリオ一覧」のタイトル(見出し)を設定することもできます。4−3)スライドショーの設定トップページのスライドショーの設定方法については、まず完成イメージをご覧ください。画像の上にスライドタイトルとテキストが表示されます。Slidesスライドは「スライド新規作成画面」から1枚ずつ設定します。「4文章の位置」は、スライド画像上に表示される文章の位置です。「左、真ん中、右」を選択することができます。「5文章の色」は同じく、スライド画像上に表示される文字の色を設定します。以上でスライドが1枚完成しましたので、同じ要領で別のスライド設定もすればスライドショーがあっという間に完成します。4−4)トップページの特徴・ポイント部分の設定トップページ中段の特徴・ポイントを表示するエリアの設定方法も、完成イメージから確認しましょう。4つのコンテンツを並べます。こちらもスライドショーと同じ要領で1か所ずつ設定します。Featureタイトル、文章を記入、アイキャッチ画像を設定して公開します。アイキャッチ画像はあらかじめ正方形にして登録します。4−5)各固定ページの作成では次に、ブログ用の記事一覧ページ、問合せページ、ポートフォリオページなどの「固定ページ」を作成します。新規追加ページタイトルを記入し、ページ属性のテンプレートにて「Blog」を選択、公開ボタンを押します。コンテンツ部分にはページ内容の補足文章を入れるなどしても良いかと思いますが、特に記入しなくても大丈夫です。ブログ一覧ページが作成されました。コンテンツを記入すると、下の画像のページタイトル「blog」の下に文章が表示されます。同じ要領で問合せページを作ります。Form」を選択します。Information」にて設定します。問合せページもこれで完了。以下のページができ上がりました。同様に、ポートフォリオ一覧ページやサイトマップページ(必要なら)も作成しましょう。Map」を選択します。4−6)ポートフォリオの作成ここでは、ポートフォリオ個別ページ、それからトップページに掲載されるポートフォリオの設定方法についてご説明します。Item」から個別のポートフォリオを登録。Item?」の欄で【YES】にチェックをつけます。ポートフォリオの数だけこの作業を繰り返し、出来上がったポートフォリオ一覧ページがこちら。カテゴリフィルター、4カラムでアイキャッチ画像とポートフォリオタイトルが並びます。Item?」で選択したものが掲載されます。4−7)ウィジェット・カスタマイズサイト完成までもう一息です。サイドバーやフッターなどのウィジェットを編集しましょう。ウィジェットサイドバーは、固定ページ用とブログ投稿ページ用とでそれぞれ設定します。フッターは4カラムになっておりますので、それぞれ編集しましょう。Posts」などの独自ウィジェットパーツが用意されています。4−8)メニュー・カスタマイズメニューを設置できる場所は3か所、最上部のトップメニューにメインメニュー、それからフッターメニューがあります。3つ全て使う必要はないので、サイトの目的に応じて使い分けましょう。Options」は、SEO対策用の設定メニューです。やりたい方はSEO対策用のプラグインで細かく設定したほうが良いでしょうが、ここでもそれなりの対策を行うことができます。SEO対策の話は長くなるので、、、細かい設定については割愛します。ふぅ、、これにてようやくサイトが出来上がりました。出来上がりイメージはこちらから以上で「Enclosed」の紹介を終わります。各種個別ページを作るためのページテンプレートを始め、「ポートフォリオサイト」を作る為のさまざまなオプションメニューがありました。使い方に慣れてしまえば、更新(運営)していくことはとても簡単なテーマです。気にいった方はぜひ使ってみていただければと思います。ポートフォリオ用のWordPressテーマをもっと見たい方はこちらからテーマタンクのアンケートにご協力お願いします。写真中心の子育てブログにおすすめ。無料ながら万能、多用途型のWPテーマ「Attitude」。魅力と使い方を徹底解説です。造形作家・ブリーダーさんにおすすめのWordPressテーマ。とかげもどきのしっぽ。15:30こちらの記事を元に、サイトを作り替えております。わかりやすい記事でうれしいです。バックの色を白にしたいのですが、メニューの色も白なので、見えなくなってしまいます。メニューのフォントの色はどこで変えられるのでしょうか。replyメールアドレスが公開されることはありません。Web・CG等の制作、各種プログラミング等のアルバイトをしながらお金を貯める。翌年よりニュージーランドへ語学遊学。ホームステイをしながら語学学校へ通い、ある程度語学力がつくと車を買ってニュージーランド中を旅行。帰国後は、インターネット広告のベンチャー企業、コンサルティング会社、セミナープロデュース会社と渡り歩き2011年8月独立。現在、Webマーケティング全般に関するコンサルティング、Webサイトや各種コンテンツのディレクション・制作、コピーライティング等を行う。無料ながら万能、多用途型のWPテーマ「Attitude」。魅力と使い方を徹底解説です。直感操作でレスポンシブページ作成。比較表や一覧表を簡単に。カラー変更も簡単、シンプル&クールなピン風ブログ。369種類のアイコンを簡単・自由に設置。1〜3カラムまでレイアウト自在、ガッツリいじりたい方向け。3カラムサイト内検索わたしたちも使ってるおすすめサーバーコスパ良し!使いはじめて今までトラブルなし!管理画面も使いやすい!サポートが親切!悪い噂聞いたことなし!テーマタンクのアンケートにご協力お願いします。3カラムコメントサイドバーを自在に簡単カスタマイズ。無料ながら万能、多用途型のWPテーマ「Attitude」。魅力と使い方を徹底解説です。無料ながら万能、多用途型のWPテーマ「Attitude」。魅力と使い方を徹底解説です。