表示されている記事

スポンサーサイト

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


表示される画像を設定する独自タグ{og_image}を設置してみました

HTML
<head>
…中略…
<title>{site_title}</title>
<meta property="og:type" content="article" />
<meta property="og:title" content="{site_title}" />
{og_image}
<meta property="og:image" content="http://i.jugem.jp/user/jugemtemplate/180" />
<meta property="og:url" content="{mobile_url}" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:description" content="ブログやるならJUGEM" />
…中略…
</head>
続きを読む >>

画像共有用の独自タグ{pinterest_pin_it}を設置してみました

LOVE」のボタンの左横に「Pin it」のボタンを設置してみました

HTML
<!-- BEGIN entry -->
…中略…
<div class="entryLoveBtn"><div class="entryLove">{love_clap}</div></div>
<div class="pinteRestBtn"><div class="pinteRest">{pinterest_pin_it}</div></div>
…中略…
<!-- END entry -->
CSS
/* pinterestボタン */
.pinteRestBtn {float:right;}

.pinteRest {
margin:0 0 0 0;
width:43px;
padding:0;
}

/* LOVEボタン */    
.entryLoveBtn {float:right;}

.entryLove {
margin:0 0 0 0;
width:64px;
padding:4px 0 0 4px; /*ボタン位置の微調整*/
}

シーソーゲーム〜勇敢な恋の歌〜 / Mr.Children


スピッツ / ロビンソン


今日から三連休

あじさい
あじさい

海の日が制定された時(1995年 - 平成7年)は7月20日でしたがハッピーマンデー制度(2003年 - 平成15年)で7月の第三月曜日になったので今週末は三連休ですがどうやら不安定な天候なのでこの三連休はどうなることやら…久々の三連休を楽しく過ごしましょう!


テンプレートをカスタマイズしてみました tid=10

