タグ・デザイン掲示板

[

ブログの追記の折りたたみについて
by 春

2018-10-19 01:10
自分なりに検索はしたのですが類似の質問がありましたらお手数ですが誘導をお願いいたします。

テンプレサイト様のテンプレ
を使用してブログを作ろうと思っているのですが
追記部分の折りたたみが、テンプレサイト様のサンプルではうまく動いているのですがいざ導入してみるとうまく動きません。
サンプルではアコーディオン式にその場で追記が表示されるのですが、入れてみると追記画面に飛んでしまいます。
飛ぶことなくその場でアコーディオン式の追記が表示されるようにしたいです。
何か間違っているでしょうか？
ブログ機能、リアルタイム風、公式テンプレ使用しない
でHEADの記入、全体レイアウト、一覧レイアウトの記入をしています。
間違っているところを教えてください。
お手数ですがよろしくお願いします。

pc
[編集]

by 774

2018-10-19 02:51
テンプレサイトさんでもURL載せるのはどうかと思いますよ。正しい形以外何もわかりませんし。
【ルールとマナーより引用】
▼個人情報は絶対に書かない下さい!
氏名､住所や電話番号は勿論､ﾒｰﾙｱﾄﾞﾚｽやHPのURLについても投稿内容に含めないようにして下さい｡ﾒｰﾙｱﾄﾞﾚｽからは迷惑ﾒｰﾙ､URLからは荒らし行為をされる可能性があります｡

pc
[編集]

by 春

2018-10-19 19:18
大変失礼いたしました。ご無礼を働いたにも関わらず教えてくださり感謝いたします。該当のURLは削除いたしました。ご迷惑をお掛けしてしまい大変申し訳ありません。
HEADや記事レイアウトの中身をこちらに記載すればいいでしょうか？

pc
[編集]

by 春

2018-10-19 21:24
HEADと内容について、長くなりますので2つに投稿を分けて記載させていただきます。
お手数おかけいたしますがお手すきの方がいらっしゃいましたらご教授をよろしくお願いいたします。
質問内容についてもう一度、リードモアを押すと追記画面に飛ばずアコーディオン式に追記が現れ、もう一度ボタンを押すことでしまわれるといったテンプレートなのですが、追記画面に飛んでしまいます。その後もいろいろ試しまして、元のテンプレサイト様のサンプル画面のソースではリードモアがspan？というタグで括られていたのでやってみましたが、追記画面に飛ぶことはなく、ボタンを押したら枠が下に広がりはしたのですがそれだけで、追記の文章は現れませんでした。
何が原因でしょうか？

pc
[編集]

by 春

2018-10-19 21:46
HEADです。
使用できない文字列が含まれていますと出てしまうのでドットを中点に変えています。
<link href="https://maxcdn・bootstrapcdn・com/font-awesome/4・7・0/css/font-awesome・min・css" rel="stylesheet">
<script type="text/javascript" src="http://ajax・googleapis・com/ajax/libs/jquery/1・7・2/jquery・min・js"></script>
<style type="text/css">
/* Background pattern from subtlepatterns・com */

@import url('https://fonts・googleapis・com/css?family=Montserrat|Pinyon+Script');

* {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
}

・clearfix:after {
visibility: hidden;
display: block;
content: " ";
clear: both;
height: 0;
}

body {
font-family: "Montserrat", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-size: 12px;
line-height: 22px;
background: url(#背景素材#) #FFF;
background-size: 412px;
color: #191970;
word-break: break-all;
border: 7px solid #ECE0D4;
}

html:before,
html:after,
body:before,
body:after {
content: "";
background: #ECE0D4;
position: fixed;
display: block;
z-index: 999;
}

html:before{
height: 5px;
left: 0;
right: 0;
top: 0;
}

html:after{
width: 5px;
top: 0;
right: 0;
bottom: 0;
}

body:before{
height: 5px;
right: 0;
bottom: 0;
left: 0;
}

body:after{
width: 5px;
top: 0;
bottom: 0;
left: 0;
}

p {
letter-spacing: 1px;
margin-bottom: 20px;
}

a {
text-decoration: none;
color: #AFAFAF;
border-bottom: 1px solid #DFDFDF;
}

h1 {
text-transform: uppercase;
text-align: center;
margin: 50px auto;
letter-spacing: 4px;
background: url(#アイコン素材#) no-repeat center top;
background-size: 64px;
padding-top: 64px;
}

article {
max-width: 400px;
width: 80%;
margin: 0 auto;
}

section {
position: relative;
padding: 30px;
margin-bottom: 50px;
background: rgba(255,255,255,0・8);
}

section::before,
section::after {
position: absolute;
z-index: 1;
content: '';
width: 70%;
height: 70%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
opacity: ・4;
}

section::before {
top: 0;
right: 0;
border-top: 3px double #DFDFDF;
border-right: 3px double #DFDFDF;
}

section::after {
bottom: 0;
left: 0;
border-bottom: 3px double #DFDFDF;
border-left: 3px double #DFDFDF;
}

section h2,
section h3,
section p {
position: relative;
z-index: 10;
}

section h2 {
letter-spacing: 0;
font-family: 'Pinyon Script', cursive;
font-size: 17px;
text-align: right;
border-bottom: 1px solid #EFEFEF;
margin-bottom: 10px;
}

section h3 {
margin-top: 30px;
text-transform: uppercase;
letter-spacing: 4px;
color: #AFAFAF;
text-align: center;
}

section h3::before,
section h3::after {
content: '-';
}

section p・more {
margin: 20px 0 0;
text-align: center;
}

section p・more span,
section p・more a {
padding: 3px 10px;
transition: ・4s;
cursor: pointer;
background: #FFF;
border: 1px solid #5c5c99;
color: #5c5c99;
}

section p・more span:hover,
section p・more a:hover {
background: #5c5c99;
border: 1px solid;
color: #FFF;
}

section p・moreBox {
margin-top: 20px;
display: none;
}

nav {
margin-bottom: 30px;
}

nav ul li {
list-style-type: none;
display: inline-block;
}

nav ul li・next {
float: left;
}

nav ul li・prev {
float: right;
}

nav ul li a {
border: none;
background: #5c5c99;
border: 1px solid;
color: #FFF;
padding: 2px 4px 2px 7px;
letter-spacing: 5px;
transition: ・4s;
}

nav ul li a:hover {
background: #FFF;
border: 1px solid #5c5c99;
color: #5c5c99;
}
</style>
<script type="text/javascript">
$(function() {
$('・more a')・replaceWith(function() {
$(this)・replaceWith("<span>"+$(this)・text()+"</span>")
});

$('・more')・click(function(){
$(this)・next()・slideToggle();
});
});
</script>

pc
[編集]

by 春

2018-10-19 22:02
HTMLです


<header>
<h1>Astronomy</h1>
</header>
<article>
#blog#
</article>


<section>
<h2>#m1#.#d1#</h2>
<p>#text#</p>
<p class="more">#ext_READ MORE#</p>
<p class="moreBox">#text2#</p>
</section>


<nav class="clearfix">
<ul>
＃prev_<li class="next">NEXT</li>_＃＃next_<li class="prev">PREV</li>_＃
</ul>
</nav>

pc
[編集]

by 匿名

2018-10-20 15:47
書かれているそのままをコピペでちゃんと動きましたよ。
ホムペ設定→その他設定→改行を<br>に変換する　にしていませんか？
JavaScriptを使うならしない設定の方がいいと思いますよ。

pc
[編集]

by 春

2018-10-20 17:50
お返事ありがとうございます。
改行変換をしないにしたら動きました…。お手数おかけいたしました。
勉強になりました。詳しくご返答いただきありがとうございました。

pc
[編集]

[