SlideShare a Scribd company logo
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

Burp Suite 2.0触ってみた
Burp Suite 2.0触ってみたBurp Suite 2.0触ってみた
Burp Suite 2.0触ってみた
Yu Iwama
 
S06 Azure バックアップを利用した Microsoft Azure 仮想マシンのバックアップ
S06 Azure バックアップを利用した Microsoft Azure 仮想マシンのバックアップS06 Azure バックアップを利用した Microsoft Azure 仮想マシンのバックアップ
S06 Azure バックアップを利用した Microsoft Azure 仮想マシンのバックアップMicrosoft Azure Japan
 
Azure vm の可用性を見直そう
Azure vm の可用性を見直そうAzure vm の可用性を見直そう
Azure vm の可用性を見直そう
ShuheiUda
 
雑談会議 Azure AD B2C 第一回
雑談会議 Azure AD B2C 第一回雑談会議 Azure AD B2C 第一回
雑談会議 Azure AD B2C 第一回
Tsubasa Yoshino
 
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
DeNA
 
Scala DSLの作り方
Scala DSLの作り方Scala DSLの作り方
Scala DSLの作り方
Tomoharu ASAMI
 
JPC2017 [D4] Microsoft 365 が実現するデジタル時代のセキュリティ
JPC2017 [D4] Microsoft 365 が実現するデジタル時代のセキュリティJPC2017 [D4] Microsoft 365 が実現するデジタル時代のセキュリティ
JPC2017 [D4] Microsoft 365 が実現するデジタル時代のセキュリティ
MPN Japan
 
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Yuichi Hasegawa
 
DeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャDeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャ
Haruto Otake
 
Webアプリケーションフレームワークとしての Drupalの可能性
Webアプリケーションフレームワークとしての Drupalの可能性Webアプリケーションフレームワークとしての Drupalの可能性
Webアプリケーションフレームワークとしての Drupalの可能性
Yoshikazu Aoyama
 
FOSS4G 2018 Tokyo QGISをつかったG空間情報センター活用
FOSS4G 2018 Tokyo QGISをつかったG空間情報センター活用FOSS4G 2018 Tokyo QGISをつかったG空間情報センター活用
FOSS4G 2018 Tokyo QGISをつかったG空間情報センター活用
shingo-ootomo
 
アジャイル開発のためのDatadog
アジャイル開発のためのDatadogアジャイル開発のためのDatadog
アジャイル開発のためのDatadog
Nobuyasu Seki
 
ウォーターフォール・アジャイル・DevOps どんなチームでも開発・テスト・リリースでVSTS/TFSをフル活用する方法
ウォーターフォール・アジャイル・DevOps どんなチームでも開発・テスト・リリースでVSTS/TFSをフル活用する方法ウォーターフォール・アジャイル・DevOps どんなチームでも開発・テスト・リリースでVSTS/TFSをフル活用する方法
ウォーターフォール・アジャイル・DevOps どんなチームでも開発・テスト・リリースでVSTS/TFSをフル活用する方法
慎一 古賀
 
Intuneによるパッチ管理
Intuneによるパッチ管理Intuneによるパッチ管理
Intuneによるパッチ管理
Suguru Kunii
 
Adaptive Cardsへの招待
Adaptive Cardsへの招待Adaptive Cardsへの招待
Adaptive Cardsへの招待
Nagao Hiroaki
 
App013 ここはあえて紙と
App013 ここはあえて紙とApp013 ここはあえて紙と
App013 ここはあえて紙と
Tech Summit 2016
 
Cloudciti Disaster Recovery as a Service
Cloudciti Disaster Recovery as a Service   Cloudciti Disaster Recovery as a Service
Cloudciti Disaster Recovery as a Service
PT Datacomm Diangraha
 
AppSheetを使い倒してみた ~ GASで1週間かかったアプリはどの程度で開発できるのか
AppSheetを使い倒してみた ~ GASで1週間かかったアプリはどの程度で開発できるのかAppSheetを使い倒してみた ~ GASで1週間かかったアプリはどの程度で開発できるのか
AppSheetを使い倒してみた ~ GASで1週間かかったアプリはどの程度で開発できるのか
Yukio Okajima
 
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
Developers Summit
 
S04_Microsoft XDR によるセキュアなハイブリッドクラウド環境の実現 [Microsoft Japan Digital Days]
S04_Microsoft XDR によるセキュアなハイブリッドクラウド環境の実現 [Microsoft Japan Digital Days]S04_Microsoft XDR によるセキュアなハイブリッドクラウド環境の実現 [Microsoft Japan Digital Days]
S04_Microsoft XDR によるセキュアなハイブリッドクラウド環境の実現 [Microsoft Japan Digital Days]
日本マイクロソフト株式会社
 

