簡単なカルーセルの制御方法 自動再生させない 「次へ送る」「前へ戻る」ボタンを押したときや、スライドを動かしたらそのまま自動再生がはじまらないようにするには、data-bs-pause="true" を追加する。 // 例:次へ送るボタン....続きを読む
JavaScriptでサブカラムのメニューをメインカラムのヘッダーと位置を揃える方法
Webページのレイアウトを作る際、サイドバーやサブカラムにメニューを配置することはよくあります。この時、メインカラムにあるヘッダーとメニューの位置を揃えることで、見やすさを向上させることができます。 完成コード 本記事では、JavaScript....続きを読む
Powershellの環境構築メモ
エンジニアに混じって仕事するWEBの仕事をしているので、デザイナーでも手元に開発環境を整える必要がでてくる。今回PowerShellをカスタマイズすることになったきっかけは、sudoって入力したら通らなかったこと。調べてみたらwindowsのPowerShellではこ....続きを読む
WordPress 子テーマの作り方
WordPressでは既存テーマに独自のカスタマイズを施したい場合、そのテーマ(親テーマ)の子テーマを作成することが推奨されています。今回は子テーマ作成に必要な最低限のルールをご紹介します。 子テーマを利用するメリット 子テーマを作成するメリッ....続きを読む
CSS3 Flexboxを利用したナビゲーションメニューのサンプル
最新ブラウザで利用できるCSS3 flexbox を利用した、ナビゲーションメニューのサンプルを作成しました。 ・メニューは均等配置になります。 ・リンクテキストが複数行になっても、要素の縦方向センター揃えになるようになっています。 Flexbox ナビゲ....続きを読む
スライド「Pinterest風ギャラリーを実装できるプラグイン『Final Tiles Grid Gallery』」を公開しました
コワーキングスペース茅場町 Co-Edo (コエド)にて、2017年7月22日に開催されたWordPressの勉強会『WordPressもくもく勉強会@日本橋』に登壇しました。 その時のスライドをシェアさせていただきます。 Pinterest風ギャラリーを実装できるプラグイン『....続きを読む
スライド「簡単なプラグインの管理方法とプラグインのご紹介」を公開しました
コワーキングスペース茅場町 Co-Edo (コエド)にて、2017年5月20日に開催されたWordPressの勉強会『WordPressもくもく勉強会@日本橋』に登壇しました。 その時のスライドをシェアさせていただきます。 簡単なプラグインの管理方法とプラグインのご紹介....続きを読む
抜粋文からショートコード タグを消す方法
アーカイブページや関連記事リンクなどへ本文の抜粋を掲載する時に、ショートコードが表示されてしまうことに気が付きました。今回は呼び出したコンテンツから、ショートコードタグを削除する方法をご紹介します。 ショートコード タグをすべて削....続きを読む
スライド「レスポンシブ対応をサポートするプラグイン」を公開しました
コワーキングスペース茅場町 Co-Edo (コエド)にて、2017年4月15日に開催されたWordPressの勉強会『WordPressもくもく勉強会@日本橋』に登壇しました。 その時のスライドをシェアさせていただきます。 レスポンシブ対応 をサポートするプラグイン 様....続きを読む
WordPressで bodyタグに id を追加する方法
WordPress には、body タグにcss を自動的に追加するテンプレートタグ body_class() がありますが、例えば、ページ毎やカテゴリ毎に id を追加してくれるテンプレートタグがありません。 そこで今回は、body タグに独自 id を追加する方法をご紹介します....続きを読む
カテゴリー毎の日付別アーカイブを表示する方法
WordPress には日付別アーカイブリストを表示してくれる便利なテンプレートタグ wp_get_archives() がありますが、カテゴリー毎の日付別アーカイブリストにするオプションがありません。 そこで、今回は jQuery を利用して、簡単にカテゴリー毎の日付別....続きを読む
WordPress のサイト内検索をプラグインなしでカスタマイズする方法
サイト内検索を拡張してくれる有名プラグインもあるのですが、今回は functions.php に記述して検索条件をカスタマイズする方法をご紹介します。 プラグインを使うと本文の検索結果がでてこない? 実はこの方法を実践する前に、Search Everything と ....続きを読む
デバイス対応を強力にサポートしてくれるプラグイン『mobble』
WordPressのデフォルト関数だけでは対応できない、様々なモバイルデバイスやタブレットを検出する条件付き関数を提供してくれるプラグイン、『mobble』をご紹介します。レスポンシブデザインやデバイス毎にコードを切り替える時などに大変役立つプラグイ....続きを読む
WordPressでアイキャッチ画像の活用【3】画像URLの取得
WordPressのテンプレートタグを利用することで、アイキャッチ画像(サムネイル)を簡単に表示することができますが、アイキャッチ画像に独自タグを設定したい場合など、アイキャッチ画像のURLだけを取得したい場合があります。今回はその設定方法をまと....続きを読む
まとめ:SNSシェアボタンの設置方法
WordPressにはSNSボタンを簡単に設置できる優秀なプラグインがたくさんありますが、デザインなど含めて、独自に設置しないといけない場合もありますよね。 そこで今回は Twitter,Facebook,Line の各シェアボタンの設置方法をご紹介します。 2017/02/0....続きを読む
「」や『』など約物が半角にできる、Yaku Han JP のご紹介
標準のフォントでは WEBの文章での「」や『』など約物の空きが気になります。それを解消できる約物半角専用のWebフォント、Yaku Han JP をご紹介します。 約物半角専用のWebフォント、Yaku Han JP デザイナーの Qrac(クラク)さんが N....続きを読む
Bootstrapを利用したレスポンシブHTML5フレームテンプレート
Bootstrapを利用した、レスポンシブHTML5テンプレートを用意しました。 まずは、ヘッダー、ナビ、フッターなど大枠のフレームのみのシンプルバージョンです。 随時アップデートしていきますので、ぜひご活用ください。 HTML5テンプレート(左右2カラ....続きを読む
WordPressのスターターテーマ紹介:UNDERSCORES ( _S )
新規サイトや既存サイトをWordPress化する時、オリジナルテーマを作成するためのベースになるスターターテーマが多数公開されています。今回は、よく利用されているUNDERSCORES ( _S )をご紹介します。 WordPressのオリジナルテーマを作成するためのス....続きを読む