投稿日: 2016/05/26
投稿者:webコラム
こんにちは！ ライターのモモタロウです。
今回は、FC２ブログでカレンダーをプラグインして、
プラグインしたカレンダーをカスタマイズする方法をお伝えします。
上の画像のメニューバーの一番下にカレンダーを表示させます。
FCブログでカレンダーをプラグインする方法
まず、FC2ブログの管理画面にログインします。
その下にあるメニューバーの四角で囲った部分、「プラグインの設定」をクリックします。
プラグインの設定画面に変わったら、「公式プラグイン追加」をクリックします。
公式プラグインの追加にある基本プラグインの
「カレンダー 月ごとのカレンダーを表示します 追加」の追加をクリックします。
カレンダーが追加されました。
ブログを確認すると・・・
上の画像のように、メニューバーにカレンダーが追加されました。↑
プラグインしたカレンダーをカスタマイズする方法
次に、追加したカレンダーをカスタマイズします。
先ほどの管理画面にある、「テンプレートの設定」をクリックします。
下にスクロールすると、スタイルシート編集があります。
スタイルシート編集の一番下に、以下のタグを書き込みます。
/* カレンダー装飾用 */table.calender { width:175px; border:1px solid #dcdcdc; border-collapse:separate; } .calender caption { padding:2px; font-weight:bold; background:#fff; } .calender th#sun { color:#cc3366; } .calender th#sat { color:#339966; } .calender th, .calender td { border-top: solid 1px #f5f5f5; border-right: solid 1px #ccc; border-bottom: solid 1px #ccc; border-left: solid 1px #f5f5f5; text-align:center; font-weight:normal; color:#999; } .calender td a { display:block; background:#f5f5f5; color:#000; } .calender td a:hover { background:#777; text-decoration:none; color:#fff; }
その後、プレビューボタンをクリックすると・・・
カレンダーに装飾がかかりました。
まとめ
いかがでしたか？
カレンダーをプラグインしておくと、
ブログ記事を書いた日付が明らかになります。
FC2ブログをさらにブラッシュアップして、
オリジナリティの高いブログにしていきましょう！