What's hot (20)

Burp Suite 2.0触ってみた
Burp Suite 2.0触ってみたBurp Suite 2.0触ってみた
Burp Suite 2.0触ってみた
 
S06 Azure バックアップを利用した Microsoft Azure 仮想マシンのバックアップ
S06 Azure バックアップを利用した Microsoft Azure 仮想マシンのバックアップS06 Azure バックアップを利用した Microsoft Azure 仮想マシンのバックアップ
S06 Azure バックアップを利用した Microsoft Azure 仮想マシンのバックアップ
 
Azure vm の可用性を見直そう
Azure vm の可用性を見直そうAzure vm の可用性を見直そう
Azure vm の可用性を見直そう
 
雑談会議 Azure AD B2C 第一回
雑談会議 Azure AD B2C 第一回雑談会議 Azure AD B2C 第一回
雑談会議 Azure AD B2C 第一回
 
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
 
Scala DSLの作り方
Scala DSLの作り方Scala DSLの作り方
Scala DSLの作り方
 
JPC2017 [D4] Microsoft 365 が実現するデジタル時代のセキュリティ
JPC2017 [D4] Microsoft 365 が実現するデジタル時代のセキュリティJPC2017 [D4] Microsoft 365 が実現するデジタル時代のセキュリティ
JPC2017 [D4] Microsoft 365 が実現するデジタル時代のセキュリティ
 
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
 
DeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャDeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャ
 
Webアプリケーションフレームワークとしての Drupalの可能性
Webアプリケーションフレームワークとしての Drupalの可能性Webアプリケーションフレームワークとしての Drupalの可能性
Webアプリケーションフレームワークとしての Drupalの可能性
 
FOSS4G 2018 Tokyo QGISをつかったG空間情報センター活用
FOSS4G 2018 Tokyo QGISをつかったG空間情報センター活用FOSS4G 2018 Tokyo QGISをつかったG空間情報センター活用
FOSS4G 2018 Tokyo QGISをつかったG空間情報センター活用
 
アジャイル開発のためのDatadog
アジャイル開発のためのDatadogアジャイル開発のためのDatadog
アジャイル開発のためのDatadog
 
ウォーターフォール・アジャイル・DevOps どんなチームでも開発・テスト・リリースでVSTS/TFSをフル活用する方法
ウォーターフォール・アジャイル・DevOps どんなチームでも開発・テスト・リリースでVSTS/TFSをフル活用する方法ウォーターフォール・アジャイル・DevOps どんなチームでも開発・テスト・リリースでVSTS/TFSをフル活用する方法
ウォーターフォール・アジャイル・DevOps どんなチームでも開発・テスト・リリースでVSTS/TFSをフル活用する方法
 
Intuneによるパッチ管理
Intuneによるパッチ管理Intuneによるパッチ管理
Intuneによるパッチ管理
 
Adaptive Cardsへの招待
Adaptive Cardsへの招待Adaptive Cardsへの招待
Adaptive Cardsへの招待
 
App013 ここはあえて紙と
App013 ここはあえて紙とApp013 ここはあえて紙と
App013 ここはあえて紙と
 
Cloudciti Disaster Recovery as a Service
Cloudciti Disaster Recovery as a Service   Cloudciti Disaster Recovery as a Service
Cloudciti Disaster Recovery as a Service
 
AppSheetを使い倒してみた ~ GASで1週間かかったアプリはどの程度で開発できるのか
AppSheetを使い倒してみた ~ GASで1週間かかったアプリはどの程度で開発できるのかAppSheetを使い倒してみた ~ GASで1週間かかったアプリはどの程度で開発できるのか
AppSheetを使い倒してみた ~ GASで1週間かかったアプリはどの程度で開発できるのか
 
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
 
S04_Microsoft XDR によるセキュアなハイブリッドクラウド環境の実現 [Microsoft Japan Digital Days]
S04_Microsoft XDR によるセキュアなハイブリッドクラウド環境の実現 [Microsoft Japan Digital Days]S04_Microsoft XDR によるセキュアなハイブリッドクラウド環境の実現 [Microsoft Japan Digital Days]
S04_Microsoft XDR によるセキュアなハイブリッドクラウド環境の実現 [Microsoft Japan Digital Days]
 

More from share life

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