wordpress

【WordPress/Cocoon】カスタマイズ記録

メインページカスタマイズ

他の人のサイトをみて必要そうな雰囲気のものは
真似てどんどん置いていく

お問い合わせページ作る

お仕事もらえるようにお問い合わせページを
作りました。
参考にしたサイトはこちら^^
丁寧で分かり易かった↓

【初心者可】Cocoonお問い合わせフォーム設置方法|WordPress
WordPressのCocoon(コクーン)でお問い合わせフォームを設置する手順をご紹介します。Cocoonはお問い合わせフォームの設置機能が無い為プラグインを使います。Googleアドセンスの合格に向けてブログを構築するならお問い合わせフォームは必須のメニューです。

フッターにもメニュー入れる

フッターにメニュー入れるとそれっぽい気がするから
とにかく置いたみた^^

フッターメニューを設定する方法
サイトフッターにある補助メニューの設定方法です。

アピールエリアカスタマイズ

cocoonにはアピールエリア というのがあって
ページの紹介に使う用みたいです。
私はヘッダーにたくさん余白を作りたくて
シンプルなヘッダーの下に アピールエリア でイラストを置いてみました^^
配置したのはこちらのイラスト。

画像だけおいたら アピールエリア の真ん中に
透過がかった資格がある・・・?
これはアピール用のテキストの背景みたいで
テキストを打ち込まなくても出てきてしまう。


調べて以下のようなコードを貼りました。

.appeal-content{
	display:none;
}


固定ページカスタマイズ

固定ページにインスタグラムの一覧貼る

何か容量のいい作品の見せ方ないかな〜と探してたら
インスタグラムをwordpressに貼り付けてくれるプラグインがあった!
これ良さそう

ショートコードとやらを使って固定ページにも設置できた。

Smash Balloon Social Photo Feed
ていうプラグイン。無料だよねこれ・・・ ドキドキ・・・

Smash Balloon Social Photo Feed
Formerly "Instagram Feed". Display beautifully clean, customizable, and responsive Instagram feeds from multiple Instagram accounts

インスタフィードが無事全部貼られて やった〜!と思いきや
めっちゃサイドバー 邪魔・・・・
調べたらcocoonの設定でLP用のページ設定とか色々あるみたい
面倒にならなくてよかった〜
https://t-arata.info/wp-1columnlp/

固定ページの見出しを非表示にした

イラストだけシンプルに紹介したい固定ページなのに
ど〜んと 見出しが出てダサくていやだ・・
そんなんで調べたら 見出しを消したい固定ページのIDを指定して
外観>カスタマイズ>追加CSS に貼れば良いみたい。

.page-id-000 h1.entry-title{  /*000のところには固定ページのIDを入れる*/
display:none;
}

細かい構造のことはここの方が言ってくれている
https://wp-customize.net/wordpress/7671.html

IDってどう確認するんだろっていうのはこっち
https://design-plus1.com/tcd-w/2017/01/check_pageid_categoryid.html

サイドバー カスタマイズ

サイドバー はあんまりゴチャゴチャしないでシンプルにしたい。
文字とか小さくしたり
タイトルとかあまりベタメン使いたくない
さらっとした印象がイメージかな。

サイドバー タイトルをシンプルにした

デフォルトだとタイトル文字は大きいし 黒いし 背景が大きい
(と言っても カスタマイズしやすいようにあえてそうしてあるらしい!
作った人すごいなあ・・・)

なのでとにかくめちゃくちゃ控えめにしたくてこのサイトを参考にしました
タイトルを中央寄せにして両側にシンプルなラインを作る↓
https://web-ashibi.net/archives/1761
そしてこれをみながらさらに存在がないように調整してみた。

.sidebar h3 {
    background: none;  /*背景色を解除*/
    font-size: 16px; /*文字サイズを小さく*/
    letter-spacing: 2px;  /*文字の間隔を少し広く*/
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%; /*ラインの長さ*/
    border-top: 3px solid #444d53; /*ラインの太さと色*/
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}

