Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】サイドバーのコンテンツにタイトルを…

【Seesaaブログ新デザインシステム】サイドバーのコンテンツにタイトルを表示させる(カレンダー、自由形式など)

Seesaaブログのコンテンツにタイトルを表示
■カレンダーには記事の更新月が表示される
■サイドバーの「カレンダー」や自由形式で追加したコンテンツのタイトルを表示させる方法
■コンテンツのタイトルを「管理画面>デザイン」から変更
■「コンテンツHTML」編集画面で「calendar」を編集  

seesaaブログのコンテンツの1つに「カレンダー」があります。
カレンダーはけっこう便利です。カレンダーの日付のリンク部分をクリックすると該当日の記事リストに飛べるし、そのブログが最近記事を更新したかどうかもカレンダーでわかります。(リンクが貼られた日付がカレンダーに存在しているかどうかで判断できる)



Seesaaブログのデフォルトのテンプレートでは、サイドバーにカレンダーが設定されています。
最初からカレンダーのコンテンツが設定されているので、普通はそのまま使用するのではないかと思います。


デフォルトの場合
Seesaaブログのカレンダー

(ブログのリンク設定を変更したので、デフォルトと言いながら画像内のカレンダーのタイトル「年月」部分が紺色っぽい青色になっています。デフォルトの場合は水色です。)





seesaaブログのカレンダー表示で驚いたこと


Seesaaブログのカレンダー表示で驚いたことを少しだけ書いておこうと思います。
たぶん、私が今まで使っていたブログのカレンダーの方が、マイノリティなんじゃないかな?とは思うんですが、ちょっとだけビックリしてしまいました。



記事の最終更新月が表示されてしまう


Seesaaブログのカレンダーは記事と連動しているため、リンク表示されている日にちをクリックするとその日にアップした記事を読むことができます。便利です。
でも、カレンダーで表示されている「年月」は、Seesaaではブログの最終更新月なのです。
ブログを閲覧している月ではありません。
‥‥驚きました!w



例えば、ブログの最終更新日が2016年4月1日だったとします。
2016年4月1日にブログを見ると、カレンダーはちゃんと2016年4月を表示しています。当然です。更新日以降の、例えば4月30日にブログを見ても、カレンダーはちゃんと2016年4月を表示します。
でも、5月1日にブログを見ても、カレンダーは2016年4月のままなのです。
もちろん10月1日にブログを見ても、カレンダーは4月を表示します。
最終更新日がブログ閲覧月だったら問題ないですが、そうでない場合は何となく違和感があるのです。



私が今まで使用してきたブログサービスのカレンダーは、そのブログを「閲覧した年月」が表示されていました。「記事の最終更新月」が表示されてしまうならば、ブログの更新が途絶えたままの場合は、1年前とか3年前のカレンダーが表示され続けることになります。



もう、マジでイヤなんですが、どうしようもありません。
HTMLを編集してどうにかしようと思いましたが、Seesaaブログの仕様では、「当月」を示す独自タグがないので無理です。
カレンダーのパーツを外部から入れようかとも思いましたが、そもそもブログ記事と連動できるかどうかわからないので、考えるのをやめました。



まあ、ごちゃごちゃ言ってますけど、要するに、私が閲覧月を表示させるようなカレンダーが好きってだけの話です。ブログを閲覧した時に、2016年に見ているのにカレンダーは2014年とか、そういうのってなんかおかしい気がしてしまうのです。
しばらくはカレンダーを表示させて運営するつもりですが、そのうちやめるかもしれません。



タイトルが表示されない


あと、seesaaブログのカレンダーは、テンプレートがデフォルトのままでもカレンダーそのものは表示されているのに、「カテゴリ」や「最近の記事」のように、いわゆる「タイトル」は表示されません。
これもちょっと驚きました。



「管理画面>デザイン」で「コンテンツ」を選択する時に、カレンダーの設定を開くと名前欄に「カレンダー」と書いてあります。自分で書いたのではなく、元々「カレンダー」と書いてあるのです。
なので、実際のページでも「カレンダー」というタイトルが表示されると思っていました。
マジかよ表示されないのかよw



