mona > 記事の外部リンクについて @ 2016/4/19 2:10
初めまして。宜しくお願いいたします。 Nice-Tempo ( nice-tempo )さんのテーマを利用させてもらってます。こちらのテーマを使っていて、次のような現象がおきました。【記事に外部リンクを設置すると、画像のポップアップのような感じになって外部リンクされない】 ※拡大縮小の虫眼鏡風アイコンが出ます同じような現象の方いらっしゃいますでしょうか？また、外部リンクになるよう解決されましたでしょうか？分かりにくくてすみません。宜しくお願いいたします

mona > 記事の外部リンクについて @ 2016/4/19 2:10

初めまして。
宜しくお願いいたします。

Nice-Tempo ( nice-tempo )さんのテーマを利用させてもらってます。
こちらのテーマを使っていて、
次のような現象がおきました。

【記事に外部リンクを設置すると、画像のポップアップのような感じになって外部リンクされない】
※拡大縮小の虫眼鏡風アイコンが出ます

同じような現象の方いらっしゃいますでしょうか？
また、
外部リンクになるよう解決されましたでしょうか？

分かりにくくてすみません。
宜しくお願いいたします

Masamichi > Re: 記事の外部リンクについて @ 2016/4/19 8:20
おはようございます。恐らくこちらではないでしょうか。ブログでのアンカータグが正しく動作しないテーマは違いますが、同じ【Magnific Popup】とう言う【Javascript】を使用しております。上記のリンク先の解決方法で、一先ずの解決は当方のテスト環境で出来ました。 ※追記ただ、 `</div><div>` を、記事の先頭に付けると、記事の内容に CSS が効かない状態になり、本来のデザインが崩れてしまうかと思います。そこで、解決策として２つ提示いたします。【リンクを正しく機能させ画像のポップアップ処理も実装する方法】 ◆方法１（任意の画像のみポップアップ処理をさせたい場合） /theme/nice-tempo/Layouts/default.php default.php 内にある＊抜粋 `<script src="<?php $this->BcBaser->themeUrl() ?>js/jquery.magnific-popup.min.js"></script> <script> $(function() { //magnific-popup $(".popup, .eyeCatch a, .post-body a, #post-detail a").magnificPopup({ type: 'image', mainClass: 'mfp-with-zoom', removalDelay: 160, preloader: false, fixedContentPos: false, gallery:{enabled:true} }); }); </script>` 上記の赤色の部分が記事内のリンクに不具合を起こしている箇所です。そこで、赤色の部分を削除して下記の様にしてみました。 `<script src="<?php $this->BcBaser->themeUrl() ?>js/jquery.magnific-popup.min.js"></script> <script> $(function() { //magnific-popup $(".popup, .eyeCatch a").magnificPopup({ type: 'image', mainClass: 'mfp-with-zoom', removalDelay: 160, preloader: false, fixedContentPos: false, gallery:{enabled:true} }); }); </script>` 記事内のアンカータグ（a）には処理をさせない様にします。この様にすると、こちらの記述は書く必要がなく正しいリンクとなります。 `</div><div>` しかし、赤色の部分を削除することで、本来の表示機能は失われてしまい、記事内のアイキャッチ以外の画像はポップアップ処理にはなりません。この仕様で問題なければ、これで良いかと思いますが、記事内の画像もポップアップ処理をさせたい場合は、一手間加える必要があります。記事内のアップロードした（ポップアップさせたい）画像にクラス名【 class="popup"】を追記します。記事作成画面のソースをクリックした状態 `<p>詳細が入ります。詳細が入ります。詳細が入ります。</p> <p><a href="/files/uploads/test.jpg" rel="colorbox" title="テスト画像" class="popup"><img align="" alt="テスト画像" src="/files/uploads/test.jpg" /></a></p> <p><a href="http://basercms.net/" target="_blank">リンクテスト</a></p>` これで、こちらの画像はポップアップ処理されます。毎回、各画像のaタグに class="popup" を追記する必要があります。 ◆方法２（全ての画像にポップアップ処理をさせたい場合） /theme/nice-tempo/Layouts/default.php 同上の default.php 内にあるスクリプトを書き換えます。幸いアップローダーで画像をアップすると、画像に rel属性が【rel="colorbox"】自動で付与される仕組みになっています。この仕組みを利用して下記の様に書き換えます。 <script src="<?php $this->BcBaser->themeUrl() ?>js/jquery.magnific-popup.min.js"></script> <script> $(function() { //magnific-popup $(".popup, .eyeCatch a").magnificPopup({ type: 'image', mainClass: 'mfp-with-zoom', removalDelay: 160, preloader: false, fixedContentPos: false, gallery:{enabled:true} }); if($("a[rel='colorbox']").magnificPopup) $("a[rel='colorbox']").magnificPopup({ type: 'image', mainClass: 'mfp-with-zoom', removalDelay: 160, preloader: false, fixedContentPos: false, gallery:{enabled:true} }); }); </script> 赤い部分を追記しました。これで、全ての画像がポップアップ処理されます。勿論、 `</div><div>` を記事に追記する必要もありません。２の方法の場合、アップローダーでアップした全ての画像にポップアップ処理がされますので、ポップアップをさせたくない画像の場合は、rel="colorbox" を削除するか、アンカータグを全て削除すればOKです。 `<p><a href="/files/uploads/test2.jpg" rel="colorbox" title="テスト画像２"><img align="" alt="テスト画像２" src="/files/uploads/test2.jpg" /></a></p> 又は、 <p><img align="" alt="テスト画像２" src="/files/uploads/test2.jpg" /></p>` 赤い部分を削除する。又は、アンカータグを丸ごと削除する。以上になります。デフォルトファイルを触るので、バックアップを取ってからお試し下さい。参考になれば幸いです。 ■ BaserCMS: 3.0.15～4.1.5 ■ サーバー名: mixhost・x-server・さくら・ロリポップ ■ スマートURLの利用: [共に] ■ 設置フォルダ：　[共に］ ■ データーベース MySQL5.6 ■ PHPスキル［C］

Masamichi > Re: 記事の外部リンクについて @ 2016/4/19 8:20

おはようございます。

恐らくこちらではないでしょうか。
ブログでのアンカータグが正しく動作しない

テーマは違いますが、同じ【Magnific Popup】とう言う【Javascript】を使用しております。

上記のリンク先の解決方法で、一先ずの解決は当方のテスト環境で出来ました。

※追記

ただ、

</div><div>

を、記事の先頭に付けると、記事の内容に CSS が効かない状態になり、
本来のデザインが崩れてしまうかと思います。

そこで、解決策として２つ提示いたします。

【リンクを正しく機能させ画像のポップアップ処理も実装する方法】

◆方法１（任意の画像のみポップアップ処理をさせたい場合）

/theme/nice-tempo/Layouts/default.php

default.php 内にある＊抜粋

<script src="<?php $this->BcBaser->themeUrl() ?>js/jquery.magnific-popup.min.js"></script>
<script>
$(function() {
//magnific-popup
$(".popup, .eyeCatch a, .post-body a, #post-detail a").magnificPopup({
type: 'image',
mainClass: 'mfp-with-zoom',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
gallery:{enabled:true}
});
});
</script>

上記の赤色の部分が記事内のリンクに不具合を起こしている箇所です。

そこで、赤色の部分を削除して下記の様にしてみました。

<script src="<?php $this->BcBaser->themeUrl() ?>js/jquery.magnific-popup.min.js"></script>
<script>
$(function() {
//magnific-popup
$(".popup, .eyeCatch a").magnificPopup({
type: 'image',
mainClass: 'mfp-with-zoom',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
gallery:{enabled:true}
});
});
</script>

記事内のアンカータグ（a）には処理をさせない様にします。

この様にすると、こちらの記述は書く必要がなく正しいリンクとなります。

</div><div>

しかし、赤色の部分を削除することで、本来の表示機能は失われてしまい、
記事内のアイキャッチ以外の画像はポップアップ処理にはなりません。

この仕様で問題なければ、これで良いかと思いますが、
記事内の画像もポップアップ処理をさせたい場合は、一手間加える必要があります。

記事内のアップロードした（ポップアップさせたい）画像にクラス名【 class="popup"】を追記します。

記事作成画面のソースをクリックした状態

<p>詳細が入ります。詳細が入ります。詳細が入ります。</p>

<p><a href="/files/uploads/test.jpg" rel="colorbox" title="テスト画像" class="popup"><img align="" alt="テスト画像" src="/files/uploads/test.jpg" /></a></p>

<p><a href="http://basercms.net/" target="_blank">リンクテスト</a></p>

これで、こちらの画像はポップアップ処理されます。

毎回、各画像のaタグに class="popup" を追記する必要があります。

◆方法２（全ての画像にポップアップ処理をさせたい場合）

/theme/nice-tempo/Layouts/default.php

同上の default.php 内にあるスクリプトを書き換えます。

幸いアップローダーで画像をアップすると、
画像に rel属性が【rel="colorbox"】自動で付与される仕組みになっています。

この仕組みを利用して下記の様に書き換えます。

<script src="<?php $this->BcBaser->themeUrl() ?>js/jquery.magnific-popup.min.js"></script>
<script>
$(function() {
//magnific-popup
$(".popup, .eyeCatch a").magnificPopup({
type: 'image',
mainClass: 'mfp-with-zoom',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
gallery:{enabled:true}
});
if($("a[rel='colorbox']").magnificPopup) $("a[rel='colorbox']").magnificPopup({
type: 'image',
mainClass: 'mfp-with-zoom',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
gallery:{enabled:true}
});
});
</script>

赤い部分を追記しました。

これで、全ての画像がポップアップ処理されます。

勿論、

</div><div>

を記事に追記する必要もありません。

２の方法の場合、アップローダーでアップした全ての画像にポップアップ処理がされますので、
ポップアップをさせたくない画像の場合は、rel="colorbox" を削除するか、アンカータグを全て削除すればOKです。

<p><a href="/files/uploads/test2.jpg" rel="colorbox" title="テスト画像２"><img align="" alt="テスト画像２" src="/files/uploads/test2.jpg" /></a></p>

又は、
<p><img align="" alt="テスト画像２" src="/files/uploads/test2.jpg" /></p>

赤い部分を削除する。又は、アンカータグを丸ごと削除する。

以上になります。

デフォルトファイルを触るので、バックアップを取ってからお試し下さい。
参考になれば幸いです。

■ BaserCMS: 3.0.15～4.1.5
■ サーバー名: mixhost・x-server・さくら・ロリポップ
■ スマートURLの利用: [共に]
■ 設置フォルダ：　[共に］
■ データーベース MySQL5.6
■ PHPスキル［C］

mona > Re: 記事の外部リンクについて @ 2016/4/19 11:59
Masamichi様ありがとうございます！ <a href="...">---</a> の前に </div><div> を入れて </div><div><a href="...">---</a> 解決いたしました！どうもありがとうございます。ものすごく助かりました。ちゃんと過去ログ探しきれてなかったようで申し訳ありません。テンションあがったので散歩いってきます

Masamichi > Re: 記事の外部リンクについて @ 2016/4/19 13:04
mona様こんにちは。 `<a href="...">---</a> の前に </div><div> を入れて </div><div><a href="...">---</a> 解決いたしました！` 何よりでございますが、根本的な解決方法ではないので、デザインが崩れるかと思われます^^; 先の返信分に追記で解決方法を記載させて頂きましたので、そちらもご確認頂ければ、当方としても安心できます。宜しくお願いしますm(_ _)m ■ BaserCMS: 3.0.15～4.1.5 ■ サーバー名: mixhost・x-server・さくら・ロリポップ ■ スマートURLの利用: [共に] ■ 設置フォルダ：　[共に］ ■ データーベース MySQL5.6 ■ PHPスキル［C］

Masamichi > Re: 記事の外部リンクについて @ 2016/4/19 13:04

mona様

こんにちは。

<a href="...">---</a>
の前に
</div><div>
を入れて
</div><div><a href="...">---</a>
解決いたしました！

何よりでございますが、根本的な解決方法ではないので、デザインが崩れるかと思われます^^;

先の返信分に追記で解決方法を記載させて頂きましたので、
そちらもご確認頂ければ、当方としても安心できます。

宜しくお願いしますm(_ _)m

mona > Re: 記事の外部リンクについて @ 2016/4/19 15:55
Masamichi様ご丁寧にありがとうございます！早速教えて頂いたやり方でファイルを変更してみました！ばっちりでございました。色々と教えてくださり誠にありがとうございます。ものすごく助かりましたm(__)m

スレッド表示 | 新しいものから

前のトピック | 次のトピック | トップ

記事の外部リンクについて

キーワード検索