LinkWithinのちょっとした裏技 【カスタマイズ】

基本的な使い方

・LinkWithinをBlogger,WordPress,アメブロなどのブログに見出し付きで導入する方法

見出しタイトルを画像化する

タイトル変更は以下のようにするわけですが、linkwithin_textに設定する値は、HTMLタグが含まれていてもOKなのです。それ利用すると、タイトルを画像化したり、装飾したりすることが簡単になります。

<script>
var linkwithin_site_id=あなたのID;
var linkwithin_text='関連記事';
</script>

関連記事の部分をHTMLタグ入りで記入してください。

サンプル例：

横幅を調整したい、２段化したい

<style>
.linkwithin_outer,.linkwithin_inner,.linkwithin_posts{
  width:250px!important;
}
</style>

基本は、横幅は３個から5個の画像で１段構成なんですね。
でも、携帯サイトとかWptouchとか使用している場合に、３個でもおさまらないときがあります。
その時に横幅などを調整しましょうという方法です。

スタイルシートで横幅を指定することで解決できます。importantをつけて強制上書きで指定してください。

サンプル例：

挿入する位置を変更する

<div class="linkwithin_div"></div>

表示したい場所に明示的に上記のコードを入れると、その場所に挿入されるようになります。
スクリプトタグはどこにおいてもよくなりますので、HTMLソースの後ろのほうに配置するのが良いと思います。LinkWithinというブログパーツが遅いということはあまりないようですが、何らかの原因で遅くなってもこうしておくと、ページの表示できるところだけ先に表示してくれる場合が多いのでお勧めです。

見出しの下が空きすぎている

<style>
.linkwithin_posts{
  margin-top:-20px!important;
}
</style>

上に-20px上にずらして幅を狭める。このあたりは調整してみてください。

文字を画像の上に重ねてスリム化する

<style>
.linkwithin_title_0{
 margin-top:-25px!important;
 padding:10px 0;
 background:#202020;
 color:#ffffff!important;
}

.linkwithin_posts{
 height:130px!important;
 overflow:hidden;
}
</style>

サンプル例：

LinkWithinの構造

■全体の構造

<div class="linkwithin_div">
<div id="lws_0">
<div class="linkwithin_outer">
<div class="linkwithin_inner">
<div id="linkwithin_text_0" class="linkwithin_text">
関連記事</div>
</div>
<div class="linkwithin_posts">
[画像][画像][画像]
</div><!-- /linkwithin_posts -->
</div><!-- /linkwithin_inner -->
</div><!-- /linkwithin_outer -->
</div><!-- /lws_0 -->
</div><!-- /linkwithin_div -->

■１記事の構造

<div>
<div class="linkwithin_img_0">
[画像]
</div>
<div class="linkwithin_title linkwithin_title_0">
[記事タイトル]
</div>
</div>

こういう構造になっているので、スタイルシートで属性を上書きすればいろいろ変更可能です。