ようこそゲストさん

ITメモ

     

画像をかっこよく表示したい

はてブ情報 はてブに登録 はてブ数
adiaryには簡易画像アップ機能がありますが、画像へのリンクはこれまた簡易です。
JPEG画像へベタにリンクされているだけです。

これを、かっこよく表示させるように改造してみましょう。

adiary本体を一部変更を加えますので、作業の前に必ずバックアップをとってから作業してください。
失敗した場合、adiaryが動かなくなる場合もあります。
また、動作に関する一切の保証、責任は負いませんのでご了承ください。
adiary Version 1.44 で動作確認をしております。その他のバージョンは未確認です。

【動作サンプル】
sample.jpg
(画像をクリックしてください)

どうですか?
うにゅ〜っと表示されてかっこいいでしょう?

ページの展開が無く、とても快適です。
あなたのadairyにも搭載してみませんか?

それでは設定方法をご紹介します。

【目次】

1.Highslide JSをダウンロード

メインエンジンとして「Highslide JS」というソフトを利用しています。
利用規約は、Highslide JSのものに従ってください。
  • Highslide JSホームページの「Download」をクリック。
  • A personal website, educational site or other non-commercial use (free). / A commercial or company website ($30). のいずれかをクリックして、「Download Now!」をクリック。
  • 解凍ソフトでファイルを解凍する。

2.アップロード

解凍されたフォルダの中にある「highslide」フォルダをすべてadiaryが設置されているサーバへFTPでアップロードする。
サーバ上に
/hoge/adiary/
があれば、
/hoge/adiary/highslide/
となるよう、直下になるようにアップロードします。

3.adairyソフト改造

※作業の前に必ずバックアップをとってから作業してください。

「diary.skel/_frame.html」を改造

head属性の間(22行目付近)に、以下のコードを追加する。
<script type="text/javascript" src="/hoge/diary/highslide/highslide.js"></script>
<script type="text/javascript">    
    hs.graphicsDir = '/hoge/diary/highslide/graphics/';
    window.onload = function() {
        hs.preloadImages(5);
    }
</script>
※「/hoge/adiary/」の部分は自分の環境に合わせて変更のこと。

上書きをした「_frame.html」ファイルを、「diary.user.skel」にアップロードする。
フォルダが元のフォルダと違うため、上書きではありません。

「lib/Satsuki/TextParser/TagPlugin/Tag_image.pm」を改造

100行目付近の
if ($rel ne '') { $target .=" rel=\"$rel\""; }

if ($rel ne '') { $target .=" class=\"highslide\" onclick=\"return hs.expand(this)\""; $tag->{class}=""; }
に変更する。
上書きをした「Tag_image.pm」ファイルをサーバへ上書きアップロードする。
(2008/1/10修正/Thanks to オレパパ)

タグの許可

adiaryではHTMLのタグ制限がかなりきつくなっています。
初期設定のままだと、「onclick」が制限でカットされうまく動作しません。
「/adiary.config.cgi」の88行目付近の
●日記を書く際などのタグ利用制限をなくすには、次の行を有効化します
	・adiaryを個人や完全に信頼できる知人たちと共有する場合は 1 の設定を推奨
	・IDを所有している人間をすべて信頼するセキュリティモードになります。
	・IDを所有してない人間に対してのセキュリティは変わりません。
すべてのユーザーで trust_mode にする
#<$v.trust_mode = 1>
管理者権限を持つユーザーのみ、trust_mode にする(上は有効にしないこと)
#<$v.root_trust_mode = 1>
でtrust_modeを有効化すればOKです。
(2007/1/12追加/Thanks to オレパパ)

trust_modeを有効にしたくない場合は以下の作業が必要です。
「/info/allow_taglist_adiary.txt」の5行目の
_base		id, title, class, style, lang

_base		id, title, class, style, lang, onclick
に変更し上書き保存の上、アップロードします。

4.adiary管理画面上からのカスタマイズ

もう一息です。がんばってください。

ユーザースタイルシートの設定

「管理」→「デザイン」→「ユーザーCSS」で編集画面を開きます。
最下部に、以下のコードを追加し、「このスタイルシートを登録する」をクリック。
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 10px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

「imageのrelコード」を付加

「管理」→「「日記帳の設定(詳細)」(設定)の方をクリック。
「パーサー関連の設定」をクリック。
「画像記法のリンク」の「rel」のボックスに、
lightbox
と入力し、ページ最下部の「この設定を保存する」をクリック。

