CriCri

クリエイティブになりたいクリクリ工房

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Webstyle #02　blue light、a tree、カスタマイズ

2010年09月21日　配布
2011年06月08日　jqueryを最新版にした他、IE9に対応しました

擬似1カラムです。
       背景画像の邪魔にならないように、普段はプラグインが見えないようになっています。
       トップメニューの「Other Menus」をクリックすると、横にプラグインが現れます。
       もう一度「Other Menu」をクリックすると、プラグインはまた消えてなくなります。

プラグイン4とプラグイン5をそれぞれ記事の上と下に設置しました。
プラグイン4：トップページとそれに続く記事一覧ページで、記事の上に表示されます。
                  広告用に、タイトルはデフォルテで非表示になっています。
                  タイトルを表示させたい場合は、カスタマイズを参照してください。
プラグイン5：詳細記事ページで、記事とコメントフォームの間に表示されます。
                  広告用でタイトルは無しです。

「blue light」と「monochrome」はSEO用ではありませんが、HTMLのタイトル箇所に見出し用のタグをつけることでSEO向けになります。カスタマイズは追記に書いてあります。

テンプレート編集用エディターに大部分対応していますが、部分的にCSSで直接変更しなければならないところがあります。プラグインの左右変更はCSSで変更してください。カスタマイズは追記に書いてあります。

表示確認データはこちらを参照してください。

Web風仕様です。自分でサイトを作る手間が省けます。

ドロップダウンメニューを実装しています。忍者独自構文が直接書かれていますので、プラグインを設置しなくても自動的に情報を表示します。

カテゴリーとアーカイブ、キーワード検索表示ページでは、記事上部に該当記事のリストが表示されます。

プラグイン2は折りたたみ式です。

「a tree」と「monochrome」のプラグインは半透明で、不透明度が87％です。背景が少し透けて見えて、なおかつプラグインがはっきり見えるようになっています（更新版）

記事の下にランキング用バナー等を設置する箇所があります。バナーや広告を貼り付けたい方はこちらを参照してください。

「a tree」はSEO用です。ブログ管理ページ左側の「便利ツール」にある「検索エンジン登録」をするとSEOの確率が上がります。

コメント投稿者のメールアドレスは表示されません。コメント一覧ページの投稿者名にアドレスのリンクが付きますので、そちらで確認してください。

画像は差し替え自由です。この場合、ページ最下部の画像著作権者のリンクも変更してください。

テンプレートご使用の際には利用規約を一読ください。「a tree」はCrambon様から、「blue light」はThe Heart of Eternity様から素材をお借りしています。素材の再加工、および他での使用は厳禁です。素材は各作者様のサイトからダウンロードしてください。

ブログパーツおよび広告は、プラグイン4は490px以下のものを、プラグイン5は510px以下のものを、他のプラグインは170px以下のものを使用してください。

画像をクリックするとプレビューが見られます

blue light

a tree

monochrome -- カスタマイズ --

[5回]

プラグインの左右を変更する

テンプレート編集ページの右下にあるCSSを変更します。
まずCSSを少しスクロールすると、レイアウトのブロックが出てきます。
コンテンツはプラグイン以外のすべてが入ったボックスです。
これとプラグインボックスを並べて配置しているので、両方ともfloatの値を変更してください。

プラグインの左右を変更すると言うことは、ブログ自体を反対の側に寄せることになると思います。
この場合、全体を包括しているメインブロックの指定も変更する必要があります。
下にありますが、marginの値が 0 auto 0 3% なら左寄せ。0 3% 0 auto だと右寄せになります。
モニターがどの大きさでも端から少し離れるように、3％の指定を入れてありますが、端にくっつかせたい場合は、3％のところを0にすれば端にくっつきます。

テンプレート編集用エディターでプラグインを左右に配置するボタンがありますが、これはプラグインブロックとエントリーブロックの値を変更するので、このテンプレートでは使用できません。

/*************************************************
  レイアウト
*************************************************/
/*メインブロック
------------------------------------------------*/
div#mainBlock {
    width: 800px;
    margin: 0 auto 0 3%;　　　 /* 左寄せ　右寄せは 0 3% 0 auto */
    text-align:center;
}

