個別記事のコメント記入欄を個別に大きくしたり出来るようにしてみた。
この機能を知ったきっかけは『[JS]フォームのtextareaをサイズ変更できるスクリプト -TextArea Resizer』で、導入に関しては『TextArea Resizer』を参考にした。（2017年5月4日参考サイトのリンク切れ確認）
動作のデモはこちら。
導入の参考先が英語なので簡単に日本語で紹介してみよう。
まず『jQuery.js』が読み込まれているという前提で話を進める。
<head></head>部分に以下を書き加える。
<script type="text/javascript" src="jquery.textarearesizer.compressed.js">
<script type="text/javascript">
/* jQuery textarea resizer plugin usage */
$(document).ready(function() {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
</script>
『jquery.textarearesizer.compressed.js』のアドレスは自分の環境に合わせてください。
フルパスで書いても良いです。
そして『style.css』に以下を追加する。
div.grippie {
background:#EEEEEE url(grippie.png) no-repeat scroll center 2px;
border-color:#DDDDDD;
border-style:solid;
border-width:0pt 1px 1px;
cursor:s-resize;
height:9px;
overflow:hidden;
}
.resizable-textarea textarea {
display:block;
margin-bottom:0pt;
width:95%;
height: 20%;
}
『grippie.png』のURLは自分の環境に合わせてください。
私はフルパスで書きました。
最後に『comments.php』のtextareaのタグに『class=”resizable”』を追加する。
これに関しては参考にしたページに書かれていないんだけど、
追加したらきちんと表示されるようになった。
まずは書かずに試してみて、ダメだったら追記する感じで。
コメント