かわろぐ

ITビジネス、ガジェット、メディア、経済、子育て、遊び、飯とかなんでも配信していくよ。WordPress関連の記事はメモ感覚で書いてるので、乱文で失礼仕り候。ガジェ通とかにも記事提供してるので、よろしくね!

Stinger5のデザインをちょっとだけカスタマイズしてプラグイン化してみた

2015/08/04

LINEで送る
Pocket

 stinger5

まずは本家Stinger

http://wp-fun.com/

 

 Stinger5のデザインをカスタマイズしたプラグイン

Download
ナビのアニメーションに若干の難あり。バグっても自己責任でオネシャス。

 

デモサイト

http://my247.php.xdomain.jp/

 

追加機能など

  1. font-familyの変更

    AndroidのChromeだと「 」が「・」になってしまうバグがあるので、Font-Famiryの優先順位を変更しました。Google Web Fontの「Noto Sans」を再優先にしました。

  2. box-sizingをborder-boxに変更

  3. 横幅をフルサイズに変更

  4. heightを自動取得したボックスレイアウト

    jQueryAutoHeightを使用してメインコンテンツ部分をボックスレイアウトにしました。

  5. 一覧表示時の各記事要素をパラパラとアニメーション表示

  6. PC時ナビゲーションの小カテゴリをドロップダウン表示

  7. コンテンツ部分のAタグをホバーした時に少しだけ透過アニメーション

  8. 管理画面の投稿一覧などでアイキャッチを表示できるように

  9. 管理画面のメディアライブラリの詳細表示時、画像のURLを表示できるように

たぶんこんなもんだと思う。

 

使い方

ダウンロード後、解凍したもんをプラグインディレクトリにぶち込んで、有効化。

 

LINEで送る
Pocket

-WordPress
-, ,