フロントページのメインビジュアルに、プラグイン「grayish MV add」を使用中!詳しくはここをClick!
PR

マニュアル

カスタマイズ

Cocoonの新機能でパターンデータをシェア可能に!作例のパターンをシェア&使い方

サイト型のフロントページに使えるようなブロックの作例を前の記事でご紹介しましたが、ブロックの作成、追加CSSクラス名の入力など作業が割と多く、もっと手軽にシェアしたいと思ってました。Cocoon ver2.7.1より追加されたパターン機能で、パターンデータのエクスポート&インポートが可能になった為、各自でインポート可能なデータを用意することにしました。これによってブロックに関しては簡単に作例と同じ構成で使用可能です。専用のCSSを追加することでデザインを再現できます。 WordPress6.5ではパターンの場所が変更になり、タイトルの変更ができなくなっていますが、コードエディターに切り替えることで変更可能です。この手順も追記しています。 ※WordPress6.6では、管理画面上にある管理メニューの中に、6.5までの「パターン一覧」があります。こちらについて追記しています。
カスタマイズ

サイト型フロントページにも使える!カバーブロックを画面の幅いっぱいに広げるサンプルコード

サイト型フロントページなど、1カラムのページで使用可能な、カバーブロックや画像ブロックを画面幅いっぱいに広げるサンプルコードをご紹介します。 HTMLを書くことなくCSSだけでできます。ブロックの高度な設定で追加CSSクラスを付け、対応するCSSを子テーマやページのカスタムCSSに追加することで実現します。 背景を画面幅いっぱいにして作るNews(新着情報)セクションの作例も載せています。
カスタマイズ

サイト型にしたい場合の準備編

サイト型にするための準備として、フロントページ・新着記事一覧用の固定ページを作成する手順と、 WordPress管理画面の表示設定について紹介しています。 このサイトのフロントページの構成についても解説しています。
スポンサーリンク
マニュアル

CocoonのOGP設定。X(旧Twitter)やFacebookへシェアしたときの表示を確認しよう※2024年2月現在

サイトのURLや、投稿、固定ページをSNSへシェアした際に表示される画像の設定について書いています。主にX(旧Twitter)向けの内容です。 grayishに限らず、Cocoonをご利用なら共通の内容になります。 Xについては2022年から2023年にかけて表示の仕様変更が続いているため、この記事執筆時点2024年2月の内容になります。
マニュアル

記事の装飾に使える、スキン独自のカラーパレット

Cocoonブロックなどの、スキン独自スタイルに使用しているカラーについて、記事内でも利用できるようにカラーパレットに追加しています。 段落などのテキスト、背景色を変えるだけでも印象が変わるので、是非ご活用ください。 ハイライトとして一部分だけの色変更にも使用できます。 ご自分だけのカラーを追加したい場合は、Cocoon設定から追加可能なのでお試しください。
カスタマイズ

子テーマのCSSでカスタマイズしたい場合

サイトフォントやサイトリンク色はスキン制御されていますが、これらは子テーマのCSSでカスタマイズすれば任意の値に変更可能です。スキン制御を外す、という作業はしたくないんだけど、変更したいという方に向けた内容です。 また、スキンのテーマカスタマイザーでカラー変更をする際に、特定の部分は別のカラーにしたい、というケースもあると思います。そのような場合も子テーマのCSSカスタマイズで変更可能です。 この記事に載せるコードは推奨ではなく参考用ですので、予めご了承ください。
マニュアル

推奨画像サイズ一覧

grayishの記事アイキャッチはアスペクト比16:9で作成することを推奨します。メインビジュアルも同様で、画面いっぱいに表示されるのでアイキャッチよりも大きいサイズ(1920px x 1080px)で作成されることをおすすめします。 その他、プロフィール画像やファビコン、OGP画像についても明記してますので画像作成の際に参考になさってください。 iPhoneなどでサムネイル画像がぼやけて見える場合は、Retinaディスプレイ対応をONにすることをおすすめします。
カスタマイズ

テーマカスタマイザー:NewPost等のテキストを変更する

フロントページの見出し上テキスト「New Post」や「Category」、ボタンの「More」、一覧ページの下に表示される「次のページ」等を各自の好みのテキストに変更することができます。また、フロントページ以外に表示されるパンくずリストの「Home」についても好きなテキストに変更可能です。
カスタマイズ

テーマカスタマイザー:グローバルナビの高さや背景色を変更する(PC時)

フロントページと、その他のページで設定する項目を分けています。 その他のページではロゴ画像が設定されている場合、ロゴ画像が見やすいように高さを調整するのに役立つと思います。 ヘッダーの背景色について、デフォルトでは薄いグレーの半透明ですが、サイトに合わせて色を変更したり、半透明を透明にしたり等をお好みで行うことができます。
カスタマイズ

テーマカスタマイザーでカラー変更(使い方とカラーの適用箇所まとめ)

grayish独自のテーマカスタマイザーではテキストカラー、アクセントカラー5色の変更が可能になっています。 それぞれを変更した場合、どこが変わるのかについてまとめています。 デザインの統一感をだすために、変更される場合はばらばらの色ではなく、それぞれ連動したカラー設定をおすすめします。
マニュアル

投稿・固定ページ:SNSシェア・フォローボタンの設定

トップシェアボタンの縦表示は、画面幅1400px以下で元のアイキャッチ下に横並びに変わります。また、フッター近くになるとふわっと表示が消える仕様です。 ボトムシェアボタン、フォローボタンについてもスキン独自スタイルになっています。
スポンサーリンク
タイトルとURLをコピーしました