人気のグリッドレイアウト!ポートフォリオ用WP無料テーマ「Snaps」

ポートフォリオ用の無料WordPressテーマ「snaps」のトップページイメージ

    WordPressテーマ情報

  • テーマタイトル:Snaps ver 1.0
  • 作者名:GRAPH PAPER PRESS
  • 言語:英語
  • 用途:写真・ギャラリー, ポートフォリオ, レスポンシブ
  • 価格:無料
  • 配布元最終確認日:2013年9月4日


Wordpressで自由にトップページやランディングページをつくる1日講座
本日は「Snaps」というポートフォリオサイト用のWordPress無料テーマを紹介させていただきま…
デザイン
機能・簡単カスタマイズ
SEO対策

総合評価

本日は「Snaps」というポートフォリオサイト用のWordPress無料テーマを紹介させていただきます。丁度こんなテーマを探していたので、とても助かりました(笑)

特徴はなんといっても「グリッドレイアウト」です。タイトルも何もなしに写真サイズをあわせ、4カラムに並べることができます。

サイト閲覧者は画像から興味をもったものだけ詳細ページにとべばよく、余計なものはなし。シンプルで直感的なWebサイトを作りたい場合にぴったりです。

レスポンシブデザインなので、スマホ(スマートフォン)やタブレットPCなどのモバイル端末からのアクセスにもグリッドレイアウトは崩れません。

目的が限定されているため機能はあまりありません。が、ポートフォリオサイトを更新・運営していくためにはかえってそのほうがシンプルで良いかもしれませんね。

それではテーマの中身を具体的に確認していきましょう。

目次

  1. テーマの特徴
  2. テーマのデザイン・レイアウト
  3. テーマの導入方法
  4. テーマのカスタマイズ・使い方
  5. まとめ

1.テーマの特徴

◆ デザイン・仕様

  • ポートフォリオが映える!4カラムのグリッドレイアウト
  • モバイル端末対応レスポンシブデザイン:スマホ、タブレットもOK
  • 見出しタグの最適化:各ページ毎に最適化!SEO対策に効果的です
  • ソーシャルメディア連携:メニューにソーシャルアイコンを設置可能
  • クロスブラウザ:主要ブラウザに対応(IE9+, Firefox, Chrome, Safari)
  • 日本語化ファイル内蔵:テーマをインストール後、すぐに使用可!

◆ カスタマイズ・オプションメニュー

  • ヘッダー・カスタマイズ機能
  • バックグラウンド・カスタマイズ機能:背景画像、背景色を設定
  • メニュー・カスタマイズ機能
  • ウィジェット・カスタマイズ機能
  • アイキャッチ画像サポート

◆ その他

  • 英文マニュアル:Googleサイト翻訳を使えば日本語バッチリ → コチラから

2.テーマのデザイン・レイアウト

2−1)トップページ

まずはトップページから確認していきましょう。

ヘッダーはフォントサイズの大きなテキストタイトル、キャッチフレーズ、ヘッダー用の背景画像からなります。カスタムメニューでは、FacebookやTwitterなどソーシャルリンクは「アイコン表示」することができます。コンテンツエリアには、各投稿記事のアイキャッチ画像が4カラムのグリッドレイアウトで並びます。

ポートフォリオ用の無料WordPressテーマ「snaps」のトップページのデザイン1

画像にマウスカーソルを合わせると黒くなり記事タイトルが表示されます。

ポートフォリオ用の無料WordPressテーマ「snaps」のトップページのデザイン2

ページのフッターは3カラム。ウィジェットメニューから編集します。

ポートフォリオ用の無料WordPressテーマ「snaps」のフッターデザイン

2−2)カテゴリー・アーカイブページ

カテゴリーごとの表示も基本的には同じです。

ポートフォリオ用の無料WordPressテーマ「snaps」のカテゴリーページデザイン

2−3)個別の投稿ページ

個別の投稿ページにサイドバーはなく1カラムとなっています。

ポートフォリオ用の無料WordPressテーマ「snaps」の投稿ページデザイン

2−4)固定ページ

固定ページも1カラム。シンプルですね。

ポートフォリオ用の無料WordPressテーマ「snaps」の固定ページのデザイン

2−5)レスポンシブ

モバイル端末からのアクセスにもバッチリ!スクリーンサイズに応じて自動でレイアウトが変わります。

ポートフォリオ用の無料WordPressテーマ「snaps」のレスポンシブデザインのイメージ

3.テーマの導入方法

3−1)テーマのダウンロード

ここからはテーマの導入、カスタマイズ方法についてご紹介します。まずテーマのダウンロードです。

Snaps|GRAPH PAPER PRESS

ページ右上の【DOWNLOAD】ボタンをクリックすると、ポップアップが表示されます。名前とEメールアドレスを入力し【Submit】をクリックします。

ポートフォリオ用の無料WordPressテーマ「snaps」の導入方法1

登録したメールアドレス宛にすぐにメールが届きます。文中にあるリンクをクリックするとWordPressテーマファイルである「snaps.zip」という圧縮フォルダをダウンロードすることができます。

ポートフォリオ用の無料WordPressテーマ「snaps」の導入方法2

3−2)テーマのインストール

