WordPress

Sango風例!?CocconやSwellをおしゃれにデザインカスタマイズ

WordPress

現在、ithand(旧ebookbran)ではコクーン(cocoon)を利用しています。おしゃれにコクーン(cocoon)のデザインをカスタマイズしています(まだまだ道半ば)。Swellも使っていますが、同じような感じです。

まだ整理中のところもありますけど、いろいろとCSSをのっけています。デザインは主に後半に記述しました。

PR記事:オリジナル自作あり!Twitter予約投稿ツール比較

Sango風例!?CocconやSwellをおしゃれにデザインカスタマイズ

Sango風のデザインにするには、サイドバーのプロフィールボックスとシェアボタンを変えればわりとっぽくなります。あとは人気記事は正方形を選び、アイコンボックスをつけるかぐらいですかね。

アイキャッチはそれっぽいものをStockPhotoサービスで購入すればいいでしょう。基本かわいい感じにすることです。CocoonもSwellも一緒です。

【動画などの料金比較】シャッターストックとPIXTAとadobestockの比較【どっち!?】
ebookbrain.net

ただ、それだけだとつまらないので、オリジナリティをつけていきたいですね。個人的にどちらかというと可愛いデザインが好みのため、参考にさせてもらっています。

Sangoはデザインが1番素敵なテーマだと思いますが、Sangoを使わない理由としてブログカードがURLではなくIDなので好きではありません。IDを調べるのが面倒ですし、ショートコードって乗り換え時に問題になりやすいので好きじゃないのですよね。

その他の原因としては比較記事をみてください。

【比較】SWELL/stork19/JIN:R/sango/Cocoon【テーマの違い、どっち!】
ebookbrain.net
スポンサーリンク

コクーン(cocoon)のカスタマイズ【デザイン・配色のカスタマイズ】

配色は面積が大きいところから決めていきますね。面積が多い背景色からですね。

Cocoon 設定 > Cocoon 設定 > 全体 > 背景色

背景パターンの指定

背景パターンの指定方法です。

Cocoon 設定 > Cocoon 設定 > 全体 > サイト背景画像

外観 > カスタマイズ > 背景画像 の方がより詳しいい設定ができるようです。こちらの方が優先度が高いです。繰り替えしパターンが使いたい場合は、外観のカスタマイズからやりましょう。

記事背景色の指定

記事背景色の変更は以下のとおりです。本文の背景色ですね。

.main{
  background-color: #f2f2f2; 	
}

サイドバーの透化

サイドバーを透化させる方法です。RGBの値、最後の値はアルファー値です。0にすると完全透明になります。

.sidebar {
  background-color: rgba(255, 255, 255, 0);
}

装飾

cssでデフォルトのものををカスタマイズしています。
色は統一して枠で囲わないすっきりとしたデザインにしました。
まだ完成していないため、今後手をいれたいですね。
Cocoon Blocksの現在の対応状況
wp-cocoon.com

アイコンボックスの使い方

一部調べたためメモしておきます。マルバツもありますが、面積的に手のアイコンの方がシルエットがしっくりときたため、そちらを採用しました。

good-box

<div class="good-box common-icon-box">
メリットです。
</div>
メリットです。

bad-box

<div class="bad-box common-icon-box">
デメリットです。
</div>
デメリットです。

使うものだけお好みでカスタマイズすればOKでしょう。

Cocoon Blocksの現在の対応状況
wp-cocoon.com

サムネイル画像は正方形にする

デザインが長方形だけだと統一感がでてしまうため、リズミカルにするため、 1:1（正方形）のサムネイル画像を採用しました。ちなみに、simplicityもこのサイズです。

Cocoon 設定 > Cocoon 設定 > 画像 > サムネイル画像 > 1:1（正方形）

設定は今後、この画像サイズを生成しますよ、という設定の変更です。実際に画像が生成されるわけではありません。

画像の再生成はRegenerate Thumbnailsというプラグインを使います。

【Wordpressサムネイル管理】登録・再生成・削除するメディアライブラリ管理プラグイン
ebookbrain.net

吹き出し

Cocoon設定 > 吹き出し > 新規追加

画像はアップロードしなくてもURLを指定することも可能です。

ねこにゃん
ねこにゃん

にゃんにゃん

猫パンチ

ワンコ
ワンコ

わんわん

わんこそば

吹き出し内の改行がうまくできませんでした。

&nbsp;

を入れるしかないようです。

左右反転は簡単にできます。2つ登録するのが面倒な場合に。

sbp-l

sbp-r

考え事

sbs-think

スタンダード

sbs-stn

吹き出しの三角がない

sbs-flat

sbs-lineはine風にsbs-stnを色替えするようです。

sbis-cb 丸枠の枠あり
sbis-sb 四角枠の枠あり
sbis-cn 丸枠の枠なし
sbis-sn 四角枠の枠なし

c(circle)、s(square)、b(border)、n(none)の意味かと思います。なおborderはcssで指定すると、そちらの方が優先度が高いようです。

フォント変更

Cocoon 設定 > Cocoon 設定 > 全体 > フォント

メイリオが好きなので、メイリオにしました。

preloaderの設定

このサイトでは利用していません。preloaderのプラグインが必要です。最後に記載されているプラグインを利用してください。

PreloaderのWordPressプラグイン比較【おすすめは?】
ebookbrain.net

その上でコクーンの場合は、tmp-user/body-top-insert.phpが子テーマにあります。

そこに

<div id="wptime-plugin-preloader"></div>

を挟みます。

