ページの先頭へスムーズに戻る jQuery プラグイン「Back to the Top」

ページの先頭 (トップ) へスムーズにスクロールして戻る jQueryプラグイン「Back to the Top」をリリースしました。

といっても作ったのが 3 年ほど前。作ったモノが貯まっているので、暇を見つけて公開できるモノはプロジェクトページを整備して公開してみました。

プロジェクトページはこちらから英語版もあります。

詳しい設定方法は、プロジェクトページに譲るとして、ページの先頭へのリンクは id 属性 backtothetop-fixed を加えるだけでスクロールしても位置が固定されるページの先頭へリンクが実装できます。ページ内リンクはリンク設定するだけ。

カスタマイズも data-* 属性を使ってできます。スクロールの停止位置を px で指定したり、スクロールの動き (イージング) を変えたり、ページの先頭へリンクの表示などいろいろオプションがあります。

サンプル

<a href="#top" id="backtothetop-fixed"
data-backtothetop-duration="600"
data-backtothetop-easing="easeOutQuart"
data-backtothetop-offset="100"
data-backtothetop-fixed-scroll-offset="500"
data-backtothetop-fixed-fadeIn="1000"
data-backtothetop-fixed-fadeOut="1000"
data-backtothetop-fixed-display="bottom-right"
data-backtothetop-fixed-bottom="10"
data-backtothetop-fixed-right="10"
>Back to the Top</a>

Project Page

Repository

パッチやバグ報告、プルリクは、GitHub からどうぞ。

PCとモバイルのコンテンツを出し分けるWordPressプラグイン「WP Is Mobile Text Widget」

PCとモバイルのコンテンツを出し分けて表示するWordPress プラグイン「WP Is Mobile Text Widget」をリリースしました。

WordPress プラグイン「WP Is Mobile Text Widget」は、ウェブサイトが閲覧されると、スマートフォンなどモバイルかどうかを WordPress3.4 から実装された関数 wp_is_mobile() で判断してコンテンツを切り替えて表示するシンプルなテキストウィジェットです。

WordPress プラグイン「WP Is Mobile Text Widget」を有効化すると、ウィジェットにテキストウィジェットが追加されます。ウィジェットエリアに追加すると、通常のPC用とモバイル用のコンテンツが保存できます。

インストール

  1. WordPress メニュー「プラグイン > 新規追加」から「WP Is Mobile Text Widget」を検索してインストール (この場合ステップ3へ)、または WordPress のプラグインページから zip ファイルをダウンロードして解凍。
  2. 解凍した "wp-is-mobile-text-widget" をプラグインディレクトリ "/wp-content/plugins/" にアップロード
  3. WordPress メニュー「プラグイン」で「WP Is Mobile Text Widget」を有効化
  4. WordPress メニュー「外観 > ウィジェット」で「WP Is Mobile Text」をウィジェットエリアにドラッグ&ドロップで追加して設定。
  5. 完了

ダウンロード

WordPress の公式プラグインページ

ライセンス

GNU General Public License v2.0 (GPLv2) licenses

開発

