Seesaaブログ サイドバーに追加した「自由形式」にタイトルを表示する

こんにちは、ちゃちゃまるです。

初心者の時、これ結構悩みました。

きっとお役に立つ方もいらっしゃるでしょう。

サイドバーに追加した「自由形式」にタイトルを表示する方法です。

今日は新デザインシステムでやります。


Seesaa管理画面から、「デザイン」→「コンテンツ」とクリックして、

右サイドバーに「自由形式」を追加する

こちらの画面を表示させて、

左側にある「自由形式」を右サイドバーに追加して保存して下さい。


追加の仕方ですが、

「自由形式」の上にマウスポインターを乗せ、

左クリックしたまま、右にスライドさせて移動します。


そしてサイトを見てみると、

試しに「自由形式」にYahoo!のリンクを貼った


タイトルが表示されません。

「自由形式」にYahoo!のリンクを貼ったのですが、

これではタイトルが表示されなくて今一ですよね。


タイトルを表示させるには、

デザインからデザイン設定、デザインタイトルをクリックする


「デザイン」→「デザイン設定」そして

ご利用中のテンプレート(デザインタイトル)をクリックします。

✔が入ったデザインタイトルがご利用中のテンプレートです。


次の画面で、「コンテンツHTML編集」をクリックして下さい。

コンテンツHTMLのここに一文を追加すれば、タイトルが入れられる


206行目ぐらいの後(2015/11/11追記:テンプレートでやや違います)

次のコードの直後に入れてね。


<section class="module module--free">


↓このコードを入れます↓
<h3 class="module__heading"><% parts.title -%></h3>
入れると、

次のような感じになると思います。

<% /if:parts_name == 'fb_comment' # END parts -%>
<% 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 -%>

最後に「保存」のクリックをお忘れなく。



2015/11/11追記:希望のコードを探す方法

例えば今回は、次のコードの直後に入れたいので、

<section class="module module--free">
このコードを探すのが一番手早い方法になります。

HTMLをにらめっこしてもなかなか見つかりません。

こちらでコードの探し方を説明してます。



それでは、追加した「自由形式」のタイトルを表示出来る様なったので、

「デザイン」→「コンテンツ」とクリックして、

こちらの画面をもう一度開きます。

自由形式にタイトルを表示する


追加した「自由形式」にタイトルを表示させますので、

「自由形式」右にあるカギマークをクリックして下さい。

タイトルを付けられるようになった


名前の欄を変更してなければ、

「自由形式」と書かれてると思いますが、

以前はここに何を入れても表示されなかったと思います。


今は、先ほど「コンテンツHTML編集」に一文入れたので、

文字を入れれば、その文字が表示されます。

画像では「リンク集」と入れて保存しました。

最後に「コンテンツ」の画面でも「保存」をお忘れなく。


そしてサイトを表示してみて下さい。

自由形式にタイトルが表示されました。


綺麗に「リンク集」と表示されました!




以上で、

Seesaaブログでサイドバーに追加した「自由形式」に

タイトルを表示する方法の説明を終えます。




サブコンテンツ

当サイトの記事一覧

アーカイブ

このページの先頭へ