WP touch Pro カスタマイズ設定 ー 角丸の枠線を消す手順

今日は寒く、一日中引きこもっていたおおひがしです。文字通り”自宅警備員”です。でも、仲間のみなさんとのコミュニケーションはできているいです。ネット万歳!いゃっほーっです。

さて、WP touch Pro のカスタマイズ。一番はじめにやりたかったのが、WP touch の特徴でもある角丸の枠線を無くすことでした。「WP touchだ!」と感じるデザインです。いい面もありますが、自分のデザインを作るのが今回の目的です。

なので消したい!わけです。

CSS

スタイルシートを書き換えたら、消せるだろうと考えていました。その前に”スタイルシートが適用できないってどうよ?”に、はまっていたのですけどね。

.post に枠線については、もとのテーマにあるスタイルシートにて下のように”border”にて定義されています。

[css]
.post {
background-color: #fff;
padding: 10px;
margin-bottom: 12px;
margin-right: 10px;
margin-left: 10px;
border: 1px solid #b1b1b1;
-webkit-border-radius: 8px;
position: relative;
z-index: 0;
box-shadow: rgba(255,255,255,.8) 0px 1px 0px;
}
[/css]

これを次のように書き換えます。

[css]
.post {
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #999;
}
[/css]

Proの場合は子テーマに設定したら良いと思って作業しましたが、どうも上手くいきません。ソースを見るとスタイルシートの読み込みが通常と違う設定になっています。

完全に理解している?と聞かれると「実はね」なのですが、結果的に上手く設定できました。その手順はこのとおりです。子テーマのディレクトリは「/wp-content/wptouch-data/themes/classic-child-1/iphone」です。

元のオリジナルテーマにある、style.cssとstyle.min.cssのバックアップをとる。

これら2つファイルを子テーマのディレクトリにコピーする。

オリジナルテーマの2つのスタイルシートを削除。

これで上手くいきました。本当は子テーマだけで上手くいくはずなのですが、どうも上手くできませんでした。理解不足なのが原因なのですが、いまのところは結果オーライで行きます。

style.min.cssは圧縮スタイルシートというものらしいです。style.cssから、コメント・改行・スペース・タブなど不要なものをそぎ落として、1バイトでも少なくしたものです。

WP touchではこれが適用されます。カスタマイズ中は通常のスタイルシートでもOKなので、style.min.cssはorg.style.min.cssとして保存し、style.cssをコピーしました。そして、これを書き直してカスタマイズしました。

下の曲線

スタイルシートが適用できて、よし!と思ってました。が、下の両サイドに曲線が残っています。なんとも不安定なデザインです。これを消します。

Border r001

これはスタイルシートからでなく、single.php(トップページはblog-loop.php)を書き換えました。”rounded-corners-8px”の記述を削除しました。

Round001

今考えたら、スタイルシートの”.rounded-corners-8px”を削除しても良かったかもしれません。おおひがしは、スタイルシートが適用できないと悩みながらの作業でした。そのため、phpを書き換えました。

まとめ

WP touch Proの特徴になっている角丸の枠線デザインを取り外す作業をしました。適用されるスタイルシートがstyle.min.cssになったりと、独特の作法に気をつけます。

カスタマイズは2箇所しました。スタイルシートの”.post”の設定を変更し、single.phpなどの中にある”rounded-corners-8px”の記述を削除しました。

Border002

これで枠線のないデザインになりました。これだけでも、WPtouchとは違った印象に変えることができました。ここからがデザインカスタマイズをがんばります。

デザインするって楽しいです。皆さんはどう感じられましたか?

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール必須
お名前(姓)必須
お名前(名)必須
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

博士課程中退 / WEB・ITコンサルタント(業界歴 9年以上) / 岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年) / ニックネーム : ものくろ / ブロガー / WordPress & Woocommerceが得意 / orz レイアウト開発者 / 株式会社 あみだす 代表取締役

サービス提供領域

  • WEBコンサルティング
  • WEB・コンテンツ マーケティング
  • SEO コンサルティング
  • WEBサイト制作・運用保守サポート
  • EC サイト制作・運用保守サポート
  • WordPress 導入サポート
  • WordPress 運用サポート
  • SNS コンサルティング
  • Youtube コンサルティング
  • 情報発信 サポート
  • IT・WEBの枠組みを超えた経営支援
  • 講師・ワークショップ 運営サポート
  • 心理カウンセリング
  • 企業様向け コミュニケーション研修
  • 経営者様向け サポート
  • 自己成長・探求 サポート

お仕事のご依頼はこちら

WEB・ITコンサルティング

カウンセリング・セラピー

公式LINE

公式LINEにて、不定期ながら、モニターセッションやお得情報などのスケジュール案内や、心と向き合うコツなどを発信し、日常の中でカウンセリングの視点からの”気づき”を公式LINEにて語ります。ぜひ、ご登録ください。

友だち追加

講座・ワークショップ 開催予定

2023-01-07 09:30 – 19:30
2023年1月7日 18きっぷを楽しむ1日
詳細・お申し込みはこちら

2023-01-07 13:00 – 15:00
大阪【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-09 20:00 – 21:30
【あみだす新春スペシャル】運気に乗ろう!暦を味方に付ける講座:オンライン
詳細・お申し込みはこちら

2023-01-11 19:30 – 21:30
【ものくろキャンプ】全5回 第二水曜日・オンライン開催 「情報発信しようとするとなぜか?ブロックがかかってしまう人のためのブログ・SNS講座」
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-12 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 1月12日
詳細・お申し込みはこちら

2023-01-14 11:00 – 13:30
オンライン【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-14 15:00 – 17:30
【あみだす発酵アカデミー】イカの塩辛作りクラス
詳細・お申し込みはこちら

2023-01-15 13:00 – 15:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-18 19:00 – 20:30
あみだすマインドフルネス 瞑想会
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-27 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 1月27日
詳細・お申し込みはこちら

2023-01-28 14:00 – 17:30
”職場のコミュニケーションが良くなる”働く人のための傾聴講座 3回連続講座
詳細・お申し込みはこちら

2023-02-09 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 2月9日
詳細・お申し込みはこちら

2023-02-18 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-19 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-23 11:00 – 13:30
木・祝日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


カテゴリー 一覧