表示されている記事

スポンサーサイト

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


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

サイドバーにおすすめ商品を常時表示させるより記事内に表示させたほうが目にとまる事が多いと思うので記事の続き(<!-- 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. ファビコンの変更が反映されなくなってしまった


解決する必要があるオープングラフの警告

OGP対応になって来ましたがog:imageサイズを見なおしていただきたい。

Small og:image:
All the images referenced by og:image should be at least 200px in both dimensions, with 1500x1500 preferred. (Maximum image size is 5MB.) Please check all the images with tag og:image in the given url and ensure that it meets the recommended specification.
og:image should be larger:
Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://imaging.jugem.jp/template/img/jugem_ogicon.jpg' will be used instead.

カレンダーの月送り

こちらの記事の「Q. カレンダーの遷移リンク」のJavascript部分
<script type="text/javascript">
<!--
function myCalenderLink(){
var nMonth = {calendar_next_yearmonth};
var pMonth = {calendar_prev_yearmonth};
var tYear = {calendar_this_year}
var tMonth = {calendar_this_month};

if(tMonth<10) tMonth = '0'+ tMonth;
var nowDate = String(tYear)+String(tMonth);

today = new Date();
var yyyy = today.getFullYear();
var mm = today.getMonth()+1;

if(mm<10) mm = "0"+ mm;
var ym = String(yyyy)+String(mm);

var pURL;
var nURL;

if(ym == nowDate){ pURL = pMonth; nURL = ''}
else if(nowDate == 201101){pURL = ''; nURL = nMonth;} //ブログ開始年月を6桁の数字で入力。例:2007年4月開設なら200704
else{pURL = pMonth; nURL = nMonth;}

document.write('<a href="./?month=' + pURL + '">&lt;&lt;&nbsp;</a>' + tYear + '年' + tMonth + '月' + '<a href="./?month=' + nURL + '">&nbsp;&gt;&gt;</a>');
}

myCalenderLink();
-->
</script>

このブログのように毎月更新していない場合はどうしても月送りで「指定された日付の記事は存在しません。」が表示されてしまうのでこの部分の月送りをやめてみました。


ファビコンの表示やOGP対策に今までJUGEMブログで設定していたこと

ファビコンを表示させる設定
<link rel="icon" href="URL/***.gif" type="image/gif">
<link rel="shortcut icon" href="URL/***.ico">
  • 上記のどちらかを<head>〜</head>内に記述してファビコンを表示させていた。

Facebookへの連携投稿やいいねに対応するための設定
<meta property="og:type" content="article" />
<meta property="og:title" content="{site_title}" />
<meta property="og:image" content="http://i.jugem.jp/user/jugemtemplate/180" />
{og_image}
<meta property="og:url" content="{mobile_url}" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:description" content="ブログやるならJUGEM" />
  • OGPの設定方法を調べてこのブログに設置していた例。

このテンプレートで使用しているカレンダーについて

このテンプレートで使用しているカレンダーについて

Q. カレンダーの遷移リンク | JUGEM ユーザー助け合い掲示板
https://secure.jugem.jp/support/bbs/alldis.php?id=3050

上記のユーザー助け合い掲示板を参考に月送部分を表示させています。


表示される画像を設定する独自タグ{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>
続きを読む >>