デザイナーのタネあかし

簡単なカルーセルの制御方法 自動再生させない 「次へ送る」「前へ戻る」ボタンを押したときや、スライドを動かしたらそのまま自動再生がはじまらないようにするには、data-bs-pause="true"　を追加する。 // 例：次へ送るボタン....続きを読む

Webページのレイアウトを作る際、サイドバーやサブカラムにメニューを配置することはよくあります。この時、メインカラムにあるヘッダーとメニューの位置を揃えることで、見やすさを向上させることができます。 完成コード 本記事では、JavaScript....続きを読む

エンジニアに混じって仕事するWEBの仕事をしているので、デザイナーでも手元に開発環境を整える必要がでてくる。今回PowerShellをカスタマイズすることになったきっかけは、sudoって入力したら通らなかったこと。調べてみたらwindowsのPowerShellではこ....続きを読む

WordPressでは既存テーマに独自のカスタマイズを施したい場合、そのテーマ（親テーマ）の子テーマを作成することが推奨されています。今回は子テーマ作成に必要な最低限のルールをご紹介します。 子テーマを利用するメリット 子テーマを作成するメリッ....続きを読む

最新ブラウザで利用できるCSS3 flexbox を利用した、ナビゲーションメニューのサンプルを作成しました。 ・メニューは均等配置になります。 ・リンクテキストが複数行になっても、要素の縦方向センター揃えになるようになっています。 Flexbox ナビゲ....続きを読む

コワーキングスペース茅場町 Co-Edo （コエド）にて、2017年7月22日に開催されたWordPressの勉強会『WordPressもくもく勉強会@日本橋』に登壇しました。 その時のスライドをシェアさせていただきます。 Pinterest風ギャラリーを実装できるプラグイン『....続きを読む

コワーキングスペース茅場町 Co-Edo （コエド）にて、2017年5月20日に開催されたWordPressの勉強会『WordPressもくもく勉強会@日本橋』に登壇しました。 その時のスライドをシェアさせていただきます。 簡単なプラグインの管理方法とプラグインのご紹介....続きを読む

アーカイブページや関連記事リンクなどへ本文の抜粋を掲載する時に、ショートコードが表示されてしまうことに気が付きました。今回は呼び出したコンテンツから、ショートコードタグを削除する方法をご紹介します。 ショートコード タグをすべて削....続きを読む

コワーキングスペース茅場町 Co-Edo （コエド）にて、2017年4月15日に開催されたWordPressの勉強会『WordPressもくもく勉強会@日本橋』に登壇しました。 その時のスライドをシェアさせていただきます。 レスポンシブ対応 をサポートするプラグイン 様....続きを読む

WordPress には、body タグにcss を自動的に追加するテンプレートタグ body_class() がありますが、例えば、ページ毎やカテゴリ毎に id を追加してくれるテンプレートタグがありません。 そこで今回は、body タグに独自 id を追加する方法をご紹介します....続きを読む

WordPress には日付別アーカイブリストを表示してくれる便利なテンプレートタグ wp_get_archives() がありますが、カテゴリー毎の日付別アーカイブリストにするオプションがありません。 そこで、今回は jQuery を利用して、簡単にカテゴリー毎の日付別....続きを読む

サイト内検索を拡張してくれる有名プラグインもあるのですが、今回は functions.php に記述して検索条件をカスタマイズする方法をご紹介します。 プラグインを使うと本文の検索結果がでてこない？ 実はこの方法を実践する前に、Search Everything　と　....続きを読む

WordPressのデフォルト関数だけでは対応できない、様々なモバイルデバイスやタブレットを検出する条件付き関数を提供してくれるプラグイン、『mobble』をご紹介します。レスポンシブデザインやデバイス毎にコードを切り替える時などに大変役立つプラグイ....続きを読む

WordPressのテンプレートタグを利用することで、アイキャッチ画像（サムネイル）を簡単に表示することができますが、アイキャッチ画像に独自タグを設定したい場合など、アイキャッチ画像のURLだけを取得したい場合があります。 今回はその設定方法をま....続きを読む

WordPressにはSNSボタンを簡単に設置できる優秀なプラグインがたくさんありますが、デザインなど含めて、独自に設置しないといけない場合もありますよね。 そこで今回は Twitter，Facebook，Line の各シェアボタンの設置方法をご紹介します。 2017/02/0....続きを読む

標準のフォントでは WEBの文章での「」や『』など約物の空きが気になります。 それを解消できる約物半角専用のWebフォント、Yaku Han JP  をご紹介します。 約物半角専用のWebフォント、Yaku Han JP デザイナーの Qrac（クラク）さんが Noto Sans Jap....続きを読む

Bootstrapを利用した、レスポンシブHTML5テンプレートを用意しました。 まずは、ヘッダー、ナビ、フッターなど大枠のフレームのみのシンプルバージョンです。 随時アップデートしていきますので、ぜひご活用ください。 HTML5テンプレート（左右２カラ....続きを読む

新規サイトや既存サイトをWordPress化する時、オリジナルテーマを作成するためのベースになるスターターテーマが多数公開されています。今回は、よく利用されているUNDERSCORES （ _S ）をご紹介します。 WordPressのオリジナルテーマを作成するためのス....続きを読む