サイドバーには「カレンダー」の他にも「検索」とか「最近の記事」とか、最初から設定されているコンテンツがあります。他のコンテンツのタイトルは表示されているのに、なんで「カレンダー」だけ排除されているのかな?(知らねーよw)



ということで、きちんと「カレンダー」というタイトルを表示させたいと思います。
このタイトル表示の方法は、「カレンダー」だけではなく例えば「自由形式」にも利用できます。
カレンダーと同じように「自由形式」にもちゃんとタイトル欄があるのに、表示してくれないんですよね。なぜかな?(知らねーよw)



サイドバーのコンテンツタイトルを好きなように変更する


それでは、サイドバーのコンテンツのタイトルを表示させたいと思います。
「コンテンツ」とか言ってますが、具体的には「カレンダー」と「自由形式」です。



ちなみに、コンテンツパーツは、サイドバーだけではなく記事下とかフッターとか好きな場所に表示できます。「最近の記事」だって「カテゴリ」だって、別にサイドバーに限定されるものではありません。お好きな場所に設定すればいいです。
でも、どこに追加したとしても、「カレンダー」や「自由形式」にはタイトルが表示されません。
HTMLの記述上、表示されないように設定されてしまっているからです。


以下、サイドバーに追加する場合のタイトル表示方法を書いていきますが、サイドバーだけではなく記事下でもフッターでも同じように表示できますのでご利用ください。



コンテンツのタイトルを変更する


「管理画面>デザイン」の中の「コンテンツ」から、追加するコンテンツのタイトルを編集します。
コンテンツのタイトル編集方法は、以前の記事<■【Seesaaブログ新デザインシステム】各コンテンツのタイトルを編集する(例として検索ボックス)>で説明しました。
詳しいことは記事をお読みください。(面倒くさいので同じことを書くつもりはありません)



ちなみに、以前の記事では「検索ボックス」の名前欄に最初から記入されていた「検索」という言葉を変更して「ブログ内検索」というタイトルにしました。わかりやすいように変更したかったからです。
今回の「カレンダー」の場合は、最初から「カレンダー」というタイトルが入っています。


カレンダーのパーツ設定画面



「自由形式」の場合は「自由形式」という名前になっていますので、まあ、通常は変更すると思います。
タイトルを表示させたいと思っていて、そのタイトルが「自由形式」のままでいいという方はあまりいないでしょうからね。


自由形式のパーツ設定画面


いずれにしても、タイトルの変更ぐらい誰でもできると思いますから、もういいですよね。
タイトルの変更が終わっても、それだけではまだサイドバーにタイトルは表示されませんのでお気を付けください。作業が必要です。



サイドバーのコンテンツにタイトルを表示させる


私のブログでは、サイドバーの各パーツのタイトル部分を強調させようと思っています。
デフォルトのテンプレートのままでは、カレンダーだけがタイトルなしの状態でポツンと設置されるような状態です。


現時点のカレンダー


コンテンツHTMLを編集するとカレンダーの場合も「設定」の名前欄で書いた「カレンダー」というタイトルを表示させることができます。
今、さらりと「コンテンツHTMLを編集すると」と書きましたが、そうです、ここまでの「CSS(スタイルシート)」の編集とは少し違いますので、お気をつけください。
まあ、ちょっととっつきにくいかもしれませんが、意外と簡単にできます。
あとしつこいですが、この方法はタイトルが表示されないコンテンツすべてに応用できます。



コンテンツHTMLで「calendar」を探す


Seesaaブログの「管理画面>デザイン」を開き、「デザイン設定」をクリックします。
使っているテンプレートの名前が表示されているので、クリックして開きます。
デフォルトのままだとテンプレート名は「シンプルA. ホワイト 右カラム」です。


「シンプルA. ホワイト 右カラム」をクリックするとデザイン設定の画面になり、4つのタブが表示されます。(「スタイルシート編集」「HTML編集」「コンテンツHTML編集」「カバー画像設定」)


