サイト型トップページの作り方を公開しています!Check
設定

エックスサーバー|サブドメイン設定で2つめのブログ(複数サイト)を作る方法

もうひとつブログを作りたいな~ブログを運営してしばらくすると、別のジャンルに方向転換したい、雑記ブログだけど伸びているジャンルを特化して別サイトに独立させたいな...
Cocoon

Cocoon新着・人気記事・ナビカードを横並びに!カラム数をワンクリックで変更する方法

Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
Cocoon

Cocoonで作るサイト型トップページ|オシャレなSWELL風(HTML、CSS使用)

2025.9.5 実例集にmomlog(まむろぐ)を掲載しました。トップページが平凡で、他のサイトと差がつかない…そんなお悩みありませんか?この記事では、Wor...
テーマ共通

WordPressパターン機能でラクラク時短!再利用ブロックの使い方と同期・非同期の違い

WordPressの「パターン」機能、使ったことはありますか?これは、特定のブロックやブロックグループを登録して他の投稿やページでも簡単に再利用できる便利な機能...
設定

サブドメインを常時SSL化(https化)リダイレクトする方法|エックスサーバー設定

WordPressでブログやサイトを立ち上げたら、まず最初に取り組みたいのが「SSL化(https化)」です。SSLは通信を暗号化してユーザーの大切な情報を守る...
Cocoon

Cocoonのテキスト変更方法|『新着記事』『もっと見る』『次ページ』をカスタマイズ

WordPressの人気無料テーマ「Cocoon」を使用している場合、デフォルトで設定されている「新着記事」「もっと見る」「次のページ」などのボタンやキャプショ...
テーマ共通

サイトに「動き」をつけるCSSアニメーション|基本的な指定方法を覚えよう

この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要?なイメージがある...
Cocoon

Cocoonカスタマイズの基本|HTML・CSSの編集方法

「もう少し見やすくしたいな」「デザインをちょっと変えてみたい…」そんなときに役立つのがHTMLやCSSの編集です。ほんの少し手を加えるだけでもサイトの見た目や使...
Cocoon

Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法

Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
テーマ共通

箇条書きリストの点の色を変えるCSS|ul要素のカスタマイズでデザイン性アップ

Webサイトやブログで使われる箇条書きリスト(ul要素)は、デフォルトではシンプルな黒い点(ディスク)で表示されますが、デザインにこだわりたい場合は少し味気なく...
Cocoon

ファーストビューをSWELL風に!Cocoonアピールエリアをフルスクリーン&動きのあるデザインにする方法

Cocoonのアピールエリアは背景画像やテキストを表示することでサイト全体の第一印象を決める大事なパーツ。ここをうまく活用すれば訪問者の関心をグッと引き寄せるこ...
Cocoon

カラム固定を解消!Cocoonボックスメニューを2〜6列に切り替える方法

Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導くために欠かせない定...
Cocoon

Cocoon|テーブル(表)に記号○△✕を表示するカスタマイズ

お知らせこのカスタマイズはCocoon 2.7.1以降標準機能として実装されました。そのため、この記事の内容は基本的に不要ですが備忘録として公開しておきます。【...
テーマ共通

CSSホバーアニメーション13選|動くボタンの実装例付き

マウスを乗せると背景がスッと広がったり、左右にスライドしたり、中央から放射状に変化したり...ボタンにアニメーションを加えるだけでサイトの印象が変わります。この...
テーマ共通

CSSのカスタムプロパティを使いこなそう!繰り返し使える変数の設定方法

この記事ではCSSカスタムプロパティ(CSS変数)の使い方と、よく使われる値を解説します。CSSカスタムプロパティ(CSS変数)は「設定した値を何度も使えるよう...
テーマ共通

タブ切り替えをHTMLとCSSで実装(JavaScriptなし)

必要な情報へ迅速にアクセスするために便利なのが「タブ切り替え」機能。この記事では、JavaScriptを使わずにHTMLとCSSだけでタブ切り替えを実現する方法...
テーマ共通

同じページ内にジャンプ!HTMLを利用したアンカーリンクの設定方法

この記事では、アンカーリンクの設定方法と効果的な使い方について解説します。アンカーリンクはページ内の特定の位置や他のページの特定の場所に直接ジャンプするリンクの...
テーマ共通

CSSでなめらかに点滅させる方法(コピペOK)

この記事では、CSSを使って要素をなめらかに点滅させる方法を紹介します。要素を点滅させるアニメーションは視認性を高め、注目を引く際に便利です。\例えばこの部分の...
Cocoon

Cocoonテーブル(表)の中にリンクボタンを置く方法|簡単・視認性アップでクリック率も向上

比較表・料金表・アフィリエイト表などを、もっと見やすく・わかりやすくしたい!そんなときに便利なのが「表の中にリンクボタンを設置する方法」です。WordPress...
テーマ共通

CSSで疑似要素に影をつける方法|box-shadowとdrop-shadowの違いを比較

この記事では、CSSを使って疑似要素に影をつける方法を紹介します。使用するCSSプロパティは、以下の2つです。box-shadowfilter: drop-sh...
スポンサーリンク