おさいフル

au経済圏にどっぷりはまる。 auスマホ、auPAYクレジットカード、auPAYスマホ決済、auPAYマーケット、auじぶん銀行、三菱UFJ eスマート証券(旧auカブコム証券) などを愛用してPontaポイントをフル活用中です。

no image

ワードプレスCocoon

2025/9/3

[Cocoon2023]ワードプレス簡単リストアイコンカスタマイズCSS変更なし!

エディタはGutenberg(グーテンベルグ)、テーマはCocoon こちらはWordpress5.5の新エディタGutenberg(グーテンベルグ)を使用しての記事の書き方になります。 テーマはCocoonを使っています。 それでは具体的にご説明していきます。 ワードプレスCocoonの標準リスト表示 グーテンベルグエディタでのリストの出し方 リストのボタンは下の画像、ワードプレス投稿編集画面の左上か右横の〇(⊞マーク)を押して探します。 右上の⊞マークを押した場合 右横の⊞マークを押した場合 右の⊞を ...

no image

ワードプレスCocoon

2025/9/3

[Cocoon]アイキャッチ画像を非表示にするCSSは?WordPress

はじめに… 一番簡単な方法かと思います アイキャッチ画像を非表示にする方法はいろいろあります。 しかし、『外観→テーマエディター→CSSエディター』や『外観→カスタマイズ→追加CSS』で編集すると記事のIDを調べる手間が増えます。 そしてエディターはできるだけすっきりさせておいたほうが良いと思うので(CSSエディターには他に書かなければいけないことがたくさんあり分かりづらくなる可能性があるので)、今回は別のところで設定する方法をご紹介します。簡単です! アイキャッチ画像が不要なページとは サイト型(ホーム ...

Wordpress SNSボタン非表示

ワードプレスCocoon

2025/9/3

[Cocoon]特定のページでSNSボタンを非表示にする方法CSSで簡単

はじめに 一番簡単な方法かと思います SNSボタンを非表示にする方法はいろいろあります。 『外観→テーマエディター→CSSエディター』や『外観→カスタマイズ→追加CSS』で編集する方法もありますが、記事のIDを調べる手間が増えます。 そしてエディターはできるだけすっきりさせておいたほうが良いと思うので(CSSエディターには他に書かなければいけないことがたくさんあり、分かりづらくなる可能性があります)、今回は別のところで設定する方法をご紹介します。簡単です! SNSボタンが不要なページとは ホームページ風の ...

Wordpress 日付非表示CSS

ワードプレスCocoon

2025/9/3

[Cocoon]特定ページで日付,投稿日を非表示にするCSSは?WordPress

日付、投稿日を非表示にする必要があるの? サイト型のトップページ (ホームページ) を作る時やプライバシーポリシーページを作る際には日付、投稿日を表示したくないと思われるかたもいらっしゃると思います。そういったときに役立つ方法です。 日付、投稿日を非表示にするCSSはこちら! .date-tags { display: none; } 日付、投稿日を非表示にするCSSを貼りつける場所 日付を非表示にしたい投稿画面の 一番下に『カスタムCSS』と書かれているところがあります。記入できる状態になっていない時は ...

no image

ワードプレスCocoon

2025/9/3

[Cocoon]新着記事一覧でなくおすすめ記事一覧の作り方

【補足】ワードプレスCocoonで新着記事、人気記事一覧はどうやって作るの? 新着記事一覧や人気記事一覧の作り方をご存知の方は飛ばしてください。 新着記事一覧でなくおすすめ一覧の作り方 文章を入力する状態にしておいて投稿画面の上の</>マーク(『ショートコード』)を選択するだけでできてしまいます。ものすごく簡単です。 ためしに『新着記事一覧』を選択してみると下のような文字が出てきます。 この状態でプレビューボタンを押してみてみると しっかりと新着記事一覧ができています。これだけです! ワードプ ...

ワードプレスコクーン表示設定ページ

ワードプレスCocoon

2025/9/3

[Cocoon]特定のページをトップページに固定する方法WordPress

トップページは固定ページで作成 トップページに固定したいページを『ダッシュボード→固定ページ→新規追加』で作成します。 ダッシュボード→設定→表示設定 ダッシュボード→設定→表示設定を選択します。 表示設定ページ 『表示設定』ページの『ホームページの表示』から『固定ページ』を選択。 『固定ページ』のすぐ下の『ホームページ』の右の〇をクリックしてトップに固定したいページを選択します。 さいごにページ下にある『変更を保存』をクリックして完成です。 おわりに 今回ご紹介した方法は、ホームページ風のトップページ( ...

カテゴリーのアイキャッチ画像

ワードプレスCocoon

2025/9/3

[Cocoon]カテゴリ-にアイキャッチ画像を設定する方法ワードプレス

サイト型のトップページなどでアイキャッチ画像は必要 普段カテゴリに画像を設定する必要性をそこまで感じないかもしれませんが、サイト型(ホームページ風)のトップページを作る時などに必要になってきます。 例えば下の画像は私のブログのトップページですが、 カテゴリに画像を設定していないと このようになってしまいます。 私は画像が何も選択されていない“NO IMAGE”のときには当サイトのロゴを表示するように設定していますので上の雲のような絵が出てきますが、そちらも設定していない時には 上の画像のような素っ気ない表 ...

簡単サイト型ホームページ 作り方

ワードプレスCocoon

2025/9/3

[Cocoon]簡単サイト型ホームページの作り方CSS,HTML不使用WordPress

エディタはグーテンベルグ、テーマはCocoon ワードプレスのGutenberg(グーテンベルグ)エディタ、テーマはCocoonを使用しての記事になります。 ワードプレスもバージョンアップして表示様式なども日に日に変わっているので、この記事は2021年8月に加筆修正しています。 cocoonサイト型ホームページの例1 HTMLもCSSも使わずに作ったサイト型ホームページの例を2つご紹介します。 私のブログのトップページは下のようになっています。 (現在は変更しています。) 簡単サイト型ホームページの作り方 ...

特定ページのタイトルを非表示にするCSS Wordpress

ワードプレスCocoon

2025/9/3

[Cocoon]特定ページのタイトルを非表示にするCSSは?WordPress

エディタはグーテンベルグ、テーマはコクーン Gutenberg(グーテンベルグ)エディタ、テーマはCocoonを使用しての記事になります。 タイトル非表示は空欄にすればいいだけじゃないの? タイトルを空欄にしてもCSSで消すのと同じようにすることができます。が、そのページへのリンクを貼った時に下のような状態になってしまいます。 しかし、タイトルを書いておいてCSSで消すと… 実際のページはこちらから [Cocoon]簡単サイト型ホームページの作り方CSS,HTML不使用WordPress 違いがお分かりに ...

Wordpressコクーン リストをボックスで囲む

ワードプレスCocoon

2025/9/3

[Cocoon]リストをボックスで囲みたい,ボックスの作り方。ワードプレスならHTML不要

ボックス風のリストとは 例えばこのような感じのものです。この他にもボタン1つで色々なボックスを呼び出すことができます。CSSもHTMLも使いません。 『お名前.com』などのドメインを利用している方 XサーバードメインならXサーバーと一元管理できてかなり便利です エックスドメイン キャンペーン中 さらにこのようなことまでボタンで簡単にできてしまいます。 『お名前.com』などのドメインを利用している方 XサーバードメインならXサーバーと一元管理できてかなり便利です https://osaifull.com ...

目次非表示CSS Wordpress

ワードプレスCocoon

2025/9/3

[Cocoon]目次を非表示にするCSSは?WordPress

エディタはGutenberg、テーマはCocoon 今回ご紹介するのはワードプレスのCocoonでグーテンベルグ(Gutenberg)エディタを使用しての設定方法です。 目次非表示はプラグイン不使用 プラグインは使用せずにCSSにコードをちょこっと追加するだけなので簡単です! ページの種類によって目次非表示方法が変わります(2種類) ①固定ページと②投稿ページ に分けてご紹介します。 ①固定ページの目次非表示 固定ページはCSSを追加するまでもなくチェック✓を入れるだけなのですぐにできます。 投稿記事作成 ...

HTML,CSSなしホームページ  Wordpress

ワードプレスCocoon

2025/9/3

[Cocoon]記事や画像を横並びに表示するには?WordPress

使用エディタはGutenberg(グーテンベルグ) こちらはWordpress5.5の新エディタGutenberg(グーテンベルグ)を使用しての記事の書き方になります。 テーマはCocoonを使っています。 それでは具体的にご説明していきます。 画像を横並びにするにはカラムを使う 今回ご紹介するのはこのような構成の作り方です。Wordpressのおすすめテーマを2つ並べてみました。 画像横並びカラムの作り方 画像を横並びにする作り方はとても簡単です。 記事作成画面の左上の⊞のマーク、もしくは右の⊞マークを ...