css WordPressテーマSimplicity2でアコーディオンがやっと表示できました!
WordPressのテーマはSimplicity2をしています。 FontAwesomeのアイコンを使ったアコーディオンを表示したくて試行錯誤の結果やっと表示できましたので覚書です。 2024/07/26よりCocoonへ移行しましたがその...
Simplicity2
css 
Google アナリティクスアカウントにサイトを追加してwp(Simplicity)に設置する方法
既存のアナリティスクアカウントがあれば、所要時間は2分程、4ステップで簡単に既存のアナリティスクに新しいサイトを登録し、WordPressに登録できます。
ステップ1:「管理」画面の「プロパティ作成」をクリックします。ステップ2:「ウェブサイトの名前」・「ウェブサイトのURL」を入力し「業種」・「レポートのタイムゾーン」を選択して「トラッキングIDの取得」をクリックします。ステップ3:トラッキングIDまたはトラッキングコードを取得します。ステップ4:取得したトラッキングIDを貼り付ける。
css WordPressテーマ「Simplicity2」のサイドバーの装飾
サイドバーのタイトル文字が私には大きすぎたのもあり、もう少し可愛らしく仕上げたかったので装飾してみました。
初期の状態から、変更したのは、文字の大きさを少し小さめにし、文字を中央寄せにしてみました。
角はborder-radiusを使って少し丸くしてみました。
出来上がりはこんな感じです。
css WordPressテーマ【Simplicity2】メニューバー文字色とホバー色の変更
今回は、メニューバーの文字色とホバー色の変更をします。
勿論、Simplicity2には管理画面から文字色の設定ができるのですが、
ホバー時のメニューバーの背景色の設定項目がなかったのでカスタマイズしてみました。
グローバルメニューの文字色をグレーにしホバー時の文字色は白に背景を濃いめのグレーに変更をしました。
css WordPressテーマ【Simplicity2】メニューバー高さ調整
管理画面からカスタマイズ→スキン→子テーマスキンテンプレート（独自カスタマイズ用）にチェックを入れます。次に外観→テーマの編集→子テーマのstyle.cssを開き以下のコードを入力します。メニューバーそのものを使って変更したい場合、 <per>#navi ul{
line-height: 2em;
}</per>文字の外に適応させたい場合は以下のように文字の大きさから相対位置で指定してみます。<pre>#navi ul{
position: relative;
clear:both;
border: 2px solid #ddd;
background-color: #F7F7F7;
border-radius: 3px;
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
}
</pre>