しがないPGの自衛記録

基本ずっと寝てる

トップ > Blog > テーマ「ZENO-TEAL」のリンクをカスタマイズしてみた

テーマ「ZENO-TEAL」のリンクをカスタマイズしてみた

Blog

f:id:ashitaka1963:20200423223238p:plain

はじめに

私のブログでは、ZENO-TEAL - テーマ ストアを利用しているのですが、 箇条書きリンク(liタグ内にaタグを設置)の見え方がいまいちだったので、cssをカスタマイズしました。

いまいちだった点

見た目がただの文字列になってしまっており、リンクとして飛べるような見た目になっていない。

f:id:ashitaka1963:20200423222640p:plain

こちらが記事のマークダウン(.md)になります。

## 参考にさせて頂いたサイト

* [サンプルアプリをいじりながらVue.js+Electronを学ぼう! 環境構築編 - Qiita](https://qiita.com/suzuq/items/026c43ad6f2d9f8697f7)
* [[Vue.js] Vue CLI 3 で electron-vue の環境を構築する方法](https://mseeeen.msen.jp/electron-for-vue-cli-3/)
* [Electron+Vue.jsを使ったデスクトップアプリ開発を始める手順](https://www.virment.com/vue-electron/)

変更した点

  1. 自身のブログのトップ画面にログインした状態でアクセスする。
  2. 画面右上の[自身のID▼(ashitaka1963)] > [デザイン]をクリックする。
  3. サイドバーの[レンチアイコン] > [デザインCSS]をクリックする。
  4. テキストボックスに以下を追記する。
/* liタグ配下のaタグのアンダーライン */
li >a {
  text-decoration: underline;
}
/* マウスホバー時に背景色を変更 */
li > a:hover {
  background: #cce7ff;
}

完成品

文字列にアンダーバーを付けています。 また、マウスオーバーした際には背景色を変更するようにしています。

f:id:ashitaka1963:20200423222900p:plain