BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» FC2ブログカスタマイズ カレンダーをプラグインしてアレンジする方法

このエントリーをはてなブックマークに追加

FC2ブログカスタマイズ カレンダーをプラグインしてアレンジする方法

   投稿日: 2016/05/26    投稿者:webコラム

dc9483da16ff21db27e003a7a343c307_s.jpg

こんにちは! ライターのモモタロウです。

今回は、FC2ブログでカレンダーをプラグインして、
プラグインしたカレンダーをカスタマイズする方法をお伝えします。

20160514-00.jpg


上の画像のメニューバーの一番下にカレンダーを表示させます。

FCブログでカレンダーをプラグインする方法


20160514-1.jpg
まず、FC2ブログの管理画面にログインします。

その下にあるメニューバーの四角で囲った部分、「プラグインの設定」をクリックします。

20160514-2.jpg

プラグインの設定画面に変わったら、「公式プラグイン追加」をクリックします。

20160514-3.jpg

公式プラグインの追加にある基本プラグインの
「カレンダー 月ごとのカレンダーを表示します 追加」の追加をクリックします。


20160514-4.jpg

カレンダーが追加されました。

ブログを確認すると・・・

20160514-5.jpg

           上の画像のように、メニューバーにカレンダーが追加されました。↑


プラグインしたカレンダーをカスタマイズする方法


次に、追加したカレンダーをカスタマイズします。

2020160514-6-0.jpg

先ほどの管理画面にある、「テンプレートの設定」をクリックします。

下にスクロールすると、スタイルシート編集があります。


スタイルシート編集の一番下に、以下のタグを書き込みます。

/* カレンダー装飾用 */
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;
}

2020160514-6-1.jpg

その後、プレビューボタンをクリックすると・・・

20160514-6.jpg

カレンダーに装飾がかかりました。

まとめ


いかがでしたか?

カレンダーをプラグインしておくと、
ブログ記事を書いた日付が明らかになります。

FC2ブログをさらにブラッシュアップして、
オリジナリティの高いブログにしていきましょう!

カテゴリ:

TOPへ