プロフィール欄作ったぞ

外観>ウィジット でプロフィール欄を作るんだけど
用意されているプロフィールのボックスってなんかさらなる何かに登録しなきゃで
面倒臭い・・・
もっと簡単な感じでいいんだよなあ・・ということで
どっかのサイトで見た感じので調整したよ。どのサイト見たんだろう・・・

<center>
<img class="profileimg" src="画像のurl" width="150" height="150" /></center>
<p style="text-align: center;"><strong>JUNICO</strong></p>
<p style="text-align: center;">紹介文つらつらと</p>

これはテキストウィジットをサイドバー に入れて
そのテキストウィジットの「テキスト」って方に↑このhtmlを入れた感じ。

サイドバー にSNSボタン入れてシンプルにした

サイドバー のSNSアイコンをとにかく小さく とにかくシンプルにしたかった。
構造はわからないけどこの方の説明を見ながら私なりにシンプルにしてみました。

【Cocoon】サイドバーのSNSフォローボタンをカスタマイズ
WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーにウィジェットで表示する「SNSフォローボタン」のカスタマイズをしてみました。サイドバーにプロフィールボックスを置いてる人は必要ないですが、プロフィールじゃな
.sidebar .sns-follow-buttons a {
  width: 18%; /*ボタンの幅*/
}
.sidebar .sns-follow {
  margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
  background: none !important;
  border: 1px solid #444d53;
  color: #444d53;
  border-radius: 50px;
}
.sidebar .twitter-button:hover {
  background-color: #1da1f2 !important;
  color: #fff;
  border-color: #1da1f2;
}
.sidebar .feedly-button:hover {
  background-color: #2bb24c !important;
  color: #fff;
  border-color: #2bb24c;
}
.sidebar .rss-button:hover {
  background-color: #f26522 !important;
  color: #fff;
  border-color: #f26522;
}
.sidebar .facebook-button:hover {
  background-color: #3b5998 !important;
  color: #fff;
  border-color: #3b5998;
}
.sidebar .instagram-button:hover {
  background-color: #c522b8 !important;
  color: #fff;
  border-color: #c522b8;

やっぱ正円がいいね
SNSボタンを正円にする方法ですって↓

  .sidebar .sns-follow-buttons {
    justify-content: center; /*ボタンを中央寄せにする*/
  }
  .sidebar .sns-follow {
    margin: 0 0 24px 0;
  }
  .sidebar .sns-follow-buttons a {
    border-radius: 50%;
    width: 40px; /*ボタンの横の大きさ*/
    height: 40px; /*ボタンの縦の大きさ*/
    font-size: 20px; /*アイコンのサイズ*/
    margin: 0 6px; /*ボタン同士の間隔*/
  }
  .sidebar .instagram-button {
    background-color: #c522b8 !important;

願わくば マウスオーバーしたときに色が出るの防ぎたいのだけど
どうしたらいいのだろう。
あまり色を増やしたくない・・・・

投稿ページカスタマイズ

とにかくシンプル
とにかくシンプル
情報は少なくしたい!

本文下のSNSシェアボタンの存在をとにかく薄くした!

デフォルトの状態では 大きなSNSフォローボタンがまずめっちゃ気になる。
ボタンが大きいと「私をみて!」感が強くて気になっちゃう。
なのでひっそりさせたい・・

そんなわけでこのサイトを見ながら↓ さらに小さく小さくした
https://medium-company.com/cocoon%E3%81%AEsns%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/

あれ!リンクめっちゃエンコード化されている・・!?
これがいわゆるパーマリンクに日本語が入っているからか
余計なお世話だろうけど エンコードに関しての記事貼っておこうっと
https://dev.classmethod.jp/articles/validate-permalink/

こんな感じに調整してシェアボタンめっちゃ小さくした。

  display: none;
}
#main .sns-share a {
  width: 2em;
  height: 2em;
  margin-left: 0.3em;
}
.sns-share-buttons {
  justify-content: center;
}
#main .social-icon {
  font-size:20px;
}

コメント