Cocoon Cocoon：テーブル縦横見出し固定モバイル用テーブル背景色の変更
前回と前々回にテーブル縦横見出しの変更をした際、PC上での確認のみでモバイルから確認していなかったためモバイル上での幅の表示が狭くなっていた個所とPCとモバイルでは背景色が異なっていたので修正します。
css
Cocoon Cocoon Cocoon：レスポンシブ対応テーブル縦横見出し固定と行の余白調整
前回の記事で、確認不足だった項目の重なり部分の修正箇所の説明とレスポンシブ対応のプラグインを使用しない見出し部分を固定するCSSの解説をしていきます。
Cocoon 他テーマからCocoonに変更：表見出しの行列固定と色の変更
Cocoonへテーマ変更し、テーブルを使用する際のCocoonの設定方法、テーブル見出しの行、列固定方法などをcssとhtmlのサンプル付きで説明しています。スキンは、ダークエンジを使用しています。
css WordPressテーマSimplicity2でアコーディオンがやっと表示できました!
WordPressのテーマはSimplicity2をしています。 FontAwesomeのアイコンを使ったアコーディオンを表示したくて試行錯誤の結果やっと表示できましたので覚書です。 2024/07/26よりCocoonへ移行しましたがその...
css WordPressテーマ「Simplicity2」のサイドバーの装飾
サイドバーのタイトル文字が私には大きすぎたのもあり、もう少し可愛らしく仕上げたかったので装飾してみました。
初期の状態から、変更したのは、文字の大きさを少し小さめにし、文字を中央寄せにしてみました。
角はborder-radiusを使って少し丸くしてみました。
出来上がりはこんな感じです。
css WordPressテーマ【Simplicity2】メニューバー文字色とホバー色の変更
今回は、メニューバーの文字色とホバー色の変更をします。
勿論、Simplicity2には管理画面から文字色の設定ができるのですが、
ホバー時のメニューバーの背景色の設定項目がなかったのでカスタマイズしてみました。
グローバルメニューの文字色をグレーにしホバー時の文字色は白に背景を濃いめのグレーに変更をしました。
css Google Chome デトロッパーツールの便利な使い方(wpでcssが反映されない時に確認する方法)
WordPress初心者の方など、cssが反映されない!と悩むことがあると思います。私も、wordpressの使い始めの頃、通常のHTMLとCSSのサイトを見て反映されない!!と悩んだことがありますので(笑) そんな時は、Google Chome デトロッパーツールを使ってみてください。
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>