記事のなかに右寄せで写真をのせて、その下に説明（キャプション）を付けたいのですが、うまくいきません。
どうHTMLを指定すれば良いか教えてください。
また、キャプションを複数行にするのは可能でしょうか。それも合わせて教えてもらえると助かります。
よろしくお願いします。
No.1
4973
2154
50pt
こんな感じになるでしょうか。
<style> .contents { border: solid 1px black; width: 400px; margin-left: 2em; } .picture\-container { float: right; border: solid 2px red; } .picture\-caption { } </style> <!-- ポイントは、この辺り --> <div class="contents"> <div class="picture-container"> <img src="http://www.st-hatena.com/users/a-/a-kuma3/user.jpg?1293543865" style="width: 250px"> <div class="picture-caption"> 【画像の説明】<br> とあるところの看板犬。 </div> </div> こんな感じで、画像と説明をひとつの要素でくくって、 それのスタイルに float: right を指定すると、希望したような 見栄えになるのではないかと思います。<br> <br style="clear: both;"> </div>
画像と説明を、ひとつの要素でくくって、それに float: right; なスタイルを指定してます。
jsFiddle で試してみたのが、こちら。
http://jsfiddle.net/EX4yu/
No.2
595351
50pt
記事に画像を挿入するのは問題なくできるのでしょうか？
もし画像の挿入方法が分からない場合は、次のページの記事を確認してください。
http://manual.weska.me/movabletype5/insert_image/
※記事の作成・編集時の画面で「画像の挿入」ボタンを押すと、上記記事内にあるようなダイアログが表示されますので、画像を選択するか、新規にアップロードして操作を進めた後、「位置」のラジオボタンで「右」にチェックをいれるといいです。
※最新バージョンでは、若干ボタンの位置が変更になっていますが、操作方法に変わりはありません。
上記の操作では画像表示のHTMLコードが挿入されるだけですので、有用なプラグインに少しだけ変更を加えて、簡単な操作でキャプションのHTMLコードも入力されるようにしてみました。
「LightBoxプラグイン(改良版)。」を使用します。
http://junnama.alfasado.net/online/2009/06/lightbox.html
※コメントで報告されている問題(MTのバージョンによって発生)も対応済みです。
【設置手順】
1.上記でダウンロードしたファイルを解凍して、それぞれのファイルを次の内容と入れ替えます。
・「LightBox/LightBox.pl」
50
50
package MT::Plugin::LightBox;
use strict;
use MT;
use MT::Plugin;
our $VERSION = '1.1';
use base qw( MT::Plugin );
@MT::Plugin::LightBox::ISA = qw( MT::Plugin );
my $plugin = new MT::Plugin::LightBox ( {
name => 'LightBox',
id => 'LightBox',
key => 'lightbox',
description => '<MT_TRANS phrase=\'_PLUGIN_DESCRIPTION\'>',
author_name => 'Junnama Noda',
author_link => 'http://junnama.alfasado.net/online/',
version => $VERSION,
settings => new MT::PluginSettings ( [
['lb_classname', { Default => 'lightbox' }],
] ),
l10n_class => 'LightBox::L10N',
} );
MT->add_plugin( $plugin );
sub init_registry {
my $plugin = shift;
$plugin->registry( {
callbacks => {
'MT::App::CMS::template_param.asset_options_image'
=> \&_asset_options_image_param,
'MT::App::CMS::template_param.asset_insert'
=> \&_asset_insert_param,
},
} );
}
sub _asset_options_image_param {
my ( $cb, $app, $param, $tmpl ) = @_;
my $pointer_field = $tmpl->getElementById( 'link_to_popup' );
my $nodeset = $tmpl->createElement('app:setting', { id => 'link_to_lightbox',
label => $plugin->translate( 'Use LightBox' ) ,
label_class => 'no-header',
required => 0 });
my $nodeset2 = $tmpl->createElement('app:setting', { id => 'link_to_imagecaption',
label => $plugin->translate( 'Show Image Caption' ) ,
label_class => 'no-header', required => 0 });
my $nodeset3 = $tmpl->createElement('app:setting', { id => 'link_to_lightboxcaption',
label => $plugin->translate( 'Show Image Caption with LightBox' ) ,
label_class => 'no-header', required => 0 });
my $innerHTML =<<MTML;
<input type="checkbox"
onclick="if(this.checked){document.getElementById('create_thumbnail').checked=true;
document.getElementById('thumb_width').focus();
}else{
document.getElementById('create_thumbnail').checked=false;}"
name="lightbox" id="lightbox" value="1" <mt:if name="make_thumb">checked="checked" </mt:if>/>
<label for="lightbox"><__trans_section component="LightBox"><__trans phrase="Use LightBox"></__trans_section></label>
(<label for="thumb_width"><__trans phrase="width:"></label>
<input name="lightbox_width" id="lightbox_width" value="" size="4" /> <__trans phrase="pixels">)
MTML
my $innerHTML2 =<<MTML2;
<input type="checkbox" name="imagecaption" id="imagecaption" value="1" />
<label for="imagecaption"><__trans_section component="LightBox"><__trans phrase="Show Image Caption"></__trans_section></label>
(<label for="caption"><__trans_section component="LightBox"><__trans phrase="Image Caption"></__trans_section>:</label>
<input name="caption" id="caption" value="" size="16" />)
MTML2
my $innerHTML3 =<<MTML3;
<input type="checkbox"
onclick="if(this.checked){document.getElementById('lightbox').checked=true;
document.getElementById('caption').focus();}"
name="lightboxcaption" id="lightboxcaption" value="1" />
<label for="lightboxcaption"><__trans_section component="LightBox"><__trans phrase="Show Image Caption with LightBox"></__trans_section></label>
MTML3
$nodeset->innerHTML( $innerHTML );
$tmpl->insertBefore( $nodeset, $pointer_field );
$nodeset2->innerHTML( $innerHTML2 );
$tmpl->insertBefore( $nodeset2, $pointer_field );
$nodeset3->innerHTML( $innerHTML3 );
$tmpl->insertBefore( $nodeset3, $pointer_field );
}
sub _asset_insert_param {
my ( $cb, $app, $param, $tmpl ) = @_;
if ( $app->param( 'lightbox' ) ) {
my $lb_classname = $plugin->get_config_value( 'lb_classname' );
my $upload_html = $param->{ upload_html };
$upload_html =~ s/<a/<a rel="$lb_classname"/i;
if ( $app->param( 'lightbox_width' ) ) {
my $asset_id = $1 if ( $upload_html =~ /<form.*?mt:asset\-id="([0-9]{1,})".*?>/ );
$asset_id = $app->param( 'id' ) ? $app->param( 'id' ) : $asset_id;
if ( $asset_id ) {
require MT::Asset::Image;
my $asset = MT::Asset::Image->load( $asset_id );
my %param = ( Width => $app->param( 'lightbox_width' ) );
my ( $thumbnail, $w, $h ) = $asset->thumbnail_file( %param );
my $site_path = _site_path( $app->blog );
my $site_url = _site_url( $app->blog );
my $regex_path = quotemeta( $site_path );
$thumbnail =~ s/^$regex_path/$site_url/;
$upload_html =~ s/href=".*?"/href="$thumbnail"/i;
}
}
$param->{ upload_html } = $upload_html;
}
if ( $app->param( 'imagecaption' ) || ( $app->param( 'lightbox' ) && $app->param( 'lightboxcaption' ) ) ) {
my $caption = $app->param( 'caption' );
my $align = $app->param( 'align' );
my $upload_html = $param->{ upload_html };
my $width = $1 if ( $upload_html =~ m!<img.+width="([0-9]+)".*?>!i );
if ( $app->param( 'imagecaption' ) ) {
$upload_html =~ s!(<img.+?style=".*?)(?:margin:.+?;)??"(.*?>)!$1margin: 0 auto 8px;"$2!i;
$upload_html =~ s!^(.+)$!<div class="image-box box-$align" style="width:${width}px;">$1<span class="caption" style="display:block;">$caption</span></div>!i;
}
if ( $app->param( 'lightbox' ) && $app->param( 'lightboxcaption' ) ) {
$upload_html =~ s!<a!<a title="$caption"!i;
$upload_html =~ s!(<img.+?style=".*?)(?:margin:.+?;)??"(.*?>)!$1margin: 0 auto;"$2!i;
$upload_html =~ s!^(.+)$!<div class="image-box box-$align" style="width:${width}px;">$1</div>!i;
}
if ( $upload_html =~ m!<div class=".+?box-(?:left|right)!i ) {
$upload_html =~ s!^(.+)$!$1\n<br style="clear:both;">!i;
}
$param->{ upload_html } = $upload_html;
}
}
sub _site_path {
my $blog = shift;
my $site_path = $blog->archive_path;
$site_path = $blog->site_path unless $site_path;
if ( $site_path =~ /(.*)\/$/ ) {
$site_path = $1;
}
if ( $^O eq 'MSWin32' ) {
$site_path =~ s!/!\\!g;
if ( $site_path =~ /(.*)\\$/ ) {
$site_path = $1;
}
}
return $site_path;
}
sub _site_url {
my $blog = shift;
my $site_url = $blog->site_url;
if ( $site_url =~ /(.*)\/$/ ) {
$site_url = $1;
}
return $site_url;
}
1;
・「LightBox/L10N/ja.pm」
package LightBox::L10N::ja;
use strict;
use base 'LightBox::L10N';
use vars qw( %Lexicon );
our %Lexicon = (
'_PLUGIN_DESCRIPTION' => '画像のサムネイルリンクに rel="lightbox" を追加します。',
'Use LightBox' => 'LightBoxで表示する',
'Show Image Caption' => '画像キャプションを表示する',
'Image Caption' => '画像キャプション',
'Show Image Caption with LightBox' => 'LightBoxで画像キャプションを表示する',
);
1;
2.MTのアプリケーションディレクトリ(mt-configがあるディレクトリ)内にpluginsフォルダがあるので、そこに「Lightbox」フォルダごとアップロードします。
http://www.movabletype.jp/documentation/mt5/installation/
3.管理画面の「システムメ」ニューを開いて、「ツール」→「プラグイン」と移動し、一覧の「Lightbox 1.1」を有効化します。(有効になっていたらそのままにします。)
4.Lightboxをダウンロードして解凍します。(※Lightboxの機能を使用しない場合は、この手順から7の手順までをスキップして8の手順から実行してください。)
http://lokeshdhakar.com/projects/lightbox2/
5.「js/lightbox.js」をテキストエディタで開いて編集します。(51・52行目)
this.fileLoadingImage = './images/loading.gif';
this.fileCloseImage = './images/close.png';
※上記をWEBルートからの相対パスに変更します。
例えば画像のURLが「http://example.jp/website/images/loading.gif」なら「'/website/images/loading.gif'」のように指定します。
6.MTのウェブサイトのディレクトリ(※再構築でHTMLが生成されるディレクトリ)に次のファイル群をアップロードします。
js/jquery-1.7.2.min.js
js/lightbox.js
css/lightbox.css
images/close.png
images/loading.gif
images/next.png
images/prev.png
7.MTの管理画面で「デザイン」→「テンプレート」と移動し、テンプレートモジュールの一覧の「HTMLヘッダー」をクリックして編集し、cssとjsファイルを読み込む記述を追加します。
<link rel="stylesheet" href="/website/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/website/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/website/js/lightbox.js"></script>
※cssファイルはcssファイルを読み込む記述に続けて、jsファイルは他のjsファイルを読み込む記述に続けて追加するようにした方がいいです。
※ファイルのパスは、設置環境に合わせて変更してください。
※WEBサイトの方に表示しているブログ記事もLightboxで表示したい場合は、各ブログのテンプレートだけでなく、サイトのテンプレートも編集する必要があります。
8.MTの管理画面で「デザイン」→「テンプレート」と移動し、インデックステンプレートの一覧に表示されている「スタイルシート」をクリックしてCSSを編集します。
「@import url(～)」でcssファイルを読み込む記述があると思いますので、続けて以下を記述します。(読み込んでいるcssファイルの方に追記しても大丈夫です。)
.image-box {
border:1px solid #888;
background-color: #fff;
padding:12px 10px 12px;
border-radius:8px;
}
.box-left { float:left; margin:0 15px 20px 20px; }
.box-center { margin:0 auto 20px; }
.box-right { float:right; margin:0 20px 20px 15px; }
.caption { color:#888; text-align:left; line-height:1.2em; padding:6px 4px 0;}
※上記はキャプションを表示用のCSSですので、好みに合わせて適宜変更してください。
プラグイン使用の為の準備は完了です。
Lightboxプラグインとは干渉しませんので、Lightboxの機能を使用しない場合でも、キャプションの機能を使用する事は可能です。
改行brタグも有効なので、改行したい場合は手入力でbrタグを記述してください。
【追記】
回り込みを解除するスタイルが指定されたbrタグも一緒に挿入されますので、回り込ませるテキストはこのbrタグの前に記述します。※画像の位置で「なし」と「中央」を選択した場合は関係ありませんので、挿入されたbrタグを手動で削除してください・・・
画像の位置で「左」または「右」を選択した場合にだけフロートを解除するbrタグを追加するように変更したので、手動で削除しなくても大丈夫です。
※フォーマットを「リッチテキスト」にした状態では、一部思うようなHTMLが挿入されません。
普段「リッチテキスト」にしている場合でも、画像の挿入時だけは「なし」に変更して操作してください。
ありがとうございました！
1
1
ありがとうございます！！試してみます！！
2012/06/14 09:40:45ありがとうございます！！
2012/06/25 11:28:38