11月 07 2014

ギャラリーのカスタマイズ

 
ギャラリーのカスタマイズ

20141107-1

写真が趣味だと Photo Gallery を作りたいもの（笑）

レンサバへの移行時、ある程度ブログの体裁を整えた後は速攻ギャラリーの構築に入りましたね。記事無しの写真だけを表示する場所なので別サイトとし、グリッド状に表示出来るテーマを何日も探して良いのを見つけました。

なかなか気に入ったテーマだったのでフォント系だけの軽いカスタマイズで設置したのですが、最近友人たちがギャラリーのカスタマイズに精を出しているので、ここいらで私ももっと自分好みにしてしまおうと、cssと phpの大改造を行いました（笑）

カスタマイズ後

20141107-2

じゃじゃーん！　これがカスタマイズ後です！
昨日までと変わらないってか？（笑）

いやいや、変わっていないように見えて、かなり細かい部分に手を入れてあります。

新旧比較 #1

20141107-3

上が旧で、下が新です。　ねっ！　変わってるでしょ？（笑）

変更点は以下のとおり。

1. サイトの説明文は要らないので削除し、ヘッダーの高さを抑えてスリム化した
2. カテゴリを少し詰めて、Older, Newer のナビをヘッダーへ移動した
3. 現在選択中のカテゴリの上下に赤のアクセントラインをつけた
4. サムネイルの縁の幅を上下左右とも同じにした
5. サムネイルの角に丸みをつけて、柔らかい印象にした
6. 縦横混在時、サムネイルの上端が左右のサムネイルと一致するようにした
7. ギャラリー領域の左を詰めて、バランスを取った
8. カテゴリ切替時のアニメーションを切った
　 …その他色々（笑）
新旧比較 #2

20141107-4

そして最も大きな変更点がこれで、ヘッダーを固定するようにしました。
こうすることでスクロール中（ページの途中）でも他のカテゴリへ移動できるし、ページ移動用ナビへのアクセスも可能。配置はこれでほぼ満足かな～

Category　WordPress

  1. iMovie

    こんにちは
    カスタマイズ版のほうが、ヘッダーが固定されていて、カテゴリーの選択がし易いですね。
    カテゴリをマウスオーバーした時も赤のラインが出て、判りやすいです。
    同じ、テーマを使う予定でしたが、どうも写真が切れて表示されてしまうのと、アイキャッチが画像使うと、同じ画像が2枚並ぶので、設定にもないし？の状態です。
    このテーマだと画像のサイズが決められているのかな。
    他のテーマも見ていますが、ｌｉｇｈｔboxが動かないものが多くて、どうにも上手くいってません。（笑）

    1. delphian (Post author)

      iMovieさん、こんにちは。

      結構細かいところに手を入れたので、ほぼ満足できています。
      まだまだ手直ししたいところがあるので、もう少し修正しますよ。

      このテーマで画像が切れるっていうのは記事へ挿入する画像の問題ですね。
      メディアの設定でサムネイルにピッタリのpx数を指定するとOKです。

  2. bluem

    こんばんは(^^
    これは格好良いですね！
    ホント、これは良いと思います。
    こうして自分で弄れるのが、羨ましいです(^^
    ギャラリーも早く欲しいっす♪

    1. delphian (Post author)

      bluemさん、こんにちは。

      ナビ部分をヘッダーへ移動したので、オリジナルよりもスッキリしたと思います。
      サムネイルの縁も柔らかくしたし、満足度 93%ってところでしょうか（笑）
      ギャラリーの構築は楽しいので、是非やって下さいな。

  3. jerry

    こんばんは
    ヘッダー固定はいいですね～
    見ごたえあるようにするために1ページの記事数50で設定ですから、
    スクロール必須ですもんね！
    「Photo by delphian」はあった方がカッコいいようにも思います

    1. delphian (Post author)

      Jerryさん、こんばんは。

      ヘッダー固定とナビ移動は大改造が必要でした（笑）
      cssの解析も必要なので、ちょっとだけ難儀したなぁ～
      そっか～　phpto by のクレジット、どこかに入れるか（笑）

  4. Malu

    いやぁ、CSSやPHPが理解できる方がうらやましいです。
    オリジナルの場合、私のモニター（1440×900）では3列しか表示しないのですが、カスタマイズされた方は4列表示になり凄く見やすくていいですね。
    ギャラリーのテーマを私も探していますが、なかなかこれはと言うのがないですね。
    このテーマが一番マッチするようですが、みなさん一緒なのでどうしようか思案中です。(^_^;)

    1. delphian (Post author)

      Maluさん、こんにちは。

      仕事柄新しい言語を覚えるのにワクワクするので、phpもすんなりと理解できました。
      プログラム言語はどれも似た様な文法なので、何か1つ習熟していると応用が効くんですね。
      私がギャラリーに使っているのは Shaken Grid Free というテーマです。
      何日も探し色々試しましたが、私にはこれがベストでしたね。
      良いのが探せなければ Shaken Grid Free を使っても良いのでは？
      css を修正してカラーを変更するだけでもオリジナリティは出せますしね。

  5. Pingback: Gallery Open!