2015年01月26日

サムネイル付き関連記事の表示:LinkWithin(seesaaブログ)

ブログパーツ「 LinkWithin 」は、ブログ記事の関連記事を画像サムネイル付きで表示してくれる便利なパーツ(Web widget)です。プラグインを使わずに簡単な設定で、表示している記事に自動でサムネイル付きで関連記事を表示してくれます。
Wordpress は関連記事プラグインが沢山あるので、Linkwithin は使いませんが、Seesaa や FC2、So-net、Ameba、Google Blogger などの無料ブログは Linkwithin が簡単で便利です。

【設置手順】
  1. 公式サイト「 LinkWithin 」からリンク用コードを入手
  2. そのコードをブログの「記事」HTMLに貼り付け
【設置方法】
「 LinkWithin 」からリンク用コードを入手
  1. 公式サイト「 LinkWithin 」から、ブログパーツのリンク用コードを入手します。画面右の入力欄にブログの情報を記入し「Get Widget!」をクリックします。
    seesaawidget1.jpg

    • Email: 自分のメールアドレスを入力します。
    • Blog Link: ブログのURLを指定。ここで指定したブログの関連記事が表示されます。
    • Platform: Seesaaブログの場合は「Other」を選択します。
    • Width: 何列表示にさせるかを選択します(3列、4列、5列)。※記事の横幅に合わせて自動的に stories数を選択してくれるので、5 storiesを選択しておきます。
    • My blog has light text on a dark background: ブログの背景色を暗い色を使用している場合、チェックを入れると明るい文字の色で表示されます。

  2. リンク用コードが表示されるのでコピーします。
    seesaawidget2.jpg
  3. 最初に登録したWidth数を変更するには、登録時と同じメールアドレス、ブログURL、プラットフォーム「Other」を入力し、Widthで新しい値を選択して「Get Widget!」をクリックすれば変更できます。

コードをブログの「記事」HTMLに貼り付け
リンク用コードの貼り付け位置はブログの<body>内であればどこでもOKです。表示位置を指定しなければ、関連記事は記事直下に表示されます。以下は「記事」HTMLに貼り付けるときの手順です。
  1. 「デザイン」→「コンテンツ」→ブログパーツの「記事」をクリックします。
  2. 「コンテンツHTML編集」をクリックしてソースを表示します。
  3. コードに見出しの日本語表示(赤字部分)を追加して、任意の場所に貼り付けます。(例:文末の<% content.footer -%>の後など)
    <script>
    var linkwithin_site_id = xxxxxxx;
    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>

  4. 保存して完了です。以下のように記事直下に関連記事が表示されます。
    seesaawidget3.jpg

