Entry Link│ブログ記事リンク

オリジナルのスタイルを適用させる -エントリーの日付を非表示にする-

HEARTBEAT.INFOのテーマではウェブサイト、ブログ、それぞれにテンプレートを編集しなくてもオリジナルのスタイルシートを設定できるようになっています。

設定はウェブサイト、ブログ、それぞれの管理画面から「設定 > 全般」を開くと「ウェブサイトユーザースタイルシート」「ブログユーザースタイルシート」という項目があります。ここにスタイルシートを記述することでウェブサイト、ブログにスタイルを適用することができます。

例えば、下記の画像のブログ記事のタイトル部分にある日付を非表示にしたい場合。

hb_infoblog_20141024174735.png

非表示にしたい日付のところのセレクタをFirefoxのアドオンFirebugなどで調べます。

hb_infoblog_20141024185020.png

hb_infoblog_20141024180430.png

調べたセレクタを使って親ウェブサイトの「ウェブサイトユーザースタイルシート」に下記のスタイルを記述して保存します。


#entry #entryheadline h2 #entrydate{
display:none;
}

hb_infoblog_20141024180854.png

テンプレートの「ウェブサイトユーザースタイルシート」を再構築します。

サイトを再読み込みすると日付が非表示なっています。

hb_infoblog_20141024182029.png

親ウェブサイトの「ウェブサイトユーザースタイルシート」にスタイルを記述した場合、ウェブサイトとウェブサイトに含まれるすべてのブログにスタイルが適用されます。

ブログのみに適用させたい場合は、セレクタに「body.blogcss」を含めてください。

ウェブサイトのみに適用させたい場合は、セレクタに「body.websitecss」を含めてください。

また、特定のブログだけにスタイルを適用したい場合は、そのブログの「設定 > 全般」の「ブログユーザースタイルシート」にスタイルを記述してブログユーザースタイルシートを再構築してください。

「ウェブサイトユーザースタイルシート」「ブログユーザースタイルシート」に記述したスタイルは最後に読み込まれるので、元々のスタイル設定がある要素に関しては上書きをし、それ以外は新規にスタイルを設定することになります。

カテゴリー:テーマについて / 使い方
2014/10/24 PM 5:43

MT用テーマ Heartbeat 配布中

heartbeat.infoにいらしていただきありがとうございます。ただいま、こちらのサイトを簡単に構築できるMovable Type用のテーマを配布しています。ぜひ、お使いください。

Entry Link│ブログ記事リンク

コメント投稿





Entry Link│ブログ記事リンク