表示されている記事

スポンサーサイト

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


Card ValidatorでCard Previewを確認してみる

Card Validator

Card Preview

前の記事(JUGEMブログにTwitter Cardsを対応させてみる)をCard Validatorで確認してみました。

確認用に一度公開保存してつぶやいています。

続きを読む >>

JUGEMブログにTwitter Cardsを対応させてみる

https://dev.twitter.com/docs/cards

Twitter Cards | Twitter Developers
via kwout

ブログ記事を投稿した情報をTwitterでつぶやく時にTwitter Cardsに対応させると伝わりやすくなりそうなので設置可能かためしてみます。

※設置が上手くいくか確認用のつぶやきをカスタマイズ中に連投します。


Sidebar Accordion Menu を設置してみる

RoundAndRound - User Template File | 無料ブログ(blog)作成【JUGEM(ジュゲム)】

こちらのUTFで使用されているSidebar Accordion Menuを設置してみたいとおもいます。

参考にさせていただいた記述
<script type="text/javascript">
$(function() {
$(".side_content_body").css('display','none');
$(".side_content h4").hover(function(){
    $(this).css("cursor","pointer");
    $(this).css("color","#666");
    },function(){
        $(this).css("cursor","default");
        $(this).css("color","#121212");
    });
    $(".side_content h4").each(function() {
        $(this).click(function() {
        $(this).next("div").toggle("slow");
        $(".side_content_body").siblings("div:visible").slideUp("slow");
        });
    });
});
</script>
<!-- BEGIN calendar -->
<div class="side_content">
<h4>Calendar</h4>
<div class="side_content_body">
{calendar}
</div>
</div>
<!-- END calendar -->

外部.jsのリンク先

外部.jsのリンクURLを更新してみました。

prototype.js
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
scriptaculous.js
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
jquery.min.js
<script type="text/javascript" src="//js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

記事の続きにおすすめ商品を表示させる

サイドバーにおすすめ商品を常時表示させるより記事内に表示させたほうが目にとまる事が多いと思うので記事の続き(<!-- BEGIN entry_sequel_items -->〜<!-- END entry_sequel_items -->)内に表示させてみました。

ブログの表示別に設定するための準備:参照
<body onload="javascript:initval();" id="{eid}{page}{cid}{month}{day}{search}{pid}{index}">

bodyダグに上記のid="{eid}{page}{cid}{month}{day}{search}{pid}{index}"を追記する。

設置したHTMLの部分
<!-- 続きを読むのカスタマイズ -->
<div class="entryMore">
<!-- BEGIN entry_sequel_link -->
<a href="./?eid={entry_sequel_id}#sequel">read more</a>
<!-- END entry_sequel_link -->
<!-- BEGIN entry_sequel_items -->

<div class="amazon_List">
<h3>recommend</h3>
<!-- BEGIN amazon -->
<div class="amazon_Image">
{amazon_item}
</div>
<!-- END amazon -->
</div>
<br clear="both">

{entry_sequel_text}
<!-- END entry_sequel_items -->
</div>
<!-- END 続きを読むのカスタマイズ -->

今回設置したテンプレートは続きを読むをカスタマイズしているので<!-- BEGIN entry_sequel_items -->〜<!-- END entry_sequel_items -->内に<!-- BEGIN amazon -->〜<!-- END amazon -->を設置しています。

このままではブログトップ表示でも記事の下におすすめ商品が表示されてしまうのでCSSでブログトップ表示には表示されないようにします。表示させても良いとは思いますがあえてブログ記事表示時のみ表示させるようにしてみます。