/* コンテンツ（記事やコメント等を包括） 
------------------------------------------------*/
div#Contents {
    float: left;   　　　　 /* 左寄せ　右寄せにするときはrightにします */
    width: 570px;
    text-align: center;    
}

/* メニュー（プラグイン）
------------------------------------------------*/
div.PluginBlock {
    float: right;   　　　　 /* 右寄せ　左寄せにするときはleftにします */
    width: 230px;
    margin: 10px 0 20px;
}

「a tree」と「monochrome」をSEO向けに修正する

こちらはCSSを変更せずに修正できるようにしてあります。
テンプレート編集ページ右上のHTMLで修正することになりますが、変更箇所はCSSの見出しブロックにある部分になります。
最後のh5とh6は、記事の中で使用されることを念頭において指定しています。

/************************************************* 
見出し

  SEO用の見出しをつける場合は、HTMLの各該当箇所のタグを
  それぞれ上から、h1、h2、h3、h4に変更してください。
*************************************************/

/* ブログのタイトル (h1)
------------------------------------------------*/
#TopTitle {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Arial, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 184%;           /* 22px */
}

/* IE6 */
* html #TopTitle { font-weight: bold; }

/* IE7 */
*:first-child+html #TopTitle {
    font-family: Arial, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold; 
}
 
/* 記事のタイトル (h2)
------------------------------------------------*/
.EntryTitle {
    font-size: 134%;
    font-weight: bold;
}                              /* 16px */

/* コメント、トラックバック、コメント編集 (h3)
------------------------------------------------*/
.CommentMenuTitle,
.TrackbackMenuTitle,
.CommentEditTitle {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Arial, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 125%;
    font-weight: bold;
    font-style:italic;
}                              /* 15px */


/* コメント、コメントレス、トラックバック、プラグイン
   のタイトル （h4）
-------------------------------------------------*/
.Plugin4Head,
.CommentTitle,
.CommentResTitle,
.TrackbackTitle,
.PluginTitle {
    font-size: 110%;
    font-weight: bold;
}                             /* 13px */

/* h5とh6の指定
------------------------------------------------*/
h5, h6 {
    font-size: 110%;
    font-weight: bold;
}                             /* 13px */

上記の各タイトル部分のHTMLタグは現在divになっています。
これをそれぞれh1、h2、h3、h4に変えていきます。

ブログのタイトル
修正前
<!-- ==========▼▼▼　ヘッダー　========== -->
      <div id="TopBlock">
        <div id="TopTitle"><a href="<!--$g_url-->" title="ブログのトップページへ"><!--$g_title--></a></div>
        <p id="TopExplanation"><!--$g_explanation--></p>
      </div>
<!-- ==========▲▲▲　ヘッダー　エンド　========== -->

修正後
<!-- ==========▼▼▼　ヘッダー　========== -->
      <div id="TopBlock">
        <h1 id="TopTitle"><a href="<!--$g_url-->" title="ブログのトップページへ"><!--$g_title--></a></h1>
        <p id="TopExplanation"><!--$g_explanation--></p>
      </div>
<!-- ==========▲▲▲　ヘッダー　エンド　========== -->

記事の上のプラグイン4のタイトル
修正前
<!--　==========▼▼ プラグイン　4　========== -->
        <!--if_page-->
        <!--plugin4-->
        <div class="Plugin4InnerBlock">
 
<!-- ▽▽▽ プラグインタイトルの表示方法　style="display:none;"を削除してください ▽▽▽ -->
          <div class="Plugin4Title <!--$plugin_title_align-->" style="display:none;"><!--$plugin_title--></div>

修正後
<!--　==========▼▼ プラグイン　4　========== -->
        <!--if_page-->
        <!--plugin4-->
        <div class="Plugin4InnerBlock">
 
<!-- ▽▽▽ プラグインタイトルの表示方法　style="display:none;"を削除してください ▽▽▽ -->
          <h4 class="Plugin4Title <!--$plugin_title_align-->" style="display:none;"><!--$plugin_title--></h4>