表示のカスタマイズ 〜(参考URL)Linkwithin:カスタマイズ
  1. 関連記事を指定した場所に表示する
    特に指定しなければ、関連記事は記事直下に表示されますが、指定した場所に表示したい場合はその場所に下記のタグを設置します。
    <div class="linkwithin_div"></div>
  2. 記事ページにのみ関連記事を表示する
    indexページ、カテゴリページ、過去ログページなどの1記事目に関連記事を表示したくない場合は、以下のようにリンク用コードをif文で括ります。
    <% if:page_name eq "article" -%>
     リンク用コードの上下にif文を追加
    <% /if -%>
  3. 文字サイズやレイアウトの微調整を行う
    文字サイズやレイアウトの微調整などを行うにはスタイルシートで行います。リンク用コードの下に続けて<Style>を設定します。
    <style>
    .linkwithin_text{font-size:20px;} /* 見出し文字の大きさ */
    .linkwithin_posts{margin-top:-10px!important;} /* 見出しと記事の間隔を調整 */
    .linkwithin_posts a{padding:15px!important;} /* 記事間の余白の調整 */
    .linkwithin_inner{width:100%!important;} /* 記事幅一杯に表示 */
    </style>
    ※15pxで「記事間の余白の調整」を行うと3記事+1記事の2列表示になりますが「記事幅一杯に表示」を追加することで4記事の1列表示に収まります。
    【調整前】
    seesaawidget6.jpg
    【調整後】
    seesaawidget7.jpg

  4. 記事の表示領域の調整
    記事の表示領域には「サムネイル画像+記事タイトル4行」の領域が取られていますが、表示領域の高さを調整し、記事タイトル2行に収め下部の余白を詰めます。
    <style>
    .linkwithin_posts{height:143px;overflow:hidden;}
    </style>
    seesaawidget9.jpg

  5. 記事のタイトルを画像に重ねる
    サムネイル下に表示される記事タイトルを画像に重ねて表示します。背景をベタ塗りでなく半透明にしたい場合は「background:#202020;」を「background-color:rgba(32,32,32,0.5);」に変更、RGB値の「32」は16進数「20」を10進数に変換した値です。
    <style>
    .linkwithin_title_0{margin-top:-28px!important;background:#202020;color:#ffffff!important;}
    .linkwithin_posts{height:112px;overflow:hidden;}
    </style>
    seesaawidget5.jpg
    【半透過】「background-color:rgba(32,32,32,0.5);」
    seesaawidget8.jpg

  6. 2段表示にする
    LinkWithinは記事幅に応じて配信記事数を決定しているので、スタイルシートで横幅を強制的に縮小して指定すれば2列表示も可能です。但し「記事タイトルの表示領域の調整」「画像に記事を重ねる」表示の場合は、2列表示にはならず1列2記事表示になります。
    <style>
    .linkwithin_inner{width:250px!important;}
    </style>
    seesaawidget4.jpg


posted by 趣味の園芸 at 14:29 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする

2015年01月22日

タグクラウドの項目ソートと文字サイズの変更(seesaaブログ)

seesaaブログのタグクラウドは、タグの文字が大きすぎたり、多すぎたりして、レイアウトに合わない場合があります。標準では、文字コード順にタグが並び、タグの登録記事数に応じて文字の大きさが変更されるようになっています。これを登録記事の多い順に並べ替えて、かつ登録記事数をカッコ書きで表示します。

また、文字サイズは、Seesaaの内部で計算して指定しているため、文字サイズの変更が効きませんが、この内部関数にパラメータを与えてやれば、文字サイズを簡単に変更することができるので、その方法を紹介します。

【変更手順】
【変更前(デフォルト)】→seesaatag3.gif【登録記事数追加】→seesaatag4.gif【記事数の多い順に並べ替え】→seesaatag5.gif
【文字サイズの変更】→seesaatag6.gif【単語の途中で改行しない】seesaatag7.gif 
【変更方法】

登録記事数追加
  1. 「デザイン」→「PC」→「コンテンツ」→ブログパーツの「タグクラウド」をクリックします。
  2. 「コンテンツHTML編集」をクリックしてソースを表示します。
  3. 下のソースコードの中に、下段のように赤字部分を追加します。
    <% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%>
    <% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %>(<% count %>)</a> <% /loop -%>
  4. 保存して完了です。

記事数の多い順に並べ替え(ソート)
seesaaブログのタグクラウドは、「 <a style="font-size:内部計算されたpx値" class="_tag" title="タグ名/登録記事数" href="タグurl">タグ名</a> 」の形式で class属性「_tag」、title属性「タグ名/登録記事数」で記述されています。seesaaブログ以外で下記ソースコードを利用する場合は、そのブログのclass属性に合わせ、title属性からの登録記事数抽出のソースコードの変更が必要です。
  1. 「デザイン」→「PC」→「コンテンツ」→ブログパーツの「タグクラウド」をクリックします。
  2. 「コンテンツHTML編集」をクリックしてソースを表示します。
  3. <script type="text/javascript" language="javascript"><!--
    tag_cloud("tag_cloud_<% content.id %>");
     < ここに下記ソースコードを挿入 >
    --></script>
    /* タグクラウドの項目ソート by 菊池さんの工作室(2015.1.20) */
    function tag_cloud_sort(id) {
    var parent, child, a, c, e, i, tmp = "", tags = new Array();
    parent = document.getElementById(id); //指定idの要素取得
    child = parent.getElementsByTagName('a'); //指定idのAタグ要素の全取得
    for (i = 0; i < child.length; i++) {
    e = child.item(i); //Aタグ要素
    if (e.id == 'tag' || e.className == '_tag') {
    a = e.outerHTML; //AタグのHTML文
    c = parseInt(e.title.split('/').pop()); //登録記事数抽出
    tags.push([a,c]);
    }
    }
    //二次元配列 tags[a,c] を2列目(col=1)で降順ソート
    xsort(tags,1,-1);
    //並べ替え後のHTML文生成
    for (i = 0; i < tags.length; i++) {tmp += tags[i][0] + " ";}
    parent.innerHTML = tmp;
    } //end of tag_cloud_sort
    function xsort(sqs,col,order) {
    //sqs:配列、col:並べ替えの対象となる列、order:1=昇順 -1=降順
    sqs.sort(function(a,b){ return((a[col]-b[col])*order); });
    return(sqs);
    } //end of xsort
    //降順並べ替えの実行
    tag_cloud_sort("tag_cloud_<% content.id %>");
  4. 保存して完了です。

文字サイズの変更
  1. タグクラウドのブログパーツで使われている seesaa内部関数 tag_cloud()は、tag_cloud ( id, レベル, 最小文字サイズ ) と文字サイズ計算に係るパラメーターが指定できるようになっています。
  2. 「レベル」は、文字サイズを計算する際の、最大文字サイズのリミッターのようなもので、値が小さいほど最大文字が小さくなり、指定しないと「15」が設定されます。「最小文字サイズ」は、最小の文字の大きさ(px値)で、これ以下には小さくなりません。指定しないと「11」が設定されます。この内部関数のパラメーターを利用して、文字の大きさを変更します。
  3. 「登録記事数追加」と同じソースの数行下に「tag_cloud("tag_cloud_<% content.id %>");」文がありますので、下記のようにパラメーターを追加します。
    tag_cloud("tag_cloud_<% content.id %>");
      ↓
    tag_cloud("tag_cloud_<% content.id %>",5,10);
  4. 4.保存して完了です。

単語の途中で改行しないように変更
  1. 「登録記事数追加」と同じソース行の中に、赤字部分を追加します。
    <% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><nobr><% tag.word | html %>(<% count %>)</nobr></a> <% /loop -%>
  2. 保存して完了です。
posted by 趣味の園芸 at 20:41 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする

2015年01月21日

タグページのカスタマイズ(seesaaブログ)

タグクラウドのタグ名がクリックされたときに開くタグ記事一覧ページは、Seesaaブログのデフォルトのままだと項目が表示されるだけで、ユーザーフレンドリーとは言えません。ユーザーに分かり易いタグページと成るようカスタマイズを行います。

【変更点】
  1. タイトルを分かり易くし、何の記事リストなのか明確にする
  2. 日付形式の変更(時刻の削除)
  3. 記事タイトルに加え、本文の冒頭部分を表示する
  4. 文末のタグクラウド表示内のタグ名に記事数を追記する
【変更前(デフォルト)】
seesaatag1.gif
【変更後(カスタマイズ後)】
seesaatag2.gif

【変更方法】
「デザイン」→「PC」→「HTML」から使用中デザインのタイトル名を選択すると、HTMLソースが表示されます。当ブログの「HTMLソース全文」を参照しながら、以下の5カ所の変更を行います。

※HTMLソースでは、オリジナル行の文頭に「<!--」、文末に「-->」を追記しコメント行に変更しています(変更(4)は逆にコメント行から実行文に変更)。その下の行に変更後のコードが記述されています。(HTMLソースを「変更」というワードで検索すると変更箇所を簡単に見つけられます)

タイトルを分かり易くし、何の記事リストなのか明確にする
  • 「タグ / 四季の花」→「タグ ' 四季の花 ' が登録された記事一覧」に変更(変更(1))
  • 「記事」を削除(変更(2))
日付形式の変更(時刻の削除)
  • 「[2014/12/17 10:44]」→「(2014/12/17)」に変更(変更(3))
記事タイトルに加え、本文の冒頭部分を表示する
  • オリジナルでは「本文の冒頭部分の表示」行がコメント化されてるので実行文に戻す(変更(4))
文末のタグクラウド表示内のタグ名に記事数を追記する
  • 「趣味の園芸」→「趣味の園芸(12)」等に変更(変更(5))
posted by 趣味の園芸 at 19:50 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする

2015年01月17日

パソコンでスマートフォン表示を見る方法(Safari/Google Chrome)

パソコン用のブラウザのユーザーエージェント(端末情報)を変更して、パソコンからスマホ版表示を見れるようにすると、スマホでどのようにサイトが表示されるのかが確認でき便利です。

【Safari編】
Safari には標準でユーザーエージェントを変更する機能が用意されています。メニューバーに「開発メニュー」アイコン(赤枠)が表示されてないときは、メニューバーの「歯車アイコン」→「設定」→「詳細」タブを選択 →「メニューバーに"開発"メニューを表示」にチェックを入れると表示されます。

seesaa3.jpg

【使用方法】
  1. メニューバーの「開発メニュー」アイコンをクリックし、「開発」→「ユーザーエージェント」→「iPhone」と選択します。
  2. これで Safari のユーザーエージェントの変更は完了。Safari からスマホ用のサイトが見られるようになります。
  3. 元に戻す時は「開発」→「ユーザーエージェント」→「デフォルト(自動選択)」を選択します。
  4. デフォルトで用意されているユーザーエージェントは、Safari / Safari iOS / IE / Firefox / Opera です。
    新しく追加したい場合は、ユーザーエージェント一覧などを参考に「その他」から追加します。

【Google Chrome編】
seesaa1.jpgGoogle Chromeの拡張機能 Chrome UA Spoofer「User-Agent Switcher for Chrome」をインストールすると、ユーザーエージェントを簡単に変更することができ、iPhoneだけではなく、Androidやタブレット端末でどのように表示されるかをチェックできます。

【使用方法】
  1. Chrome ウエブストアから「User-Agent Switcher for Chrome」をインストールします。
  2. ツールバー上の seesaa2.jpg アイコンをクリックし、目的とするデバイスを選択すればOK です。
  3. 元に戻す時はseesaa2.jpg アイコンをクリック →「Chrome」→「Default」を選択します。
  4. デフォルトで用意されているユーザーエージェントは、IE / Firefox / Opera / Safari / iPhone / iPad / Android / Windows Phone です。
    新しく追加したい場合は、ユーザーエージェント一覧などを参考に「seesaa2.jpg右クリック」→「オプション」から追加します。
posted by 趣味の園芸 at 15:38 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする

スマホ版の広告を非表示にする方法(seesaaブログ)

Seesaaブログは、管理画面で広告非表示の設定(方法はこちら)を行うと、PCからの閲覧では広告は表示されませんが、スマートフォンで閲覧した場合、スマホ版ページ、PC版ページとも広告が表示されてしまいます。この広告を非表示にするには、スタイルシートで広告ごとに非表示の設定を行います。

seesaa1.jpgこの方法では、Seesaa側の広告仕様の変更や追加があると、再び新しい広告が表示されてしまいますので、非表示にするためのコードをどんどん更新していかないといけないというイタチごっこの煩わしさもあります。
なお、無料ブログの広告表示を消すことは、利用規約に抵触する可能性があります。広告の非表示化を実装するに当たっては、自己責任でお願いします。

(参考URL)「メモロウ」さんの
      Seesaaブログのスマホ広告を非表示にする方法

【設置手順】
  1. スマホ版のスタイルシート編集
  2. PC版のスタイルシート編集
【設置方法】
スタイルシートを変更するのは PC版 CSS とスマホ版 CSS の両方です。管理を簡単にするため同じものを PC 版とスマホ版の CSS にそれぞれ追記します。

スマホ版のスタイルシート編集
  1. 「デザイン」→「スマートフォン」→「デザイン一覧」から使用中デザインのタイトル名を選択
  2. スタイルシートが表示されるので、最下部に「広告非表示化のCSS」を追加します。
  3. 保存して完了です。
PC版のスタイルシート編集
  1. 「デザイン」→「PC」→「デザイン設定」から使用中デザインのタイトル名を選択
  2. スタイルシートが表示されるので、最下部に「広告非表示化のCSS」を追加します。
  3. 保存して完了です。
広告非表示化のCSS(2015.1.7時点)
/* 広告非表示(スマホ用) こちらの削除方法は2014年9月27日現在で有効な方法です*/
[id*="adArea"] {visibility:hidden;height:0px;}
[id*="jt:seesaa_seesaa"] {display:none;visibility:hidden;height:0px;}
[class*="adlantis"] {visibility:hidden;}
[id*="adblock"] {display:none;visibility:hidden;height:0px;}
[class*="ad_block"] {display:none;visibility:hidden;height:0px;}
[class*="seesaaAdA"] {display:none;visibility:hidden;height:0px;}
.seesaa-adLink, .adlink, .adBoth, .adText, .adUrl, .adImage, .adSponsor, .adSponsorUrl, .adHr {visibility:hidden;height:0px;width:0px;}
[class*="ad_frame"] {display:none;visibility:hidden;height:0px;}
[class*="adlantis_sticky_zone"] {display:none;}
[id*="androidGame"] {display:none;visibility:hidden;height:0px;}
[class*="ichioshi"] {display:none;visibility:hidden;height:0px;}
[class*="top-ad"] {display:none;visibility:hidden;height:0px;}
[class*="im_ad"] {display:none;visibility:hidden;height:0px;}
[class*="androidgame"] {display:none;visibility:hidden;height:0px;}
[id*="iphonead"] {display:none;visibility:hidden;height:0px;}
[id*="iphoneFooterAd"] {display:none;visibility:hidden;height:0px;}
[id*="androidFooterAd"] {display:none;visibility:hidden;height:0px;}
[id*="adstir_ad"] {display:none;visibility:hidden;height:0px;}
[class*="seesaa-adBox"] {display:none;visibility:hidden;height:0px;}
[class*="adBox"] {display:none;visibility:hidden;height:0px;}
[class*="adTitle"] {display:none;visibility:hidden;height:0px;}
[id*="adcon"] {display:none;visibility:hidden;height:0px;}
[id*="imobile_adspotdiv"] {display:none;visibility:hidden;height:0px;}
[id*="ad_cloud_overlay_space"] {display:none!important;visibility:hidden;height:0px;}
.ad-area, .ad-area div, .ad-area.ad-footer div {display: none!important;visibility: hidden;}
[id*="nend_banner_img"] {display:none!important;visibility:hidden;height:0px;}
[id*="adingoBeagle"] {display:none!important;visibility:hidden!important;height:0px!important;}

/* 以下は2014年10月11日追加 */
[id*="kauli_yad_js_1"]{display:none!important;visibility:hidden;height:0px;}
[id*="yjAdwrapper"]{display:none!important;visibility:hidden;height:0px;}
[id*="adunit"]{display:none!important;visibility:hidden;height:0px;}
[id*="ads"]{display:none!important;visibility:hidden;height:0px;}
[class*="bottom_fixed_ad"] {display:none!important;visibility:hidden;height:0px;}
[class*="soc_dest"] {display:none!important;visibility:hidden;height:0px;}

/* 以下は2015年1月7日の追記 */
[id*="imobile_adspotdiv1"]{display:none!important;visibility:hidden;height:0px;}
[id*="fluct_ad_unit_1000001623"] {display:none!important;visibility:hidden;height:0px;}
[class*="fluct_ad_container"] {display:none!important;visibility:hidden;height:0px;}
[class*="tapone"] {display:none!important;visibility:hidden;height:0px;}

/* 広告非表示(PC用) こちらの削除方法は2014年9月27日現在で有効な方法です*/
[id*="nend_adspace"] {display:none!important;visibility:hidden!important;height:0px!important;}
[class*="adlantis_banner_image"] {display:none!important;visibility:hidden!important;height:0px!important;}
/* 「スマートフォン専用ページを表示」を消す */
#iphone-link { display: none !important; }

(参考)管理画面の広告非表示の設定方法(seesaaブログ)
  • 「設定」→「ブログ設定」→「共通ヘッダー」を「表示しない」に
  • 「設定」→「記事設定」→「広告の表示」を「無効」に
  • 「設定」→「広告設定」→すべての項目を「広告を表示しない」に
  • 「デザイン」→「PC」→「コンテンツ」のピンク色のブログパーツは広告ですので全て削除
    (※スマホ版のコンテンツには広告ブログパーツはありません)

posted by 趣味の園芸 at 01:37 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする

2015年01月16日

カテゴリーのツリー化(seesaaブログ)

seesaa.jpgseesaaブログでは、カテゴリのツリー化の設定はできませんが、プラグインを使うことで、カテゴリをツリー化することが可能になります。
ツリー化を行うことによってサブカテゴリーが作られ、カテゴリーが増えても綺麗に整理できます。【設置手順】
  1. 配布サイトから、カテゴリーのツリー化のプラグインを入手
  2. 「カテゴリー」の「コンテンツHTML編集」のソースを、入手したプラグインと置き換え
  3. 「カテゴリー設定」を編集して、ツリーの親子関係を設定
  4. 必要なら、自分のページに合せた表示のカスタマイズを行う
【設置方法】

配布サイトから、カテゴリーのツリー化のプラグインを入手
  1. 「Lc-Factory@Seesaaブログ」さんのsLc.ツリーカテゴリー(for Seesaa)を配布ですから、プラグインを入手します(再配布はNGです)。
  2. ツリー化&折りたたみだけなら、プラグインのソース変更は不要です。必要なら、動作確認後、自分のページに合った表示のカスタマイズを行いましょう。
「カテゴリー」の「コンテンツHTML編集」のソースを、入手したプラグインと置き換え
  1. 「デザイン」→「コンテンツ」→ブログパーツの「カテゴリ」をクリックします。
  2. 「表示件数」を100に変更して、「保存」を押します。
  3. 「コンテンツHTML編集」をクリックしてソースを表示します。
  4. テキストエリアの内容を削除し、入手したプラグインソースと置き換えます。
  5. 保存して完了です。
「カテゴリー設定」を編集して、ツリーの親子関係を設定
  1. 「設定」→「カテゴリ設定」→ツリー化したい「記事カテゴリ名」をクリックします。
  2. グループ「園芸」、カテゴリー「家庭菜園」「四季の花」「園芸作業」にツリー化したい場合は、グループ名とカテゴリー名の間に全角スペースを入れて、それぞれの記事カテゴリー名を「園芸 家庭菜園」「園芸 四季の花」「園芸 園芸作業」に変更します。
  3. 保存して完了です。ここまでの変更でカテゴリーがツリー化されて表示されます。
自分のページに合せた表示のカスタマイズを行う
  1. デフォルト設定では全てのツリーを開いて表示します。グループ名の先頭に、半角の『.』(ピリオド)を付けておくと、そのグループは、初期表示で閉じた状態になります。
  2. 全てのツリーを閉じて表示したい場合は、「LC_CAT_DEFAULT_OPENED = true;」を「false」に変更します。
  3. 「LC_CAT_DEFAULT_OPENED = false;」(全部閉じた状態)で、グループ名の先頭に、半角の『.』(ピリオド)を付けて、一部のみ開いて初期表示したい場合には(文頭の画像)、ソースコードの206行からの3行を赤字のように変更します。
    if (sKey.substring(0,1) == '.') {
    dispStyle = 'inline';
    dispIcon = LC_CAT_BOX_OPENED;
    grTitle = LC_CAT_TOCLOSE;

    grCap = sKey.substring(1,sKey.length);
    }
  4. カテゴリー名の先頭の「★」を消すには、「LC_CAT_CATEGORY_MARK = "★";」を「LC_CAT_CATEGORY_MARK = "";」に変更します。
posted by 趣味の園芸 at 19:27 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする

サイドバーを折りたたむ方法(seesaaブログ)

seesaa.jpgブログを続けているとサイドバーにいろいろな項目が増えて、どんどん長くなってきます。普段は折りたたんでおき、必要な度、開閉してもらうようにしておくと画面も見やすくスッキリします。
【設置手順】
  1. jsファイル(sidebarfold.js)を作成し、ファイルマネージャーでサーバーに転送
  2. sidebarfold.jsのリンク文をブログパーツ内に記述
  3. スタイルシート文末に「ボタンの色を開閉で変える」を追加

【設置方法】

jsファイル(sidebarfold.js)を作成し、ファイルマネージャーでサーバーに転送
  1. 下記の折りたたみスクリプト(sidebarfold.js)をコピーします。
    /* 折りたたみスクリプト */
    function toggleOpenClose(id,val){
    if(val == "▲"){
    document.getElementById(id).style.display = "none";
    document.getElementById('btn' + id).value = "▼";
    document.getElementById('btn' + id).className = "btnunfold";
    } else {
    document.getElementById(id).style.display = "block";
    document.getElementById('btn' + id).value = "▲";
    document.getElementById('btn' + id).className = "btnfold";
    }
    }
    function getButton(obj, i , sInner , bDefaut){
    var ret;
    var val;
    var classname;
    if ( bDefaut ) { val = "▲"; classname = "btnfold"; }
    else { val = "▼"; classname = "btnunfold"; }
    ret = '<div align="center">'+'<label for="btncolumn' + i + '" class="columntitle">' + sInner + '</label>'+'<input type="button" value="' + val + '" id="btncolumn' + i + '" class="' + classname + '" onclick="toggleOpenClose(\'column' + i + '\',this.value);"/>'+'</div>';
    obj.setAttribute("id", 'column' + i);
    return ret;
    }

    /* 折りたたみ箇所指定 */
    var aryTitle = new Array();
    var aryDefault = new Array();
    aryTitle[1] = "カテゴリ";
    aryDefault[1] = true;
    aryTitle[2] = "過去ログ";
    aryDefault[2] = false;
    aryTitle[3] = "記事検索";
    aryDefault[3] = false;
    aryTitle[4] = "お気に入りリンク";
    aryDefault[4] = false;

    /* 折りたたみ処理 */
    var aryDiv = document.getElementsByTagName("div");
    var sTmpInner;
    for(var j = 0; j < aryDiv.length; j++){
    if(aryDiv[j].getAttribute("class") == "sidetitle" || aryDiv[j].getAttribute("className") == "sidetitle"){
    sTmpInner = aryDiv[j].innerHTML;
    for(var i = 0; i < aryTitle.length ; i++){
    if (sTmpInner.indexOf(aryTitle[i]) != -1 ) {
    aryDiv[j].innerHTML = getButton(aryDiv[j+1], i , sTmpInner , aryDefault[i]);
    }
    }
    }
    }
    if(document.getElementById){
    document.writeln('<style type="text/css" media="all">');
    document.writeln('<!--');
    for(var i = 0; i < aryDefault.length ; i++){
    if( aryDefault[i] ){
    document.writeln('#column' + i + '{display:block;}');
    } else {
    document.writeln('#column' + i + '{display:none;}');
    }
    }
    document.writeln('-->');
    document.writeln('</style>');
    }
  2. コピーしたスクリプトを、メモ帳などで jsファイル(名前 sidebarfold.js)として保存します。変更が必要な箇所は「/* 折りたたみ箇所指定 */」の部分のみです(スクリプト中の記述例は上記画像のようになります)。
  3. スクリプト中の/* 折りたたみ箇所指定 */で、折りたたみたいブログパーツ名と、開いておく場合は「true」、閉じておく場合は「false」をセットで指定します。
  4. 作成した sidebarfold.js を、ファイルマネージャーでサーバーに転送します。
sidebarfold.jsのリンク文をブログパーツ内に記述
  1. サイドバーの最下部に「自由形式」のブログパーツを新たに追加します。追加した場所より上の部分にしかスクリプトが効かないので、「seesaaロゴ」のブログパーツの後に追加するといいでしょう。
  2. 追加したブログパーツ内に、sidebarfold.js ファイルへの下記リンク文を記述します。○○○○以下は上記手順4でアップロードしたsidebarfold.js ファイルのURLに変更します。また、文字コードは Shift-JIS で保存してるので、charset="EUC-JP"は削除します。
    <script language="JavaScript" type="text/javascript" src="https://○○○○.up.seesaa.net/image/sidebarfold.js"></script>
  3. 保存して完了です。
スタイルシート文末に下記「ボタンの色を開閉で変える」を追加
  1. デザイン → デザイン設定から使用中のスタイルシートを開き、文末に下記「ボタンの色を開閉で変える」を追加します。
    /* ボタンの色を開閉で変える */
    /* 折りたたみ閉ボタン▲ */
    .btnfold{
    font-size:8pt;
    color:#697497;
    border:1px solid #697497;
    background:#FDFDFD;
    height:14px;
    width:24px;
    }
    /* 折りたたみ開ボタン▼ */
    .btnunfold{
    font-size:8pt;
    color:#DC143C;
    border:1px solid #DC143C;
    background:#FFFAFA;
    height:14px;
    width:24px;
    }
  2. 保存して完了です。
posted by 趣味の園芸 at 12:14 | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
Related Posts Plugin for WordPress, Blogger...
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。