ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

このページの記事目次 (カテゴリー: ブログカスタマイズ上級 30 件)

  ← 前のページ  total 8 pages  次のページ →  

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

jCarousel Lite をカスタマイズして記事毎に!

2010/05/19 (水)  カテゴリー: ブログカスタマイズ上級

勿体ないのと、説明が面倒なのとで 紹介を避けていましたが... jQueryライブラリ を利用した jCarousel Lite を FC2ブログで使う上でのちょっとしたヒントを載せておきます。

変数 を利用すれば、ブログ記事内 に利用することだってできるし、カスタマイズして見た目を整えて使えば、読み込み中 や スクリプトOFF の場合でも格好悪くなりません。


  • jQueryプログラミング入門
  • jQueryで作るAjaxアプリケーション
  • jQueryプラグインブック
  • jQuery+JavaScript実践リファレンス
  • jQuery UI+厳選プラグイン41実践サンプル集
  • これはあくまで 見本ネタ として作ったものなので... 1つも読んだことないです。 ごめんなさい。

私が利用しているものは jCarousel Lite Version 1.0.1 (Minified) です。 ダウンロードするものは 2KB の .jsファイル本体のみ で、CSSなどは含まれていません。 Installation のところにある設置方法 を参考に設定するだけで、取り敢えず使えるようになるのですが...

正しく設定しないと起こる不具合のサンプル、「失敗見本ページ」 を作ってみました。 ページ読み込み中の表示 もこのページのものとは異なります。

どうでしょうか?

  1. jQuery は ページの読み込み完了時に実行される ものなので、読み込み中の見栄えは html+CSS の設定次第になる。 読み込み中のことも考慮し、CSS を設定しておけば、あらかじめ表示範囲が定まり 違和感を少なくできます。
    ※javascript OFF の環境での表示も、基本的には CSS の設定次第になります。

  2. ブログ記事内 で使いたい場合には、カテゴリー別,タグ別,検索結果別...etc どのような組み合わせで記事が表示されても正しく機能するように id名 (もしくは class名 でも可) に <%topentry_no> を利用します。
    ※テンプレートに 直接いくつか設置 するようなケースでは、この設定は不要です。

このスクリプト自体は、すごくシンプルでカスタマイズ性が高いものだと思います。

  • 表示リスト数の設定が簡単! visible:3 (デフォルト3)
  • 縦方向のスクロールもOK! vertical:true (デフォルトfalse 横)
  • オートスクロールもOK! auto:800 (デフォルトnull), speed:1000

例えば、上のような設定は .jsファイル の該当箇所の値 を書き換えるだけでOKです。 それ以外の設定に関しては jCarouselLite の設定方法 - FHWブログ | ホームページ制作会社FHW に詳しく書かれていますので参考にしてみてください。


jCarousel Lite をFC2ブログ記事内で使うための設置方法

jCarousel Lite Installation のところにある設置方法をベースに 設定例 を載せておきます。 方法はいくつかあると思いますが、他のスクリプト (例えば jQuery版 lightBox など) にも応用できる方法を紹介します。 私が実際に使っている 設定方法,id,class名 とは異なりますので 混在させないように ご注意ください。

キーワード検索 : jQuery  jCarousel  javascript  テンプレート  カスタマイズ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-132.html

2010/05/19 ~ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |

人気記事ページランキング を静的に活用しよう!

2010/05/03 (月)  カテゴリー: ブログカスタマイズ上級

FC2アクセスランキング や ACRWEB の人気ページランキング などを利用すると、どの記事が人気があるのか? ということが簡単に表示出来て便利ですよね。

以前は、リサーチアルチザンのアクセスランキング を(静的に)利用していたのですが、サービス終了の為、1週間くらい前より FC2アクセスランキング を利用することにしてみました。 が、これ 「そのままではちょっと使いづらいなぁ~」 というものだったので、これを自分好みの形に直して使う方法を考えてみました。

人気記事ランキングの表示イメージ

追記: 2010/01/20 
人気記事を載せていましたが、記事をパクられる要因になることに気付いたので(実際にパクられてしまったので...) 掲載は止めることにしました。
データは 自分だけが確認できる場所に移動し、必要に応じて利用する方法に変更しました。

↑ 上のデータは、スクリプトで生成される実際のデータ を Firefox の 「選択した部分のソースを表示」 機能 を使って表示されたソースを貼りつけたもの。 静的データ です。

FC2アクセスランキング  「人気ページ」ブログパーツ,+ 直接編集エリア
スクリプトで生成される実際のデータ と 直接編集エリア

↑ さらに、私はこのデータを 自分好みのリスト形式に 簡単に書き直せるように... contenteditable="true" を使った直接編集エリアを作ってみました。 この方法、私は別のことにも利用しています。(秘密のページも...) マニアックな方は是非!
[ 関連記事 : Web上で直接編集できる文字や画像 ]
[ 関連記事 : contenteditable (直接編集) の傾向と対策 ]

