ブログカスタマイズの雑談BLOG

私が現在使っているFC2ブログのテンプレートは「grey_2column」です。


FC2ブログのデザインについては、私的にはそんなにこだわりはありません。
でも、実際にいくつか記事を投稿してみたら、なんだか気に入らない部分が出てきました。
（テンプレートを借りてやっているくせに、色々といじりたくなってしまうこの性格ｗ）



私は今回初めてFC2ブログを使っているんですが、けっこう色んな機能があって楽しい！！
サイドに配置してみた定型プラグインも良いし、その中でも「全記事表示リンク」ってヤツはなかなか良い機能だと思います。
別のブログでも同じようなことしてみようかと思って、色々と試行錯誤してみましたが、面倒くさくなってやめました。
FC2ブログはこういう機能がプラグインとして普通にあるところが素敵です！

サイドメニューのリンクタイトルをどのように変更したのか

さて、FC2ブログのプラグインでは、「最新記事」を結構使うのではないかと思います。
どこのブログも「最新記事」は設置されていると思いますが、FC2ブログのテンプレート「grey_2column」のプラグイン「最新記事」は、記事をいくつか投稿したらリンクの文字がわちゃわちゃしてものすごく見にくいんですよ。



なので、まずは記事タイトル部分に「●」を付けるように設定しました。
これは元々のスタイルシートで、記事タイトル部分の先頭には「●（disc）」マークを付けるように設定されていたのに、なぜか反映されていなかったものを、ちゃんと表示するように設定し直しただけです。



あとは、記事タイトル部分をもっとわかりやすくするために、記事タイトルの上下に「padding（余白）」を入れて、区切り線「border」を入れました。
こんな感じになります。


記事タイトルに区切り線を入れた



なかなかいい感じじゃないでしょうか。




ついでにサイドメニューだけ、リンク表示部分にマウスを当てたら背景色が出るように設定しました。（すみません、この設定に関してはこの記事ではやり方の説明をしていません。あくまでも私がやってみた編集の紹介、ってことです、ハイ）


リンク部分にマウスを乗せた場合



うん、こうやって実際に表示させてみると、なかなか良い感じになったと思います。

サイドメニューのリンクタイトルに「●」マークを付ける

FC2ブログのテンプレート「grey_2column」には「sidemenu」という名前の「id」が設定されています。
CSSの記述を見ると、「sidemenu」とは別に「sidemenu1」と「sidemenu2」という「id」もあるようです。（CSSの「Sidemenu (Plugin)」の中に「sidemenu1」と「sidemenu2」が記述されています）



CSSの記述を見ていたら「sidemenu」の中の「list-style-type」が「disc（●＝丸ぽっち）」に設定されているんですよ。
『リンク表示の先頭に「●」が付く』という設定がCSSに書いてあるのに、反映されていないんです。
何故でしょうね。



もしも、私と同じように「サイドメニューの最新記事のタイトル部分にマークを付けたい」と思っている方はですね、CSSの記述内でせっかく「●」を用意してくれているのですから、それを表示するようにした方がいいと思うんですよね。
なので、私が編集した部分を書いておきます。

スタイルシートの「#sidemenu」部分を編集する

まずは、管理画面の左側のサイドメニューの「設定」から「テンプレートの設定」を開きます。
自分が現在使用しているテンプレート名の「編集」リンクをクリックし、下の方にある「○○のスタイルシート編集」を確認してください。
このスタイルシートの記述の中から「Sidemenu (Plugin)」という見出しを探します。



下記に「元コード」と「編集後」のコードを掲載しておきます。
スタイルシートの「#sidemenu1 li,#sidemenu2 li」部分の数字「1」と「2」を消して、「#sidemenu li」に書き換えてください。
というか、コピペしてコードを丸ごと入れ替えたらいいと思います。（コード内の文字色は気にせずに、コピペをどうぞ）


＜元コード＞


＜編集後＞


●「#sidemenu1 li,#sidemenu2 li」部分を削除して、「#sidemenu li」に入れ替えるのが手っ取り早いと思います。


●XHTMLの方を確認したところ、「sidemenu1」「sidemenu2」という「id（名前）」は存在していませんでしたので、このid（つまり数字の1と2）を消してしまっても大丈夫です。
もちろん「#sidemenu」という「id」は、既にスタイルシート（CSS）に存在していますので、これはいじったらダメです。数字だけ消してしまってかまいません。（CSSには「div#sidemenu」という名前で既に記述されています）


●数字の1と2を消して「#sidemenu li」にするだけで、その後に設定されていたCSSの下記部分が反映されます。（説明文は大雑把に書いてますのであんまり深く考えないでください）




●この設定は「最新記事」だけではなく「サイドメニュー（sidemenu）」すべてに反映されるので、それがイヤならやらない方がいいです。

サイドメニューのリンクタイトルに下線を付ける

この画像のように、サイドメニューのリンクタイトル部分をわかりやすくするために、下線を付けます。
上記で編集したコードに追加することで、簡単に区切り線を付けることができます。


＜追加するコード＞



CSSに記述するのは、これだけです。
「}」で閉じないとCSSは動きませんので、元からあった「}」の上にこの3行を入れてください。
最終的なコードはこのようになります。


＜編集後＞


●「#cccccc」はカラータグ（色の指定）なので、好きな色を設定してください。

●「padding」（余白）を設定しているため、ちょっとばかしリンクタイトルと点線の間が広がると思います。（わかりやすいようにpaddingはtop、bottomを設定しています）

●この設定は「最新記事」だけではなく「サイドメニュー（sidemenu）」すべてに反映されるので、それがイヤならやらない方がいいです。（というか、自分で「id」か「class」を付けて設定してあげればいいだけですけどね）

雑感

私が色々といじっているうちにサイドメニューのリスト部分まで変えてしまったのかな？と思ってさっき改めて「公式テンプレート追加」から「grey_2column」のプレビュー画面を見たのですが、やはり「●」は付いてないみたいですね。
せっかく設定してあるのに、なんでだろ？
ま、いいや！



リンク部分のマーク「●（disc）」はもちろん、表示を変えることができます。
「■」とかにもできますし（「list-style-type: square」と記述する）、マークの代わりに画像を入れることも可能です。（私はめんどくさいからやらないｗ）
せっかくマークが付くように「grey_2column」で設定してくれているので、利用しない手はないと思います！



ちなみにどうでもいいですが、「grey_2column」と同じく公式テンプレートで「basic_white」というテンプレートがありますが、コレ、カッコイイですね！！
こっちの方がいいような気がしてきたｗ


ああ、でもなぁ‥‥
元々、別サイトの中にフレームで組み込むためにブログを設定しているから、真っ白なブログってイメージに合わないんだよなぁ。
とか思ったけど、背景の色を変えてしまえばいいのよね！！
ちょっと遊んでみようかなぁ‥‥
（こうやってまたどうでもいいことに時間をかけてしまいそうだｗ）




次の記事の紹介

次の記事では、私がFC2ブログのテンプレート「grey_2column」を編集してみた結果を紹介しています。