次に、今ダウンロードしたファイルをWordPressのダッシュボード(管理画面)からインストールしましょう。

ダッシュボード > 外観 > テーマ > 新規追加 > アップロード「snaps.zip」> 有効化

テーマのインストールが完了したのでサイトを表示させてみます。

ポートフォリオ用の無料WordPressテーマ「snaps」のインストール直後の状態

ほとんど形はできあがっています(笑)さぁ、次項からカスタマイズに入りましょう。

4.テーマのカスタマイズ・使い方

4−1)ヘッダーのカスタマイズ

ダッシュボード > 外観 > ヘッダー

ヘッダー画像とヘッダーテキストの設定を行います。カスタマイズメニューが日本語化されているのでわかりやすいです。

ロゴアップローダーはありませんが、テキストタイトルではなくロゴ表示したい場合には、テキストをOFFにして、ヘッダー画像そのものにロゴを入れこめば良いでしょう。

ポートフォリオ用の無料WordPressテーマ「snaps」のヘッダーのカスタマイズ方法

4−2)背景(バックグラウンド)のカスタマイズ

ダッシュボード > 外観 > 背景

ヘッダーを除いたメイン部分の背景画像、背景色を設定することができます。

ポートフォリオ用の無料WordPressテーマ「snaps」の背景のカスタマイズ方法

4−3)フッターのカスタマイズ

ダッシュボード > 外観 > ウィジェット

3カラムのフッターエリアは、ウィジェットメニューから編集します。

ポートフォリオ用の無料WordPressテーマ「snaps」のウィジェットのカスタマイズ方法1

サイトのフッターに反映されました。

ポートフォリオ用の無料WordPressテーマ「snaps」のウィジェットのカスタマイズ方法2

4−4)記事を投稿する

ダッシュボード > 投稿 > 新規追加

サイトの準備がほとんど整いましたので、記事を投稿していきましょう。本テーマの性質上(ポートフォリオサイトなので)、アイキャッチ画像は必ず設定します。

ポートフォリオ用の無料WordPressテーマ「snaps」の投稿方法1

記事を公開してからトップページを見てみると、アイキャッチ画像が表示されています。ちなみに正方形の画像をアイキャッチ画像に登録しましたが、中心線から左右等分にトリミングし、自動でリサイズしてくれます。

ポートフォリオ用の無料WordPressテーマ「snaps」の投稿方法2

投稿ページはこうなります。

ポートフォリオ用の無料WordPressテーマ「snaps」の投稿方法3

4−5)メニューのカスタマイズ

いつもはメニューのカスタマイズはあっさりと終わらせるのですが、、今日はステップバイステップで解説します。

ダッシュボード > 外観 > メニュー

わかりやすいメニュー名称を記入し作成ボタンをクリック(ここでは「ヘッダーメニュー」という名前をつけました)

ポートフォリオ用の無料WordPressテーマ「snaps」のメニューのカスタマイズ方法1

テーマの場所の「Primary Menu」欄で、さきほど作った「ヘッダーメニュー」を選択、保存します。

ポートフォリオ用の無料WordPressテーマ「snaps」のメニューのカスタマイズ方法2

固定ページ、カテゴリー、カスタムリンクなど、「メニュー」にしたいものを選択し追加ボタンを押します。

ポートフォリオ用の無料WordPressテーマ「snaps」のメニューのカスタマイズ方法3

Facebookやtwitter、Google Plus へのソーシャルリンクをアイコン表示したい場合には、詳細設定画面を表示し「CSS class」の欄に「 facebook, twitter, vimeo, feed, pinterest, google-plus, wordpress」と記入します。下図はFacebookの例。

ポートフォリオ用の無料WordPressテーマ「snaps」のメニューのカスタマイズ方法4

「CSS Class」が表示されないという場合には、ページの右上にある「表示オプション」をクリックし、「CSSクラス」にチェックをつけます。

ポートフォリオ用の無料WordPressテーマ「snaps」のメニューのカスタマイズ方法5

カスタムメニューが完成しました。

ポートフォリオ用の無料WordPressテーマ「snaps」のメニューのカスタマイズ方法6

以上で、テーマの導入方法、カスタマイズ方法、使い方の説明は終了です。後は記事を(ポートフォリオを)どんどん更新していくだけですね。

5.まとめ

ご覧いただいたとおり、複雑なことはなく、ポートフォリオを淡々と更新していくためのテーマだということがお分かりいただけたかと思います。

一番はじめにこういうテーマ(というか、ここまで希望通りだともはやテンプレートですね)を探していたと書きました。

どんなふうに使うかというと・・・、Facebookページで「あるコンテンツ」に関する写真・画像をタイムリーにシェアして、このテーマを使ってWordPressサイトにそれらの写真・画像をアーカイブしていくという使い分けを考えています。

Facebookはタイムラインで流れ、カテゴリ表示や過去のアーカイブが見れないので使い分けですね。

それにしても、WordPressは便利だし高品質な無料テーマは山ほどあるしでほんとにいいですねぇ(笑)

こちらもいかがですか?
Pinterest風、シンプルな写真ブログにおすすめのWP無料テーマ「Pinbin」
グリッドレイアウトが特徴的。写真ブログ・ポートフォリオ用WP無料テーマ「gRID!」

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>