メッセージボードって活用の仕方によっては凄く便利なエリアですよね。
でも、メッセージボードのエリアって少し狭いと思ったことはありませんか？
そんな方の為に、今回はメッセージボードを移動して広く表示してみようと思います。
なお、アメデコでは「カスタム可能」な中にある「CSS編集用デザイン」を元に
記事を書かせて頂いておりますので、そちらをご了承頂いた上でご覧ください。
※記事の表示サイズの関係上、一部実際のサイズとは異なる場合がございます。
今回はjQueryを使うことになりますので、以前紹介させて頂きました
「jQueryでフッターを作ってみよう」のページを一通り目を通してください。
フリープラグインに追加する内容
<script type="text/javascript">
$(function(){
$("article:has(.skinMessageBoard)").prependTo(".skinContentsArea");
});
</script>
こちらをフリープラグインへ追加してください。
このプラグインの内容を追加する事により本来メッセージボードがある位置から
コンテンツの上に移動して表示され広く利用する事が出来ます。
※ただ、注意点があります。
F5などでページを更新して見ていただくとはっきりと分かると思うのですが
本来ある位置からjQueryによってメッセージボードを移動させているので、
一瞬表示が遅れて移動していきます。
また、メッセージボードを画像でコンテンツの幅980pxにあわせてカスタマイズした場合
移動する前の表示が一瞬おかしく表示されると思います。
こちらを予めご理解した上で使ってみてください。
上記プラグインの追加と、メッセージボードへの簡単なCSSを追加すると
↓この様な感じになっているかと思います。
こちらの読み込み方法に関して「こうすれば表示が遅れずに綺麗に表示されるよ」
と言うコメントなど御座いましたら、是非お教えいただけますと幸いです。
最後まで記事を読んでくれてありがとうございました！