FC2ブログ【grey_2column】(2)サイドメニュー「最新記事」のタイトル先頭に「●」マークを付ける|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。私が現在使っているFC2ブログのテンプレートは「grey_2column」です。FC2ブログのデザインについては、私的にはそんなにこだわりはありません。実際にいくつか記事を投稿してみたら、なんだか気に入らない部分が出てきました。(テンプレートを借りてやっているくせに、色々といじりたくなってしまうこの性格w)私は今回初めてFC2ブログを使っているんですが、けっこう色んな機能があって楽しい!!サイドに配置してみた定型プラグインも良いし、その中でも「全記事表示リンク」ってヤツはなかなか良い機能だと思います。別のブログでも同じようなことしてみようかと思って、色々と試行錯誤してみましたが、面倒くさくなってやめました。FC2ブログはこういう機能がプラグインとして普通にあるところが素敵です!記事内容■サイドメニューのリンクタイトルをどのように変更したのか■サイドメニューのリンクタイトルに「●」マークを付ける■サイドメニューのリンクタイトルに下線を付けるサイドメニューのリンクタイトルをどのように変更したのかさて、FC2ブログのプラグインでは、「最新記事」を結構使うのではないかと思います。どこのブログも「最新記事」は設置されていると思いますが、FC2ブログのテンプレート「grey_2column」のプラグイン「最新記事」は、記事をいくつか投稿したらリンクの文字がわちゃわちゃしてものすごく見にくいんですよ。記事タイトル部分に「●」を付けるように設定しました。これは元々のスタイルシートで、記事タイトル部分の先頭には「●(disc)」マークを付けるように設定されていたのに、なぜか反映されていなかったものを、ちゃんと表示するように設定し直しただけです。あとは、記事タイトル部分をもっとわかりやすくするために、記事タイトルの上下に「padding(余白)」を入れて、区切り線「border」を入れました。こんな感じになります。記事タイトルに区切り線を入れたなかなかいい感じじゃないでしょうか。ついでにサイドメニューだけ、リンク表示部分にマウスを当てたら背景色が出るように設定しました。(すみません、この設定に関してはこの記事ではやり方の説明をしていません。私がやってみた編集の紹介、ってことです、ハイ)リンク部分にマウスを乗せた場合うん、こうやって実際に表示させてみると、なかなか良い感じになったと思います。サイドメニューのリンクタイトルに「●」マークを付けるFC2ブログのテンプレート「grey_2column」には「sidemenu」という名前の「id」が設定されています。CSSの記述を見ると、「sidemenu」とは別に「sidemenu1」と「sidemenu2」という「id」もあるようです。(Plugin)」の中に「sidemenu1」と「sidemenu2」が記述されています)CSSの記述を見ていたら「sidemenu」の中の「list-style-type」が「disc(●=丸ぽっち)」に設定されているんですよ。『リンク表示の先頭に「●」が付く』という設定がCSSに書いてあるのに、反映されていないんです。私と同じように「サイドメニューの最新記事のタイトル部分にマークを付けたい」と思っている方はですね、CSSの記述内でせっかく「●」を用意してくれているのですから、それを表示するようにした方がいいと思うんですよね。私が編集した部分を書いておきます。スタイルシートの「#sidemenu」部分を編集するまずは、管理画面の左側のサイドメニューの「設定」から「テンプレートの設定」を開きます。自分が現在使用しているテンプレート名の「編集」リンクをクリックし、下の方にある「○○のスタイルシート編集」を確認してください。(Plugin)」という見出しを探します。下記に「元コード」と「編集後」のコードを掲載しておきます。li」に書き換えてください。いうか、コピペしてコードを丸ごと入れ替えたらいいと思います。li」に入れ替えるのが手っ取り早いと思います。●XHTMLの方を確認したところ、「sidemenu1」「sidemenu2」という「id(名前)」は存在していませんでしたので、このid(つまり数字の1と2)を消してしまっても大丈夫です。「#sidemenu」という「id」は、既にスタイルシート(CSS)に存在していますので、これはいじったらダメです。数字だけ消してしまってかまいません。li」にするだけで、その後に設定されていたCSSの下記部分が反映されます。15px;(タイトル部分は左から15pxの位置から書き始める)●この設定は「最新記事」だけではなく「サイドメニュー(sidemenu)」すべてに反映されるので、それがイヤならやらない方がいいです。サイドメニューのリンクタイトルに下線を付けるこの画像のように、サイドメニューのリンクタイトル部分をわかりやすくするために、下線を付けます。上記で編集したコードに追加することで、簡単に区切り線を付けることができます。5px;CSSに記述するのは、これだけです。「}」で閉じないとCSSは動きませんので、元からあった「}」の上にこの3行を入れてください。最終的なコードはこのようになります。5px;}●「#cccccc」はカラータグ(色の指定)なので、好きな色を設定してください。●「padding」(余白)を設定しているため、ちょっとばかしリンクタイトルと点線の間が広がると思います。(わかりやすいようにpaddingはtop、bottomを設定しています)●この設定は「最新記事」だけではなく「サイドメニュー(sidemenu)」すべてに反映されるので、それがイヤならやらない方がいいです。私が色々といじっているうちにサイドメニューのリスト部分まで変えてしまったのかな?と思ってさっき改めて「公式テンプレート追加」から「grey_2column」のプレビュー画面を見たのですが、やはり「●」は付いてないみたいですね。設定してあるのに、なんでだろ?ま、いいや!リンク部分のマーク「●(disc)」はもちろん、表示を変えることができます。square」と記述する)、マークの代わりに画像を入れることも可能です。(私はめんどくさいからやらないw)せっかくマークが付くように「grey_2column」で設定してくれているので、利用しない手はないと思います!ちなみにどうでもいいですが、「grey_2column」と同じく公式テンプレートで「basic_white」というテンプレートがありますが、コレ、カッコイイですね!!こっちの方がいいような気がしてきたwああ、でもなぁ....元々、別サイトの中にフレームで組み込むためにブログを設定しているから、真っ白なブログってイメージに合わないんだよなぁ。次の記事では、私がFC2ブログのテンプレート「grey_2column」を編集してみた結果を紹介しています。前回の記事を書いた後で、またもやブログを編集したくなってしまいました。FC2ブログにはたくさんの種類のテンプレートが用意されていますが、その中で私が選んだテンプレートは「grey_2column」です。[必須入力]※画像の中の文字を半角で入力してください。