この中の「コンテンツHTML編集」を選択します。
(通常、デザイン設定の画面では「スタイルシート編集」がデフォルトの画面ですので、きちんと「コンテンツHTML編集」タブをクリックして画面を切り替えてください)


コンテンツHTML編集画面



「コンテンツHTML編集」画面で「calendar」という単語を探します。
デフォルトのテンプレートでは114行目ぐらいにあります。


コンテンツHTML編集画面のカレンダー部分



HTMLコードを追加する


該当箇所を抜き出してみます。


<元コード>
<% if:parts_name == 'calendar' # START parts -%>
<section class="module module--calendar">
<table>
<caption>



この「元コード」の2行目、「<section class="module module--calendar">」の下に、下記コードを追加します。
コンテンツHTMLの該当部分にコピペ(コピーして貼り付け)して、「保存」します。


<追加するコード>
<h3 class="module__heading"><% parts.title -%></h3>



コードを追加すると、このような記述になります。


<コードを追加した後>
<% if:parts_name == 'calendar' # START parts -%>
<section class="module module--calendar">
<h3 class="module__heading"><% parts.title -%></h3>
<table>
<caption>


●『コンテンツパーツのタイトルは「h3」という「見出し」スタイルを使用し、その見出しのclass名は「module__heading」です』という意味のコード記述です。
●class名「module__heading」は、サイドバーのタイトルに使用されているclassです。
●なので、この一文を入れてあげるだけで、サイドバーのタイトルと同じように表記できます。


【注意】
この記事ではコンテンツタイトルに見出しタグ「h3」を使用しています。でもこのブログでは後日、見出しタグを整理します。記事内で「h3」を使用できるようにカスタマイズしますが、その時にここの「h3」を「pタグ」に変更してしまいます。
この記事のように「h3」を使用していてもいいし、どうせ変更するならばと最初から「pタグ」に変更しておいても、どちらでもかまいません。(どちらにしても、後日「h3」を「p」に入れ替えてしまいますので)
詳細は記事<■見出しタグを変更する(3)h3やh4をpタグに入れ替える>でご確認ください。




コード追加後のコンテンツHTMLと実際のページ


編集後のコンテンツHTML編集画面

実際のページ


コードの追加後は、こんな感じになります。
きちんとタイトル部分に「カレンダー」という文字が表示されていますね。



「自由形式」コンテンツのタイトルを表示させる


上記のやり方をそのまま応用すれば「自由形式」のタイトルも表示させることができます。
同じことを書くのは面倒くさいので、上記をよくお読みください。
「コンテンツHTML編集」での「自由形式」のHTMLは、デフォルトのテンプレートでは191行目ぐらいにあります。


追記後のコードのみ、記述しておきます。


<コードを追加した後>
<% if:parts_name == 'free' # START parts -%>
<section class="module module--free">
<h3 class="module__heading"><% parts.title -%></h3>
<% parts.free_text | mark_raw -%>
</section>
<% /if:parts_name == 'free' # END parts -%>


【注意】
この記事ではコンテンツタイトルに見出しタグ「h3」を使用しています。でもこのブログでは後日、見出しタグを整理します。記事内で「h3」を使用できるようにカスタマイズしますが、その時にここの「h3」を「pタグ」に変更してしまいます。
この記事のように「h3」を使用していてもいいし、どうせ変更するならばと最初から「pタグ」に変更しておいても、どちらでもかまいません。(どちらにしても、後日「h3」を「p」に入れ替えてしまいますので)
詳細は記事<■見出しタグを変更する(3)h3やh4をpタグに入れ替える>でご確認ください。





次の記事の紹介

次の記事では、Seesaaブログのサイドバーのタイトルを調整します。


【Seesaaブログ新デザインシステム】サイドバーのタイトル(見出し)を調整する
Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」の、サイドバーを設定します。現時点でのブログはトップページの記事を点線で囲んでいますが、サイドバーは何もしていません。‥‥






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

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