[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル | コリス

参考にさせていただきました

カテゴリー・アーカイブの表示タグでエントリー数を表示する

HTML
<!-- BEGIN category -->
<div class="categoryList">
<!-- BEGIN category_items -->
<div class="categoryItems"><a href="./?cid={category_item_id}" title="{category_item_name}({category_item_num})">{category_item_name}</a><sup>{category_item_num}</sup></div>
<!-- END category_items -->
</div><!-- class="categoryList" -->
<!-- END category -->

<!-- BEGIN archives -->
<div class="archivesList">
<!-- BEGIN archives_items -->
<div class="archivesItems"><a href="./?month={archives_item_id}" title="{archives_item_year}年{archives_item_num_month}月の記事一覧({archives_item_num})">{archives_item_year}/{archives_item_num_month}</a><sup>{archives_item_num}</sup></div>
<!-- END archives_items -->
</div><!-- class="categoryArchives" -->
<!-- END archives -->
CSS
.categoryItems sup {font-size:8px;color:#bccddb;}
.archivesItems sup {font-size:8px;color:#bccddb;}
<sup>タグを使ってエントリー数を表示させてみました

http://jugemtemplate.jugem.jp/?tid=9:書式確認用 3

http://jugemtemplate.jugem.jp/?tid=9:書式確認用 3
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆをらりるれろん
  • あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆをらりるれろん
  1. あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆをらりるれろん

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆをらりるれろん

HTML
<h6 title="「あいうえおです」"><p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆをらりるれろん</p></h6>
CSS
h6 {font-weight: normal;}
h6[title]:before {display: block;float: left;content: attr(title);}
h6 p {overflow:hidden;}

今日はいいお天気でしたね明日の天気はどうでしょう?

今日はいいお天気でしたね明日の天気はどうでしょう?今日はいいお天気でしたね明日の天気はどうでしょう?今日はいいお天気でしたね明日の天気はどうでしょう?

HTML
<div class="titleLabel" title="こんにちは"><p>今日はいいお天気でしたね明日の天気はどうでしょう?</p></div>
CSS
div.titleLabel {margin: 0px 0px 5px 0px;}
div.titleLabel[title]:before {
color:#ff6600;
background-color:#f5f8ff;
text-align: center;
margin-right:10px;
padding: 0px 0px 0px 0px;
width: 86px;
display: block;
float: left;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
content: attr(title);
}
div.titleLabel p {overflow:hidden;}

今日はいいお天気でしたね明日の天気はどうでしょう?今日はいいお天気でしたね明日の天気はどうでしょう?
今日はいいお天気でしたね明日の天気はどうでしょう?

  1. 今日はいいお天気でしたね明日の天気はどうでしょう?
  2. 今日はいいお天気でしたね明日の天気はどうでしょう?
div.titleLabel {margin: 0px 0px 5px 0px;}
div.titleLabel[title]:before {
color:#ff6600;
background-color:#f5f8ff;
text-align: center;
margin-right:6px;
padding: 0px 0px 0px 0px;
width: 86px;
display: block;
float: left;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
content: attr(title);
}
div.titleLabel p, div.lavel ol, div.lavel ul {overflow:hidden;}
div.titleLabel ol li {list-style-type:decimal;}
div.titleLabel ul li {list-style-type:disc;}

http://jugemtemplate.jugem.jp/?tid=9:書式確認用 2

h1

h2

h3

h4

h5
h6
<dl><dt>〜</dt><dd>〜</dd></dl>
あいうえおの次は
「かきくけこさしすせそたちつてと」です
なにぬねの次は
「はひふへほまみむめもや・ゆ・よらりるれろ」です
<em>〜</em>:あいうえおかきくけこ
<strong>〜</strong>:あいうえおかきくけこ
<b>〜</b>:あいうえおかきくけこ
<ins>〜</ins>:あいうえおかきくけこ
<del>〜</del>:あいうえおかきくけこ
<s>〜</s>:あいうえおかきくけこ
<i>〜</i>:あいうえおかきくけこ
<sub>〜</sub>:あいうえお2
<sup>〜</sup>:あいうえお2
<q>〜</q>:あいうえお
<bdo dir="rtl">〜</bdo>:あいうえおかきくけこ
<bdo dir="ltr">〜</bdo>:あいうえおかきくけこ
<small>〜</small>:あいうえおかきくけこ

http://jugemtemplate.jugem.jp/?tid=9:書式確認用

http://jugemtemplate.jugem.jp/?tid=9&eid=104

<p>acbABC123あいうえお</p>

<span style="font-weight: bold;"gt;acbABC123あいうえお</span>
<span style="font-style: italic;">acbABC123あいうえお</span>
<span style="text-decoration: underline;">acbABC123あいうえお</span>
<span style="text-decoration: line-through;">acbABC123あいうえお</span>
<font size="1">acbABC123あいうえお</font>
<font size="2">acbABC123あいうえお</font>
<font size="3">acbABC123あいうえお</font>
<font size="4">acbABC123あいうえお</font>
<font size="5">acbABC123あいうえお</font>
<font size="6">acbABC123あいうえお</font>
<font size="7">acbABC123あいうえお</font>
<span style="color: rgb(255, 0, 0);">acbABC123あいうえお </span>
<span style="color: rgb(255, 204, 0);">acbABC123あいうえお </span>
<span style="color: rgb(0, 128, 0);">acbABC123あいうえお </span>
<span style="color: rgb(0, 0, 255);">acbABC123あいうえお </span>
<blockquote>〜</blockquote>
acbABC123あいうえお<br>
acbABC123あいうえお
acbABC123あいうえおacbABC123あいうえおacbABC123あいうえお
acbABC123あいうえお
<blockquote>〜<ol><li>〜</li></ol>〜</blockquote>
  1. blockquote ol li:acbABC123あいうえお
    br:acbABC123あいうえお
  2. blockquote ol li a:acbABC123あいうえお
    br:acbABC123あいうえお
<blockquote>〜<ul><li>〜</li></ul>〜</blockquote>
<ol><li>〜</li></ol>
  1. ol li:acbABC123あいうえお
    br:acbABC123あいうえお
  2. ol li a:acbABC123あいうえお
    br:acbABC123あいうえお
<ul><li>〜</li></ul> <cite>〜</cite> cite:acbABC123あいうえお1 cite:acbABC123あいうえお2acbABC123あいうえお2acbABC123あいうえお2acbABC123あいうえお2acbABC123あいうえお2 <cite><a href="#">〜</a></cite> cite:acbABC123あいうえお1 cite:acbABC123あいうえお2acbABC123あいうえお2acbABC123あいうえお2acbABC123あいうえお2acbABC123あいうえお2 <cite>〜<ol><li>〜</li></ol>〜</cite>
  1. cite ol li:acbABC123あいうえお
    br:acbABC123あいうえお
  2. cite ol li a:acbABC123あいうえお
    br:acbABC123あいうえお
<cite>〜<ul><li>〜</li></ul>〜</cite> <div class="memo">〜</div>

p:
こんにちは
acbABC123あいうえおacbABC123あいうえおacbABC123あいうえおacbABC123あいうえおacbABC123あいうえお
さようなら

  • div.memo ul li:acbABC123あいうえお
    div.memo ul li br:acbABC123あいうえお
<pre><code>〜</code></pre>
acbABC123あいうえお
acbABC123あいうえお