質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2224閲覧

jqueryの条件分岐をもう1つ追加するには?

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/06/18 08:14

編集2016/06/18 09:50

「shortcodes ultimate」というプラグインを使っています。

ショートコードでスポイラーを表示させる、という機能があるのですが、このスポイラーの色を2色にしたいと思っています。

記事の投稿画面でプラグイン指定のショートコードを入力すると、下記jsファイルが対応するようで、CSSで色をつけられるのですが、jsファイルのいじり方がサッパリわからず、困り果てております。

CSSを見る限り、スポイラーの色をつかさどっている文字列は
.su-spoiler
.my-custom-spoiler
.su-spoiler-title
.su-spoiler-icon
.su-spoiler
.su-spoiler-closed
.my-custom-spoiler
.su-spoiler-title
.su-spoiler-icon
という9つのようです。

どうすれば、下記のjsにもう一つの条件を追加し、CSSで2色を使い分けることができるでしょうか?

お詳しい方、いらっしゃいましたらご指導よろしくお願いいたします。m(__)m

javascript

1jQuery(document).ready(function ($) { 2 3 // Spoiler 4 $('body:not(.su-other-shortcodes-loaded)').on('click', '.su-spoiler-title', function (e) { 5 var $title = $(this), 6 $spoiler = $title.parent(), 7 bar = ($('#wpadminbar').length > 0) ? 28 : 0; 8 // Open/close spoiler 9 $spoiler.toggleClass('su-spoiler-closed'); 10 // Close other spoilers in accordion 11 $spoiler.parent('.su-accordion').children('.su-spoiler').not($spoiler).addClass('su-spoiler-closed'); 12 // Scroll in spoiler in accordion 13 if ($(window).scrollTop() > $title.offset().top) $(window).scrollTop($title.offset().top - $title.height() - bar); 14 e.preventDefault(); 15 }); 16 $('.su-spoiler-content').removeAttr('style'); 17 // Tabs 18 $('body:not(.su-other-shortcodes-loaded)').on('click', '.su-tabs-nav span', function (e) { 19 var $tab = $(this), 20 data = $tab.data(), 21 index = $tab.index(), 22 is_disabled = $tab.hasClass('su-tabs-disabled'), 23 $tabs = $tab.parent('.su-tabs-nav').children('span'), 24 $panes = $tab.parents('.su-tabs').find('.su-tabs-pane'), 25 $gmaps = $panes.eq(index).find('.su-gmap:not(.su-gmap-reloaded)'); 26 // Check tab is not disabled 27 if (is_disabled) return false; 28 // Hide all panes, show selected pane 29 $panes.hide().eq(index).show(); 30 // Disable all tabs, enable selected tab 31 $tabs.removeClass('su-tabs-current').eq(index).addClass('su-tabs-current'); 32 // Reload gmaps 33 if ($gmaps.length > 0) $gmaps.each(function () { 34 var $iframe = $(this).find('iframe:first'); 35 $(this).addClass('su-gmap-reloaded'); 36 $iframe.attr('src', $iframe.attr('src')); 37 }); 38 // Set height for vertical tabs 39 tabs_height(); 40 // Open specified url 41 if (data.url !== '') { 42 if (data.target === 'self') window.location = data.url; 43 else if (data.target === 'blank') window.open(data.url); 44 } 45 e.preventDefault(); 46 }); 47 48 // Activate tabs 49 $('.su-tabs').each(function () { 50 var active = parseInt($(this).data('active')) - 1; 51 $(this).children('.su-tabs-nav').children('span').eq(active).trigger('click'); 52 tabs_height(); 53 }); 54 55 // Activate anchor nav for tabs and spoilers 56 anchor_nav(); 57 58 // Lightbox 59 $('.su-lightbox').each(function () { 60 $(this).on('click', function (e) { 61 e.preventDefault(); 62 e.stopPropagation(); 63 if ($(this).parent().attr('id') === 'su-generator-preview') $(this).html(su_other_shortcodes.no_preview); 64 else { 65 var type = $(this).data('mfp-type'); 66 $(this).magnificPopup({ 67 type: type, 68 tClose: su_magnific_popup.close, 69 tLoading: su_magnific_popup.loading, 70 gallery: { 71 tPrev: su_magnific_popup.prev, 72 tNext: su_magnific_popup.next, 73 tCounter: su_magnific_popup.counter 74 }, 75 image: { 76 tError: su_magnific_popup.error 77 }, 78 ajax: { 79 tError: su_magnific_popup.error 80 } 81 }).magnificPopup('open'); 82 } 83 }); 84 }); 85 // Tables 86 $('.su-table tr:even').addClass('su-even'); 87 // Frame 88 $('.su-frame-align-center, .su-frame-align-none').each(function () { 89 var frame_width = $(this).find('img').width(); 90 $(this).css('width', frame_width + 12); 91 }); 92 // Tooltip 93 $('.su-tooltip').each(function () { 94 var $tt = $(this), 95 $content = $tt.find('.su-tooltip-content'), 96 is_advanced = $content.length > 0, 97 data = $tt.data(), 98 config = { 99 style: { 100 classes: data.classes 101 }, 102 position: { 103 my: data.my, 104 at: data.at, 105 viewport: $(window) 106 }, 107 content: { 108 title: '', 109 text: '' 110 } 111 }; 112 if (data.title !== '') config.content.title = data.title; 113 if (is_advanced) config.content.text = $content; 114 else config.content.text = $tt.attr('title'); 115 if (data.close === 'yes') config.content.button = true; 116 if (data.behavior === 'click') { 117 config.show = 'click'; 118 config.hide = 'click'; 119 $tt.on('click', function (e) { 120 e.preventDefault(); 121 e.stopPropagation(); 122 }); 123 $(window).on('scroll resize', function () { 124 $tt.qtip('reposition'); 125 }); 126 } else if (data.behavior === 'always') { 127 config.show = true; 128 config.hide = false; 129 $(window).on('scroll resize', function () { 130 $tt.qtip('reposition'); 131 }); 132 } else if (data.behavior === 'hover' && is_advanced) { 133 config.hide = { 134 fixed: true, 135 delay: 600 136 } 137 } 138 $tt.qtip(config); 139 }); 140 141 // Expand 142 $('.su-expand').each(function () { 143 var $this = $(this), 144 $content = $this.children('.su-expand-content'), 145 $more = $this.children('.su-expand-link-more'), 146 $less = $this.children('.su-expand-link-less'), 147 data = $this.data(), 148 col = 'su-expand-collapsed'; 149 150 $more.on('click', function (e) { 151 $content.css('max-height', 'none'); 152 $this.removeClass(col); 153 }); 154 $less.on('click', function (e) { 155 $content.css('max-height', data.height + 'px'); 156 $this.addClass(col); 157 }); 158 }); 159 160 function is_transition_supported() { 161 var thisBody = document.body || document.documentElement, 162 thisStyle = thisBody.style, 163 support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined; 164 165 return support; 166 } 167 168 // Animations is supported 169 if (is_transition_supported()) { 170 // Animate 171 $('.su-animate').each(function () { 172 $(this).one('inview', function (e) { 173 var $this = $(this), 174 data = $this.data(); 175 window.setTimeout(function () { 176 $this.addClass(data.animation); 177 $this.addClass('animated'); 178 $this.css('visibility', 'visible'); 179 }, data.delay * 1000); 180 }); 181 }); 182 } 183 // Animations isn't supported 184 else { 185 $('.su-animate').css('visibility', 'visible'); 186 } 187 188 function tabs_height() { 189 $('.su-tabs-vertical').each(function () { 190 var $tabs = $(this), 191 $nav = $tabs.children('.su-tabs-nav'), 192 $panes = $tabs.find('.su-tabs-pane'), 193 height = 0; 194 $panes.css('min-height', $nav.outerHeight(true)); 195 }); 196 } 197 198 function anchor_nav() { 199 // Check hash 200 if (document.location.hash === '') return; 201 // Go through tabs 202 $('.su-tabs-nav span[data-anchor]').each(function () { 203 if ('#' + $(this).data('anchor') === document.location.hash) { 204 var $tabs = $(this).parents('.su-tabs'), 205 bar = ($('#wpadminbar').length > 0) ? 28 : 0; 206 // Activate tab 207 $(this).trigger('click'); 208 // Scroll-in tabs container 209 window.setTimeout(function () { 210 $(window).scrollTop($tabs.offset().top - bar - 10); 211 }, 100); 212 } 213 }); 214 // Go through spoilers 215 $('.su-spoiler[data-anchor]').each(function () { 216 if ('#' + $(this).data('anchor') === document.location.hash) { 217 var $spoiler = $(this), 218 bar = ($('#wpadminbar').length > 0) ? 28 : 0; 219 // Activate tab 220 if ($spoiler.hasClass('su-spoiler-closed')) $spoiler.find('.su-spoiler-title:first').trigger('click'); 221 // Scroll-in tabs container 222 window.setTimeout(function () { 223 $(window).scrollTop($spoiler.offset().top - bar - 10); 224 }, 100); 225 } 226 }); 227 } 228 229 if ('onhashchange' in window) $(window).on('hashchange', anchor_nav); 230 231 $('body').addClass('su-other-shortcodes-loaded'); 232});

3つ追記させていただきます。m(__)m

①まず当該プラグインとスポイラーはこのようなものです。
http://www.singapore-startup.com/?p=6973#i-4
今回はこのスポイラーをいくつか作り、CSSを何種類か(最低2種類)加えることが目的になります。

②CSSを1種類加える方法として、プラグイン側の案内があります。

・記事にはこのショートコードを書いて、
[su_spoiler title="Spoiler title" class="my-custom-spoiler"] Spoiler content [/su_spoiler]

・CSSにこれを書くという案内です。

CSS

1 2 .su-spoiler.my-custom-spoiler {} 3 .su-spoiler.my-custom-spoiler .su-spoiler-title { background-color: #84ADEA } 4 .su-spoiler.my-custom-spoiler .su-spoiler-title .su-spoiler-icon, 5 .su-spoiler.su-spoiler-closed.my-custom-spoiler .su-spoiler-title .su-spoiler-icon { 6 left: 3px; 7 background-color: #fff; 8 } 9 .su-spoiler.my-custom-spoiler .su-spoiler-content { background-color: #C0D1EB }

③最後に目的のおさらいです。
このCSSのおかげで、プラグイン側の案内のようにスポイラーがカスタムできて青いスポイラーは作れるのですが、
http://www.fastpic.jp/images.php?file=0112654872.jpg
今回はスポイラーを何種類か(最低2種類)作りたいと考えております。
http://www.fastpic.jp/images.php?file=6840055401.jpg

以上です。どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/06/18 09:14

画像は質問文に追記されたほうが他の方にも見やすいのでお願いします。また、ショートコード部分とCSSも質問文に追記いただけませんか?よろしくお願いします。
退会済みユーザー

退会済みユーザー

2016/06/18 09:51

そうですね!ご指摘ありがとうございます。とりあえず追記しておきました。お手すきのおりに、ご検討いただければ幸いです。m(__)m
guest

回答1

0

ベストアンサー

jsを触らずとも下記の様に出来ると思います。ショートコード内のclassの指定を変え、それにあわせたCSSを記述すれば良いと思います。

[su_spoiler title="Spoiler title" class="my-custom-spoiler1"] Spoiler content [/su_spoiler] [su_spoiler title="Spoiler title" class="my-custom-spoiler2"] Spoiler content [/su_spoiler]

CSS

1/* my-custom-spoiler1 */ 2 .su-spoiler.my-custom-spoiler1 .su-spoiler-title { background-color: #84ADEA; } 3 .su-spoiler.my-custom-spoiler1 .su-spoiler-title .su-spoiler-icon, 4 .su-spoiler.su-spoiler-closed.my-custom-spoiler1 .su-spoiler-title .su-spoiler-icon { 5 left: 3px; 6 background-color: #fff; 7 } 8 .su-spoiler.my-custom-spoiler1 .su-spoiler-content { background-color: #C0D1EB; } 9 10/* my-custom-spoiler2 */ 11 .su-spoiler.my-custom-spoiler2 .su-spoiler-title { background-color: blue; } 12 .su-spoiler.my-custom-spoiler2 .su-spoiler-title .su-spoiler-icon, 13 .su-spoiler.su-spoiler-closed.my-custom-spoiler2 .su-spoiler-title .su-spoiler-icon { 14 left: 3px; 15 background-color: #f00; 16 } 17 .su-spoiler.my-custom-spoiler2 .su-spoiler-content { background-color: red; }

投稿2016/06/18 10:25

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/06/18 11:13

そこだけに2を付ければよかったんですね!! 9つ全部に2を付けたりして、「やっぱりJSいじらなきゃいけないのかぁ」とか考えていました。笑 どうもありがとうございます。おかげさまでやっと夕ご飯が食べられます。٩( ''ω'' )و
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問