記事のタイトル
修正前
<!--　==========▼▼ 記事ブロック ==========　-->
        <!--entry-->

        （省略）

        <div class="EntryInnerBlock">
          <div class="EntryTitle"><!--if_not_entry--><a href="<!--$entry_link-->" id="entry<!--$entry_no-->"><!--/if_not_entry--><!--$entry_title--><!--if_not_entry--></a><!--/if_not_entry--></div>
          <div class="EntryTextBox">
            <div class="EntryText">
              <!--$entry_text-->
            </div>

        （この後省略）

修正後
<!--　==========▼▼ 記事ブロック ==========　-->
        <!--entry-->

         （省略）

        <div class="EntryInnerBlock">
          <h2 class="EntryTitle"><!--if_not_entry--><a  href="<!--$entry_link-->"  id="entry<!--$entry_no-->"><!--/if_not_entry--><!--$entry_title--><!--if_not_entry--></a><!--/if_not_entry--></h2>
          <div class="EntryTextBox">
            <div class="EntryText">
              <!--$entry_text-->
            </div>

         （この後省略）

コメントブロックのタイトル
修正前
<!--　==========▼▼▼ コメントブロック ==========　-->
      <!--if_not_edit-->
        <!--if_entry-->
        <!--if_cm_receipt-->
        <div id="comments" class="CommentBlock">
          <div class="CommentMenuTitle">Comments</div>

（省略）

<!--　==========▼▼ コメント　========== -->
          <!--comment-->
          <div id="comment<!--$comment_no-->" class="CommentTextBox">
            <div class="CommentTitle"><!--$comment_title--></div>
            <div class="CommentText">
              <!--$comment_text-->
            </div>
            <ul class="CommentFooter">
              <li><!--$comment_name--> さん | </li>
              <!--if_comment_url-->
              <li><!--$comment_homepage_link--> | </li>
              <!--/if_comment_url-->
               <li><!--$comment_year-->/<!--$comment_mon-->/<!--$comment_day-->  (<!--$comment_hour-->:<!--$comment_min-->) | </li>
              <li><a href="<!--$comment_edit_link-->#edit" title="このコメントを編集する">Edit</a> |</li>
              <li><a href="/hoge/EditComment/" target="_blank"  title="このコメントに返信する">返信</a></li>                
            </ul>
          </div>
          <!--if_comment_res-->
          <div class="CommentResBlock">
            <div class="CommentResTitle"><!--$comment_res_title--></div>
            <div class="CommentResText">
              <!--$comment_res_text-->
            </div>
            <ul class="CommentResFooter">
              <li>from <span class="nickname"><!--$g_nickname--></span> | </li>                 
               <li><!--$comment_res_year-->/<!--$comment_res_mon-->/<!--$comment_res_day-->   (<!--$comment_res_hour-->:<!--$comment_res_min-->)</li>
            </ul> 
          </div>
          <!--/if_comment_res-->
          <!--/comment-->
<!-- ==========▲▲ コメント　エンド ========== -->

修正後
<!--　==========▼▼▼ コメントブロック ==========　-->
      <!--if_not_edit-->
      
        <!--if_entry-->
        <!--if_cm_receipt-->
        <div id="comments" class="CommentBlock">
          <h3 class="CommentMenuTitle">Comments</h3>

（省略）

