dreamark

if (~navigator.userAgent.indexOf('Mac OS X')) {
  document.write('<style type="text/css">html, body { font-family: \x27Helvetica\x27, \x27Arial\x27, \x27ヒラギノ角ゴ Pro W3\x27, \x27Hiragino Kaku Gothic Pro\x27, sans-serif; } </style>');
} else {
  document.write('<style type="text/css">html, body { font-family: \x27Helvetica\x27, \x27Arial\x27, \x27メイリオ\x27, \x27Meiryo\x27, \x27MS PGothic\x27, sans-serif; } </style>');
}

dreamark

<div class="point"><p>ポイント欄を使いたい時はここに文章を入れる</p></div>

<div class="column"><p>コラム欄を使いたい時はここに文章を入れる<p/></div>

<div class="attention"><p>アテンション欄を使いたい時はここに文章を入れる<p/></div>

dreamark

<!-- 自分用-->
<div class="balloon">
  <div class="balloon-icon-left"></div>
    <div class="balloon-board-left">
      <div class="balloon-serif-left">自分名前<br> ここに文章を入れる。</div>
    </div>
  </div>
  
<!-- 相手用-->
<div class="balloon">

dreamark

/* 自分用CSS */
.balloon-icon-left {
  width: 100px;
  height: 100px;
  float:left;
  background: url("ここに画像のURLを記入する") no-repeat;
  background-position:center center;
  -moz-background-size:cover;
  background-size:cover;
  border-radius: 50px;

dreamark

<div class="navi">
  <ul>
    <li><a href="リンクURL">表示名</a></li>
    <li>
      <a href="リンクURL">表示名</a>
    </li>
    <li>
      <a href="リンクURL">表示名</a>
    </li>
    <li>

dreamark

<nav id="recomend">
  <div class="navmenu">
    <span class="navmenuInner">
    <span class="image"><a href="リンク先URL"><img src="画像URL"></a><br></span>
    <span class="date">日付けを記入</span><br>
    <span class="title"><a href="">タイトルや紹介文</a></span>
    </span>

    <span class="navmenuInner">
      <span class="image"><a href="リンク先URL"><img src="画像URL"></a><br></span>

dreamark

<div id="foot">
  <div class="footer-area">
    <div class="hatena-module-title">
      <span class="foot-title">タイトル</span>
    </div>
      <span class="foot-body">本文</span>
  </div><!-- endfooter-area -->

  <div class="footer-area">
    <div class="hatena-module-title">

dreamark

/* 目次 */
.table-of-contents{
  margin:24px 0;
  width: 70%;
  font-size: 0.9em;
  background: #e5e5e5;
  border: 1px solid #ccc;
  padding: 2em;
  counter-reset: toc;
  list-style-type: none;

dreamark

/* 目次 */
.table-of-contents{
  margin:24px 0;
  width: 70%;
  font-size: 0.9em;
  background: #e5e5e5;
  border: 1px solid #ccc;
  padding: 2em;
  counter-reset: toc;
  list-style-type: none;

dreamark

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告ユニット名 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-×××"
     data-ad-slot="×××"
     data-ad-format="auto"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>