はてなブログ上でJS, CSSコーディングする手順と一工夫！！

どうも。

前回に引き続き、はてなブログ上でコーディングする場合のやり方に触れつつ、テンプレ的にこれから私個人としても使いそうなデザインをメモっておきます。

---

おさらい

記事全体に共通のデザインを当てたい場合

自分のアカウント名＝＞記事名＝＞デザイン＝＞カスタマイズ(画面右側のレンチマーク)＝＞スタイルシート

を押すと出てくるボックスの中にCSSコードを書けばOK。

個別の記事にスタイルを当てるには？

簡単なのでいいなら...

上記画像の、タイトル直下にあるマークを使えばいいです。デザインを当てたい文字列を選択してマークをクリックすると勝手にデザインが当たります。h1とか見出しをつけたい、色を変えたいだけならこれで間に合います。

独自のスタイルを当てたいなら...

記事をWYSISYGモードにして、画面上部のHTMLをクリックすると記事そのもののHTMLを直接いじれます。ここでpreタグとかimgタグのサイズ調整とかもできますが、styleタグを利用すればCSSが、scriptタグを利用すればJSを記述できます。ただし、有料でないとjQueryが使えずJSはネイティブでないといけませんので、面倒ですw

作ってみる例

アコーディオンっぽく...

押すと開きます

ここが隠れる

デザインとか見せ方は超適当。アニメーション抜きです。これは色んなサイトで見るし、実際便利。長ったらしい文章やコードをそのまま載せていたらページ全体が物凄く縦長になって、見る側からしても編集する自分からしてもうんざりすることは間違いありません。なら、必要に応じて開閉できるように配慮すればいいです(当然、デフォルトは閉じたまま)。

この簡単な例のコードは下記の通りになります

HTML

<button id="button" type="button">押すと開きます</button>
<div id="accordion" class="off">ここが隠れる</div>

JS

<script type="text/javascript">
window.onload = function() {
  var $accordion = document.getElementById('accordion');
  var $button = document.getElementById('button');
  $button.addEventListener('click', function() {
    if ($accordion.getAttribute('class') === 'off') {
      $accordion.setAttribute('class', 'on');
    } else {
      $accordion.setAttribute('class', 'off');
    }
  });
};
</script>

CSS

<style type="text/css">
body {
  background: #6ef;
}
#button {
  margin: 0px;
}
#accordion {
  margin: 0px;
  background: #ef8;
}
.on {
  display: block;
}
.off {
  display: none;
}
</style>

他で共通で使えるコードは全体に適用するために一番上で解説している方法で試せばいいです。

今回はこの辺で。