トップページの作り方

トップページに固定記事を割り当てればOKです。その上で邪魔の要素を消します。

.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

全部消さなくてもOKです。

あとはカラムなどを使ってデザインしていくとよいでしょう。

1カラムの商品ページの作り方

ページ設定 > ページタイプの1カラム(ワイド)

カバーというブロックがあるため、それを使うとよいでしょう。

固定ページ(特定記事)のアイキャッチの削除

xxxに記事noを入れます。

/* アイキャッチの削除 */
.page-id-xxx .eye-catch-wrap {
  display: none;
}

プロフィールボックス

サイドバーに表示するプロフィールボックスはSANGOのデザインがよい感じです。Cocoon用はうぇぶあしびさんで公開されていたため、そのまま借用して楽をさせてもらいました。ありがとうございます。

【Cocoon】プロフィールボックスをSANGO風にカスタマイズ
web-ashibi.net

色を少し変えたぐらいですかね。

.sidebar .author-box {
    background-color: #eee9d3;
}
.sidebar .author-thumb img {
    border: 3px solid #eee9d3;
    background-color: #f1f1f1;
}

あと、インスタグラムのボタンをグラデにしたい場合はこちらいけますかね。

.author-box .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}

プロフィールボックスのリンク集はWordPressの管理画面から設定します。

ユーザー > プロフィール

少し不具合があって次の修正をしました。Twitterのアイコンが表示されない問題はコメントアウトで対応

/*
.author-box .icon-twitter-logo::before {
    font-family: FontAwesome;
    content: "\f099"
}
*/

noteの背景色が表示されない問題は次のコードを追加。

.author-box .note-button { background-color: #41C9B4 !important; }

複数のライターさんが参加している場合は記事下にプロフィールをのせたい気がしますが、ひとりで運営しているサイトはサイドバーがいいですかね。

人気記事を正方形にすると数字がはみだす

人気記事を正方形表示にした場合、数字が2桁(10位)になると2行になりはみだすようです。以下で修正できますね。

.widget-entry-cards.ranking-visible .card-thumb::before {
  width: auto;
  min-width: 18px;
}

人気記事のカスタマイズ

たとえば、円にしたい場合は以下のようになりますね。上記の不具合対応こみです。

.widget-entry-cards.ranking-visible .card-thumb::before {
  top: 6px;
  left: 6px;
  border-radius: 50%;
  width: auto;
  min-width: 18px;
}

サイドバーの見出しにアイコン

サイドバーの見出しにアイコンをつけます。Font Awesome 4用です。

/************************************
** サイドバーの見出しにアイコン
************************************/
.widget h3::before { font-family: FontAwesome; font-size: 80%; vertical-align: middle; font-weight: normal; margin-right: 5px; }
.widget_popular_entries h3::before { content: '\f135'; }
.widget_author_box h3::before { content: '\f135'; }
.widget_recent_comments h3::before { content: '\f0e6'; }
.widget_custom_html h3:first-child::before  { content: '\f135'; }

Font Awesome 5用です。

/************************************
** サイドバーの見出しにアイコン
************************************/
.widget h3::before {
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-weight: 900;
  font-size: 80%;
  vertical-align: middle;
  margin-right: 5px;
}
.widget_popular_entries h3::before { content: '\f5a2'; }
.widget_author_box h3::before { content: '\f2c1'; }
.widget_recent_comments h3::before { content: '\f086'; }
.widget_custom_html h3:first-child::before  { content: '\f0c8'; }

widget_custom_htmlは複数ある場合があるため、必要に応じて順番をつけないといけませんかね。

まだまだ道半ばですので、暇をみてカスタマイズしたら追記していきます。

グーテンベルクのテーブルで枠線が表示されない

少しまともになってきたため、1サイトだけ試験的にグーテンベルクを採用しています。テーブルでborderが効かない症状が発生しました。

/************************************
** テーブル
************************************/

table th, table td {
   font-size: 12px;
   border: 1px solid #ccc !important;
}

いったん、!importantで切り抜けちゃいました。

画像クリック時に拡大(画像の拡大効果)

Cocoon設定 > 画像> 画像の拡大効果

ライブラリを使っているようですが、サイズがでかい縦長の長い画像はいい塩梅になりませんでした。

  • なし→ 2回クリックすると最大の画像サイズになる。スクロールもできる
  • Spotlight（軽量・高機能ギャラリー） →拡大の最大値が決まっているため文字が読めない
  • baguetteBox（軽量・スマホ向け）→縦長画像が画面サイズにおさまってしまう(小型ノートPCの場合読めない)。拡大できない
  • Lity（軽量・1枚ずつ表示）→縦長画像が画面サイズにおさまってしまう(小型ノートPCの場合読めない)。拡大できない
  • Lightbox →縦長画像が画面サイズにおさまってしまう(小型ノートPCの場合読めない)。拡大できない

なしにするのが１番よいです。時間があればプラグインを検討しようと思います。

なお画像は選択した上で[リンクアイコン]をクリックする設定が必要があります。設定がないと反応しません。

タイムライン

とりあえずborderの枠は入りませんかね。

.timeline-box {
  border: none;
}

SNSのシェアボタン

Sango風にするには角丸や円にするとよいです。

/************************************
** 記事内シェアボタン
************************************/

#main .sns-share-buttons {
  justify-content: center;
}

#main .sns-share a {
  width: 70px;
  height: 70px;
  border-radius: 30%;
  margin: 0 10px;
}

コメント

タイトルとURLをコピーしました