※記事にも書いてますが、contenteditable="true" は IE や Sleipnir, Google Chrome, Opera などが使いやすく、Firefox では使いづらい場合もあります。


スクリプトを使ったデータ と 手書きの静的データ それぞれのメリット

キーワード検索 : アクセスランキング  アクセス解析  FC2ブログ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-129.html

2010/05/03 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |

固定リンクでも 【続きを読む】 を折りたたむ方法

2010/04/07 (水)  カテゴリー: ブログカスタマイズ上級

固定リンク (個別記事ページ,<!--permanent_area-->) でも 追記 に入れた内容を 【続きを読む】 として折りたたみたい! カスタマイズの方法は...?

という質問を受け、最初は 「個別記事ページでまで 追記 が折りたたまれてたら面倒だよなぁ~」 と思ってしまった私ですが、ある方のサイトで 「追記にはネタバレの内容を含みます」 という一文を見て、こういうサイトでは 「読みたい人だけが自分の意思で 追記 を開く」 という形式もありかなと感じました。

元々、カテゴリー別ページ月別ページ検索結果ページタグ検索結果ページ では、FC2ブログのテンプレート工房(いたおさん) のスクリプトを使わせていただき、追記の折りたたみ機能 (スクリプトON の場合は その場に展開, スクリプトOFF の場合は 固定リンクへ移動) を付けてあるので、それと同じ見た目で スクリプトOFF でも記事が閲覧できる方法を考えてみました。

設置した場合の動きのイメージです。 追記に入れた内容が 個別記事ページ でも折りたたみ状態で表示され、クリックで 展開 ⇔ 閉じる を切り替えます。 スクリプトOFF の場合には、内容だけがそのまま表示されます。

最初は、今使っているスクリプトを利用して...と考えましたが、スクリプトOFFのことも考えた スッキリした方法が見つけられなかったので、同じ作者さんの 「プラグインの折りたたみ」 をアレンジしたものを使ってみたら、上手く出来ました!

スクリプト OFF の場合には 内容だけがそのまま表示されます。

<!--permanent_area--> で 追記部分を折りたたむ方法

キーワード検索 : FC2ブログ  追記  折りたたみ  javascript  変数  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-124.html

2010/04/07 ~ | Comment (15) tweet? | ↑ ページ先頭へ ↑ |

アルファチャンネル付きPNG を 文字背景に

2010/04/02 (金)  カテゴリー: ブログカスタマイズ上級

スタイルシートで 文字部分に「背景色」や「背景画像」を入れることはありますよね。 今回は、半透明 を表現できる アルファチャンネル付きPNG (αPNG,半透明PNG) を背景画像に使う方法,及び 配布サイト, 自分で作る方法 などを紹介します。

半透明PNG (透過率を指定したアルファチャンネル付きPNG) ,ブラウザによる見え方の違い
クリックで画像を拡大します
 [ 実際のWebページはこちら ]

アルファチャンネル付きPNG は、IE7以上 のブラウザ (Firefox,Opera,Google Chrome,Safari などを含む) では、完全にサポートされています。 IE6 では、サポートされていない形式なので、そのままでは 透過率を指定する前の 「元の画像の状態」 で表示されることになります。

  • 文字色だけでどうにかしようとすると難しいケースもありますよね。。。
    アルファチャンネル付きPNG を 文字背景に 【 ありのごとくあつまりて 】

  • kfind.png Designer: Sergio Sánchez López単純な設定の場合 : 50%の単色画像使用(透過率50%)
    単純な設定の場合 : 75%の単色画像使用(透過率25%)
    IE6 では元の画像の状態で表示されます。

  • 画像は単色でなくてもOKです。 50%の画像使用

  • IE6用 に半透明に見せかけた透過GIFや透過PNGを使う方法も

IE6 にも対応するように設定することも可能らしいのですが... ここでは上手くできませんでした。。。 (IE6、今は IETester で確認しているだけなので、詳細は不明です。)
[ 参考 : CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にするCSS を使って IE 6 で PNG の半透明を有効にする | ヨモツネット ]

共有テンプレート ari_seoシリーズ では、「画像の変更などもOK!」 としているので、画像を差し替えて利用しているユーザーさんも多く見られますが、恐らく最初につまづく部分が ここではないでしょうか。。。

ヘッダーに入れる画像 によっては、リンク背景 (読めなくならないようにデフォルトで白色を設定しています) が目立ち過ぎてちょっと格好悪くなってしまう場合も。 そんな時にも有効に使える(かもしれない)方法です。

キーワード検索 : 画像  半透明  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-122.html

2010/04/02 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。