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

カスタマイズ

記事内に広告が含まれています。
カスタマイズ

Cocoonの新着記事ブロックなどをスライダーにできるプラグイン作りました

新着記事ブロックなどの追加CSSクラスに指定のクラス名を入力することで、自動で横方向にアニメーションするスライダーにできます。 等速で無限ループするタイプと、記事ごとにスナップするノーマルタイプから選択します。 細かいカスタマイズはできませんが、手軽に記事のスライダーをつくることができます。 grayishを使用していないCocoonスキンなしでも動作します。いくつか注意点がありますので、記事の内容をよくご確認になってからご利用ください。
カスタマイズ

メインビジュアルにスライダーや動画を設定できるプラグイン作りました(※v1.0.8にアップデート。不具合修正)

grayishのメインビジュアルにスライダー、動画を設定するプラグインを作りましたので紹介いたします。 専用のパターンを使用します。パターンとプラグインをこの記事からダウンロード可能です。
カスタマイズ

Cocoon新着記事ショートコードの新機能で任意の記事一覧を表示可能に。初心者さん向けに使い方を解説します

新着記事ショートコードで任意の記事一覧を表示させる手順をショートコードに慣れていない、初心者さん向けに解説します。ナビカードでも同様な記事一覧を作れますが、新着記事ショートコードの新しいオプションordered_postsで記事のIDを指定するだけでよいので、より手軽に作れます。 また、grayishのフロントページ向け配布パターンに含まれている、新着記事表示用パターンでも使用可能です。こちらについても編集手順を説明しています。
スポンサーリンク
カスタマイズ

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

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

境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。

サイト型フロントページに使えるシリーズ、今回は境界線をなみなみやギザギザにできるCSSを紹介します。 また、画像やカバーブロックを直接円弧、斜めに切り抜きするCSSも紹介します。 さらに区切り線として使用可能な、直線・なみなみ・ギザギザのパターンも配布します。
カスタマイズ

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

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

サイト型のフロントページ向け:滑らかな曲線の境界線ブロックをつくる(円弧・波)※カバーブロック利用で簡単に使えるように改良!

1カラムのサイト型フロントページなので装飾として使える、滑らかな曲線のブロックを紹介します。セクションの境界を円弧や波の形で表示することができます。 カバーブロック利用で簡単に使用可能に改良しました。 grayishに限らず、Cocoonのスキンなしの場合などでも利用可能です。
カスタマイズ

フロントページ向けのブロックパターン詰め合わせ(デモページあり)※プラグインとPickupパターンを修正

ブログのフロントページによくあるセクション(About、Pickup、NewPost、Rankingなど)別にすぐに使えるパターンデータを用意しました。 パターンと合わせて手軽にデザインを再現できるCSSプラグインも配布します。 今回紹介したパターンで、デモのフロントページを作ってみたので是非ご覧になってください。パターンをペタペタと貼り付けるだけで作れます。 記事内にあるご利用の注意事項をよくご確認の上、ご利用ください。
カスタマイズ

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

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

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

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

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

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