SlideShare a Scribd company logo
1 of 24
Download to read offline
Contact form 7
レイアウト編集
Wrodpress管理画面からCSSを変更する。
枠の幅と高さを変更する。
幅と高さが広くなった
変更後
メッセージ本文の枠の幅と高さを変更する。
ボタンのサイズと装飾を変更する。
デフォルトのボタン
ボタンのレイアウト変更
C9
Id属性とClass属性を指定する。
C1属性を中央寄せにする。
recaptcha設定を中央寄せにする。
ボタンを中央寄せにする。
Recaptcha設定とボタンの幅はどうやって調べたのか?
と思われている方はいらっしゃないでしょうか?
実はChrome拡張機能のPage Rulerを使いました。
Chrome拡張機能のPage Ruler
項目名の位置変更
項目名の下の余白を0pxにする
今回の背景は画像が連続してもつながるので支障がない
背景画像の設定
Wordpress管理画面→メディア→貼り付けたい画像
背景画像挿入
文字が見えにくくなったので、
文字色を白に変更します。
文字を白に変更
以上でcontact form 7のレイアウト
の変更について説明を終わります。
ご覧下さりありがとうございました。

More Related Content

What's hot

サイトリニューアル提案書
サイトリニューアル提案書サイトリニューアル提案書
サイトリニューアル提案書
wize_shibuya
 
Qiita Engineer Summit 2021 LT 食べログでフロントエンドのリプレースやっていってます!
Qiita Engineer Summit 2021 LT 食べログでフロントエンドのリプレースやっていってます!Qiita Engineer Summit 2021 LT 食べログでフロントエンドのリプレースやっていってます!
Qiita Engineer Summit 2021 LT 食べログでフロントエンドのリプレースやっていってます!
Tsuji Yuko
 

What's hot (20)

サイトリニューアル提案書
サイトリニューアル提案書サイトリニューアル提案書
サイトリニューアル提案書
 
正しいものを正しくつくる
正しいものを正しくつくる正しいものを正しくつくる
正しいものを正しくつくる
 
التخطيط والتنظيم الاداري المدرب صالح الزبيدي
التخطيط والتنظيم الاداري  المدرب صالح الزبيدي التخطيط والتنظيم الاداري  المدرب صالح الزبيدي
التخطيط والتنظيم الاداري المدرب صالح الزبيدي
 
大企業アジャイルの勘所 #devlovex #devlovexd
大企業アジャイルの勘所 #devlovex #devlovexd大企業アジャイルの勘所 #devlovex #devlovexd
大企業アジャイルの勘所 #devlovex #devlovexd
 
リクルート式ビッグデータ活用術
リクルート式ビッグデータ活用術リクルート式ビッグデータ活用術
リクルート式ビッグデータ活用術
 
إدارة الجودة الشاملة
إدارة الجودة الشاملةإدارة الجودة الشاملة
إدارة الجودة الشاملة
 
エンジニアが成長のエンジンになる日 #devsumi #natsumiC7
エンジニアが成長のエンジンになる日 #devsumi  #natsumiC7エンジニアが成長のエンジンになる日 #devsumi  #natsumiC7
エンジニアが成長のエンジンになる日 #devsumi #natsumiC7
 
結果的に組織がAgileな状態であること #agile #scrum #leanstartup
結果的に組織がAgileな状態であること #agile #scrum #leanstartup結果的に組織がAgileな状態であること #agile #scrum #leanstartup
結果的に組織がAgileな状態であること #agile #scrum #leanstartup
 
Yahoo!TW EWC Kick-off 雅虎奇摩 新舊福委會 交接大會
Yahoo!TW EWC Kick-off  雅虎奇摩 新舊福委會 交接大會Yahoo!TW EWC Kick-off  雅虎奇摩 新舊福委會 交接大會
Yahoo!TW EWC Kick-off 雅虎奇摩 新舊福委會 交接大會
 
