【カテゴリ:パソコン ブログカスタマイズの記録】
昨日(10月8日)、このブログに『LinkWithin』を導入しました。この『LinkWithin』とは何か?というと...
以下、『LinkWithin』のサイトからの引用です。
Show Related Stories Under Each Post!
LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive.
↓日本語訳
各投稿の下に関連記事を表示する!
LinkWithinはあなたのブログのアーカイブから関連記事にリンクして、各ポストの下に表示されるブログパーツです。
というような内容であり、要するに『関連する記事』のタイトルを画像付きで表示してくれる無料のブログパーツです。
LinkWithin - Related Posts with Thumbnails:
http://www.linkwithin.com/learn
以下は例として、このブログへの導入後に表示された内容をキャプチャした画像です。
...
スポンサーリンク
※ 参考記事
2012年09月14日 『Zenback』を導入して『関連する記事』が表示されるようになった
2012年09月18日 『Zenback』のスクリプトコードの設置箇所を変更した
...
さて、実際に自分が『LinkWithin』を『Seesaa』ブログに導入した際の手順ですが、覚え書きの意味もあり、以下に例として記録しておくことにしました。
1.『LinkWithin』スクリプトコードの取得
『LinkWithin』のページを表示して Eメール,ブログリンクを入力し、プラットフォーム,幅を選択します。
例として自分は、以下の画像のように指定しました。
この後『Get Widget!』ボタンをクリックすると、以下の画像のようにスクリプトコードが表示されるので、この内容をコピーしておきます。
2.『Seesaa』ブログへの『LinkWithin』スクリプトコードの設置
(1)『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面を表示し、『コンテンツ』をクリックします。
(2) 『記事』のコンテンツをクリックします。
以下のような画面が表示されます。
(3) 右上の『コンテンツHTML編集』をクリックします。
以下のような編集画面が表示されます。
(4) 表示されているHTMLのソースコードに『LinkWithin』のサイトで取得したスクリプトコードを追加します。
スクリプトコードの挿入箇所についてですが、自分は以下の内容を一番下に追加しました。
<script>
var linkwithin_site_id = 1491469;
var linkwithin_text='他にも以下のような記事があります...';
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
注意:
上記において、赤色の行は取得したスクリプトコードには含まれておらず、自分で追加しました。
この『var linkwithin_text=』に設定した内容が『見出し』の文字列として表示されます。
...
そして実際に『関連する記事』を表示させたい場所には、以下の行を挿入します。
<div class="linkwithin_div" align="center"></div>
注意:
赤色の部分は省略可です。
デフォルトだと左寄せで表示されたのですが、自分は中央寄せで表示させたかったので『align="center"』を追加しました。
自分の場合『関連する記事』を表示させる場所は、各記事の中で『ソーシャルボタン』が表示されている箇所の次の位置にしようと決めました。
具体的な挿入箇所は『if:list_category_article』で検索して見つかる行の直前です。
変更前の箇所(該当箇所のみ抜粋)
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bookmark.js"></script>
<% /if %>
<% if:list_category_article -%>
<div class="listCategoryArticle">
変更後の箇所(該当箇所のみ抜粋)
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bookmark.js"></script>
<% /if %>
<div class="linkwithin_div" align="center"></div>
<% if:list_category_article -%>
<div class="listCategoryArticle">
(5) 『保存』ボタンをクリックして保存します。
以下のように『編集を完了しました。』と表示されます。
(6) 右上の『×』マークをクリックして『記事のHTML編集』画面を閉じ、更に『保存』ボタンをクリックします。(この『保存』は行わなくても反映されますが、念のためです。)
以下のように『設定を変更しました。』と表示されます。
これで『LinkWithin』を『Seesaa』ブログに導入する手順は完了です。
...
さて、以下は実際に『LinkWithin』を使ってみて気付いたことです。
(1) 『関連する記事』は1ページ内に複数は表示されないらしい
例えば、自分はトップページに記事を3件表示させていますが、先頭の記事の中だけにしか表示されませんでした。
自分の設置方法では、3件の各記事毎に表示されるものと想定していましたが、2つ目以降の記事の中には表示されませんでしたので、『関連する記事』は1ページ内に1個しか表示しないように制御されているみたいでした。
【追記】2012-10-09 22:20
他のブログ(=Livedoor blog)で、トップページ内の複数の記事毎に『関連する記事』を表示させているのがありました。
なぜそのブログでは複数表示できているのに、このブログでは1個しか表示できないのか?
『Seesaa』ブログ固有の現象なのか、それとも自分が何か間違っているのか?
他のブログ(=Livedoor blog)で、トップページ内の複数の記事毎に『関連する記事』を表示させているのがありました。
なぜそのブログでは複数表示できているのに、このブログでは1個しか表示できないのか?
『Seesaa』ブログ固有の現象なのか、それとも自分が何か間違っているのか?
(2) 設置後すぐに『関連する記事』が表示された
『Zenback』の場合は表示されるまでにかなりの時間を要しましたが、驚くことに『LinkWithin』は設置してから即表示されました。
(3) トップページ内に表示される『関連する記事』はランダムらしい
表示更新するたびに異なる記事のタイトルが表示され、どう考えても関連しないと思われる記事のタイトルも表示されました。
そのかわり、個別の記事単体ページに表示された『関連する記事』の内容は固定されており、かなり精度が高いと思いました。
(4) 記事のタイトルが古い内容で表示された
1週間以上前にタイトルを変更した記事がいくつかあるのですが、なぜかそれらは変更する前のタイトルで表示されました。
いったいどこから記事のタイトルを引っ張ってきているのか不思議でした。
(5) 画像を含まない記事のタイトルは、どのように表示されるのか分からない
自分は記事のタイトル部分に、いわゆる遊び心でセロテープの画像を表示しているのですが、画像を含まない記事では、なぜかそのセロテープの画像が表示されていました。(下の画像で左から3つ目)
以上です。
スポンサーリンク
【カテゴリ:パソコン ブログカスタマイズの記録】の最新記事
- 今更ですが、サイドバーにアクセスカウンターを設置した
- 『Seesaa』ブログでカテゴリの一覧表示をツリー化した
- 『Seesaa』ブログで『記事のコンテンツHTML』を新しいソーシャルボタンの仕様に対応させた
- 『Seesaa』ブログで記事の中の画像に枠を付ける方法について
- 『Seesaa』ブログでCSS(スタイルシート)やHTMLを編集する際の手順
- 『Seesaa』ブログで『続きを読む』の文言を表示させる方法を変更した
- 『Seesaa』ブログでディスク使用量が2GBに到達したので『ストレージプラン』を申し込んでみた
- 『Seesaa』ブログのスマホ用ページに『Google Analytics』を設置する手順
- 『Seesaa』ブログに『3D球体タグクラウド』を設置してみた
- 『ブログカスタマイズ』最近変更した箇所のまとめ
- 『Seesaa』ブログでカテゴリの一覧を『メニューバー』のように表示させてみた
- サイドバーに『CUBACLOCK』のブログパーツを設置した
- 『Seesaa』ブログで記事本文の右上に『カテゴリ』を表示するようにした
- 『Seesaa』ブログで『続きを読む』の文言を画像で表示することができた
- 『我RSS』を利用して『最近の記事』の一覧を画像付きで表示するようにした
- ユニクロのブログパーツ『UNIQLO CALENDAR』と『UNIQLOCK』をサイドバーに設置した
- 『ACR WEB』の『ページランキング』で画像が表示できた
- 『Seesaa』ブログで記事タイトルの右上に画像を表示させてみた
- 『Seesaa』ブログに『ファビコン』を設置した
- 『最近のコメント』と『最近の記事』の一覧にスクロールバーを付けた