自作WPテーマの編集
かねてからやりたいと思っていた当ホームページのトップページレイアウトの修正をついに成し遂げた。今回は備忘録もかねてポイントを書き記す。
修正したかった点
ホームページ（トップページ）のウィジェットが
右寄せで一列に並んでいる状態から
左から1ウィジェットずつ横に並ぶように改修したかった。
苦戦したポイント
- どのようにスタイルシート（style.css）を修正するか
- 膨大な行数のCSSのどこが当該箇所かわからない
- CSSを編集してもサイトに反映されない
以下に一つずつ、解決方法を紹介。
どのようにCSSを修正するか
そもそも久しぶりのテーマ編集で、スタイルシートがある場所から曖昧だった。確か前はFFFTPを使って、テキストエディタで編集したものをアップロードしていた気がする。色々と検討した結果、今回は下記方法で作業を実施した。
WordPressの機能 [外観] > [テーマエディタ]
膨大な行数のCSSのどこが該当箇所か
ものすごく凝ったCSSなわけではないがそれでも1000行少々。過去にはユーティリティツールとしてFirefoxの “Filebug” というアドオンを使っていたが、できればFirefoxを入れたくないと思い、今回はデベロッパーツールなるものを使った。結論、すごく便利だった。以下のショートカットで起動する。
shift + ctrl + I で起動
（ツールはブラウザ下に配置するのが使いやすかった）
CSSを編集してもサイトに反映されない
この問題は前にもあった。しかし、前とは違う原因だった。今回は、キャッシュが残っていたことが原因だった。キャッシュの消し方は以下を参考にさせてもらった。意外と面倒な作業が必要だった。
ChromeでCSSが反映されない？キャッシュ消去で対処
まとめ
前回もテーマの修正には苦戦した思い出があったけど、今回もそれを更新してしまった。。3時間くらいかかってしまった。やはり自分は文章を作るのは好きだけど、技術を探求するのはあまり好きなほうではないと実感。。出来たときの達成感と同時に時間もったいな！と思ってしまった。しかし、無事結果が出たことは何より。