北京棒球小僧トップページへ矢印:赤(右3) カープキャップ1Blog technique 矢印:赤(右3)カープユニフォーム1コンテンツの改造方法

2005年07月09日

カープユニフォーム1 コンテンツの改造方法

BLOG ONE POINTアドバイス第15弾!!
今回は記事コンテンツの改造についての説明です。
興味のある方は是非呼んでください。
『続きを読む』を押すと今回の改造が分かります。

気が付きましたでしょうか?
要は『続きを読む』をクリックする度にページを読み込むぐらいであれば
最初っから見えない様に隠して置くと言うちょっとした小技です。
特に『続きを読む』が多い方には重宝されるかと。
HTMLソースがいっぱい出てきますが難しく考えないでやってみてください。
意外と簡単且つすぐに出来てしまいます。

まず、『管理画面』『デザイン』『コンテンツ』のコンテンツ一覧から
『記事』選んでクリックしてください。
そして『コンテンツHTML編集』をクリック!!
今回はそのまま< >コピーされても使用可能です。
ちょっくら勉強しましたわーい(嬉しい顔)
前回までも分も時間がある時に修正しときます。

HTML編集のフィールド内で最初の方にある
下記のソースを見つけてください。

<% content.header -%>
<!-- Content -->


この下に下記の文を追加してください。

<script type="text/javascript">
function dd(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
</script>


HTMLの分かる方なら、HTMLヘッダ部分に直接記述してもいいと思います。
次に、同じ入力フィールド内で真ん中あたりの
「絶不調」とか書かれている部分の少し上にある

<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %></div>


という一文を探します。
ひらめきよく似た文が真上にあるので、間違わずに「article.first_body」のほうを選んでください。
Ctrl+Fなどで検索するのが一番確実かと思います。
この一文を削除し、以下の文と置き換えます

<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %>
<br /><% article.body | bodyfilter(article_info,blog) %>
<% if:article.body_more %>
<div class="more-href"><a href="javascript:void(0)" onclick="dd('more<% article.id %>')">
<script language="JavaScript" type="text/javascript">
document.write('<% article.body_continue_text %>');
</script>
</a></div>
<noscript><div class="more-href"><a href="<% article.page_url %>"><% article.body_continue_text %></a></div></noscript>
<div class="more_body" id="more<% article.id %>" style="display:none">
<% article.body_more | bodyfilter(article_info,blog) %><div class="more-href"><a href="javascript:void(0)" onclick="dd('more<% article.id %>')">閉じる</a></div></div>
<% /if -%></div>


あとは「保存」を押したあと再構築してください。
基本的に、ここまでで記事の開閉はできると思います。

JAVAScriptが使用できなくても、初期状態と同じ記事ページに飛ぶ仕様になっています。


余談ですがここからは個人の好みの問題だと思いますが、この方法だと「続きを読む」と本文の間の改行が全て取り払われてしまうようです。
「続きを読む」と本文の間にある程度の隙間を空けたい方は、
上記HTML中に直接<br />タグ(改行タグ)を挟むか、
以下のようにスタイルシートの方に設定すればOKです。

=スタイルシート追加の場合=

<style>
.more-href{margin:10px 0px;}
</style>



今回の改造の「コンテンツHTML編集」で、一番最初に付け足したJAVAScriptの直後くらいに付け足せばいけると思います。
また、以下のようにすれば「続きを読む」をボタンのように目立たせることが可能です。
お好みでいろいろ変えてみてください。

=コンテンツHTML編集に追加の場合=

<style>
.more-href{margin:20px 0px;
width:100%;text-align:center;
background:silver;color:black;
border:gray 2px solid;}
</style>


今回は作業自体はただ、文章を探し出し削除・コピー・ペーストと言う順で出来ます。
もし何処だか分からない場合は根気で探してください。
これで、『続きを読む』が多い方にも重宝されるのではないかと思ってます。
どうしても分からない場合は言ってもらえれば
そこのソースを完璧にコピーして渡してあげます!!
その時は連絡ください。
posted by むさC16 at 20:15 | Comment(0) | TrackBack(0) | カープキャップ1Blog technique 上へジャンプ
この記事へのコメント
上へジャンプ
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

上へジャンプ
さくらインターネット株式会社 株式会社ぐるなび 株式会社オートウェイ 損保ジャパンの海外保険 オクトパストラベル・ジャパン
中国醸造株式会社 有限会社BBシステム 日本シグマックス株式会社 日本シグマックス株式会社 株式会社コーエイプランニング OTAIRECORD株式会社