イメージビューアー（Highslide JS）

現在では、a-blog cms ではSmartPhotoをデフォルトのイメージビューアーとして設定されていることから非推奨になりました

a-blog cmsでは、サムネイル画像を拡大表示させるイメージビューワー（Highslide JS）の設定が標準で実装されています。（Ver. 1.2.1より）

a-blog cms Ver. 1.2.1に同梱されているHighslideのバージョンは4.1.8です。（インストールパッケージ内「お読みください.pdf」参照）

デモ

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

    // イメージビューワー ( Highslide )
    hsMark              : 'a[rel=highslide]',
    hsConfig            : // http://highslide.com/ref/hs.overrides
    {
        align       : 'center',
        outlineType : 'rounded-white'
        //dimmingOpacity  : 0.25,
        //dimmingDuration : 25
    },
    hsLang  :
    {
        loadingText     : '読み込み中...',
        loadingTitle    : 'クリックでキャンセルします',
        fullExpandTitle : '実寸で表示します',
        restoreTitle    : 'クリックで元の大きさに戻ります'
    },
hsMark highslideを適用させるHTMLの要素・属性を指定します。
hsConfig highslideの表示設定です。記述できる値は以下のとおりです。allowSizeReduction anchor align targetX targetY outlineType outlineWhileAnimating captionId captionText captionEval captionOverlay headingId headingText headingEval headingOverlay dragByHeading autoplay numberPosition transitions dimmingOpacity contentId width height allowWidthReduction allowHeightReduction preserveContent maincontentId maincontentText maincontentEval objectType cacheAjax objectWidth objectHeight objectLoadTime swfOptions wrapperClassName minWidth minHeight maxWidth maxHeight slideshowGroup easing easingClose fadeInOut src参考：http://highslide.com/ref/hs.overrides
hsLang highslideの画面に表示させるメッセージの設定です。

2. HTMLの編集

config.jsで指定した要素・属性をHTMLに記述します。

例）hsMarkで「a[rel=highslide]」と指定した場合

<a href="sample.html" rel="highslide"><img src="xxx.gif" alt="xxx" width="10" height="10" /></a>

このように記述すると、アンカーリンクをクリックしたときにHighslideが適用されます。

イメージビューアー（prettyPhoto）

現在では、a-blog cms ではSmartPhotoをデフォルトのイメージビューアーとして採用していることから非推奨になりました

a-blog cmsでは、サムネイル画像を拡大表示させるイメージビューワー（prettyPhoto）の設定が標準で実装されています。

デモ

1. 設定の編集

管理ページ > カスタマイズ管理：コンフィグ > モジュール：Entry_Bodyイメージビューワーの部分を「 rel="prettyPhoto[{unit_eid}]"」にします。

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

    //----------------------------------
    // イメージビューア ( prettyPhoto )
    ppMark  : 'a[rel^="prettyPhoto"]',
    ppConfig    :
    {
        animation_speed: 'fast',
        slideshow: false,
        autoplay_slideshow: false,
        opacity: 0.80,
        show_title: false,
        allow_resize: true,
        default_width: 500,
        default_height: 344,
        counter_separator_label: '/',
        theme: 'light_square',
        hideflash: false,
        wmode: 'opaque',
        autoplay: true,
        modal: false,
        overlay_gallery: true,
        keyboard_shortcuts: true,
        changepicturecallback: function(){},
        callback: function(){},
        markup: （省略）,
        gallery_markup: （省略）,
        image_markup: （省略）,
        flash_markup: （省略）,
        quicktime_markup: （省略）,
        iframe_markup: （省略）,
        inline_markup: （省略）,
        custom_markup: ''
    },
    ppCaption2Title : true,
ppMark prettyPhotoを使用する場合のrel属性値
ppConfig prettyPhotoの設定値参考：prettyPhoto documentation
ppCaption2Title ユニット画像のキャプションをタイトルとして使用するかの設定

2. 補足

a-blog cmsのバージョンアップ（Ver. 1.6.2.1以前）をしたサイトで、下記のエラーが表示されることがあります。

index.js : loadClosure is not function

対応としては、Ver. 1.7.0以上へのバージョンアップか、もしくはhighslideをprettyPhotoに変更をしてください。

生成AIポッドキャスト時代なので a-blog cms の mp3対応を考えてみる

NotebookLM で生成AIポッドキャストの生成が話題になっています。標準的に a-blog cms で MP3 をそのまま扱うことが残念ながらできません。しかし管理画面の設定と、テンプレートのカスタマイズで簡単に実装できる内容ですのでご紹介します。