シンプル!レスポンシブ!ピンタレスト風~!!なwordpressテーマ「Surfarama」其ノ壱

画像をいっぱい投稿するから綺麗に見せたい!

もちろんレスポンシブで!

あとディスプレイサイズが変わる時に画像をレンガ状に並び替えてくれるアニメーションもなんかカッコイイからつけてね!

という要望に応えられるテーマを探してみました。

icons-photo02

これからカスタマイズしていくので、まずは第一回ということになります!

第二回「infinite scroll 導入編」はコチラ

2014.09.14ちょっとした変更で読み込み速度を改善しました。surfarama其ノ参。サムネイルの読み込みについて。

コンテンツをレンガ状・パネル状に並べてくれるサイトはよくありますが、画像投稿をメインにしたいサイトで取り入れると視覚的にも楽しいですね。

知っているかぎりではjQueryのMasonryが使われています。

surfaramaというテーマ。

テーマタンク様で紹介されていたテーマを使おうと思います。
テーマタンクさんは色んなテーマを紹介するだけでなく、仕様や使い方まで細かくレビューし、試作サイトまで作っているという素晴らしいサイトです。

記事:
【カラー変更も簡単、シンプル&クールなピン風ブログ。WP無料テーマ「Surfarama」】
サイトリンク:
http://wp-themetank.com/wordpress-theme-free-blog-surfarama/

surfaramaのダウンロード

surfaramaは公式テーマなので、外観 > テーマ > 新規追加 > surfarama で検索するとダウンロードできます。

テーマ配布元:
Surfarama(ver1.1.0)
サイトリンク:
http://wordpress.org/themes/surfarama

surfaramaの使い方

※ほとんどの仕様についてはテーマタンクさんを見て下さい(笑

デザインをカスタマイズしないとこんな感じです。

surfarama01

・虫眼鏡のアイコンクリックで上に検索フォーム出現(twenty fourteenと同じですね)
・最新の投稿は他のより大きく表示されます。
・表示されている画像は”アイキャッチ画像”というところも注意ですね。

surfarama02

・ウィジェットは下部に表示
・ページナビゲーションは標準装備
・カテゴリの色分けが可能です。

カテゴリの色分けは?

カテゴリの色分けは 投稿 > カテゴリ
でカテゴリの追加時や、編集時に行うことができます。

surfarama03

サムネイル上にカテゴリのリンクを出すには?

サムネイル上にカテゴリのリンクを出すには テーマ > カスタマイズ
から行うことができます。

surfarama04

ウィジェットが特徴的

surfarama06

・ホームページ
・投稿
・固定ページ(通常・全幅の2種)
・アーカイブ

それぞれにウィジェットエリアを設けられるという仕様です。
例えばアーカイブページにだけカテゴリ・タグの絞込み検索ウィジェット入れよう!!
とか、夢が広がりますね!!!

こんな感じでテキトーにテキストウィジェットぶち込んで確認すれば良いと思うよ。

surfarama07

どうやら、ウィジェットがあればウィジェットを表示。
なければ
・最新の投稿
・最新のコメント
・アーカイブ
等を表示する仕組みになっているようですね。

surfaramaの注意点

 
テーマファイルはまだちゃんと見てないのでわかりませんが、海外テーマなので、恐らく文字コードの扱いで文字化けなんかはあるでしょうね。

コメントウィジェットでさっそく一つ。

surfarama

もちろん、テーマカスタマイズ画面も英語です。

あとは、HOMEに表示される文字数も、本文は上手く切ってくれてますが、抜粋を入力すると、上手く切ってくれません。
けっこう残念な感じに(笑

surfarama05

今後のカスタマイズ目標

文字化けの修正や、無限スクロールの導入、画像の遅延ロードなんかも導入したいですね!
今日はまず、テーマのダウンロードとざっくりとした仕様を確認したかっただけなのでここまでにしておきます^^

がんばるぞー!!

コメントをどうぞ

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • 具体的なエラー画面などがある場合は添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)