Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】タグ一覧ページのタグクラウドにタイ…

【Seesaaブログ新デザインシステム】タグ一覧ページのタグクラウドにタイトルを作る

Seesaaブログのタグ一覧ページのタグクラウドにタイトルを作る
■Seesaaブログのタグ一覧ページのタグクラウドにタイトルを付ける
■独自で作っていたclass「subheading」を使用して余白を設定
■タイトル表示を真ん中配置にする(「subheading」を記述している場合、していない場合)  

私がカスタマイズするSeesaaブログでは、パーツとパーツの間隔を100pxほど空けたいと思っています。
前回の記事<■タグ一覧ページのタグクラウドを編集する>でタグ一覧ページのタグクラウドのスタイルを変更した時に、タグクラウドと「もっと見る」ボタンとの間に100pxの余白を作る方法も、併せて説明しました。
問題なく余白はできますが、前回の記事は「タイトルを付けない場合」の方法です。



タグ一覧ページのタグクラウドは枠内にリンクが設定された単語が並んでいるだけで、それが何なのかの説明がありません。もしも記事に対するタグを30種類とか設定していた時に、30個の単語が並べられても「これは何?」状態になってしまいます。


だったら最初から「タグクラウド」というタイトルを付けてあげればいいのです。
という考えのもと、この記事ではタグクラウドにタイトルを付ける方法を書きたいと思います。
利用するclassは「subheading」です。





「subheading」についておさらい


「subheading」は私が勝手に作ったclassであり、Seesaaブログに最初から設定されているものではありません。記事ページの「関連記事(関連する記事)」のタイトル部分に設定したclassで、上余白100pxを指示しています。



軽く説明しておくと、私は記事ページの関連記事のサムネイル画像をタイトルの内側から表示するために、タイトル部分とサムネイル部分を切り離しました。そして、関連記事タイトル部分に「subheading」というclassを付けました。
パーツ間の余白を100pxにしたかったので、「subheading」にはそのような内容を記述しました。


【Seesaaブログ新デザインシステム】記事ページの「関連記事」(4)サムネイルをタイトルよりも内側から表示して画像サイズを変更
前回の記事(3)では関連記事のサムネイル画像を左端から表示させましたが、今回の記事(4)」ではタイトル部分よりも内側からサムネイル画像を表示させます。前回と同じように2つのパターンの画像を‥‥

(ちなみにこの記事で『結局class「subheading」を作らないといけない場面が出てきます』と書いていましたが、「作らないといけない場面」というのが、今ですw)



もちろん、上記紹介記事関連で、サムネイル画像を「タイトルよりも内側から」ではなく「左端から」表示させる方法<■記事ページの「関連記事」(3)サムネイルを左端から表示して画像サイズを変更>を採用した方は、「subheading」のことを知らないはずです。だって使っていないし。
でも今回は、作らないと話が進みません。


<独自に作ったclass>
/****** ページ下のタイトル(サブ) ******/
.subheading {
margin-top: 100px;
}

.subheading .module__heading { /* タイトル */
text-align: left;
padding: 3px 15px;
}


「subheading」で出している指示は、「上余白は100px」です。
「subheading」と「module__heading」を同時に指定した箇所は、「左寄せ」で表示されます。
このまま、関連記事の時と同じような使い方をすると、タイトルは左寄せで表示されます。真ん中配置にしたい場合はこのclassをそのままでは使えません。でもまあ、面倒なので私はこのまま左寄せ配置でいこうと思います。



ということで、ここでは既にCSSに記述しているはずの「.subheading」と「.subheading .module__heading」を使用して、タグクラウドにタイトルを表示させる方法を書きます。
タイトルは左寄せになります。


もしもタイトル表記を真ん中配置にしたい場合は、このページの下部で改めて説明します。
真ん中配置にしたい場合、「.subheading」と「.subheading .module__heading」を既にCSSに記述している場合と、何も記述していない場合の2通りがあると思いますので、それぞれ説明します。






タグクラウドの上部に余白を入れる(タイトルを付ける場合)


CSS上には既に「.subheading」と「.subheading .module__heading」が記述されていると思います。
記述していない方は、CSSの一番下の空いている部分にでも、上記のコード(「独自に作ったclass」)を追加してください。



タイトルを表示させるために、HTMLを編集します。
管理画面の「HTML編集」画面を開き、「<div class="tag-cloud">」というclassを探してください。
以前の記事<■タグ一覧ページのパーツ(タグクラウド・タグサーチ)の順番を変更する>で移動させたHTMLと同じ部分なので、442行あたりにあると思います。


編集するHTML部分



この記述の一番上(「<div class="tag-cloud">」の上)に、次のコードを追加します。


<追加するコード>
<!-- タグクラウド 開始 -->
<div class="subheading">
<p class="module__heading">タグクラウド</p>
</div>


HTMLでコードを記述する位置



勝手に「もっと見る」ボタンとの間隔が100px空くことになりますので、簡単です!


実際のもっと見るボタン部分



HTMLに追加したコードの解説


HTMLに追加したコードを再掲しておきます。

<!-- タグクラウド 開始 -->
<div class="subheading">
<p class="module__heading">タグクラウド</p>
</div>


この記述では
●『subheading』というclassを指定して「タグクラウド」という文字を表示させる
●「タグクラウド」という文字には『module__heading』というclassを指定する
という2つの指示を書いています。


CSSで『subheading』には「上余白は100px」という指示(margin-top: 100px;)を記述しているので、上記のコードをHTMLに記述するだけで上余白が出来ます。
また、同じくCSSで『.subheading .module__heading 』(「subheading」の中の「module__heading」)には「text-align: left;」「padding: 3px 15px;」を記述しているので、文字が左寄せになります。



