ブログを自分好みにしたい場合は、色、レイアウトなど好みに合わせて作りたいと
思う時があります。
そんな時に、役立てば嬉しく思います。
その他のカスタマイズも調べながら掲載していきます。
宜しくお願い致します。
プラグインのお問合せフォーム「Contact Form 7」の使い方
有名な問い合わせフォームプラグインの「Contact Form 7」を使い解説致します。
そしてお問い合わせフォーム「Contact Form 7」をダッシュボードのプラグインから
新規追加し有効化してください。
ContactForm7を有効化すると、左側の管理メニューに「お問い合わせ」が出ます。
そして新規追加を選びコンタクトフォームを選択してください。
「コンタクトフォーム 1」フォームを編集には、
「名前」「メールアドレス」「題名」「メッセージ本文」の項目が設けられていますので、
このまま左下の保存をしてください。
これで「コンタクトフォーム 1」のコードをコピーし、
お問い合わせフォームを固定ページや投稿のページの入れたい場所入れられます。
自動返信メールの設定は、「「メール」のタブをクリックしてください。
自動返信メールとは、フォームを使って問い合わせを行った人に自動で送られるメールです。
例として「お問い合わせありがとうございます。」や
会員の方に対して「完了のお知らせ」を送ったりなど、自動返信メールを設定することです。
「メール」タブの下の方に「メール(2)」のチェックボックスにチェックを入れると
自動返信メールが作成できるます。
「メール(2)」で問い合わせに対するコメントや返信までにかかる日数などを記載したり、
自動返信により送られたメールであることをメール冒頭で記載出来ます。
ただ残念なことにContact form 7はフォーム送信後に自動的に完了画面(サンクスページ)に
移行する機能が有りません。
そのためサンクスページを用意したい方はWordPressの固定ページなどで別途作成し、
フォーム送信後に移動するように設定する必要があります。
設定方法はお問い合わせフォーム用の編集画面に移動し、「ビジュアル」から「テキスト」に
変更したら下記のコードをテキストの上部に書き足すだけです。
<script>
document.addEventListener( ‘wpcf7mailsent’,function( event ){
location = ‘移動させたいサンクスページのURL’;
}, false );
</script>子テーマのstyle.cssでメインとサイドの背景色を変える。
メインとサイドの背景色を白から違う色に変えたい時、
子テーマのstyle.cssでメインとサイドの背景色を変えます。
バックの色に合わせメインとサイドの背景色を指定致します。
バックの色は、「#eee3ef」の色です。
「#eee3ef」の色を子テーマに下記を指定致します
/* main背景&サイド背景 。バックカラーと同じ#eee3ef*/
.main,
.sidebar {
background-color: #eee3ef; /* #eee3efの色はエメラルドグリーンの色 */
}
/* main背景&サイド背景終わり。 */メインカラムでのマウスオーバー(ホバー)時に色を変える
マウスオーバー時に、メインカラムでマウスを乗せると色が変わります。
その色を自分好みに変えられます。
変えるには管理画面(ダッシュボード)の「外観」から「テーマエディター」を
選択します。
下記のコードは、必ず「Cocoon Child」のスタイルシート(style.css)にコードを
書き込んでください。
コードの下の方の「background-color: #2eb6aa; /*背景色エメラルドグリール*/の
カラーコード#2eb6aa」は好きな色に変えてください。
その下の「color: #eee3ef; /*フォントカラー薄い紫*/」もカラーコードを好きな色に
変えて使ってください。
その下の「transition: all 0.5s ease;」の1sは、色が変わる時間で、0.5から3秒の間が
推奨です。
カラーコードを見ながら、好みの色で飾ってください。
サイドバーの文字サイズを変える
サイドバーの「最近の投稿」の文字サイズを変えるには、WordPressのスタイルシートに
コードを書いて、サイドバー文字サイズを変更します。
Cocoonにはサイドバーの文字の大きさを変える項目がありません。そこで、
「外観」から「カスタマイズ」を選択し、
「追加CSS」に次のコードを記載してください。
/***************************************************
メインカラムでの
マウスオーバー時の背景色を変更 背景色設定
****************************************************/
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
background-color: #2eb6aa; /*背景色エメラルドグリール*/
color: #eee3ef; /*フォントカラー薄い紫*/
transition: all 1s ease;
}
/***************************************************************
メインカラムでの
マウスオーバー時の背景色を変更 背景色設定。終わり。
****************************************************************/サイドバーの文字サイズを変える
サイドバー最初の1行目の本文変える
サイドバーの元の文字サイズは、18ピクセルです。その文字サイズを変えるには、WordPressの
スタイルシートにコードを書いて、サイドバー文字サイズを変更します。
Cocoonにはサイドバーの文字の大きさを変える項目がありません。
そこで、「外観」から「カスタマイズ」を選択し、「Cocoon Child」のスタイルシート(style.css)に
次のコードを書き込んでください。
または「追加CSS」に次のコードを記載してください。
ここでは、リストタグ(ul、li)で最初のリスト文字変更を行います。
文字の大きさは、13ピクセルと小さく致しました。
/***************************************************************
サイドバーの文字の大きさ変更。
リストタグ(ul、li)で最初のリスト文字変更。
****************************************************************/
字を雨季のコメントは、コードのコメントです。公開しても文字は出ません。
/***************************************************************
サイドバーの文字の大きさ変更。
リストタグ(ul、li)で最初のリスト文字変更。
****************************************************************/
.widget-sidebar ul li a {
font-size: 13px; /*13ピクセルの文字の大きさ*/
}
/***************************************************************
サイドバーの文字の大きさ変更。
リストタグ(ul、li)で最初のリスト文字変更。終わり。
****************************************************************/プロフィールの文字大きさの変更
プロフィールの文字大きさの変更は、「サイドバー最初の1行目の本文変える」と同じように
カスタマイズ画面から「追加CSS」に次のコードを入れます。
コメント