「カスタマイズ」の記事一覧

【WordPress】SettingsAPIでデータを配列にひとまとめ!チェックボックスはどうなる?

設定項目が増えるとデータベース上に変数がバラバラと増えていく。管理上も煩雑になるし作法的にも良くないようで、変数を1つの配列でまとめてみる。ポイントとの1つが複数項目を持つチェックボックス(input type checkbox)でnameを2次元配列で指定する。初期値も勿論全体を配列で指定し、サニタイズ関数(無害化)も1つ ...

【WordPress】設定画面へラジオボタンやチェックボックスを追加で完成形へ

Settings APIを使った設定画面で複数行入力(textarea)、ラジオボタン(input type radio)やチェックボックス(input type radio)を使ってフィールドを追加してみる。ラジオボタンやチェックボックスでは「checked」の入れ方がポイントとチェックボックスでは更にnameに配列を指定するのがポイント。

【ヘッダタイトル】文字だけのロゴ画像の作り方!背景を透明にする方法(PhotoScape編)

ブログのヘッダー画像を設定すると、テーマによってはそのヘッダー画像の上にサイトタイトルやキャッチフレーズが表示されるものがあります。(Cocoonなど) 背景の画像の上にタイトルの文字が乗るため、背景の画像に溶け込んだりしてタイトルの文字が見づらくなる場合がありますが、こうした時には文字だけのロゴ画像を作 ...

【WordPress】投稿一覧に最終更新日からの経過日数を表示する

ワードプレス管理画面の投稿一覧に「記事の最終更新日から何日経過しているか」の列があると良さそうですよね。 記事を投稿したり最後に更新した日から何日たっているのか経過日数の表示があると、記事更新の目安にする(1カ月以上経ったら見直すなど)に活用できそうです。 ということで、早速追加してみましたのでご紹介 ...

【WordPress】投稿一覧に更新日の列を追加する方法

ワードプレスにログイン後の管理画面にある投稿一覧では、日付順(投稿日順)には見れますが、最終更新日順の列がない! 更新日順の並替えができると、過去記事の見直しをする場合も、どの記事がまだ更新できてないか、最終更新順に並替えて(古い順に見たりすれば)すぐわかって便利です。 ということで、実際最終更新日の ...

【CSS】ふわふわドキドキ動くボタンの作り方!上下や拡大縮小アニメーション

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

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

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

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

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

【WordPress】プレビュー時だけ上の黒いバー(管理バー)を非表示にする方法

投稿や固定ページの編集で「プレビュー時のみ」上段の黒いバー(管理バー/ツールバー)を非表示にする方法。 ユーザー設定で管理バーを非表示にすると全ての場面で管理バーが非表示になって使いづらい。プレビューだけを判別するクラスを追加してCSSを設定すれば、投稿や固定ページのプレビュー時のみ管理バーが消え、その ...

【WordPress】CSSやJavaScript,jQueryを簡単追加する方法!プラグインのおすすめ

ワードプレスでカスタマイズをする、となると、必ず出て来るCSSやJavaScript, そして jQuery。 ネットで検索するとサンプルコードは沢山出てきますが、実際にそれらのコードをワードプレスに反映させるにはどうするか?とそもそものところが難しい、という感じです。 こうしたところはプラグインを使えば超簡単。 ここでは ...

ブログ記事一覧のサムネイル画像をマウスオーバーで拡大させる!CSSで簡単カスタマイズ

ブログの記事一覧表示にアイキャッチ画像(サムネイル画像)を表示している場合が多いですが、その画像にカーソルを乗せる(マウスホバーさせる)と、「画像がふわっと拡大表示される」という場合がありますね。 この「画像がふわっと拡大表示」は実はCSSを使って簡単に実現できますので、是非試してみてください。(私が使 ...

ツイッターやインスタの遅延読み込み!ページ表示スピードアップのための工夫(Lazy Loadだ!)

ページの表示スピードは検索順位を決定する要因にもなることから、なるべく早く表示するように工夫していくと良いですね! ページスピードを上げるのによくあるのが画像の遅延読み込み(Lazy Loadと言われるもの)。ワードプレスでは専用のプラグインがあったりCoconnなどテーマによってはそもそもそうした機能を備えている ...

スクロール固定・追従するサイドバーウイジェット!cssだけで作る方法

サイドバーに表示している広告や目次などで、画面をスクロールしても画面の上とかに固定されて追従してくるものってありますよね? ワードプレスで使うテーマによってはそうした動作をするサイドバー専用のウイジェットが用意されている場合もありますが、私が使っている賢威8にはないようです。 そこでここではテーマにそ ...

WordPressでjQueryが動かない場合の対処法!コードの書き方と読込みタイミング

WordPressで何かカスタマイズがしたい場合、jQueryというものが必要になる場合があります。 私の場合もカスタマイズでどうしても jQuery が必要になり、恐る恐る使ってみたところ、なぜか動作をせずにさんざん悩みました。解決法は至って単純でポイントは以下3点。 jQueryが使える環境になっているか コードはワードプレス ...