【Seesaaブログ新デザインシステム】サイドバー「タグクラウド」に記事数を表示、タグの文字サイズ変更、単語の途中で改行しないようにする|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。右カラム」のサイドバーの「タグクラウド」を編集します。Seesaaブログのサイドバーのタグクラウドは、タグの登録記事数に応じて文字の大きさが変更されるように設定されています。これがちょっとデカすぎるような気がしますので、どうにかしたいと思いました。あとはタグの後ろに記事の件数を表示させたり、単語の途中で改行しないようにしたり、細かい部分を編集したいと思います。現時点のサイドバー「タグクラウド」この画像は現時点のサイドバーの「タグクラウド」ですが、タグ登録件数が少ないので文字の大きさの違いについてはよくわからないかもしれません。最後にどんな風に変わったのか画像を掲載したいと思いますので、とりあえずはこの状態から編集していきます。順番にカスタマイズしていこうと思います。ちなみに今回のカスタマイズでは、こちらのサイト様の記事を参考にしました。■タグクラウドの項目ソートと文字サイズの変更(seesaaブログ)参考にしたというか、ほとんどそのまま使わせていただきました。ありがとうございました。わけのわからない私の記事を読むよりは、参考サイト様のページをご覧になった方がわかりやすいと思います。あと、この記事で編集した内容は、「タグ一覧ページのタグクラウドのタグ」に対する設定とほとんど同じ内容になります。サイドバーだけではなくタグ一覧ページのタグクラウドも同じように設定したい場合は、こちらの記事をお読みください。■【Seesaaブログ新デザインシステム】タグ一覧ページ「タグクラウド」に記事数を表示、単語の途中で改行しないようにする「タグクラウド」はサイドバーにだけ表示されるものではありません。タグをクリックして開いたページ、つまり「タグ一覧ページ」にも「タグクラウド」が表示されます。今回は「タグ一覧ページのタグクラウドのタグ(単語)」....タグクラウドに記事件数を表示するサイドバーのタグクラウドに、記事の件数を表示させます。タグが登録された記事が何件ぐらいあるのか閲覧者にわかった方がいいかな?と思ったので、まあ、簡単に編集できるし、やってみたいと思います。ちなみにこのやり方は、「タグ一覧ページ」のタグクラウド部分にも使えます。→<■タグ一覧ページ「タグクラウド」に記事数を表示、単語の途中で改行しないようにする>コンテンツHTMLを編集します。360行目にあります。367行目にあるコード記述が、タグ(単語)の表示設定部分です。タグクラウドのタグ(単語)を編集したい場合は、この部分をいじります。)」で挟んであげて「(10)」のように件数を表示させたいと思います。%>」タグが存在しますが、これはリンク部分にマウスを乗せた時に表示される言葉(タグ)に付いている記事件数であり、マウスをリンク部分に乗せなければ表示されないものです。私は、マウスをタグのリンク部分に乗せなくても記事件数を表示させたいので、下記のように編集するわけです。タグのリンク部分にマウスを乗せた時の表示も変更します。この記事の下部で説明しています。%>)」を追加します。-%>」と「</a>」の間、です。-%>コード編集後のコンテンツHTMLと実際のページ記事の件数を表示することができました。タグの文字サイズと同じサイズで件数が表示されているので、タグの文字サイズが大きいと件数まで大きくなってしまいますね。邪魔なような気もします。タグクラウドの件数のフォントサイズを変更するタグクラウドはタグの登録記事数に応じて文字サイズ(フォントサイズ)が変更されます。記事数が多いとタグの文字サイズも大きくなり、記事数が少ないとタグのサイズも小さくなるわけです。(というか、記事件数部分までリンク設定しているからこういうことになるんですけどね)タグ(単語)と記事数(件数)が同じように大きくなると邪魔なので、件数部分のフォントサイズを一定のサイズに指定して、少し小さく表示したいと思います。%>)」に文字サイズを設定します。Seesaaブログの設定により、タグクラウドのタグ(単語)の最小フォントは「11px」です。このサイズは変更することができません。【注意】タグクラウドのタグ(単語)のフォントサイズはSeesaaの内部で計算して指定しているらしく、例えば最小フォントサイズ「11px」を変更するためには「JavaScript(ジャバスクリプト)」を編集しなければいけません。できないことは無いけれども非常に面倒です。私みたいな素人は触らない方が賢明だと判断しましたので、Seesaaブログが指定しているフォントサイズは変更しないことにします。しても変更したい場合は、ご自分でお調べください。ちなみに、この記事の下の方で「できるだけ同じような大きさの文字を表示する」ためにパラメーターを設定していますので、正確にタグのフォントサイズを変更することはできないけれども、似たようなサイズに変更することはできます。最小フォントは「11px」なので、件数のフォントサイズも「11px」にしたいと思います。style="font-size:11px;">」と「</span>」で挟みます。-%>コード編集後のコンテンツHTMLと実際のページ記事件数のフォントサイズが一定になりました。タグのサイズがどんなに大きくなっても、件数のフォントサイズは「11px」で表示されます。タグにマウスを乗せた時の表示を変更するタグにマウスを乗せた時の表示とは、コレです。こんなもの、別にどんな表記でもかまわないかもしれません。タグに件数を表示させなかった場合、そのタグに何件の記事が登録されているのか誰にもわかりません。マウスをタグに乗せた時に件数が表示されるようにデフォルトで設定されているのですから、もう少しわかりやすい表示にした方がいいと思います。(単純に、私がデフォルトの表記を気に入っていないというだけの話でもありますw)編集するのは、先ほど編集したコンテンツHTMLの記述と同じ箇所です。-%>"」部分が、タグにマウスを乗せた時の表示になります。-%>件)"」と記述します。-%>コード編集後のコンテンツHTMLと実際のページタグ部分にマウスを乗せると、このように案内が表示されます。タグを単語の途中で改行しないようにするタグクラウドのタグを、単語の途中で改行しないように設定します。何について言っているのかというと、コレです。「画像にタグ」というタグは、1行に入りきれなかったので改行されています。これをやめたいのです。タグ文字が横幅に入りきらない場合は改行することなく、タグ文字そのものを次の行に表示させるようにします。今まで見てきたコード記述の1行上に、下記のコードがあると思います。style="word-break:break-all;">このコード記述のうち後半部分「style="word-break:break-all;"」を変更します。「word-break」プロパティは、改行のやり方について指定するプロパティで、元々のテンプレートに記述されている「word-break:break-all;」は、言語に関係なく表示範囲に合わせて改行するという指示になります。単語の途中で改行されてしまうわけです。この「word-break」プロパティを「word-break:keep-all;」に変更することで、単語の途中で改行しなくなります。「word-break:keep-all;」は、言語に関係なく単語の途中では改行せず、単語の切れ目で改行させます。該当部分に下記「編集後」のコードをコピペするか直接記述し、変更内容を「保存」します。style="word-break:keep-all;">コード編集後のコンテンツHTMLと実際のページ元々1行目にあった「画像にタグ」というタグ(単語)が、途中で改行されることなく2行目に表示されています。単語の途中で改行しないように設定できました。タグのフォントサイズを変更する上記でちらっと書いていますが、Seesaaブログのタグクラウドのタグ(単語)の文字サイズ(フォントサイズ)は変更することができません。記事件数が多ければ多いほど、タグの文字サイズは大きくなります。タグクラウド部分は「JavaScript」で設定されているので、本気で変更したければ、自分で「JavaScript」の記述を作ってリンク先を入れ替えなければいけません。そんな面倒なことはやりたくありませんので、ここでは「できるだけ同じような大きさの文字を表示する」ことを目標に編集します。タグクラウドのフォントサイズについては、上記で紹介している参考サイト様のページをお読みいただければわかりやすいと思います。フォントサイズ計算に係るパラメーターを指定できるそうです。(もうこの時点で、私には何を言っているのか意味がわかりませんw)コンテンツHTMLのタグクラウド部分に、下記のコード記述があります。</script>この部分に、パラメーターを追加するそうです。参考サイト様は「,5,10」を追加しておられますが、私は「,1,12」にしました。</script>●1つ目の数字(レベル)は、文字サイズを計算する際のリミッターのようなものらしく、値が小さいほど最大文字が小さくなるそうです。(数字を指定しないと「15」が設定される)●2つ目の数字(最小文字サイズ)は、最小の文字サイズ(px)を指定する部分です。この文字サイズ以下にはならないそうで、指定しないと「11px」になるそうです。●私自身は「レベル」を「1」に、「最小文字サイズ」を「12」にしました。●上記で件数のフォントサイズを「11px」にしていますので、タグ文字が12pxで件数が11pxになって、丁度いいのではないかと思いました。●「レベル」を「1」にしたのは、あまり大きい文字サイズにしたくなかったからです。次の記事<■サイドバー「タグクラウド」のタグ(単語)を線で囲んでボタンにする>でこのタグクラウドのタグを線で囲みますので、このような数値にしました。コード編集後のコンテンツHTMLと実際のページこの画像ではタグのフォントサイズがどのように変更されたのかよくわからないので、「仮」という意味で、比較画像を掲載しておきます。画像のキャプチャに失敗したので別の画像をキャプチャしたら、リンク部分に下線入りのタグクラウドをキャプチャしてしまいました。(ここまでのカスタマイズで、私はサイドバーのリンク部分の下線をはずしています)まあ、私が言いたいことは表現できているので、そのまま使いますね。こんな感じで、編集前と編集後に違いが出てきます。イメージ、わかるでしょう?編集前のイメージ編集後のイメージ次の記事の紹介このままの表示でも何の問題もありませんが、タグクラウドが少し寂しい気もしますので、次の記事ではタグを1つずつ線で囲んで、ボタンのように表示させたいと思います。■【Seesaaブログ新デザインシステム】サイドバー「タグクラウド」のタグ(単語)を線で囲んでボタンにする前回の記事で、Seesaaブログのサイドバー「タグクラウド」のタグ(単語)部分を細かく編集しました。今回はタグクラウドの表示そのものを変更します。ただの文字ではなくて、ボタン風にしてみたいと思います。【Seesaaブログ新デザインシステム】ここまでのコンテンツHTML記述この記事へのコメントこんにちは。色々なページを参考に私のブログでもタグクラウド(ラベルリスト)を、カスタマイズしてきました。以下のURLのページを参考にいじくってはみたもののどうも上手くいきません。・タグクラウドの項目ソートと文字サイズの変更(seesaaブログ)http://wp.kikuchisan.net/seesaa-tag-sort.html上記のページのタグクラウドのように記事数の多い順に並べ変えるには、どのようにしたら良いのか、もしご存知でしたら、教えて頂けないでしょうか?お忙しいところ大変恐縮ですが、ご対応のほどよろしくお願い致します。16:36Himajin様へコメントありがとうございます。お尋ねの件ですが、記事数の多い順にソートするのは、何とかなりそうです。ブログサイドのタグクラウド(Himajin様のブログでの「ラベルリスト」)のように、プルダウンメニューにした上でソートさせるのは、私の知識では無理です。私自身、ジャバスクリプトの知識が無いものですから、利用させてもらっているジャバスクリプトの理屈を理解できていません。いじってはみましたが、難しいです。タグ(ラベルリスト)を記事数の多い順に表示させる方法は、明日ぐらいには記事にして説明したいと思います。待っていただけるとありがたいです。02:21ご対応ありがとうございます。私が言いたかったのは「プルダウンメニューをソートさせる事」ではありません。お手数をおかけしますが、引き続きご対応のほどよろしくお願い致します。12:25連続のコメントになって申し訳ありません。前のコメントに誤りがありました。「登録記事数にしたい」ではなく「登録記事数順にソートしたい」でした。新デザインシステムについて書かれている物が少なく困っておりました。こんな凡ミスをしてしまい申し訳ありません。お忙しい中大変だと思いますが、記事にして下さるのをお待ちしております。12:39Himajin様へコメントありがとうございます。Himajin様の意図は理解しているつもりです。ただいま記事の作成途中ですので、もうしばらくお待ちいただけると助かります。03:14Himajin様へとりあえず、記事をアップしております。【1】http://customize.komaxy.com/article/184870889.html【2】http://customize.komaxy.com/article/184871036.html画像まで用意していたら記事が長くなったので、2つに分けました。Himajin様が必要な部分は、おそらく1つ目の記事の方だと思います。「ブログ工房」様のソースコードの中で、1箇所だけ修正というか入れ替えをしなければいけない記述がありますので、そこを修正されると、ご自分のブログでも記事数でソートされると思われます。2つ目の記事は、スタイルの変更に関するものです。ボタン風表示にしてみたり、縦並びリスト表示にしてみました。件数表示などの説明はHimajin様はご存知だと思いますので、無視されても大丈夫だと思います。私のデモ用ブログでは、この方法でソートが可能となっています。Himajin様のブログでも無事に稼働できたらいいのですが....。このたびはコメント本当にありがとうございました。[必須入力]※画像の中の文字を半角で入力してください。