.amazon_List {display:none;}
body#eid .amazon_List {display:block;}
.amazon_Image {clear:left; margin:0 0 20px 0;}
.amazon_text { display:none; }
.amazon_text strong { display:none; }
.amazon_monocolle { display:none; }
.amazon_pict {width: 60px; float:left; margin:0 0 0 0; padding: 0 10px 0 0; border-right:1px dotted #EC6698;}
.amzntxt {}
.amznMycomment {overflow: hidden; font-size:10px; padding:0 0 0 6px;}
  • .amazon_List {display:none;}
    としておすすめ商品を非表示にする
  • body#eid .amazon_List {display:block;}
    としておすすめ商品をブログ記事表示時のみ表示させる

設定したテンプレート記事はこちらです。


サイドバーに表示するおすすめ商品表示を指定する

おすすめ商品リスト

おすすめ商品リストの「サイドバー表示 / ひと言コメント」にタグが使えるようなので指定してみました。

サイドバー表示 / ひと言コメントに記述した内容は下記
</div><div class="amznMycomment">AKBがいっぱい<br>総選挙あったのですね!今後の展開が楽しみです<br>アマゾン</div><div>
テンプレートに使用しているおすすめ商品リストのHTML・CSSは下記
<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<!-- BEGIN amazon -->
<div class="amazon_Image">
{amazon_item}
</div>
<!-- END amazon -->
</div>
</div>
.amazon_Image {clear:left; margin:0 0 20px 0;}
.amazon_text { display:none; }
.amazon_text strong { display:none; }
.amazon_monocolle { display:none; }
.amazon_pict {width: 60px; float:left; margin:0 5px 0 0;}
.amzntxt {}
.amznMycomment {overflow: hidden; font-size:10px; border-left:1px solid #cccccc; padding:0 0 0 6px;}

画像サイズ幅を60pxに指定し自動に挿入される商品名を非表示させひと言コメントを画像の左に回りこませてています。

下記はCSSで指定した内容
  • .amazon_Image
    clear:left:商品間の回りこみを解除
    margin:0 0 20px 0:商品の下に20pxの余白を指定
  • .amazon_text .amazon_text strong .amazon_monocolle
    display:none:自動に挿入される商品名を非表示
  • .amazon_pict
    width: 60px:商品画像サイズ幅を指定
    float:left:商品画像の後に来る文字を回りこみ
    margin:0 5px 0 0:商品画像の右側に5pxの余白を設定
  • .amznMycomment
    overflow: hidden:商品画像高さより文字数が多い場合、回り込みが解除されない指定
    font-size:10px:ひと言コメントの文字サイズ指定
    border-left:1px solid #cccccc:文字の左側にボーダーを表示
    padding:0 0 0 6px:文字とボーダー間の余白を指定
  • .eidDN
    body#eid .eidDN {display: none;}として個別記事が表示されている場合に指定した部分が非表示になるように指定しています。

サイドバーではなく個別記事表示時に記事の下などにおすすめ商品を表示させてもいいかもしれません。


{amazon_item}

現在このテンプレートで使用している{amazon_item}部分の記述は下記

<!-- BEGIN amazon -->
<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<!-- {amazon_item} -->
<div class="amzn">
<div class="amznimg">
<a href="{amazon_url}" target="_blank" alt="{amazon_ProductName}" title="{amazon_ProductName} {amazon_Creator}">
<img src="{amazon_ImageUrlMedium}">
</a>
</div>
<div class="amzntxt">{amazon_ProductName}</div>
<div class="amzntxt">{amazon_Creator}</div>
<br class="clear" />
</div>
</div>
</div>
<!-- END amazon -->
.amazon {}
.amznimg {float:left;margin:0 5px 0 0;}
.amznimg img {width:60px;}
.amzntxt {font-size:10px; overflow: hidden;}

公式テンプレートなどで使われている記述は下記

<!-- BEGIN amazon -->
<div class="sideContents">
{amazon_item}
</div>
<!-- END amazon -->

これに習ってHTMLを置き換えてみる

<!-- BEGIN amazon -->
<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
{amazon_item}
</div>
</div>
<!-- END amazon -->

出力されるHTMLは下記

<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<div class="amazon">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51PAsC25Z1L._SL160_.jpg" alt="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" class="amazon_pict" border="0"></a>
<div class="amazon_text">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><strong>AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)</strong></a>&nbsp;<span class="amazon_monocolle"><a href="http://jugem.jp/mono/amazon/B00524BUGW/" title="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" target="_blank">(JUGEMレビュー ?)</a></span><br>   <br>
</div>
</div>

以前ここで書いたHTMLをもう一度確認してみる

<div class="linktitle">RECOMMEND</div>
<div class="linktext">
<!-- BEGIN amazon -->
<div class="amazon_Image">
{amazon_item}
{amazon_comment}
</div>
<!-- END amazon -->
</div>
.amazon { margin-bottom:3px; }
.amazon_text { line-height:140%; }
.amazon_pict { border:none; }/* ボーダーを表示させない */
.amazon_pict a img { border: none; }/* ボーダーを表示させない */
.amazon_Image { margin-bottom:20px; }
.amazon_text { display:none; }
.amazon_text strong { display:none; }
.amazon_monocolle { display:none; }

出力されるHTMlは下記

<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<div class="amazon_Image">
<div class="amazon">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51PAsC25Z1L._SL160_.jpg" alt="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" class="amazon_pict" border="0"></a>
<div class="amazon_text">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><strong>AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)</strong></a>&nbsp;<span class="amazon_monocolle"><a href="http://jugem.jp/mono/amazon/B00524BUGW/" title="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" target="_blank">(JUGEMレビュー ?)</a></span><br>   <br>
</div>
</div>

おすすめ記事にコメントをしていないのでコメントを追加してみます

</div><br clear="both" />総選挙あったのですね!<div>

出力されるHTMLは下記

<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<div class="amazon_Image">
<div class="amazon">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51PAsC25Z1L._SL160_.jpg" alt="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" class="amazon_pict" border="0"></a>
<div class="amazon_text">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><strong>AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)</strong></a>&nbsp;<span class="amazon_monocolle"><a href="http://jugem.jp/mono/amazon/B00524BUGW/" title="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" target="_blank">(JUGEMレビュー ?)</a></span><br>   <br>
</div><br clear="all">総選挙あったのですね!<div>
</div>
</div>
</div><br clear="all">総選挙あったのですね!<div>
</div>
</div>
</div>

