これはテストです

テーマ作者(WP Themes)はニュージーランド(NZ)の方々なのですが、わたしもおよそ10年前、NZに1年ほど住んでいました。せっかくなので試作サイトにはNZで撮った写真を使ってみましたが、撮影の腕前が・・・です。

今では趣味が高じて時々フォトグラファーとして活動したりもするのですが、、カメラ好きになったのはこのNZがきっかけですね(笑)

テーマの導入、使い方はとても簡単ですので、ぜひ最後までお読みください。

目次

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

1. テーマの特徴

1)デザイン・仕様 ・・・・・・・・・

  • 写真・画像が映えるピンタレスト風デザイン
  • モバイル端末対応レスポンシブデザイン:スマホ、タブレットもOK
  • ページネーション:SEO対策、ユーザビリティ向上
  • 見出しタグの最適化:各ページ毎に最適化!SEO対策に効果的
  • ソーシャルメディア連携:ソーシャルアイコンを簡単設置
  • 日本語化ファイル内蔵:テーマをインストール後、すぐに使用可!

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

  • テーマ独自のオプションメニュー:カラー変更など簡単です
  • ロゴ・アップロード機能:サイトロゴも設置簡単
  • バックグラウンド・カスタマイズ機能:背景画像、背景色を設定
  • メニュー・カスタマイズ機能:ナビゲーションメニューを設置
  • ウィジェット・カスタマイズ機能:サイドバー、フッターを編集
  • カラーオプション:各種テキストカラー、パーツ毎の背景色など変更
  • アイキャッチ画像サポート
  • 全幅(横幅フル)ページ用テンプレート:サイドバーなしの1枚ページ

3)その他 ・・・・・・・・・・

  • 英語サポート:配布元サイトのコメント欄から質問可能
  • テーマ・アップデート:バグ修正、WPアップデート対応、セキュリティ向上に
  • WordPress公式サイト配布テーマ:安心です

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

1)トップページのデザイン

それでは外観の確認をしていきましょう。

まずトップページですがヘッダー部分は全ページ共通。タイトル、ソーシャルアイコンリンク、ナビゲーションメニューとなります。

メインエリアはピンタレスト風に4カラム、サムネイル付きの記事一覧です。最新の投稿のみ2カラム分スペースを使いますので目立ちますね。

1-free-wordpress-theme-for-blog-Surfarama-top-design

ページ下部は4カラムのフッター、クレジット表記と続きます。

ブログ用の無料WordPressテーマ「Surfarama」のトップページフッターのデザイン

2)カテゴリ、アーカイブページのデザイン

カテゴリ、アーカイブページも記事一覧が並びますが、こちらはしっかりと4カラムに分かれます。

ブログ用の無料WordPressテーマ「Surfarama」のカテゴリ・アーカイブページのデザイン

3)投稿、デフォルト固定ページのデザイン

投稿ページ、デフォルトテンプレートの固定ページは、左コンテンツ、右サイドバーの作りとなります。

投稿画面で設定するアイキャッチ画像は、記事一覧ページで使用され本文には反映されません。文頭に載せたい場合は直接文中に挿入します。

ブログ用の無料WordPressテーマ「Surfarama」の投稿ページのデザイン

4)その他の固定ページ用テンプレート

サイドバーなし・全幅ページテンプレート

全幅ページ用テンプレートがあります。試作サイトでは写真ギャラリーページをこちらのテンプレートで作成してみました。

こちらの写真ギャラリーは「Slim Jetpack」というプラグインを使って作成しています。
参考)タイルギャラリー、スマホサイト作成など便利ツール11個を搭載「Slim Jetpack」

ブログ用の無料WordPressテーマ「Surfarama」の固定ページのデザイン1

トップページ用のメッセージ付きテンプレート

ナビゲーションバーとコンテンツの間にキャッチコピーなどを入れるためのテンプレートも用意されています。

ブログ用の無料WordPressテーマ「Surfarama」の固定ページのデザイン2

5)レスポンシブWebデザイン

レスポンシブ仕様なので、横幅に合わせて流動的にデザインが変わります。

ブログ用の無料WordPressテーマ「Surfarama」のレスポンシブデザインのイメージ1
ブログ用の無料WordPressテーマ「Surfarama」のレスポンシブデザインのイメージ2

3. テーマの導入方法・使い方・カスタマイズ

1)テーマのダウンロード〜インストール

では、実際の使い方を順に確認していきます。まずはテーマのインストールです。

  1. 「Surfarama」のWordPressテーマ配布ページにアクセス
  2. 【Download Version X(Xは数字)】ボタンをクリック
  3. WordPress テーマファイルを保存
  4. WordPress ダッシュボードに移動
  5. 外観 > テーマ > テーマのインストール > アップロード
  6. 【いますぐインストール】をクリック
  7. 【有効化】をクリック

以上でテーマの導入は完了、サイトを表示してみます。デモサイトは色を変更していますが下図がデフォルトカラーです。

ブログ用の無料WordPressテーマ「Surfarama」のインストール直後の状態

ここからはテーマの使い方に入ります。各種変更は「プレビュー」を見ながら設定できますよ。

2)サイトロゴのアップロード

ダッシュボード > 外観 > カスタマイズ > Site Logo

デフォルトのテキストタイトルをロゴ画像に変更する場合はこちらを利用します。

※ ロゴゴ画像の最適なサイズ:横 300 × 縦 40 〜 100 ピクセル

