LINEで送る
Pocket
このエントリーをはてなブックマークに追加


こんにちは、最近何かと忙しい管理人のKn0wsです。

皆さんはChocolatというテーマをご存知でしょうか。

日本のMignon Styleさんが制作した国産の無料テーマで、女性らしい可愛いデザインと無料とは思えない高機能さ、カスタマイズのし易さに定評のあるテーマです。

さて、そんな需要の高いテーマだからこそ、カスタマイズしたくなる部分もあります。

私は先日、Chocolatを使ったウェブマガジンの作成を依頼され、その際に『レース部分を消してほしい』と依頼されましたので、今回はその方法を紹介します。

制作者様のこだわりが見られる部分もありますが、『このテーマじゃないと嫌だ!でも、ここだけ修正したい…』ということはよくあります。カスタマイズしてこそのWordPressテーマですので、仕方のないことだとは思いますが…

スポンサーリンク




手順

このレース部分ですが、削除したい場合や変更したい場合、htmlやphpコードを見る方がいらっしゃいますが、実はCSS部分を見なければなりません。

ブラウザの開発者ツールでインスペクタを使うと分かりますが、画像の位置にカーソルを当てても該当コードが表示されません。

そのため、これはcssでの画像挿入ということになります。

まず、Chocolatのテーマを編集する場合、ローカルで行う方法とWordPress上で直接行う方法があります。

ローカルで行う場合、FTPクライアントにてwp-content/themes/Chocolat/style.css をローカルに保存し、エディターで開いてください。編集後、同じ場所にアップロードしてください。

WordPress上で行う場合、テーマの編集を行うために、パーミッションを変更し、書き込み権限を与えてください。今回はWordPress上で行うことを想定し、解説します。

まず、外観->テーマの編集へ移動します。

デフォルトではstyle.cssが選択されています。

以下のコードの部分を見つけます。エディターの場合、1158行目にあります。

ここの#headerと下の#header #header-innerをコメントアウトします。画像を置き換える場合はurl部分を変更指定してください。

これで、上部のレースは消え、空いたスペースも削除できました。

次はフッター部分のレースです。

フッターの場合、#footer:beforeをコメントアウトします。エディターの場合は2380行目にあります。

これで、上下のレース部分の削除ができました。画像を置き替える場合は、コメントアウトせずにurlを変えるかFTP上のimg/base内の画像に上書きするだけです。

サイト全体の画像を置き換えたい場合は、エディターで条件一致検索にてimg/baseを検索し、そこのurlを書き換えるだけですが、面倒な場合は名前を変えずにディレクトリに上書き保存をした方が良いでしょう。

いかがでしょうか。

Chocolatは素晴らしいテーマで、変わらずシェア数も多いため、同じような問題にかかってくる方もいらっしゃるとは思います。

機能も使いやすく、おすすめのテーマですので是非一度、使ってみてくださいね。

Chocolat – WordPress Theme Directory


スポンサーリンク