テーマ共通 サイトに「動き」をつけるCSSアニメーション｜基本的な指定方法を覚えよう
この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要？というイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きをつ...
テーマ共通 
ブログ運営 ポチップ vs もしもアフィリエイト（かんたんリンク）｜物販するならどちらが使いやすい？徹底比較
「ポチップ」と「もしもアフィリエイト」どんな違いがあるの？物販アフィリエイトを効率的におこなうためのツールとして、「ポチップ」と「もしもアフィリエイト」が注目されています。それぞれ異なる特徴があり、どちらを選ぶべきか迷っている方も多いのでは...
ブログ運営 エックスサーバーで常時SSL化｜https化・リダイレクト・サブドメイン設定まで解説
ワードプレスを開設したら、まず最初にやるべき重要な設定のひとつが「SSL化（https化）」です。SSL（Secure Sockets Layer）とは、インターネット上の通信を暗号化しデータの盗聴や改ざんを防ぐ技術です。WebサイトをSS...
テーマ共通 CSSの変更が反映されない原因は？デベロッパーツールを使った確認方法と対処法まとめ
CSSが反映されない原因を詳しく解説！デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。
テーマ共通 CSS「transition」で動きをプラス！マウスオーバーアニメーションの設定方法と実例
別記事で「animation」プロパティを使ったCSSアニメーションについてご紹介しました。「animation」プロパティでは@keyframesとanimationプロパティの２つを設定する必要があり、複雑なアニメーションに対応できる反...
ブログ運営 ポチップのカスタマイズ｜インラインボタンの色個別設定、リンクの並び替えなど
Pochipp（以下、ポチップ）は商品リンクを作成できるプラグイン。商品リンクを効果的に設置できる便利なプラグインですが、デフォルトの設定だけでは物足りない場合もあります。この記事ではポチップのカスタマイズ方法を詳しく解説します。デザイン調...
Cocoon Cocoonでピックアップ記事表示するならナビカード！横並び、リボンのスタイルを可愛くカスタマイズ
今回ご紹介するのは、Cocoonの便利な機能『ナビカード』です。特定の記事やコンテンツを目立たせたいときに簡単にピックアップ表示ができるこの機能。Cocoonに標準搭載されていますが、意外と使ったことがない方も多いのではないでしょうか？ナビ...
テーマ共通 Webデザインの強い味方！ChromeデベロッパーツールでCSSセレクタを調べる方法
このような方向けの記事ですCSSを使ったカスタマイズに興味がある初心者でHTMLとCSSの基本を知りたいデベロッパーツールの使い方を学びたいWebデザインやサイトカスタマイズにおいて、「要素のCSSセレクタを調べる」ことは必須スキルです。む...
Cocoon Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
Cocoon Cocoon｜新着記事に期間限定で「NEW!」を表示する方法
記事タイトルの前にNEW!をつけたいな。この記事では、Cocoonテーマを使用しているサイトで、新着記事に「NEW!」ラベルを一定期間だけ表示する方法を解説します。PHPコードとCSSを使った手順をに説明しますのでぜひ参考にしてください。新...
Cocoon Cocoon人気記事ランキング｜表示方法とラベルの色やスタイルを変更するカスタマイズ
Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを元に簡単に人気記事ランキングを作成できます。サイドバーやトップページに設置すれば、読者の目を引きやすく記事の回遊率アップにもつながります。この記事では以下の２点につい...
テーマ共通 CSSで疑似要素に影をつける方法｜box-shadowとdrop-shadowの違いを比較
この記事では、CSSを使って疑似要素に影をつける方法を紹介します。使用するCSSプロパティは、以下の2つです。box-shadowfilter: drop-shadow一般的に要素に影をつけるにはbox-shadowプロパティがよく使われま...
テーマ共通 タブ切り替えをHTMLとCSSで実装（JavaScriptなし）
必要な情報へ迅速にアクセスするために便利なのが「タブ切り替え」機能。この記事では、HTMLとCSSだけでタブ切り替えを自作する方法を紹介します。通常はJavaScriptを使って実装されますが、HTMLとCSSだけでもシンプルなタブ切り替え...
ブログ運営 Googleアドセンス審査に合格するために｜必須対策＆コード貼り付け方法
ブロガーアドセンスに合格したいGoogleアドセンスは多くのブロガーやウェブサイト運営者にとって収益化の手段のひとつですが、審査に合格するためにはいくつかのポイントを押さえる必要があります。この記事では、Googleアドセンスの基本的な仕組...
雑記 デザイン作成に活躍！おしゃれ配色「３色だけでセンスのいい色」をフォロワーさんから譲っていただいた話
以前からずっと欲しかった本、『見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色』を、SNSで交流のあるフォロワーさんから譲っていただきました！デザインにおける配色は多くの人が悩むポイントです。しかし、この本には初心者でも簡単に...
テーマ共通 CSSのカスタムプロパティを使いこなそう！繰り返し利用できる変数の設定方法
この記事ではCSSカスタムプロパティ（CSS変数）の使い方と、よく使われる値を解説します。CSSカスタムプロパティ（CSS変数）は「設定した値を何度も使えるようにする」仕組み。サイト内で繰り返し登場するプロパティ値（色や数値）を変数にして一...
Cocoon X（Twitter）でURLシェア時に画像を表示！CocoonのOGP設定と反映されない対処法
SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは？イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。