WordPressフロントページカスタマイズ

現在の当サイトのフロントページはこんな感じ（WordPress：テーマCocoon）。
上から新着記事、Google検索フォーム、カテゴリー、SNS、タグを表示しています。

今までも何度か作り替えたのですが、センス0のせいか「今回も良く見ればイマイチ」と思い軽く作り直すことにしたので、CSSなど覚え書き程度に記載しておこうかと思います。

基本的な設定方法は以下のページに書いてあります。

CSSは「日付を非表示」以外はフロントページ下にある「カスタムCSS」に書いています。

タイトルを非表示
グローバルメニューを非表示
日付を非表示
新着記事
Googleカスタム検索ボックス
カテゴリー
タグ
超余談

タイトルを非表示

ヘッダー部分を丸ごと非表示にしてあります。

.header {display:none;}

タイトルは別途<h1>で指定。頭に固定ページID（.page-id-固定ページID）、次に「.article h1」でフォントのサイズや文字間などを指定しました。

.page-id-固定ページID .article h1{
width:100%;
font-size:1.7rem;
background:#fff;
color:#313131;
text-align:center;
letter-spacing:0.08em;
padding:0px 0px;
margin:0px 0px 40px 0px;
margin-left:auto;
margin-right:auto;
border:0;}
/*モバイル*/
@media screen and (max-width:1024px) {
.article h1{font-size:1.8rem;}}

グローバルメニューを非表示

.navi-in {display:none;}

【WP】メニューグローバルナビの作成方法とカスタマイズ

日付を非表示

「テーマファイルエディタのスタイルシート」に書いて固定ページ全て非表示にしています。

/*固定ページ日付など非表示*/
.home.page .author-info,.home.page .entry-title,
.home.page .post-date,.home.page .post-update{display:none}
@media screen and (max-width:480px){
.home.page .entry-title{display:none}}

Googleカスタム検索ボックス

パソコンから見た時だけ幅を少し狭くするようにしています。

以前はこういったコードで効いたのですが、

@media screen and (min-width:1024px){
.search-box{width:70%;margin:0 auto;}}

リニューアルしてから効き目がなくなってしまったので、
（クラス名 googlebox・gcse-search・gsc-search-box どれも効かない感じ）

クラス名は適当に「googlebox_semai」とかにして、CSSにこのように記述し、

@media screen and (min-width:1024px){
.googlebox_semai{width:70%;margin:0 auto;}}

カスタム検索を載せたいところにこのように書いています。

<div class="googlebox_semai">Googleカスタム検索コード</div>

サイトにGoogleカスタム検索を設置する2つの方法

カテゴリー

カラムで3列で表示させました。

<div class="column-wrap column-3">
<div class="column-left">
左側
</div>
<div class="column-center">
中央
</div>
<div class="column-right">
右側
</div>
</div>

このままだとモバイルで見た時に1列になるので、CSSで指定してモバイルでも3列になるようにしました。

/*モバイルでも3列*/
@media screen and (max-width:1024px) {
.column-wrap{
flex-direction:row !important;}}

記事内を2カラム・3カラム・4カラムに分ける方法 | Cocoon

また、カラムの両端にゆとりを設けました。

.column-left {padding:0px 10px;}
.column-center {padding:0px 10px;}
.column-right {padding:0px 10px;}

アイコンは「ICOOON MONO」からお借りしました。文字は<h3>で表示（※この辺りがセンスのなさを痛感）

.page-id-***** .article h3{
font-size:1.1rem;
text-align:center;
letter-spacing:0.05em;
background:#fff;
border:0;
line-height:50px;}
.page-id-***** .article h3 a{
color:#333132;}
.page-id-***** .article h3 a:hover{
color:#333132;
background-color:#F2F2F2}
@media screen and (max-width:834px){
.page-id-***** .article h3{font-size:1.2rem;}}

/*タグ*/
.page-id-*** .tagcloud{
width:100%;
margin-left:auto;margin-right:auto;}
.tagcloud a{
padding:3px 5px;
font-size:1.0rem;
margin:1px;
flex:0 1 auto;
display:flex;}
/*タグモバイル*/
@media screen and (max-width:1023px) {
.page-id-*** .tagcloud{margin-left:5px;}
.tagcloud a{font-size:1.1rem;}}