5.動作テスト

お疲れ様でした。
設定は以上で完了です。
では動作のテストをしてみましょう。

「日記を書く」をクリックし、「file/画像UP」から画像ファイルをアップしてみましょう。
記事を保存してみると・・・。

どうですか?
うまく動作しましたか?

うまくいかない場合はもう一度最初から見直してください。

過去の記事がある場合

新規で追加または更新された記事の画像は、highslideの効果が得られますが、過去の記事は影響されません。過去の記事がある場合、[管理] - [管理] - [日記帳の再構築] で「再構築を実行する」をクリックしてください。
(2008/1/10追記)

おまけ:adiaryのバージョンアップの手順

基本的には、項目3の二つ目の、「lib/Satsuki/TextParser/TagPlugin/Tag_image.pm」の改造・上書きアップロードだけでOKですが、うまく動作しない場合は、その他のファイルがバージョンアップ時に差し替わった可能性があります。
(trust_modeを有効にしていない場合は、「/lib/allow_taglist_adiary.txt」も必要です。)
このページの手順を見直して再設定してください。

制限事項

InternetExplorerの場合、一部のテーマで不具合が発生することが判明しています。
動作は問題ないようですが、気になる方は他のテーマをご利用いただきますようお願いします。
(原因を調べています。判明次第、情報を更新させていただきます。)
  • 開いた画像ウィンドウのフレーム右側が伸びてしまう事があります。
  • highslide.jsの564行目付近で指定されている「position: 'absolute',」の影響でページ表示後、レイアウトがずれる事があります(横スクロールバーが出る)。
(2008/1/10更新)

# じゅん 2008年07月31日(木) 午前2時25分

こんにちは。highslide jsを導入いたしましたが、画像(サムネイル)の横にテキストの回り込みがうまくできません。ご教授願えませんでしょうか。

# ひとぅ 2008年08月04日(月) 午後9時33分

じゅんさん、こんにちは。ご返事が遅くなり申し訳ありません。
テキストの回り込みはadiaryの基本機能ではできません。

設定→ユーザー定義タグで、

image_r = image_r, ASCII, 5, <a href="/public/image/#1/#2#3" target="_blank" class="highslide" onclick="return hs.expand(this)"><img src="/public/image/#1/#2thumbnail/#3.jpg" style="float:right;"></a

のように独自のタグを作ってみてください。
で、[image:〜]の部分を[image_r:〜]と書き換えれば画像が右側でテキストが左側に回り込むようになると思います。

同じ要領で、_l、leftなどを作ってみてもいいかもしれませんね。

# じゅん 2008年08月09日(土) 午前7時57分

ひとぅさん テキストの回り込み解決いたしました。ありがとうございました。
ついでに^^もうひとつお尋ねいたします。本文中のこの部分 -- 2008/07/29 11:48 【あいう】jun(編集)-- の日付と時間の変更、または非表示にする設定のご教授をお願いいたします。

# ひとぅ 2008年08月09日(土) 午後4時37分

テキストの回り込み、解決して良かったですね。
次のご質問の件ですがこの日付は「初めて記事を投稿した日時」で変更することはできません。なので私も非表示にしています。
方法は「管理」→「日記帳の設定(詳細)」の詳細をクリック→表示設定→投稿日時の表示のチェックボックスをOFF→「この設定を保存する」です。
一度おためしくださいませ。

※何だかこのコメント欄でやり取りするのが適さなくなってきましたね(^_^;)。
 この件が解決しましたら次回からの質問がございましたら公式MLでされることをお勧めいたします(*^_^*)。
 私を含め作者さん(なべさん)や多くの方が参加されていますので適切なアドバイスをいただけると思いますよ!

# ひとぅ 2008年08月09日(土) 午後4時38分

追伸:
公式ML→ http://adiary.org/ml.html

# じゅん 2008年08月10日(日) 午前8時04分

ひとぅさん 詳細なご説明ありがとうございました。
この後は公式MLに参加させて頂きます。^^

  • adiaryをバージョンアップ。 ひとぅブログ ひとぅ
    遅くなりましたがようやくadiayのバージョンを1.44にアップしました。10月に公開されているので約2ヶ月間手を抜いていました。あかんな〜。ついでにITメモの記事で「画像をかっこよく表示したい」の内容を少しだけアップデートしてみました。「_flame.h...