【Cocoon】トップページをサイト型にカスタマイズしました【WordPress】

以前からやってみたいと思いつつ、出来ていなかったトップページをサイト型へとカスタマイズしてみた。

ちなみにわたくし、エンジニアではあるがＷｅｂエンジニアではないので、カンとヒラメキとセンス（）のみでカスタマイズしている。なので、あくまでも参考程度に。

「サイト型」へのカスタマイズ方法
サイト構築にあたって今後やりたいこと
1. ローカルにwordpress環境構築したい
2. アドセンスの自動広告を制御できないか

「サイト型」へのカスタマイズ方法

参考にさせて頂いたサイト様

ぽんひろ.com（ぽんひろ様）のこちらの記事を参考にさせて頂いた。

わか

有難うございますっ！！！

基本的には、ぽんひろ様のコードを参照にカスタマイズしていけば良い。

とても簡単に出来たが、（なまじ中途半端に知識があった故に）幾つか嵌ったポイントがあったので以下で紹介させて頂こうと思う。

公開設定したのにページが意図した表示とならない

めちゃくちゃ嵌った。

結論から言うと「STEP6:固定ページをトップページに設定」まで、しっかりやらないと反映されない。

わか

念のため、トップページに設定する前にレイアウト確認したいな……固定ページを公開設定して……と。あれ、反映されない！　なんで！？

エンジニアらしくデバッグをした結果、コード中にある「.home #main」がどうも関係していることを突き止めた。きちんとは調べてないが恐らく、トップページのみの指定という感じなのではと思う。

わか

だから、トップページに適用しないと反映されないのか……

固定ページのままでも「.home #main」部分を削除すれば反映されるが、そうすると「h1」の部分が、あらぬところに影響が出るハズである。

また、ひとつ勉強になった。

更にステップアップして、見出しのカスタマイズをしてみよう

わか

見出しのh1を無くして、見出しのh2をトップ独自のにしたいなぁ

今はざっくりこんな感じなので

style.cssの方に定義した見出しh1スタイルを削除し

/* 削除！（実際に削除しても良い）*/
/*
 .home #main h1{
     font-size: 1em;
     color: #555;
     letter-spacing: 1px;
     margin: 1em 0 -2em;
     font-weight: 400;
     display: flex;
     align-items: center;
 }
 .home #main h1:before, .home #main h1:after {
     content: "";
     flex-grow: 1;
     height: 1px;
     background: #aaa;
     display: block;
 }
 .home #main h1:before {
     margin-right: .4em;
 }
 .home #main h1:after {
     margin-left: .4em;
 }
 */

次に、固定ページのタイトルを削除！

上のh1のコードにならって、style.cssの方に見出しh2のスタイルを追記

.home #main h2{
  color: black;
  position: relative;
  background: #f1f8ff;
  padding: 0.25em 0.5em;
  border-left: solid 2em #5c9ee7;
}

.home #main h2:before {
  font-family: "FontAwesome";
  content: "\f040";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: normal;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

きちんと適用されていれば、冒頭にペンのアイコンがついた青系の見出しが表示されているハズだ。
見出しデザインは「サルワカ」さんを参考にさせて頂いた。