●「module__heading」について
module__heading」は、元々はサイドバータイトルのclassです。

<サイドバータイトルで設定している「module__heading」>
/*** サイドバータイトル ***/
.module__heading {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:center;
margin-bottom: 15px;
padding:3px 0px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}


この「module__heading」の設定が生きていることに気を付けてください。タイトル部分のスタイルは、「module__heading」で指示しているスタイル(背景色など)になっています。


ちなみに、「module__heading」の中に「text-align:center;」という指示がありますので、サイドバーでは文字が真ん中配置で表示されます。
でも、記事ページの関連記事では、関連記事タイトル部分(『カテゴリ「○○」の最新記事』)を左寄せにしたかったので、サイドバーの設定とは異なる指示、つまり独自に作っていたclass「.subheading .module__heading」では「text-align: left;」を新しく追加しています。


今回、この関連記事タイトル部分に使用したclassと同じclassを設定したので、タグクラウドのタイトルは文字が左寄せになり、上部に100pxの余白ができました。



私はタイトル部分の表示は全部同じように表示したいので(紺色っぽい青色を角丸にして背景色として設定する)このような指定をしていますが、違うように設定したい方はご自分でコード内容を変更してください。



タイトルを真ん中配置にする(「subheading」を記述している場合)


では次に、「タグクラウド」というタイトル表示を左寄せではなく真ん中表示にする方法を説明します。
CSSとHTMLを編集します。



CSSには既に「.subheading」と「.subheading .module__heading」が記述されていると思います。
(記述していない方でタイトルを真ん中配置にしたい場合は別のやり方があります。下記で説明しています)



「.subheading」と「.subheading .module__heading」の記述によりタイトル文字は左寄せになります。これを真ん中配置にするためには、新しくclassを作ります。
例えば「heading-center」のようにclass名を付け、「.module__heading」と全く同じ記述内容にしてCSSの空いたところに記述します。
「.module__heading」をコピペして、class名を新しい名前「heading-center」に変更すればいいです。
コピペ元の「.module__heading」はサイドバーのタイトルに対するclassであり、既に真ん中表示になっています。(上記に掲載しています)


<仮で作ってみた「heading-center」>
.heading-centr {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:center;
margin-bottom: 15px;
padding:3px 15px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}


スタイルシートに記述した場合


●「heading-center」が必要な理由
同じ内容なのに、なぜ「module__heading」が使えず新しく「heading-center」を作らなければならないのか?
それは、「subheading」には『「subheading」の中の「module__heading」は左寄せで表示する』という命令が既に出来上がっているからです。(そのように私が作ってCSSに記述しましたからw)


しかもこの命令「.subheading .module__heading」は、既に別の場所で使用しているため(記事ページの関連記事のタイトルに使っています)、今更この命令の中身を書き直すことができません。
なので、新しく「heading-center」というclassを作って「真ん中配置にする」と指示しておくわけです。



HTMLに新しく作ったclass「heading-center」を記述する


タグクラウドにタイトルを表示させるためにHTMLを編集します。
HTMLの編集方法は既に上記で説明していますので、コードを追加する場所を上記で確認してください。
「<div class="tag-cloud">」の上に、次のコードを追加します。(最初の項目で紹介した「追加するコード」の記述内容とは違いますのでご注意ください)


<追加するコード>
<!-- タグクラウド 開始 -->
<div class="subheading">
<p class="heading-center">タグクラウド</p>
</div>


コードを追加した後のHTML



新しく作ったclass「heading-center」を記述することで、タイトル文字が真ん中配置になります。


タグクラウドの文字が真ん中配置になっている画面



タイトルを真ん中配置にする(「subheading」を記述していない場合)


CSSで「.subheading」と「.subheading .module__heading」を記述していない場合に、タグクラウドにタイトルを付け、且つそのタイトルを真ん中配置にする方法を説明します。
いずれにしても、何もないところに新しくタイトルを表示させようとしているわけですから、何らかのclassを作って指示を出すことになります。



「subheading」を作っておらず、タイトル表示を真ん中配置にしたい場合は、上記で説明している「subheading」の記述のうち、「.subheading .module__heading」部分をCSSに記述しなければいいです。
下記のようにCSS(スタイルシート)の空いた部分に「subheading」部分だけを記述します。


<追加するコード>
.subheading {
margin-top: 100px;
}


CSSに記述するのは、これだけです。
「.subheading .module__heading」(「subheading」の中の「module__heading」というクラス)で指示を出さなくても、既に「module__heading」というclassが存在しているので、真ん中配置にすると設定されている「module__heading」を使えばいいのです。



あとはHTML編集画面でコードを追加します。
「<div class="tag-cloud">」の上に、次のコードを追加します。


<追加するコード>
<!-- タグクラウド 開始 -->
<div class="subheading">
<p class="module__heading">タグクラウド</p>
</div>


HTMLでコードを追加する場所


この場合、CSSには「.subheading .module__heading」を記述していないので、「<p class="module__heading">タグクラウド</p>」の「module__heading」はサイドバーのタイトルと同じ内容「module__heading」を意味します。
なので、タイトル文字は真ん中配置になります。


タイトル表示が真ん中配置になったタグクラウド




次の記事の紹介

次の記事では、Seesaaブログの各ページのタイトル表記を変更する方法を説明します。


【Seesaaブログ新デザインシステム】各ページのタイトル表記を変更する
Seesaaブログのカスタマイズを続けているうちに気になってきたので、各ページのタイトル部分の表記を一気に変更したいと思います。「タイトル部分の表記を変更する」というのは、例えば「テスト記事」というタグを‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。