GitHub (https://github.com/thingsym/wp-is-mobile-text-widget)

Donationware

よろしければ、開発とメンテナンスのために寄付していただければうれしいです。

If you like this plugin, please donate to support development and maintenance.

thingsymのほしい物リスト

背景画像の縦横比率にぴったり合ったサイズで表示するjQueryプラグイン「Background Fit」

「Background Fit」は、HTMLタグに設定した背景画像の縦横比率にぴったり合ったサイズで表示する jQuery プラグインです。

jQuery プラグイン「Background Fit」とスタイルシートの background-image プロパティとの違いは、背景画像の縦横比率に合ったサイズを計算して指定したブロック要素 (またはインライン要素) の表示サイズに調整して、背景画像を全面に表示します。

続きを読む

楽天市場の商品ページから商品リンクが作成できるブックマークレット「楽ちんアフィレット」

楽天市場の商品ページから商品リンクが作成できるブックマークレット「楽ちんアフィレット」をつくりました。

たまに商品リンクを使うときがあって、そのときは楽天アフィリエイトのページで商品ページのアドレスを入力して商品リンクを作成していたのですが。いちいち面倒だなぁ。商品ページから直接商品リンクが作成できたらいいいなぁと...。アマゾンの商品ページにはアソシエイトツールバーがあって、そこから直接商品リンクの作成ができますが、楽天市場では楽天ブックスなど一部を除き、直接商品リンクの作成ができないようだったので、ブックマークを選ぶと直接商品リンクを作成するページにダイレクトに飛ぶブックマークレットをこさえました。

インストール

以下のリンクをブックマークツールバーにドラッグ&ドロップするか、ブックマークに登録してください。

楽ちんアフィレット

商品ページでブックマークに登録している「楽ちんアフィレット」を押すだけで商品リンク作成ページが表示。リンクの作成が楽ちんにできます。あとは、こんな感じでブログやホームページに貼り付けるだけ。

使いかた

  1. 楽天市場の商品ページへ。
  2. ブックマークに登録している「楽ちんアフィレット」を押してください。
  3. 商品リンク作成ページが別ウインドウで開きます。(ログイン時)
  4. HTMLソースをブログやホームページに貼り付けます。

ブログの記事作成やコンテンツ制作のお供にどうぞ。

Enjoy Shopping!! Enjoy Affiliate!!

ワンソース・マルチデバイスが実現する WordPress プラグイン「Multi Device Switcher」

デバイス毎にテーマを切り替える WordPress プラグイン「Multi Device Switcher」をリリースしました。

デバイスの多様化が進んでいます。スマートフォンの急激な普及や携帯端末ゲームがインターネットに繋がったり、パソコンに変わりタブレット型端末を手に取ったり、そして近い将来テレビがネットに繋がるスマートテレビが実現と大小さまざまな大きさのモニターでインターネットを使うようになってきました。

その変化に対応してウェブサイトもあらゆるデバイスで見られるように最適化を図る必要に迫られています。

WordPress プラグイン「Multi Device Switcher」は WordPress のコンテンツマネジメントシステムを活かしてワンソース・マルチデバイスが実現するプラグインです。デバイス (現在 スマートフォン、タブレット端末、携帯モバイル、ゲームの 4 つに対応) によって自動的にテーマが切り替わります。

インストール

  1. WordPress のプラグインページから zip ファイルをダウンロード
  2. zip ファイルを解凍
  3. "multi-device-switcher" をプラグインディレクトリ "/wp-content/plugins/" にアップロード
  4. WordPress メニュー「プラグイン」で「Multi Device Switcher」を有効化
  5. デバイスのテーマをディレクトリ "/wp-content/themes/" にアップロード
  6. WordPress メニュー「外観 > マルチデバイス」へ
  7. 設定
  8. 完了

または、WordPress メニュー「プラグイン > 新規追加」から「Multi Device Switcher」で検索してインストール、有効化。

設定

オプションは「テーマ」と「ユーザーエージェント」の2つです。タブで切り替えて設定できます。

テーマ

デバイス毎のテーマを選択します。テーマは前もって用意してください。

ユーザーエージェント

デバイス毎のユーザーエージェントを必要に応じて追加修正できます。新しいユーザーエージェントが出たときに追加してください。

以上でデバイス毎にテーマが切り替わります。

ちょっとした活用法

テーマオプションを「None」にするとテーマは切り替わりません。CSS3 の Media Queries (メディアクエリ) を採用してレイアウトがデバイスに最適化 (レスポンシブ・ウェブデザイン) しているテーマはテーマの切り替えが必要ありません。その場合に設定します。他のプラグインと組み合わせた柔軟な運営もできます。スマートフォンの表示にプラグイン「WPtouch」や携帯電話端末の表示にプラグイン「Ktai Style」に任せることができます。

Related Links and Articles:

Download:

WordPress のプラグインページからどうぞ。

Code Repository:

thingsym / multi-device-switcher (GitHub)

Licenses:

Licensed under GPL version 2.0

Donationware:

よろしければ、開発とメンテナンスのために寄付していただければうれしいです。

If you like this plugin, please donate to support development and maintenance.

Donationware

最近の投稿

カテゴリー

アーカイブ