■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。

続きを読むの表示とリンク先

monaka > 続きを読むの表示とリンク先 @ 2013/12/13 10:28
1.続きを読むの表示
デフォルトでは、》続きを読むをクリックすると、リンク先は本文の位置から開始します。
これをトップから表示させることはできるのでしょうか?
(リンク先位置の解除をしたい)


2.続きを読むのリンク先
》続きを読むのテキストを画像にする場合どのようにすれば良いのでしょうか。
テキスト自体の編集はできたのですが、画像にするやり方が分からなくて…。
可能であれば、オンマウスで画像が切り替わるようにしたいです。


(baser/plugins/blog/views/helpers/blog.php から)
=====================================================

function getPostContent($post,$moreText = true, $moreLink = false, $cut = false) {

if($moreLink === true) {
$moreLink = '≫ 続きを読む';
}
$out = '
'.$post['BlogPost']['content'].'
';
if($moreText && $post['BlogPost']['detail']) {
$out .= '
'.$post['BlogPost']['detail'].'
';
}
if($cut) {
$out = mb_substr(strip_tags($out), 0, $cut, 'UTF-8');
}
if($moreLink && trim($post['BlogPost']['detail']) && trim($post['BlogPost']['detail']) != "
") {
$out .= '

'.$this->Html->link($moreLink, array('admin'=>false,'plugin'=>'', 'controller'=>$this->blogContent['name'],'action'=>'archives', $post['BlogPost']['no'],'#'=>'post-detail'), null,null,false).'

';
}
return $out;

}

=====================================================



もしご存知でしたら教えていただけますでしょうか。
よろしくお願い致します。


■ BaserCMSのバージョン:2.1.2
■ レンタルサーバー名:さくら
■ スマートURLの利用: [OFF]
■ 設置フォルダ: [サブフォルダ]
■ 利用しているデータベース: [MySQL]
■ PHPスキル(自己評価): [全くわからない]
goichi > Re: 続きを読むの表示とリンク先 @ 2013/12/15 17:54
こんにちは。
引用:
これをトップから表示させることはできるのでしょうか?
(リンク先位置の解除をしたい)

2通りの方法があると思います。リンク先である個別の記事ページ内に「post-detail」というidが付けられたDIVがあると思います。デフォルトでは、この「post-detail」を目印にページを遷移させるようになっていますので、このid名を変更してしまえば、ページトップからの表示にできます(お使いのテーマのテンプレートを編集してください。)。
2つめの方法は掲示していただいているファイル(baser/plugins/blog/views/helpers/blog.php)を変更して、URLに含まれる「#post-detail」を消してしまう方法です。具体的には以下の部分を変更します。

変更前(227行目付近でしょうか)
$out .= '
'.$this->Html->link($moreLink, array('admin'=>false,'plugin'=>'', 'controller'=>$this->blogContent['name'],'action'=>'archives', $post['BlogPost']['no'],'#'=>'post-detail'), null,null,false).'
';
}


$out .= '
'.$this->Html->link($moreLink, array('admin'=>false,'plugin'=>'', 'controller'=>$this->blogContent['name'],'action'=>'archives', $post['BlogPost']['no']), null,null,false).'
';
}


なお、baserフォルダにあるファイルはappフォルダの同階層にコピーすると、そちらが優先して読み込まれますので、コピーしてからapp側を編集すると、コア部分に手を付けずにすむと思います。


引用:
オンマウスで画像が切り替わるようにしたいです。

これはCSSで処置をすべきだと思いますが、まずは画像リンクにする必要がありますので、そのための一案ですが、ご提案しておきます。
先ほど、「#post-detail」を削除する際に編集した箇所が、ご存知の通りリンクを生成する部分です。こまかい事はリファレンスをご覧頂きたいのですが、「$moreLink」と書いてある所がリンクの文字列を出力している部分です(正確には$moreLinkという変数に入った文字列を表示している)。ということで、ここを画像を表示するIMGタグに書き換えれば良いのです。画像フォルダへのbaserCMSのルーティングや、こういう関数にHTMLを記述した際の自動エスケープの問題を考えると、実際には以下の様な感じの書き方になると思います。(すみません、試してないんで、上手く行ったか教えてもらえると、他の方の参考になると思います。m(__)m)
$linkDetailImg = $html->image("ファイル名",array("alt"=>"alt属性値", "class"=>"クラス名"));
$out .= '
'.$this->Html->link($linkDetailImg , array('admin'=>false,'plugin'=>'', 'controller'=>$this->blogContent['name'],'action'=>'archives', $post['BlogPost']['no']), null,null,false).'
';

ここでは画像のクラス名を付けておけば、CSSでオンマウスで画像を変化させる時も便利です(それ自体のやり方は「CSS オンマウス 画像変更」で検索してみてください)。

以上になります。ちょっと急いで書いたので、言葉が足りていない箇所があるかもしれませんが、まずは取り急ぎ投稿しておきます。
monaka > Re: 続きを読むの表示とリンク先 @ 2013/12/16 13:35
こんにちは、ご回答いただきありがとうございます!

1つめの#post-detailを消してしまう方法は、phpを書き換える方法で無事解決致しました。
appフォルダの同階層を見つけることができなかったので、baserフォルダの方で上書きを行いました。
ありがとうございました!

もうひとつのリンクを画像にする方法は、書き換えを試してみたのですが、
文字化けが起きたり、画面が真っ白になったりと、まだうまくいっていません。
こちらでももう少し試してみたいと思います。
何かもう少し詳しいことがございましたら、よろしくお願い致します。。。
goichi > Re: 続きを読むの表示とリンク先 @ 2013/12/16 22:09
どうもです。よく考えたらオンマウスで画像を入れ替えるのですから、imgタグで画像を出力する必要ないかもしれません。CSSで調整できます
例えば前出のAタグを出力する部分で、array('class'=>'sample')という風にすると、出力されるAタグにクラス「sample」というのが付くと思います。
$out .= '
'.$this->Html->link($moreLink, array('admin'=>false,'plugin'=>'', 'controller'=>$this->blogContent['name'],'action'=>'archives', $post['BlogPost']['no']), array('class'=>'sample'),null,false).'
';
}

このクラスに対してオンマウスの時の動作(:hover)をつけてやれば完成です。CSSに関する詳細はGoogleなどで検索してみてください。出てくると思います。

monaka > Re: 続きを読むの表示とリンク先 @ 2013/12/17 10:15
こんにちわ!ご返信ありがとうございます!!大変助かりました。

内容の通りにクラス名を指定することで画像をオンマウスで切り替えることができました。
ありがとうございました。

今回使用したCSSを記載しておきますので、他の方にもお役に立てればと思います。

a.クラス名:link{
background-image:url(画像のURL);
width:表示画像サイズ;
height:表示画像サイズ;
display: block;
margin-left: auto;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

a.クラス名:hover{
background-position:left bottom;
}
ログイン
ユーザー名:
パスワード:


  新規登録 / パスワード紛失

検索

facebook
フォーラムで悩みが解決した場合など、よかったら「いいね!」をポチっとクリックしてください!質問の回答者や開発者の励みになります

フォーラムガイド


関連リンク

オンライン状況
25 人のユーザが現在オンラインです。 (25 人のユーザが フォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 25