すぐに実践できる！最新のWordPressセキュリティ設定ガイド｜DAD UNION – エンジニア同盟
WordPressは世界中で最も人気のあるコンテンツ管理システム（CMS）であり、その使いやすさと柔軟性から、個人ブログから企業サイトまで幅広く利用されています。しかし、その人気故に、WordPressサイトは悪意のある攻撃の対象となりやすいのも事実です。そこで、初心者の方でも簡単に実施できる最新のセキュリティ設定方法をご紹介します。 この記事では、基本的なセキュリティ設定から、最新トレンドに対応した設定方法まで、詳細に解説します。 WordPressとは WordPressは、2003年にマット・マレンウェッグとマイク・リトルによって開発されたオープンソースのCMSです。PHPとMySQLを基盤としており、簡単にウェブサイトやブログを構築・運営できるプラットフォームです。無料で利用できるテーマやプラグインが豊富に揃っており、コードを書かなくても高度な機能を実装することが可能です。 なぜセ
下スクロール時の背景パララックス実装ガイド: jarallax.jsを活用した方法｜DAD UNION – エンジニア同盟
Webデザインのトレンドとして人気のあるパララックススクロール。この記事では、jarallax.jsを使用してページ背景にパララックス効果を簡単に実装する方法をご紹介します。さらに、背景にYouTube動画を設定する方法も取り上げます。実際に作成したデモページも公開しているので、ぜひチェックしてみてください。 CSSを用意する まずは、パララックスエフェクトを適用するエリアのスタイリングを行います。以下は.jarallaxクラスを持つエリアの基本的なCSSです。このCSSはカスタマイズ可能なので、デザインに合わせて変更してください。 <style> *, :after, :before { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Splide.jsで実現するスマートなスライダー：初心者から上級者まで使える完全ガイド｜DAD UNION – エンジニア同盟
今回はWebデザインの世界で話題のSplide.jsについて、その魅力と使い方をわかりやすく解説します。Splide.jsは、スワイプやタップに対応したスライダーを簡単に実装できる、使い勝手の良いJavaScriptライブラリです。これからご紹介する手順に沿って、あなたのウェブサイトも一層魅力的なものに変身させましょう。 Splide.jsの基本となるCSSの設定 まず最初に、Splide.jsを使うための土台となるCSSの設定から始めましょう。以下のコードをウェブサイトの適切な場所に追加してください。 splide.min.cssファイルの読み込み：このスタイルシートがSplide.jsの見た目を整えます。 カスタムスタイルの追加：ウェブサイトのデザインに合わせて、基本のスタイルを調整します。 <link rel="stylesheet" href="css/splide.min.css
jquery.qrcode.jsで簡単QRコード作成完全ガイド｜DAD UNION – エンジニア同盟
今回は非常に便利なツール、「jquery.qrcode.js」を使って、簡単にQRコードを生成する方法についてご紹介します。 この記事を読めば、あなたもQRコード生成のプロになれるかもしれませんよ！ はじめに QRコードは、今や私たちの生活に欠かせないものとなりました。店舗の情報、ウェブサイトへのリンク、あるいは個人間での情報共有など、多岐にわたる用途で利用されています。そんなQRコードを自分で生成できたら便利ですよね。今回は、Web開発で広く使われるjQueryのプラグイン「jquery.qrcode.js」を使って、誰でも簡単にQRコードを生成できる方法をご紹介します。 jquery.qrcode.jsとは 「jquery.qrcode.js」は、jQueryを使用してQRコードを簡単に生成できるプラグインです。このプラグインを使えば、複雑なコーディング知識がなくても、ウェブページ上で
Lightbox2完全ガイド：画像をポップアップ（モーダル）表示させる簡単ステップ｜DAD UNION – エンジニア同盟
今回は定番中の定番、Lightbox2を使った画像のポップアップ表示について、基本から応用まで幅広く解説していきます。 Lightboxは有名なのでご存じかと思いますが今まで紹介してなかったのでご紹介します。 CSSでの基本設定 まずは、Lightbox2を使うための基本的なCSSを設定します。ここでは、サムネイル画像に適用するスタイルを定義します。ポイントは、見た目の美しさと使いやすさのバランスを取ることです。 lightbox.min.cssファイルを読み込みます。サムネイル（a[data-lightbox] img）のCSS記述です。 <style> body { margin: 20px 10px; padding: 0; font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 22px;
JavaScriptを使った月・週・時間別表示に対応したカレンダープラグインFullCalendar｜DAD UNION – エンジニア同盟
FullCalendarを使ってJavaScriptを使った月・週・時間別表示に対応したカレンダープラグインをご紹介します。Googleカレンダーにも対応してる様ですが今回はGoogleカレンダーを使用せず月別カレンダー表示の方法をご紹介します。 FullCalendarを使った月・週・時間別表示に対応したカレンダーのCSS記述※main.cssファイルを読み込みます。必要に応じて変更して下さい。 <link href='main.css' rel='stylesheet' /> <style> body { margin: 20px 10px; padding: 0; font-size: 14px; text-align: center; } #calendar { max-width: 1100px; margin: 0 auto; } h1{ text-align: center;
モーダル画面をブラウザ全体に表示する方法【fullmod.js】｜DAD UNION – エンジニア同盟
モーダル画面をブラウザフルで表示するCSSの記述 ※fullmod.min.cssファイルを読み込みます。ブラウザフルで表示されるモーダル画面（.fullmod）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="fullmod.min.css"> <style type="text/css"> body{ text-align: center; } h1{ text-align: center; font-size: 22px; padding: 20px 0; line-height: 1.4em; } button{ padding: 10px; font-size: 16px; } .fullmod{ color: #ffffff; background-color: #cccccc; } </style> モーダル画面をブラウ
FullscreenBookBlock：ページめくりを導入する方法｜DAD UNION – エンジニア同盟
過去にページめくり系プラグイン 「pageflip.js：本の様にページめくりを導入する方法」 「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」 をご紹介しましたが、今回は別パターンのページめくりを導入する方法をご紹介します。 ページめくりを導入するための読み込むCSSファイル ※jquery.jscrollpane.custom.css、bookblock.css、custom.cssファイルを読み込みます。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.custom.css" /> <link rel="stylesheet" type="text/css" href="css/bookblock.css" /
pagePiling.js入門：マウススクロールでスムーズなページ切り替えを実現する方法｜DAD UNION – エンジニア同盟
pagePiling.jsを使ってマウススクロールでページを切り替える方法を紹介します。 このライブラリを使用すると、フルスクリーンでスクロールバーが表示されず、マウスのトラックボールやキーボードの矢印キーでページを切り替えることができます。 pCSSの記述 まず、必要なCSSファイルjquery.pagepiling.cssフを読み込みます。次に、メニュー切り替えボタンやページセクション（#section1～4）のスタイルを定義します。必要に応じてこれらのスタイルをカスタマイズしてください。 <link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" /> <style> p{ font-size: 2em; } .section{ text-align: center; } /* menu * --------
JavaScriptアニメーションライブラリTweenMaxを使ってタグ要素を移動する方法｜DAD UNION – エンジニア同盟
JavaScriptを使ったアニメーション方法は色々ありますが。今回アニメーションライブラリTweenMaxを使ってタグ要素を移動するをご紹介します。 アニメーション移動するタグ要素のCSS記述 ※アニメーション移動するタグ要素#pos、#to、#frm、#frmtoを用意します。必要に応じて変更して下さい。 <style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; text-align: center; } h1{ font-size:16px; text-align:
投稿ページの目次を自動で生成・表示するRich Table of Contents【WordPressプラグイン】｜DAD UNION – エンジニア同盟
Rich Table of Contentsは記事ページの見出しタグを元に投稿ページの目次を自動で生成・表示するプラグインです。 以下の様な目次が表示されます。 Rich Table of Contentsプラグイン以下がプラグイン提供元になります。 Rich Table of Contents Rich Table of ContentsのインストールWordPress管理画面より「プラグイン」→「新規追加」→「検索キーワード」に「Rich Table of Contents」を入力すると、以下の赤枠「Rich Table of Contents」が表示されます。 「今すぐインストール」をクリックして、「有効化」します。 Rich Table of Contents目次の表示設定画面プラグインをインストールし有効化しただけでは投稿ページの目次は表示されないので、目次の表示設定を行います。
Drawerでレスポンシブ対応のドロワーメニューを簡単に実装する方法【jQueryプラグイン】｜DAD UNION – エンジニア同盟
jQueryプラグインのDrawerを使ってレスポンシブ対応のドロワーメニューを簡単に実装する方法をご紹介します。 Drawerはレスポンシブ対応サイトのスマホでドロワーメニューを簡単に実装できるプラグインです。 Drawerを使ってレスポンシブ対応のドロワーメニューを簡単に実装する読込CSSファイル ※sandbox.css、drawer.min.cssファイルを読み込みます。 <link href="sandbox.css" rel="stylesheet"> <link href="./dist/css/drawer.min.css" rel="stylesheet"> Drawerを使ってレスポンシブ対応のドロワーメニューを簡単に実装するHTMLの記述 ※今回左からドロワーメニューを表示させますが、上・右からメニュー表示も可能です。 <body class="drawer draw
ビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン【TwentyTwenty】｜DAD UNION – エンジニア同盟
2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）をご紹介します。 「基本的な使用法」「垂直方向」「並んで」、3パターンの利用方法を紹介します。 2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）のCSSファイル読込 ※foundation.css、twentytwenty-no-compass.cssファイルを読み込みます。 <link href="css/foundation.css" rel="stylesheet" type="text/css" /> <link href="css/twentytwenty-no-compass.css" rel="stylesheet" type="text/css" /> 2枚のビフォー・アフター画像をわかりやすく比較するJav
【EC-CUBE3】プラグインアップロードエラー：config.yml not found or syntax errorの解決方法｜DAD UNION – エンジニア同盟
EC-CUBE3を使ってECサイトを構築する際、多くの方が利用する「プラグイン」の機能。しかし、その便利なプラグインをアップロードする時にプラグインアップロードエラー「config.yml not found or syntax error」というエラーメッセージに直面することがあります。これは、特にECサイト運営においては解決したい問題の一つです。 そこで、この記事では、そのエラーメッセージの原因と解決方法を分かりやすく解説します。 結果、簡単に解決できました。 エラーメッセージ「config.yml not found or syntax error」の原因 EC-CUBEの管理画面より、「オーナーズストア」→「プラグイン」→「プラグイン一覧」で圧縮（zip）ファイルをアップロードすると、「config.yml not found or syntax error」というエラーが出ました
WordPressカテゴリーの並び替え：プラグインで表示順をカスタマイズする完全ガイド｜DAD UNION – エンジニア同盟
WordPressを使ったブログ運営では、整理整頓が成功の鍵を握ります。カテゴリーを上手に管理することで、訪問者にとって探しやすい、使いやすいサイト構造を作り出すことができます。 しかし、WordPressのデフォルト機能だけでは、カテゴリーの並び順を自由に変更することが難しいです。 そこで本記事では、カテゴリーの一覧表示をカスタマイズし、より効率的なサイト運営を実現する方法をご紹介します。 前回「カテゴリー毎の最新投稿記事一覧を取得する方法【WordPressプラグイン無し】」で表示させた「カテゴリー毎の最新記事一覧」ページを使って並び順が変更できるか試してみました。 「Category Order and Taxonomy Terms Order」プラグインとは このプラグインは、カテゴリーやタクソノミーの順序を簡単に変更できるようにするものです。WordPressのプラグインディレク
slick.jsを使った複数画像スライダープラグイン｜DAD UNION – エンジニア同盟
slick.jsは広く使用されているjQueryベースのスライダープラグインで、ウェブページに洗練されたスライダーやカルーセルを簡単かつ効率的に実装することができます。様々なオプションと機能を提供しているため、開発者は様々な要件に合わせたスライダーを作成することが可能です。 「複数画像スライダープラグイン【Swiper.js】」に続き、slick.jsを使ってレスポンシブやスマホ・タブレットのスワイプに対応した複数画像スライダープラグインをご紹介します。 slick.jsを使った複数画像スライダープラグインのCSS記述 ※slick.css、slick-theme.cssファイルを読み込みます。その他、必要に応じて書き換えてください。 <link rel="stylesheet" type="text/css" href="./slick/slick.css"> <link rel="st
Swiper.jsを使ったレスポンシブ対応の複数画像スライダープラグイン｜DAD UNION – エンジニア同盟
Swiper.jsは、現在最もポピュラーで使いやすいタッチスライダーの1つです。モダンなサイト制作において、スライドショーはユーザーエクスペリエンスを向上させる重要な要素であり、特にレスポンシブデザインとの組み合わせによって、あらゆるデバイスサイズでコンテンツを効果的に表示することができます。Swiper.jsは、その多機能性と高いカスタマイズ可能性から多くの開発者に利用されています。 今回はそのSwiper.jsを使ったレスポンシブやスマホ・タブレットのスワイプに対応したスライダー方法をご紹介します。 Swiper.jsの特徴 レスポンシブデザイン: Swiperはフルレスポンシブで、デバイスサイズを自動的に認識し、表示を最適化します。 タッチ操作に対応: スワイプジェスチャーを使用してコンテンツを操作できるので、タッチデバイスに最適です。 マルチプラットフォーム対応: Swiperはi
reflection.jsで画像に魅力的な半透明の反射影を追加する方法｜DAD UNION – エンジニア同盟
昨今のWeb開発では、ユーザーの注目を集め、サイトに長く留まってもらうために、ビジュアル要素の魅力が非常に重要になっています。そんな中、画像に美しい影を加えることで、サイトの見た目を格段に向上させることができます。 この記事では、JavaScriptのライブラリであるreflection.jsを使用して、画像に半透明の反転した影を表示させる方法を紹介します。 CSSでの準備 まず初めに、画像を美しく表示させるための基本的なCSSを設定しましょう。ここでは、サイト全体のマージンやパディングを0に設定し、見出しや画像を中央揃えにします。特に、clWrapクラスを使って画像を中央に配置する方法を紹介します。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; fo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
emergence.jsを使ってページをスクロールすると要素が画面に表示されているか判別しアニメーションを表示する方法｜DAD UNION – エンジニア同盟
タッチ、スワイプ、マウスホイール、レスポンシブに対応したスライダーOwl Carousel 2【jQueryプラグイン】｜DAD UNION – エンジニア同盟
