シンプル！レスポンシブ！ピンタレスト風～！！なWordPressテーマ「Surfarama」其ノ壱

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

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

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

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

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

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

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

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

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

surfaramaというテーマ。

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

記事：

【カラー変更も簡単、シンプル＆クールなピン風ブログ。WP無料テーマ「Surfarama」】

サイトリンク：

[browser-shot width=”600″ url=”http://wp-themetank.com/wordpress-theme-free-blog-surfarama/”]

surfaramaのダウンロード

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

テーマ配布元：

Surfarama（ver1.1.0）

サイトリンク：

[browser-shot width=”600″ url=”http://wordpress.org/themes/surfarama”]

surfaramaの使い方

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

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

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

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

カテゴリの色分けは？

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

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

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

ウィジェットが特徴的

・ホームページ
・投稿
・固定ページ（通常・全幅の２種）
・アーカイブ

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

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

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

surfaramaの注意点

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

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

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

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

今後のカスタマイズ目標

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

がんばるぞー！！