Demo site URL:https://demo.themefreesia.com/edge-plus/

テーマの特徴 評価:★★★★★

・投稿記事をフロントにすると、テーマの特徴が生かせる
・投稿記事更新が頻繁にあるサイト向き(情報量が多い場合も)
・カスタマイズしなくても使える(画像で見せる)
・スライダー(ボックスサイズ 1230px)はカテゴリー表示(3~5件にとどめる)
・投稿記事を「先頭に固定表示」にすると背景に色が付く
 (投稿記事の表示件数にカウントされない・表示件数は3件~5件にとどめる)
・最新以外の投稿記事一覧は、2ブロックで表示される
・サイドやフッターのウィジェットを効果的に使う
・Column のブロックタグ有り

※full width テンプレート無し・固定ページを全幅にしたい場合は、page.php をカスタマイズ
※gallery テンプレートはあっても、そのままでは使えない

◆始めに

・page.php 、single.php からコメントソース削除
・page.php を全幅にカスタマイズ
  <div id=”primary”> ⇒ <div id=”primary” style=”width: 100% !important;”> 2か所
 

◆スタイルシート カスタマイズ

※レジメを作る

/* TABLE OF CONTENTS:

1.0 Browser Reset
2.0 Typography
3.0 Links
4.0 Body Structure
Column
5.0 Buttons
6.0 Accessibility
7.0 Alignments
8.0 Breadcrumb
9.0 Universal Clearfix
10.0 Forms
#Search Form
11.0 Logo-Name-Slogan
#Horizontal Line
12.0 Images
13.0 Margin-Padding-Border Override Classes
14.0 Layouts
15.0 Header Section
16.0 Social Links
17.0 Navigation
18.0 Content
19.0 Sidebars
20.0 Post
#Post Image
21.0 Gallery
#Post-Image-Paging Navigation
22.0 Attachments
23.0 Comments
24.0 Pages
25.0 Widgets
Search Widget
Promonational Area
Contact Widget
Calendar Widget
Posts Widget
Tag Cloud Widget
Googlemap Widget
26.0 Footer
Footer column
#Main Slider
#bbpress
Woocommerce
27.0 Original
================================================== */

 

※ヘッダー左のウィジェットブロック(センタリングから左寄せに)

.top-header .widget_contact {
font-size: 13px;
float: left;
text-align: left; ・・・追加
 

※Blockquote 変更(テーマが変わってもいつも同じ状態に)

/* —– #Blockquote shortcode start styles —– */

・削除
blockquote:before {
color: rgba(0, 0, 0, 0.2);
content: ‘\f10d’;
float: left;
font-family: “FontAwesome”;
font-size: 30px;
font-style: normal;
line-height: 24px;
padding-right: 10px;
}
blockquote {
color: #333;
font-family: ‘Lato’, sans-serif;
font-size: 16px;
font-style: italic;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
letter-spacing: 0.5px;
margin-bottom: 40px;
padding: 20px 20px 0;
position: relative;
quotes: none;
line-height: 28px;
}
blockquote cite {
display: block;
font-size: 15px;
font-style: normal;
text-align: right;
}
blockquote em,
blockquote i,
blockquote cite {
font-style: normal;
}
・書き換え

blockquote, blockquote p { color: #777; line-height: 24px; }
blockquote { margin: 20px; }
 

※.gallery-columns-3 の数値が、前のテーマと違う
max-width: 32%;
 

※最下段へ追加
※Contact form は、table が枠付きになるので外す ブロック要素も追記 .wpcf7 table
 

/* #27.0 Original
================================================== */

.wpcf7 table {
border-collapse: none;
}

.block-1 {float: left; display: inline; width: 46%; margin-right: 2%; }
.block-2 {float: left; display:inline; width:31.3%; text-align:center; line-heght:1.2; padding:0 2% 50px; vertical-align:top;}
.block-3 {float: left; display:inline-block; width:31.3%; text-align:left; line-heght:1.2; padding:0 2% 50px; vertical-align:top;}
.block-4 {float: left; display:inline-block; width:45%; text-align:left; line-heght:1.2; padding:75px 0 75px 45px; vertical-align:top;}
.red {color: #d64622}
.post-content {padding-top: 20px !important;}
.page-title {font-weight: 400 !important;}

@media only screen and (max-width: 768px) {

.block-1, block-2, block-3, block-4 {float: none; display: block; width: 100%; }
.block-left, .block-right { float: none; width: 100%; margin: 1%;}
.home {background-color: #222 !important;}
}


☆最新投稿の背景 #f4f4f4 を変更

/* —– Sticky Post —– */ 
#main .sticky {
background-color: #c8c2be;
 

☆全て大文字から表記通りの変更

#colophon .widget-title {

text-transform: none;
 

☆投稿記事の頭の文字 font-family 変更

.post:first-child .entry-content p:first-child:first-letter {

font-family: ‘Playfair Display’, YuMincho,Yu Mincho,’游明朝’,ヒラギノ明朝 ProN W6,HiraMinProN-W6,HG明朝E,MS P明朝,MS, sans-serif;
 

☆ボックスレイアウトを選択したら枠を消す(3段)

.boxed-layout #page {

-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); /* Safari 3-4, iOS 4.0.2 – 4.2, Android 2.3+ */
-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); /* Firefox 3.5 – 3.6 */
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
 

☆最下段のフッター背景色をグレーから白へ

/* —– Site Info —– */
.site-info {
background-color: #f8f8f8;

☆フッターウィジェット上下ボーダー削除
#colophon .widget-wrap {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1); ・・・削除