WEB制作

HTML/CSS/などWEB制作に関わる知識

WordPress

WordPressのメディアに画像(PNG)がアップロードできない

WordPressのメディアライブラリに画像をアップロードしようとした際、PNGファイル(特に1MB以上)で画面が固まるように見える現象が発生したので、対処した方法を記載します。実際には画像自体はアップロードされているのに、完了の表示がされ...
WordPress

WordPressのファイルをルートではないディレクトリに置く場合の設定等

WordPress をインストールする場合、ルートのディレクトリにファイルを置くとごちゃごちゃするため、wp/ や blog あどのディレクトリにまとめて設置したい場合があると思います。例サイトのURLは、のアドレスは、WordPress ...
CSS

シンプルなスマホナビゲーションの実装サンプル【CSS+jQuery】

モバイル表示の際に表示するシンプルなスマホナビゲーション(ドロワーメニュー)の実装サンプルです。ハンバーガーアイコンをクリックすると、ドロワーメニューが表示されるナビゲーションです。アイコンクリック時は、×にマークに変化するアニメーションも...
Javascript/jQuery

CKEditor4でColorButtonが有効にならない

CKEditor4はデフォルトでは、文字色と文字背景の選択ができないようです。そのため、colorbuttonのプラグインを追加する必要があります。プラグインダウンロードページ下記をconfig.jsに追記し、プラグインを有効にします。しか...
Javascript/jQuery

CKEditor4で、エディター内へのドロップを禁止する

CKEditorで、ボタンなどをドラッグアンドドロップしてしまうと、意図しないコードが入り、コンテンツが表示されなくなったりなどの事故が発生することがあります。事故防止のために、ドロップを禁止にする方法です。CKEditorのconfigに...
CSS

HTMLで画像がリンク切れの時(存在しない時)に画像を表示しないようにする

画像のリンクが存在しない場合に画像を表示しないようにするには、imgのHTMLタグに、「 onerror="this.style.display='none';" 」を追加するだけでシンプルで簡単に表示されないようにできます。HTML +...
Javascript/jQuery

bxSliderでスライドが1枚しかない場合にスライドショーを無効にする

bxSliderでスライドが1枚しかない場合にスライドショーを無効にする方法です。スライダーを実行する前にスライドの数をチェックし、1枚しかない場合にはbxSliderの初期化をスキップすることで、1枚のみの場合に、スライダーを無効にできま...
WEB制作

WEBデザイナーにAdobe CCは必須!?迷わずを使った方がいい理由

WEBデザイナーを目指すとき、どのソフトを使用すればよいか、ソフトの選定が必要になってくると思います。最近では、Adobe系のソフト以外にも、たくさんの便利で高機能なソフトが出てきています。最近では、Affinity Designer、Af...
WordPress

WordPressの投稿・固定ページで「編集」ボタンを設置する

WordPressの投稿画面などに編集画面へすぐにアクセスできるように「編集」ボタンを設置したい場合があります。WordPressの管理画面にログインしていたら、上部にバーが表示され、「編集」の項目が表示されるのですが、場合によっては、特定...
CSS

【CSS】transitionでwidthを変化させたい時に幅が 0px にならない

CSSの「transition」プロパティを使用して、要素の幅を0pxに変化させたいときに、完全に0にならずに、少し残ってしまう場合があります。原因として、border などを指定している場合があります。元のCSSborder:0; にして...