にせのブログ

@2_s_eが行先表示、方向幕について浅い知識をひけらかすブログ

fc2wikiでリンクの上にマウスを載せたときに色をつける方法

にせです。次駅表示wikiではこのように路線名が含まれるリンクの上にマウスを載せるとその路線の色に背景色が変わります。

今回は備忘録も兼ねて設定方法を解説します。

 

まずwiki左上のFC2メニューからWIKIにログインします。

ログインに成功するとこの画面になるので編集したいwikiの編集ボタンを押します。

次の画面では画面左にデザインバナーがあるのでデザイン作成·編集をクリックします。

デザインの設定画面が出てくるのでリキッドレイアウト、2カラム左メニューを選択しCSS編集(上級者向け)をクリックします。するとCSSの編集画面が出てきます。ただ編集画面が重いのでメモ帳等にコピーして編集するといいでしょう。

ここからはCSSの編集に入ります。といっても簡単で例えば山手線の場合は

 

a:hover[title="山手線"],a:hover[title="E235系0番台"] {background-color: #99cc00;color:white}

 

この文字列をコピーするだけで大丈夫です。意味を解説するとa:hover[title="○○"]で対象となるリンク(ページ名)を設定、同じ色で複数ある場合は,を間に入れます。 {background-color: #99cc00;color:white}では背景色を#99cc00、文字色を白色に設定しています。路線の色に合わせて調整してください。2路線目以降は改行して入力すれば動きます。

 

次に編集を保存します。編集画面の一番下に名前を付けて保存の画面があるので適当な名前をつけてください。なお次回以降編集する場合は「デザインを選択」の画面でデフォルトではなく今回作成したデザインを選択してください。

最後にデザインの変更を反映させます。左バナーのデザインの変更·管理→先程入力したデザインを選択、リキッドデザイン、2カラム左メニュー、このデザインに変更を選択します。

 

デザインの保存が完了すると編集が反映されます。自分のwikiのページに行きCtrl+F5でキャッシュクリアすると反映されるはずです。