wordpress

【CSS】ふわふわ動くアニメーションボタンの作り方!上下や拡大縮小も簡単にできる

CSS
ふわふわ動くボタン、ドキドキ動くボタンの作り方をご紹介。上下にさり気なくフワフワしたり、拡大縮小を使って浮かび上がったり沈んだりと、CSSを使えば、ちょっと目を引くアニメーションボタンが簡単にできますね。【ドキドキ動くボタン1】【ポン!と動くボタン2】【ゆったりフワフワ浮遊ボタン】【ツンと動くボタン】【チョン...

【CSS】光るボタンアニメーションの作り方!カスタマイズまで手順を詳しく解説

CSS
コクーン(cocoon)などのテーマで「キラッと光が横切るアニメーション付きのボタン」があったりしますが、何気にカッコいいし、目立ってクリック率も上がりそうですよね。ということで、ここではHTML, CSSを使って「自作で光るボタンの作り方」をご紹介。できあがりは、ほぼコクーンの光るボタンと同等になったと思い...

ワードプレスで文字の上にフリガナを付けたい!ブログでルビを振る簡単な2つの方法

plugin
ワードプレスで記事を書いている時に、難しい漢字や英語に対して振り仮名やカタカナ表記(またはその逆で、振り仮名やカタカナに対して英語表記)、映画のタイトルなどで原題に対して邦題、邦題に対して元のタイトルを、元の文字の上に表示したい!などの場合があります。こうした「ある文字の上に注釈のように読み方たなどを付ける」...

リストから表を作るCSS!flexで2列3列4列nのレイアウトを作る方法

CSS
ブログのデザインカスタマイズでは、ul, li を使ったリストに対してCSSを使って2列、3列などの表形式で表示したい!という場合がよくあります。table や gridプロパティを使えば簡単に表は出来ますが、ここでは flexを使って簡単に2列、3列、4列といった形にしてみましょう。もう驚くほど簡単ですね。...

CSSでリストから表を作る方法!2列3列4列のレイアウトはgridで簡単にできる!

CSS
HTML、CSSのカスタマイズを多少でもする人はよく出くわすと思いますが、ul, li を使ったリストがあり、それをCSSを使って表形式にしたい場合が結構あります。tableプロパティでも実現できますが、今では grid や flex を使うと物凄く簡単にできますね。ここでは grid を使った場合の例をご紹...

WordPressの目次をスクロール連動&自動ハイライト!Cocoonでの実装手順を紹介

wordpress
WordPressでは記事の冒頭に目次を入れることが多いですが、サイドバーに表示している人もいますよね。目次があれば全体の流れがつかめて便利ですし、サイドバーでは「今どこを読んでいるか」がハイライトされたりすると更に親切。特に長い記事では読む側も現在地が分かってとても助かります。ということで、今回はスクロール...

【WordPress】ダッシュボードにメモ書きする簡単な方法!WP Dashboard Notesの使い方

環境構築
ワードプレスでブログを運用している中、ちょっとした覚書き、メモをダッシュボードで残したい場合があります。(記事のアイディア、次に何するかな、このプラグインは~だからその内別のに乗り換える、などなど、忘れそうなことをサクっとメモしたい)「WP Dashboard Notes」というプラグインを使えば簡単にできる...

広告(リンク画像)をセンタリングする方法!NGなやり方はペナルティの元

CSS
ブログで収益化する場合、A8.netなどASPのリンク付き画像広告(バナー広告)を記事内に貼ることもありますね。ワードプレスの「カスタムHTMLブロック」を使って広告コードを入れますが、カスタムHTMLブロックはそれ自体センタリングの設定がない。でもレイアウト的に、画像広告を横方向にセンタリングしたい場合もあ...

【WordPress】記事内容が勝手に書き換わっていた|海外リンクに置き換わる時の対処法

環境構築
備忘録です。同じ症状が出た方の参考になりますように。トラブル概要:記事が上書きされている)投稿記事の本文が スパムリンクだけの羅列 になったブラウザやログイン状態に関わらず同じ表示になるログインしていると、通常上段に管理メニュー(編集など)が表示されるが、その記事だけ、それが表示されないログインした後⇒投稿⇒...

【WordPressプラグイン】ブログでおすすめ9個を紹介(アフィリエイトでの収益化に向けて)

plugin
WordPressが使えるようになった!テーマも決めた!となれば、次はWordPressの強化です。WordPressはインストールした直後は幼い子供とおなじで、なんの武器も持たず鎧をまとわず出陣しようとしているようなもの。ここで「プラグイン」という装備を整え、ブログアフィリエイトの成功への道を突き進む体制を...

【Cocoon】タイトル下に記事抜粋(ディスクリプション)が表示されない時の対処法

wordpress
Cocoonは無料の人気のテーマで、このブログでも使ってますし、他の方にもおすすめしたりしてます。ただ、どうもトップページの表示(記事の一覧表示)で、モバイル表示(スマホ表示)で見ると、各記事のタイトル下に記事の説明(記事の抜粋:メタディスクリプション)が表示されないようですね。(パソコンでは表示されるのに何...

ads.txtの設置方法!WordPressの設定と収益が変わる理由

wordpress
ads.txtは、グーグルアドセンスの審査時にも広告コードの代わりに使えますし、審査通過後は設定してないと「収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください」というメッセージが表示されます。アドセンスを利用する上で重要な位置づけになってますが、設定自体は非常に簡単。以下その手順を...

ブログのヘッダー画像の作り方!簡単リサイズから文字入れまで独自性を打ち出す

デザイン
ブログは人気のテーマを使っていると、外観も他のブログとの違いがわかりづらく、グーグルから独自性がない=読者にとって有益でないサイト、と判断されることも懸念されます。なにより他のブログとの違いが見えなければ訪れる読者も魅力を感じず、すぐ別のブログに行ってしまう、ということも考えられますね。そこで、外観の一番のポ...

ブログのヘッダー画像サイズは?最新トレンドと推奨サイズを解説!

デザイン
ブログの第一印象を大きく左右するヘッダー画像。サイトの一番上にある、顔とも言える大切な画像です。横幅は使用するテーマの幅によってきますが、縦幅をどうするかで見た目の印象もずいぶんと変わります。個性が打ち出せるかどうかの大きなポイントととなりますので、考え方など含め解説です。大きさ(縦・横サイズ)現在のトレンド...

【CSS】次の要素ありなしで表示を変える方法

CSS
以下のように「要素が1つだけ」の場合と「複数ある場合」とで表示を分けたい、ということがあります。たとえば記事の先頭によくある、カテゴリ、タグの表示などで、1つしか表示する要素がなければ、それだけを表示する。複数(つまり次の要素が)あれば、スラッシュ( / )で区切って表示するなんていう場合がありますよね。<要...