れきすきHOMEAFFINGERインターネットプロフィールお問い合わせサイト運営歴19年。WordPressとAFFINGER6を研究するブログ。鍋弓(なべゆみ)わた(@wata_img)です。このサイトについては【プロフィール】を、わたしが描いた戦間期~第二次世界大戦が舞台の漫画は【極星堂オンラインショップ】にどうぞ!WordPressの有料テーマ『AFFINGER6』で、サイドバーのカテゴリ名一覧(カテゴリーリンク)をスタイルシート(CSS)で装飾する方法です。コピペでOKのCSSコードをご紹介します。『AFFINGER6』でサイドバーのカテゴリーリンクはデフォルトでは以下のようなデザインです。AFFINGER6でサイドバーのカテゴリーリンクに簡易デザインを適応すると、ボーダーとFontAwesomeの矢印があらわれる。これは『AFFINGER管理』の以下の場所に初めからチェックが入っているから。【全体設定】>>【カテゴリーリンク】>>【カテゴリーリンクに簡易デザイン適応】このチェックが入ったままのデフォルトのデザインを、以下のように変更します。【カテゴリーリンクに簡易デザイン適応】のチェックは入ったままでOK!AFFINGER6の簡易デザインを適応したカテゴリーリンクはCSSで付箋風にデザインすることができる。以下のコードをコピーして、【外観】>>【カスタマイズ】の【追加CSS】部分にペーストしてください。#e1e1e1;}上のコードではわかりやすくするため、わたしが以前使っていた色合わせを仮として入れています。ご自身の好みとサイトデザインに合ったお好きな色にぜひ変えてくださいね~!この付箋風CSSでは、デフォルトの簡易デザインでは表示されていたボーダーが消えています。AFFINGER6でサイドバーのカテゴリーリンクに簡易デザインを適応すると、カテゴリ名の下にボーダーが出る。そのカスタマイズについて、以下で解説します。』の箇所のCSSを消すと、デフォルトの簡易デザインのときに表示されている薄いグレーのボーダーを表示させることができます。上のコードではいちばん下の段落です!該当の箇所のCSSを消すと、以下のようなコードになります。#dadde5;/*付箋下のボーダーの色*/}付箋風デザイン+ボーダー表示。#000000;}このサンプルでは、黒いボーダー(#000000)が出てくるはずです。上のコードで『#000000』となっているところにお好きな色を入れると、その色のボーダーが表示されるという仕組みです。方法2:CSSでボーダーを表示させて、『AFFINGER管理』から色だけ設定するCSSでボーダーを表示させてから、ボーダーおよびいっしょに表示される右矢印の色を『AFFINGER管理』から設定する方法です。』の箇所のCSSです。ボーダーについての設定を消すとこんな感じになります。#000000;】が消えています!消したあと、コード全体で見ると以下のような感じです。5px;}手順2:『AFFINGER管理』から簡易デザイン適応のカテゴリーリンクのカラーを変更する【AFFINGER管理】>>【全体設定】>>【カテゴリーリンク】ここで、カテゴリーリンクのリンクカラーそのものを設定することができます。この方法はCSSと『AFFINGER管理』の二段構えなのでめんどくさいですが、一度やってしまえばボーダー(と右矢印)の色を『AFFINGER管理』であとからワンタッチで変更できます。気が向いたときに気軽に色を変更できるのは大きな利点。じゅうぶんに検討する余地のある方法ですね~!付箋風デザイン+ボーダー表示。ボーダーの太さを変えるにはボーダーの太さを変えることもできます。『border-bottom』の行の意味は以下のとおりなので、px数を上げると太いボーダーにできます。【ボーダーの色】;コード全体で見ると以下の箇所です。該当箇所にマーカー線を引いています。このコードだと1pxのボーダー線を引く設定です。#e1e1e1;}付箋風デザイン+ボーダー表示。#e1e1e1;『solid』は直線のこと。このコードでは「1pxの#e1e1e1色の直線を表示させてね」と指示しているので、カテゴリーリンク名の下にそのとおりのボーダーが表示されます。CSSではいろんなボーダーデザインがあるので、直線以外も表示させることができます。やり方はとっても簡単!紹介しているコードで『solid』となっている箇所を以下のデザインからお好きなものを選んで変更するだけです。solid:直線dashed:破線dotted:点線double:二重線groove:くぼんだ線ridge:隆起した線ボーダーのデザインによっては太さを1pxより太くする必要があるかも。細すぎるとデザインの違いがわからないボーダーもあります。デフォルトの簡易デザイン適応のカテゴリーリンクにもよさはあるわたしがこのコードを書いたのは、デフォルトの簡易デザイン適応があまりにシンプルだったからです......。メニューのウィジェットを使って「カテゴリ名の一覧リンク」を作れば、そこそこカッコイイデザインにはなるようです。メニューのウィジェットを使って「カテゴリ名の一覧リンク」を作ると、カテゴリを増やしたり減らしたときにそれが自動では反映されないんですね~。自分で、メニューの作成画面から変更を加えないといけない。対してウィジェット『カテゴリー』だと、カテゴリに変更を加えたときに自動で反映されます。自動化できるところは何が何でも自動化したい!!わたしは更新作業でとことんラクをして自動化したいからこそ、WordPressでサイトを制作しています。カテゴリの変更をするたびに手動でメニューをいちいち書き換えるくらいなら、最初にCSSを書いてしまうぞ~って思ってしまったので書いちゃいました。いいつつ、デフォルトの簡易デザインもいいな~と思うようになりました。2021年8月以降はデフォルトの簡易デザイン適応で「カテゴリ名の一覧リンク」を作っています。けっきょくこのコードは現在、使っていません......。株式会社オンスピードが販売している、WordPressの有料テーマ『AFFINGER6』。このテーマでは、サイドバーに「プロフィールカード」なるものを表示することができます。...AFFINGERAFFINGER6:CSSのFontAwesomeが表示されない『AFFINGER6』は高機能なテーマですが、「アイコンフォント『FontAwesome』が表示されない!」と困るときがあります。株式会社オンスピードより発売されている、WordPressの有料テーマ『AFFINGER6』。『AFFINGER6』の投稿ページ下部にある次・前ページへのリンク。...AFFINGERmixi(パソコン版)で友人を招待する方法AFFINGER6:プロフィールカードの文章を左寄せにする方法このブログの中を検索カテゴリAFFINGERインターネットアーカイブ2022年9月2021年9月2021年8月2019年1月サイトマップお問い合わせ運営事業者プライバシーポリシーサイト運営歴19年。WordPressとAFFINGER6を研究するブログ。Kyokuseido。