<!--　==========▼▼ コメント　========== -->
          <!--comment-->
          <div id="comment<!--$comment_no-->" class="CommentTextBox">
            <h4 class="CommentTitle"><!--$comment_title--></h4>
            <div class="CommentText">
              <!--$comment_text-->
            </div>
            <ul class="CommentFooter">
              <li><!--$comment_name--> さん | </li>
              <!--if_comment_url-->
              <li><!--$comment_homepage_link--> | </li>
              <!--/if_comment_url-->
               <li><!--$comment_year-->/<!--$comment_mon-->/<!--$comment_day-->  (<!--$comment_hour-->:<!--$comment_min-->) | </li>
              <li><a href="<!--$comment_edit_link-->#edit" title="このコメントを編集する">Edit</a> |</li>
              <li><a href="/hoge/EditComment/" target="_blank"  title="このコメントに返信する">返信</a></li>                
            </ul>
          </div>
          <!--if_comment_res-->
          <div class="CommentResBlock">
            <h4 class="CommentResTitle"><!--$comment_res_title--></h4>
            <div class="CommentResText">
              <!--$comment_res_text-->
            </div>
            <ul class="CommentResFooter">
              <li>from <span class="nickname"><!--$g_nickname--></span> | </li>                 
               <li><!--$comment_res_year-->/<!--$comment_res_mon-->/<!--$comment_res_day-->   (<!--$comment_res_hour-->:<!--$comment_res_min-->)</li>
            </ul> 
          </div>
          <!--/if_comment_res-->
          <!--/comment-->
<!-- ==========▲▲ コメント　エンド ========== -->


トラックバックブロックのタイトル
修正前
<!--　==========▼▼▼ トラックバックブロック========== -->
        <!--if_tb_receipt-->
        <div id="trackbacks" class="TrackbackBlock">
          <div class="TrackbackMenuTitle">Trackback</div>
          <p class="TrackbackURLTitle">TrackbackURL 
            <input id="TrackbackURL" type="text" name="tbURL" value="<!--$g_trackback_url-->" onclick="this.select(0,this.value.length)" /></p>
          <!--trackback-->
          <div id="trackback<!--$trackback_no-->" class="TrackbackTextBox">
            <div class="TrackbackTitle"><!--$trackback_title--></div>           

修正後
<!--　==========▼▼▼ トラックバックブロック========== -->
        <!--if_tb_receipt-->
        <div id="trackbacks" class="TrackbackBlock">
          <h3 class="TrackbackMenuTitle">Trackback</h3>
          <p class="TrackbackURLTitle">TrackbackURL 
            <input id="TrackbackURL" type="text" name="tbURL" value="<!--$g_trackback_url-->" onclick="this.select(0,this.value.length)" /></p>
          <!--trackback-->
          <div id="trackback<!--$trackback_no-->" class="TrackbackTextBox">
            <h4 class="TrackbackTitle"><!--$trackback_title--></h4>            


コメント編集ブロックのタイトル
修正前
<!--　==========▼▼▼ コメント編集　========= -->    
      <!--if_edit-->
      <div id="edit" class="CommentEditBlock">
        <div class="CommentEditTitle">Edit Comment</div>

修正後
<!--　==========▼▼▼ コメント編集　========= -->    
      <!--if_edit-->
      <div id="edit" class="CommentEditBlock">
        <h3 class="CommentEditTitle">Edit Comment</h3>


プラグインブロック 
修正前
<!--　==========▼▼▼▼ プラグイン　========== -->
         （省略）
        <!--plugin1-->
        <div class="PluginInnerBlock">
          <div class="PluginTitle <!--$plugin_title_align-->"><!--$plugin_title--></div>
          <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_header_explanation-->
          </div>
          <div class="PluginContents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
          </div>
          <div class="PluginExplanation <!--$plugin_explanation_align-->">
          <!--$plugin_footer_explanation-->
          </div>
        </div>
        <!--/plugin1-->

修正後
<!--　==========▼▼▼▼ プラグイン　========== -->
         （省略）
        <!--plugin1-->　（プラグイン1）
        <div class="PluginInnerBlock">
          <h4 class="PluginTitle <!--$plugin_title_align-->"><!--$plugin_title--></h4>
          <div class="PluginExplanation <!--$plugin_explanation_align-->">
            <!--$plugin_header_explanation-->
          </div>
          <div class="PluginContents <!--$plugin_contents_align-->">
            <!--$plugin_data-->
          </div>
          <div class="PluginExplanation <!--$plugin_explanation_align-->">
          <!--$plugin_footer_explanation-->
          </div>
        </div>
        <!--/plugin1-->

続くプラグイン2とプラグイン3も、同じ箇所を修正します。