シンプル!レスポンシブ!ピンタレスト風~!!な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

今後のカスタマイズ目標

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

がんばるぞー!!

コメントをどうぞ

  1. はじめまして。たかと申します。
    surfaramaというテーマのカスタマイズ方法を調べていて、こちらのページにたどり着きました。
    初歩的な質問かもしれませんが、もしよろしければ一つ教えていただけますと幸いです。

    「サムネイル上にカテゴリのリンクを出す」これをまさにやりたいのですが、こちらでご紹介いただいているとおりにチェックボックスをオンにしても右上角にリンクが出てこないんです。
    チェックボックスのオンオフを繰り返しては見ましたが、変化なし…
    なにか原因と考えられること、またはチェックすべき項目などはありますでしょうか。

    このテーマがリリースされたのはもう何年も前のようですし、このタイミングで質問してもよいものか迷いましたが、ご迷惑でなければご教授いただけますと幸いです。

    1. >たか様
      コメントありがとうございます!
      シンプルでカッコいいテーマでしたね。Surfarama。

      2年以上更新されていないテーマなので、互換の問題は出てくると思います。
      ただ、一応新規でテスト環境にインストールしてみましたが、カテゴリの表示にチェックを入れると、以下のようにちゃんと表示されました。

      surfarama カテゴリ
      (WordPress 4.9.2 + Surfarama1.1.1)参考までにサーバーのPHPバージョンは7.1です。

      このような場合にチェックする項目は、

      1.CSSでカタゴリリンクを非表示とするようなカスタマイズを行っていないか

      例えば

      .grid-box .cat-links {
          display: none;
      }
      

      で消すことができます。他のテーマやプラグインのカスタマイズで上記のようなCSSを追加していないかなど、確認してみてください。

      2.他のプラグインが干渉していないか
      カテゴリの表示に関するプラグインなどがあれば、干渉している可能性も0ではないと思います。
      ・テスト用に別の環境にWordPressをインストールし、そこでテーマを確認してみる
      ・プラグインを停止してみる
      という確認もできるかと思います。

      自分であれば1~2を確認してみます。

      ブラウザの開発者ツールなどは使っていますか?
      実際にカテゴリー表示のコードが有るか無いか。これも大きな手掛かりです。
      以下はCSSで非表示にした状態ですが、ブラウザ上で見えなくしているだけなので、HTMLのコード自体は存在します。

      Chromeなら、右クリック>要素を検証 でHTMLコードを確認できます。
      surfarama2

      ご参考になれば幸いです。

      1. root-013様

        こんばんは!
        ご返信いただきまして、ありがとうございます。

        実は、あの後またいろいろと試していたらできました(汗)
        なので、目的は達成されはしたのですが、なぜできたのかの理由もよくわからないままなので、今回教えていただいた確認項目をもとに、これから先のカスタマイズに取り組んでいきたいと思います。

        程度の低い質問だったにも関わらず、わざわざテストしてみてくださったり、丁寧な解説をいただけたことに心から感謝いたします。本当にありがとうございました。
        また機会がありましたら質問させていただきたいと思います。(今度はしっかりレベルを上げておきます)
        ご縁に感謝。 

        たか

コメントを残す

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

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。