コメントが重複して表示されています…

<div class="amazon_Image">
{amazon_item}
</div>
<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<div class="amazon_Image">
<div class="amazon">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51PAsC25Z1L._SL160_.jpg" alt="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" class="amazon_pict" border="0"></a>
<div class="amazon_text">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><strong>AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)</strong></a>&nbsp;<span class="amazon_monocolle"><a href="http://jugem.jp/mono/amazon/B00524BUGW/" title="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" target="_blank">(JUGEMレビュー ?)</a></span><br>   <br>
</div><br clear="all">総選挙あったのですね!<div>
</div>
</div>
</div>

上記のHTMLとしてCSSで表示をコントロールします

.amazon {}
.amznimg {float:left;margin:0 5px 0 0;}
.amznimg img {width:60px;}
.amzntxt {font-size:10px; overflow: hidden;}

.amazon { margin-bottom:3px; }
.amazon_text { line-height:140%; }
.amazon_pict { border:none; }/* ボーダーを表示させない */
.amazon_pict a img { border: none;}/* ボーダーを表示させない */
.amazon_Image { margin-bottom:20px; }
.amazon_text { display:none; }
.amazon_text strong { display:none; }
.amazon_monocolle { display:none; }

.amazon a img {width: 60px;} /* 表示画像の横巾を指定 */
スクリーンショット

このように表示されれています。
不要なCSSの記述もあるかもしれませんがとりあえず。

追記:2013年6月10日-2:43
サイドバー表示 / ひと言コメント

ひと言コメントを書くページ

「データ管理」→「おすすめ商品リスト」→「コメントを編集」


<head>〜</head>の確認:メインページ

<head>〜</head>の確認:メインページ
<!-- OGP -->
<meta property="og:image" content="http://i.jugem.jp/user/jugemtemplate/180" />
<meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20130521_553047_t.png" />
<meta property="og:image" content="http://imaging.jugem.jp/template/img/jugem_ogicon.jpg" />
<meta property="og:image" content="http://img-cdn.jg.jugem.jp/127/1958749/20130517_545956_t.png" />
<meta property="og:image" content="http://imaging.jugem.jp/template/img/jugem_ogicon.jpg" />
<meta property="og:image" content="http://i.jugem.jp/user/jugemtemplate/180" />
<meta property="og:image" content="http://i.jugem.jp/user/jugemtemplate/16" />
<meta property="og:image" content="http://imaging.jugem.jp/template/img/jugem_ogicon.jpg" />
<!-- /OGP -->

<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="blog" />
<meta property="og:site_name" content="My First JUGEM Template!" />
<meta property="og:title" content="My First JUGEM Template!" />
<meta property="og:description" content="ブログやるならJUGEM" />
<meta property="og:url" content="http://jugemtemplate.jugem.jp/" />

<link rel="canonical" href="http://jugemtemplate.jugem.jp/" />

<link rel="apple-touch-icon" href="http://imaging.jugem.jp/portal/img/apple-touch-icon.png" />

<link rel="next" href="http://jugemtemplate.jugem.jp/?page=1" />


</head>

現在はファビコンの表示に関する追記はないようです:2013年5月22日-4:00確認


Q. ファビコンの変更が反映されなくなってしまった


無料ブログだから仕方ないけれど広告の表示を調整してみる

無料ブログサービスの場合記事の合間に広告を表示することで収入を得ていると思いますがルール違反にならない程度で広告の表示をカスタマイズしています。このブログの場合は下記のCSS設定で広告の位置を調整しています。このブログの記事幅などを考慮して…

#gInactiveAdContainer a {color:#000000;text-decoration:none !important;}

div#gEntryAdContainer {
margin:20px 0px 0 0px !important;
border-top: 1px dotted #cccccc !important;
border-bottom: 1px dotted #cccccc !important;
border-right: 1px dotted #cccccc !important;
border-left: 1px dotted #cccccc !important;
padding-top: 10px !important;
padding-right: 15px !important;
padding-bottom: 15px !important;
padding-left: 15px !important;
}
div#gEntryAdContainer a {color:#000000;text-decoration:none !important;}
div#gEntryAdContainer a span {font-weight:normal !important;}
div#gEntryAdContainer a span {color:#000000 !important;}
div#gEntryAdContainer img {margin:0 0 0 114px;}

div#gEntryAdContainer img {margin:0 0 0 114px;}
div#gInactiveAdContainer img {margin:0 0 0 114px;}
div#gInactiveAdContainer img {margin:0 0 0 114px;}
div#google_flash_inline_div {margin:0 0 0 114px;}

これも広告の仕様が変わる場合があるのでこまめにチェックしないといけません…