表示されている記事

スポンサーサイト

一定期間更新がないため広告を表示しています


テンプレートを作ってみる【31】

記事の本文と広告の間に線(border)を入れてみました
div#gEntryAdContainer {margin:10px 0px 0px 0px; border-top:1px solid #cccccc !important;}

テンプレートを作ってみる【30】

記事内のリンク(<a href=""></a>)文字の設定をしてみました
.entryBody a, .entrySequel a {color:#000000;text-decoration:underline;}
.entryBody a:link, .entrySequel a:link {color:#000000;text-decoration:underline;}
.entryBody a:visited, .entrySequel a:visited {color:#000000;text-decoration:underline;}
.entryBody a:hover, .entrySequel a:hover {color:#ff6600;text-decoration:underline;}
.entryBody a:active, .entrySequel a:active {color:#000000;text-decoration:underline;}

テンプレートを作ってみる【29】

続きを読むを"read more..."に設定してみました
元のHTML
<div class="entrySequel">{entry_sequel}</div>
設定後のHTML
<div class="entrySequel">
<!-- BEGIN entry_sequel_link -->
<a href="./?eid={entry_sequel_id}#sequel">read more...</a>
<!-- END entry_sequel_link -->
<!-- BEGIN entry_sequel_items -->{entry_sequel_text}<!-- END entry_sequel_items -->
</div>

テンプレートを作ってみる【28】

記事内の文字装飾の設定をしました
記事の本文と続きの部分をclass名で囲います
※記事部分のみ装飾するため
<div class="entryBody">{entry_description}</div>
<div class="entrySequel">{entry_sequel}</div>
blockquote
.entryBody blockquote, .entrySequel blockquote {padding:0px 10px 0px 10px; border-left:1px solid #cccccc;}
<ol><li>~</li></ol>
.entryBody ol, .entrySequel ol {margin:0px 20px 0px 20px; padding:0px 0px 0px 0px;}
.entryBody ol li, .entrySequel ol li {list-style-type:decimal;}
<ul><li>~</li></ul>
.entryBody ul, .entrySequel ul {margin:0px 20px 0px 20px; padding:0px 0px 0px 0px;}
.entryBody ul li, .entrySequel ul li {list-style-type:disc;}
読みにくい場合はこちらで
このテンプレートでこの記事を表示
このテンプレートを表示

テンプレートを作ってみる【27】

記事の日付を設定してみました
<div class="entryDate">{entry_date}</div>
.entryDate {margin:0px 0px 10px 0px;}
読みにくい場合はこちらで
このテンプレートでこの記事を表示
このテンプレートを表示

テンプレートを作ってみる【26】

記事のタイトルを設定する
<h2>{entry_title_link}</h2>
h2 a,h2 a:link,h2 a:visited {color:#000000;text-decoration:none;}
h2 a:hover,h2 a:active {color:#000000;text-decoration:none;}
h2 {border-bottom:1px solid #cccccc;}
読みにくい場合はこちらで
このテンプレートでこの記事を表示
このテンプレートを表示

テンプレートを作ってみる【25】

ヘッダーに「ブログの説明」を設定してみました
  • 独自タグ:{blog_description}
<!-- header -->
<div id="header">
<div id="headerBg">
<div id="headerInner">
<!-- BEGIN title -->
<h1>{blog_name}</h1>
<div id="description">{blog_description}</div>
</div>
<!-- END title -->
</div>
</div>
<!-- /header -->
#header {
width:700px;
height:510px;
background-color:#cccccc;
margin:0;
padding:0 0 0 0;
text-align:left;
}
#headerBg {
width:640px;
height:480px;
margin:30px auto 0px;
background-image:url("アップロードした画像URL");/*640x480*/
background-repeat: no-repeat;
background-position: left top;
}
#headerInner {
padding:10px 0px 0px 10px;
}
h1 a,h1 a:link,h1 a:visited {color:#000000;text-decoration:none;}
h1 a:hover,h1 a:active {color:#000000;text-decoration:none;}
#description {}

読みにくい場合はこちらで
このテンプレートでこの記事を表示
このテンプレートを表示

テンプレートを作ってみる【24】

このブログの概要を設置してみます
<div class="sideContent">
<div class="sideContentTitle">このブログについて</div>
<div class="sideContentItem">
<div class="contentItemName">投稿者</div>
<!-- BEGIN user -->
<ul><!-- BEGIN user_items --><li><a href="./?pid={user_item_id}">{user_item_name}</a></li><!-- END user_items --></ul>
<!-- END user -->
<div class="contentItemName">記事の概要</div>
<ul>
<li>最新の記事:{last_entry_date}</li>
<li>最古の記事:{first_entry_date}</li>
<li>記事の総数:{all_entry_count}</li>
<li><a href="./?mode=rss">RSS1.0</a></li>
<li><a href="./?mode=atom">Atom0.3</a></li>
</ul>
<div class="contentItemName">ブログの管理</div>
<ul>
<li><a title="管理者ページにログインする" href="./manage/">login</a></li>
<li><a title="管理者ページからログアウトする" href="./manage/?mode=logout">logout</a></li>
<li><a href="http://jugem.jp/" target="_blank">powered by JUGEM</a></li>
<li>{copyright}</li>
</ul>
</div>
</div>
ブログで必要な項目を選んで設置します
ブログ管理のlogin・logout等は読者には必要ありませんRSS・Atom等はもっと目立った場所に設置してほうがRSSリーダー等に登録してもらえる場合もあります

読みにくい場合はこちらで
このテンプレートでこの記事を表示
このテンプレートを表示

テンプレートを作ってみる【23】

リンクの表示のタグを設定してみます
<div class="sideContent">
<div class="sideContentTitle">おすすめリンク</div>
<div class="sideContentItem">
<!-- BEGIN link -->
<ul class="linkitems">
<!-- BEGIN link_items --><li>
<a href="{link_item_url}">{link_item_name}</a></li>
<!-- END link_items -->
</ul>
<!-- END link -->
</div>
</div>
リスト表示にするため<ul><li>~</li></ul>で独自タグを囲っています

読みにくい場合はこちらで
このテンプレートでこの記事を表示
このテンプレートを表示

テンプレートを作ってみる【22】

Amazon Web サービス(おすすめ商品)を設置してみます
  • 独自タグ:{amazon_item}
この独自タグから表示されるHTMLは独自タグ一覧を見ると
<div class="amazon">
<a href="商品へのリンク" target="_blank">
<img border="0" src="画像のURL" alt="商品名" class="amazon_pict" />
</a>
<div class="amazon_text">
<a href="商品へのリンク" target="_blank">
<strong>商品名</strong>
</a>
<span class="amazon_monocolle">
<a href="JUGEMレビューへのリンク" title="商品名" target="_blank">
(JUGEMレビュー »)
</a>
</span>
作者
コメント
</div>
</div>
となっています
この他の独自タグもありますが「楽天」「カラメル」からもおすすめ商品を選択したい場合はこの独自タグ{amazon_item}を使用しないと「楽天」「カラメル」の商品が表示されないようです【確認中】
今回は独自タグ{amazon_item}を使用しておすすめ商品を設置したいと思います
表示の調整はCSSで調整します
<div class="sideContent">
<div class="sideContentTitle">おすすめ商品</div>
<!-- BEGIN amazon -->
<div class="amazonItem">
{amazon_item}
</div>
<!-- END amazon -->
</div>
読みにくい場合はこちらで
このテンプレートでこの記事を表示
このテンプレートを表示
続きを読む >>