ブログ用の無料WordPressテーマ「Surfarama」のヘッダーのカスタマイズ方法1

3)ソーシャルアイコンの設置

ダッシュボード > 外観 > カスタマイズ > Social Media Icons

ヘッダーにあるソーシャルアイコンは、こちらのメニュー画面で各ソーシャルメディアの空欄にURLを入力します。

ブログ用の無料WordPressテーマ「Surfarama」のヘッダーのカスタマイズ方法2

4)サムネイル画像上のカテゴリ表示設定

ダッシュボード > 外観 > カスタマイズ > Display Category Link

こちらにチェックをつけると記事一覧ページのサムネイル画像右上に「投稿カテゴリ」が表示されます。カテゴリが複数ある場合に良いですね。

ブログ用の無料WordPressテーマ「Surfarama」表示設定方法1

5)ボーダー(境界線)の設定

ダッシュボード > 外観 > カスタマイズ > Set Border For Images

空欄にピクセル単位で数字を入力すると、画像の周りにボーダーが表示されます。必要ないと思えば空欄のままにしておきます。

ブログ用の無料WordPressテーマ「Surfarama」表示設定方法2

6)カラーオプション

ダッシュボード > 外観 > カスタマイズ > 色

ここではメインカラー、各種テキストカラー、リンクカラーなどを変更することができます。プレビュー画面から別ページに移動できますので、記事内のカラー変更も見ながら設定しましょう。

ブログ用の無料WordPressテーマ「Surfarama」のカラーオプション

7)投稿カテゴリーのカラーカスタマイズ

下図のようにブログの投稿カテゴリーカラーを設定することができます。

ブログ用の無料WordPressテーマ「Surfarama」のトップページイメージ

ダッシュボード > 投稿 > カテゴリー

投稿カテゴリーを作成(編集)する際に設定します。

ブログ用の無料WordPressテーマ「Surfarama」の投稿カテゴリーカラーのカスタマイズ方法

8)背景画像の設定

ダッシュボード > 外観 > カスタマイズ > 背景画像

背景に画像を使用したい場合はこちらから。画像をアップロードすると画像表示オプションメニューが出てくるので、画像の「繰り返し / 固定」などを設定することができます。

ブログ用の無料WordPressテーマ「Surfarama」の背景のカスタマイズ方法

9)サイドバー、フッターのカスタマイズ

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

トップページ下のフッター、記事横のサイドバーなどのウィジェットエリアを編集します。一括指定ではなく各ページごとに設定します。

  • Home Page Widgets:トップページのフッター
  • Category / Archive Widgets:カテゴリ、アーカイブページのフッター
  • Post Widgets:投稿ページのサイドバー
  • Page Widgets:固定ページのサイドバー
  • Full Page Widgets:全幅ページのフッター

ブログ用の無料WordPressテーマ「Surfarama」のウィジェットのカスタマイズ方法

10)ナビゲーションメニューの編集

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

ナビゲーションメニューを設定すればサイト完成です!

ブログ用の無料WordPressテーマ「Surfarama」のメニューのカスタマイズ方法

今回作成した Surfarama 試作サイトはこちらから

以上、サーファラーマはいかがでしたでしょうか。

ピンタレスト風テーマというと他にも多数ありますが、こちらのテーマはなんといっても「カラーオプション」が充実している点にあると言えるでしょう。

明確な「色彩」をサイトに持たせたい時、こちらのテーマを検討してはどうかなと思います。

■ 無料テーマがパワーアップ!おすすめプラグイン
記事編集に役立つ便利なWPショートコードプラグイン「Arconix Shortcode」
WordPressで簡単にスライダーを設置するプラグイン「Soliloquy」
写真・ギャラリー用にLightbox風のWPプラグイン「Easy FancyBox」
カルーセルスライダーで写真をサムネイル表示。WPプラグイン「WP Image Carousel」
ドラッグ&ドロップの直感操作でレスポンシブページ作成「ページビルダー」
4in1のお得感。4種のスライドショーを生成するWPプラグイン「Meta Slider」
タイルギャラリーにスマホ対応!便利ツール11個を搭載「Slim Jetpack」

■ おすすめ&類似テーマ
Pinterest風、シンプルな写真ブログにおすすめテーマ「Pinbin」
ピンタレスト風グリッド&レスポンシブ、写真ブログに最適。WP無料テーマ「Gridly」
際立つアクセントカラーがかっこいい!ブログ用WP無料テーマ「SympalPress-Lite」
禅的シンプルさが美しい。ビジネスブログにおすすめのWP無料テーマ「Iconic One」

    • Wordpressテーマデモサイト
    • Wordpressテーマ配布元サイト

 

 

2 comments

  • 教えて頂きたいことがあってメールしました。

    WORDPRESS初心者です。

    今、こちらで紹介されているSufaramaでwebサイトを作っているのですが、
    分からないことがあります。

    表示される文字の色を黒、テキストボックス(言い方あってますか?)を白で統一したいのですが
    やり方が分かりません。
    よかったら教えて頂けますか?

  • 楽しく拝見させて頂いております。
    現在、Surfaramaを使用してサイトの制作を行っておりますが、ナビゲーションバーとコンテンツの間にキャッチコピーなどを入れるためのトップページ用のメッセージ付きテンプレートとはどこにあるのでしょうか?

コメントを残す

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

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