TOP / Seesaa カスタマイズ

SeesaaブログにLightboxを設置

Seesaaブログに、Lightbox(2.51)を設置してみました。

ウェブ制作では定番の「Lightbox2」です。（ver.2.51、2012/4/20）
Seesaaブログでは、サムネイル画像があり、拡大画像を新しいいタブや別ウィンドウで表示されてしまいますが、lightboxを利用すると、現ウィンドウ内でもポップアップで拡大表示してくれます。（但し、HTMLの画像に仕掛けを作らなければ動作しません）

lightboxの見本：
LightBox v2.51の画像　クリックすると拡大

SeesaaブログにLightbox2を設置する方法

Seesaaのファイル類は、別ディレクトリに保存されてしまいます。
https://アカウント名.up.seesaa.net/〜〜
lightboxのファイル群は、相対パスで自動認識されますが、Seesaaやその他の無料ブログなどでは画像やファイルを参照できなくなりますので、今回は絶対パスに変更します。
それと、階層が限定なので、ディレクトリの配置を変更します。
https://アカウント名.up.seesaa.net/lightbox/〜〜
（アカウント＋UPの付いた画像のアドレス。※ 現在の画像パスを確認する事）

  1. lightbox(2.51)をダウンロード
    LightBox 2.51　LightBox
    http://www.lokeshdhakar.com/projects/lightbox2/
  2. LightBoxフォルダを解凍/展開
    DLしたフォルダをパソコン内の適当なフォルダ内に解凍/展開。
  3. lightBoxフォルダを開く
    Lightboxのディレクトリ
    ３つのフォルダがあるので、その中の「CSSフォルダ」内のlightbox.cssをテキストエディタなどで開いて修正。
    lightbox.css（112〜120行目までのソース）
    /* line 81, ../sass/lightbox.sass */
    .lb-prev:hover {
      background: url(../images/prev.png) left 48% no-repeat;
    }

    /* line 85, ../sass/lightbox.sass */
    .lb-next:hover {
      background: url(../images/next.png) right 48% no-repeat;
    }
    ↓ ↓　２カ所のパスを変更します。
    /* line 81, ../sass/lightbox.sass */
    .lb-prev:hover {
      background: url(https://貴方のアカウント.up.seesaa.net/lightbox/prev.png) left 48% no-repeat;
    }

    /* line 85, ../sass/lightbox.sass */
    .lb-next:hover {
      background: url(https://貴方のアカウント.up.seesaa.net/lightbox/next.png) right 48% no-repeat;
    }
  4. 「jsフォルダ」内のlightbox.jsを修正
    lightbox.js（50〜57行目までのソース）
    function LightboxOptions() {
      this.fileLoadingImage = 'images/loading.gif';
      this.fileCloseImage = 'images/close.png';
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.labelImage = "Image";
      this.labelOf = "of";
    }
    ↓ ↓　２カ所のパスを変更します。
    function LightboxOptions() {
      this.fileLoadingImage = 'https://貴方のアカウント.up.seesaa.net/lightbox/loading.gif';
      this.fileCloseImage = 'https://貴方のアカウント.up.seesaa.net/lightbox/close.png';
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.labelImage = "Image";
      this.labelOf = "of";
    }

  5. 管理画面で、ファイルを登録
    lightboxのディレクトリ
    ファイルマネージャーの「ディレクトリ」で、
    画像登録時に「lightbox」ディレクトリを追加し、
    登録する画像で「lightbox」ディレクトリを指定する事！

    • lightbox.css
    • jquery-1.7.2.min.js
    • lightbox.js
    • close.png
    • loading.gif
    • next.png
    • prev.png
    これら７つのファイルを「lightbox」ディレクトリにアップロードします。
  6. HTMLの編集
    テンプレートのHTMLを編集します。
    SeesaaのHTML編集
    HTMLソースを表示します。
  7. HTMLソースの <head>〜〜</head> に以下の３行を追加します。
    <link href="https://貴方のアカウント.up.seesaa.net/lightbox/lightbox.css" rel="stylesheet" />
    <script src="https://貴方のアカウント.up.seesaa.net/lightbox/jquery-1.7.2.min.js"></script>
    <script src="https://貴方のアカウント.up.seesaa.net/lightbox/lightbox.js"></script>
    間違い無いように追加して、保存します。
  8. 見本の大小画像を追加。
    Lightboxで拡大する見本の大小画像をファイルマネージャーからアップロード
  9. 新規投稿の記事で、画像のHTML編集。
    <img src="https://〜〜.up.seesaa.net/〜〜.jpg" alt="〜〜" border="0" height="150" width="200" />
    通常は、上記のような画像.imgのHTMLを以下のように編集します。
    <a href="https://〜〜.up.seesaa.net/lightbox/拡大画像パス.jpg" rel="lightbox" title="○○の画像"><img src="https://〜〜.up.seesaa.net/lightbox/縮小画像パス.jpg" alt="○○の画像" height="150" width="150" /></a>
    アップロードした画像のフルパスを記述します。画像サイズを設定します。
  • CSSファイルは、
    アップロードせずに既存のCSSファイル内に記入しても良いです。
  • jQueryのJSファイルは、
    CDN（コンテンツデリバリーネットワーク）から、
    各所/各バージョンをリンク利用できます。（各互換性で選択）
  • 画像は、
    管理画面のサムネイルを利用したり、
    １枚の大きい画像をアップロードし、サイズ変更で縮小画像として併用しても良いです。
  • 各ブラウザで表示確認をしてみましょう。
| コメント(0) | Seesaa カスタマイズ | 読者になる | 更新情報をチェック

Seesaaのタイトル画像

Seesaaのヘッダー画像、タイトル画像を変更

シーサーのオプションで
「写真を選んでテンプレートにできる」がありまして、
写真素材 [フォトライブラリー] から自由に
半オリジナルなブログタイトル部分のヘッダー画像が簡単に作れます。
テンプレート

  1. 画像を選択
    デザイン → デザイン一覧
    「写真を選んでテンプレートにできる」をクリック
    好みの画像を選択、クリックする。
  2. 画像を切り抜く
    画像の好きな位置でクリックして右下の「送信」ボタンをクリック
    フォトライブラリ
  3. ソースをコピー
    ソースが表示されるので、全てを選択してコピー
    ソース　コピー
  4. ソースを貼り付け
    「デザイン一覧」に戻り、タイトルをクリックしCSSを表示して貼り付け
    CSS
  5. 確認、保存
    プレビューで確認し「スタイルシートを変更」をクリック
  6. 画像解像度のサイズ容量が特大です。
    画像処理ソフトなどで適度に縮小してから、
    ファイルマネージャーでアップロードし、
    CSSの画像部分を変更するとかなり軽くなります。
変更例：　保存した画像URLを貼り替える　
body {
background-image:url(http://〜〜.gif);

#container{
background-image:url(http://〜〜.jpg);

#banner{
background-image:url(http://〜〜.jpg);
| コメント(0) | Seesaa カスタマイズ | 読者になる | 更新情報をチェック