css WordPressテーマSimplicity2でアコーディオンがやっと表示できました!
WordPressのテーマはSimplicity2をしています。 FontAwesomeのアイコンを使ったアコーディオンを表示したくて試行錯誤の結果やっと表示できましたので覚書です。 2024/07/26よりCocoonへ移行しましたがその...
Simplicity2
css 
Simplicity2 WordPressをXサーバーの 機能とWebツールを使って高速化しよう。
先日Googleの「デジタルワークショップ」を受講していて、思い出したのが、高速化することで、「PageSpeed Insights」を試してみると、67点。最適化についての提案は以下の通りだった。
1.ブラウザのキャッシュを活用する2.画像を最適化する3.スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する4.CSS を縮小する5.JavaScript を縮小する6.圧縮を有効にする。サーチコンソールの構造化にも問題はなく、APMテストでは問題はなかったのですが、高速化だけはやはり出現してしまいました。画像も圧縮するの忘れてたので、「画像を最適化する」という項目はあたりまえ。自業自得です。
Simplicity2 Simplicity・Easy Table of Contents カテゴリ一覧から目次を表示
今回は、Simplicityの便利な「スクロール追従機能」に目次を表示してくれるプラグイン「Easy Table of Contents」をインストールして設定したのに 始めの記事にしか目次が表示されないことに気が付きちょっとだけ悩んだもので、目次が表示できた設定をメモしておくことにしました。
Google Search Consoleの追加・アナリティクスとの連携・Site Map送信
webサイトを作ったらまず、しておいた方がいいのがアナリティクスとSearch Consoleの設定ですね。
今回は 1.Simplicity 2.All in One SEO Pack(プラグインをインストールしている) 3.その他どちらでもない方のWordPressの設定方法を説明します。
WordPressの設定【Simplicityの設定方法】管理画面へ戻り「外観」→「カスタマイズ」の順にクリックします。
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>