社内スタートアップによる組織の成長に伴い発生する痛みとその解決策について45分拡大版 #devsumi #devsumiB
社内スタートアップによる組織の成長に伴い発生する痛みとその解決策について45分拡大版 #devsumi #devsumiB社内スタートアップによる組織の成長に伴い発生する痛みとその解決策について45分拡大版 #devsumi #devsumiB
社内スタートアップによる組織の成長に伴い発生する痛みとその解決策について45分拡大版 #devsumi #devsumiB
 
マネジメント3.0 新しいリーダーシップ概念
マネジメント3.0 新しいリーダーシップ概念マネジメント3.0 新しいリーダーシップ概念
マネジメント3.0 新しいリーダーシップ概念
 
【エイカレ・サミット2019】実証実験 優秀賞_三菱地所プロパティマネジメント「あたらしい転勤はじめました」
【エイカレ・サミット2019】実証実験 優秀賞_三菱地所プロパティマネジメント「あたらしい転勤はじめました」【エイカレ・サミット2019】実証実験 優秀賞_三菱地所プロパティマネジメント「あたらしい転勤はじめました」
【エイカレ・サミット2019】実証実験 優秀賞_三菱地所プロパティマネジメント「あたらしい転勤はじめました」
 
スマホマーケットの概要と、 マーケティングの失敗例と改善 (アナリティクス アソシエーション 特別セミナー)
スマホマーケットの概要と、マーケティングの失敗例と改善 (アナリティクス アソシエーション 特別セミナー)スマホマーケットの概要と、マーケティングの失敗例と改善 (アナリティクス アソシエーション 特別セミナー)
スマホマーケットの概要と、 マーケティングの失敗例と改善 (アナリティクス アソシエーション 特別セミナー)
 
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのかRedmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
Let's design MVP #devlove #leanstartup
Let's design MVP #devlove #leanstartupLet's design MVP #devlove #leanstartup
Let's design MVP #devlove #leanstartup
 
Qiita Engineer Summit 2021 LT 食べログでフロントエンドのリプレースやっていってます!
Qiita Engineer Summit 2021 LT 食べログでフロントエンドのリプレースやっていってます!Qiita Engineer Summit 2021 LT 食べログでフロントエンドのリプレースやっていってます!
Qiita Engineer Summit 2021 LT 食べログでフロントエンドのリプレースやっていってます!
 
الفرق بين التسويق والمبيعات
الفرق بين التسويق والمبيعاتالفرق بين التسويق والمبيعات
الفرق بين التسويق والمبيعات
 
モダナイゼーションがもたらす未来
モダナイゼーションがもたらす未来モダナイゼーションがもたらす未来
モダナイゼーションがもたらす未来
 
正しくないものをつくらない。7つの失敗パターン
正しくないものをつくらない。7つの失敗パターン正しくないものをつくらない。7つの失敗パターン
正しくないものをつくらない。7つの失敗パターン
 

More from share life

More from share life (7)

Hand Brakeインストール方法について(Mac)
Hand Brakeインストール方法について(Mac)Hand Brakeインストール方法について(Mac)
Hand Brakeインストール方法について(Mac)
 
ul、liのドット部分をアイコンでリスト化する方法
ul、liのドット部分をアイコンでリスト化する方法ul、liのドット部分をアイコンでリスト化する方法
ul、liのドット部分をアイコンでリスト化する方法
 
HP Photosmart Premium オールインワン プリンター C309gの設定方法
HP Photosmart Premium オールインワン プリンター C309gの設定方法HP Photosmart Premium オールインワン プリンター C309gの設定方法
HP Photosmart Premium オールインワン プリンター C309gの設定方法
 
Adode airとプリントマジックのインストール
Adode airとプリントマジックのインストールAdode airとプリントマジックのインストール
Adode airとプリントマジックのインストール
 
BeFunkyの簡単な操作について紹介します。
BeFunkyの簡単な操作について紹介します。BeFunkyの簡単な操作について紹介します。
BeFunkyの簡単な操作について紹介します。
 
Wordpressインストール方法
Wordpressインストール方法Wordpressインストール方法
Wordpressインストール方法
 
Contact form 7の基本操作
Contact form 7の基本操作Contact form 7の基本操作
Contact form 7の基本操作