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



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

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

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

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

タイトルを非表示

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

.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}}

新着記事

まずはこのコードを記事内に書きます。

[new_list count=8 type=large_thumb children=1]

次に、CSSでPCでは横4列・縦2列、モバイルでは横2列・縦4列で指定しました。

/*cocoon新着記事*/
.new-entry-cards.large-thumb{
display:flex;flex-wrap:wrap;
}
.new-entry-cards.large-thumb a{
width:23%;
margin-left:auto;margin-right:auto;
}
@media screen and (max-width:768px){
.new-entry-cards.large-thumb a{width:45%}
}
@media screen and (min-width:769px){
.new-entry-card .new-entry-card-title {font-size:1rem;}
}

詳しくは→新着記事一覧を表示するショートコードの利用方法 | Cocoon

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;}}

超余談

Cocoonを更新したら、モバイルの「column-left」に妙な余白ができました。
デベロッパーツールで見てCSSで指定しても直らないし悩みまくり。

その後、バージョン: 2.5.2.1に更新したら直りました。私の努力は一体。
「こういう時は放置に限るなあ」と思いました。