[過去ﾛｸﾞ] 【Google】Blogger.com part10 (989ﾚｽ)
上下前次1-新
抽出解除 ﾚｽ栞
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
ﾘﾛｰﾄﾞ規制です｡10分ほどで解除するので､他のﾌﾞﾗｳｻﾞへ避難してください｡
695(7): 691 2013/04/19(金)07:43 ID:kaNc8umm(1/7) AAS
ソースも見ず推測で答えるけど
<p class="mobile-photo">
<img width="320" src="..." />
</p>
っなってるの？
テンプレートのウィジェット展開して
imgタグ展開のとこ弄れない？
てか弄れない場合、俺なら
$('.mobile-photo').find(img).attr('width', 好きなサイズ幅);
で強制的にサイズ買えちゃうかな。
って元の画像が小さいサイズだから駄目かｗ
まぁそれでも
var bigImage = $('.mobile-photo').find('img').parent.attr('href'); // a elemnts
$('.mobile-photo').find('img').attr('src', bigImage);
$('.mobile-photo').find('img').attr('width', 好きなサイズ幅);
って感じにしてimg要素の画像自体をクリック後のでかい画像といれ変えちゃうかな。
699(1): 2013/04/19(金)18:47 ID:PnDxrFn4(1/3) AAS
>>695 >>696
ありがとうございます。
しかし自分のHTML知識ではよく分かりませんでした。
テンプレートに記述されているのかも分かりません。
少なくとも"mobile-photo"という記述は無かったです。
ちなみに画像をメール投稿すると、記事HTMLは次のようになります。
<div class="mobile-photo">
<a href="大きい画像のアドレス"><img alt="" border="0" id="BLOGGER_PHOTO_ID_0123456789" src="サムネイル画像のアドレス" /></a>
</div>
702(1): 695 2013/04/19(金)19:37 ID:kaNc8umm(3/7) AAS
>>699
一画像一画像この形式になってる？
複数画像をアップロードした場合でも
<div class="mobile-photo">
<a href="..."><img src="..." /></a>
</div>
<div class="mobile-photo">
<a href="..."><img src="..." /></a>
</div>
みたいな感じになるの？
Blogspotの機能的にどうしようもないみたいだし、手間が面倒なら
>>695で書いたようにjavascriptでやった方が楽じゃないかな。
アップロードする画像もめちゃくちゃでかいって訳でもないんでしょ？
手間かけずにやるにはjQueryが楽だし、GoogleがjQueryスクリプトをホスティングしてるので
それ利用して、以下のコードをテンプレートのHTMLの編集から<head>〜</head>の中にでも入れたらどうかね？
自分の環境じゃないんで適当に書いたので、テンプレート編集する際はバックアップを忘れないでね。
<!-- JQUERY読み込み -->
<script src="外部ﾘﾝｸ:www.google.com type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
google.load("jquery", "1.6");
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
(function(){
$(document).ready(function(){
var bigImageUrl = $('.mobile-photo a').attr('href'); // a要素のURL取得
$('.mobile-photo').find('img').attr('src', bigImageUrl); // a要素のURLと画像のURL入れ替え
$('.mobile-photo').find('img').attr('width', '640px'); // 仮に幅を640px固定にする場合
});
})();
//]]>
</script>
703(1): 695 2013/04/19(金)19:41 ID:kaNc8umm(4/7) AAS
おおう。
なんで が入るんだよ･･･。
使う際は を全部消しておいてくれ。
704(1): 695 2013/04/19(金)19:55 ID:kaNc8umm(5/7) AAS
あっ。間違えた。
var bigImageUrl = $('.mobile-photo a').attr('href'); // a要素のURL取得
$('.mobile-photo').find('img').attr('src', bigImageUrl); // a要素のURLと画像のURL入れ替え
$('.mobile-photo').find('img').attr('width', '640px');// 仮に幅を640px固定にする場合
じゃなくて、
$('.mobile-photo a').each(function(i){
var bigImageUrl = $(this).attr('href');
var imgElement = $(this).find('img');
imgElement.attr('src', bigImageUrl);
imgElement.attr('width', '640px');
});
じゃないと駄目かな。
<div class="mobile-photo">以下が何個あるかわからんし。
705(1): 695 2013/04/19(金)20:03 ID:kaNc8umm(6/7) AAS
>>701
モバイルテンプレートはデフォルトの物かそれか機能自体オフかな。
見積もり50万円位でBlogspotテンプレート制作してくれる会社でも
モバイルテンプレートは無効化してるとこが殆どな気がします。
モバイルテンプレートだと結局ブログ投稿しか見られないし、
静的なページとか実装やら閲覧するのが骨だし、どのみち昔はフルブラウザで
今はスマホがあるしで、PC向けページだけで事足りてるというのが現状みたいですよ。
712(1): 695 2013/04/19(金)22:26 ID:kaNc8umm(7/7) AAS
>>707
400px固定でやってみると自動でこんな感じになりますね。
画像ﾘﾝｸ
難しいも何もテンプレート編集のとこのHead要素内に以下を追加するだけですよ･･･。
<head>の次に以下のコード突っ込むだけ･･･。
<script src="外部ﾘﾝｸ:www.google.com type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
google.load("jquery", "1.6");
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
(function(){
$(document).ready(function(){
$('.mobile-photo a').each(function(i){
var bigImageUrl = $(this).attr('href');
var imgElement = $(this).find('img');
imgElement.attr('src', bigImageUrl);
imgElement.attr('width', '400px');
});
});
})();
//]]>
</script>
714(1): 695 2013/04/20(土)00:15 ID:tJyMvXhD(1) AAS
>>713
<div class="mobile-photo"><a href...><img.../></a></div>
になってる限り、すべてに適用されるはずです(因みに上のJPGはこちらで実行してみた物です)。
もちろん追加した部分を削除すれば元に戻ります。
やってることはリンク先の画像URLを表示のIMGタグに持ってきてから
IMGタグの幅を400px固定に指定してるだけです。
簡単に元に戻せるようにテンプレートのバックアップした後、試すだけ試してみたらどうでしょうか？
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.043s