表示速度などの問題でwebp形式を使いたいけれど対応していないブラウザもあるし、レスポンシブの問題もあるしなーという時はpictureタグでうまく切り替えます。 コード とりあえずコードです。 第1候補で『sample.webp』を表示させます。画面を縮めた時にはほかの画像を表示させたいので、メディアクエリでmin-widthを設定します（次で設定するmax-widthの1つ前の数字）。 第2候補で画面を768px以下に縮めた時の画像を『sample_sp.jpg』表示します […]
WordPressを使うとき、少しでも軽量化させたいですよね。 そんな時絵文字の読み込みをさせないことで軽量化を図ることができます。 ソースコード 企業サイトなどでは特に絵文字を使うようなことってないですよね…。 ですので以下のコードをfunction.phpに入れてしまいます。 ※バックアップを取りながら作業してください。 これだけで完了です。 使用していない、表示速度に関わりそうなものは取り除いてしまいましょう。
ご時世柄なかなか人を集めることができない中、WEBセミナー・オンラインセミナーへの需要が高まっています。 もしかしたらまだ一歩を踏み出せていない方もいらっしゃるかもしれませんが、WordPressで構築したオウンドメディアであれば、あまりHTMLの知識があまりない方でも手軽にセミナーの募集ができます。 WEBセミナー・オンラインセミナーの募集画面の一例 ここで軽く作成例をご紹介します。 登録画面 まず、登録画面です。 ここにセミナーの詳細を登録することで次の項で紹介する画面に […]
WordPressのログイン画面のURLをデフォルトのままにしておくと、セキュリティ面で少々心配になりますね。 そこで今回は『Login rebuilder』というプラグインを使って、URLの変更をしましょう。 まずはインストール プラグイン＞新規追加からLogin rebuilderをインストールして『有効化』してください。 設定をしていこう 有効化をしたら、設定＞ログインページを開いてください。 無効なリクエスト時の応答 元のログインページにアクセスされたときの挙動を設定 […]
サイトを作るとパンくずが必要になってくることが多いですね。 カスタム投稿などを使うと自作だとややこしくなってしまうこともあるので、プラグインを使うと便利です。 今回は『Breadcrumb NavXT』というプラグインを使っていきます。 インストールしよう 『プラグイン＞新規追加』から『Breadcrumb NavXT』を検索して追加、『有効』の状態にしてください。 コードを入れて表示させよう とりあえずコードを入れて表示しながら調整していきましょう。その方がわかりやすいです […]
WordPressでデフォルトで読み込んでいるjQueryですが、どうにもバージョンが古いということがあります。 そんな時はfunction.phpにコードを記述して古いjQueryを読み込ませないようにしましょう。 その後新しいjQueryを読み込ませます。 ※function.phpは必ずバックアップを取りながら作業してください ※古いプラグインを使用していると影響がある場合があるので、都度確認をしてください 記述するコード 管理画面で動作がしなくなる可能性があるため、『 […]
WordPressでは管理画面の『外観＞メニュー』でメニューの管理ができます。 ここで新しいメニュー自体の追加はできるのですが、メニューの表示位置は追加できません。 例えばフッターで左右に項目を分けてメニューを表示したい…ということがあっても現状だと実現ができないです。 そんな時はfunctions.phpにコードを追加してメニューの位置を追加しましょう。 functions.phpにコードを追加 functions.phpに以下のコードを追加します。 ※functions. […]
WordPressではデフォルトで画像などのファイルを置換する機能がありません。地味に面倒です。 そこで『Enable Media Replace』というプラグインを使ってファイルの置換ができるようになります。 ※画像やpdfの置換には向いていますが、その他のファイルには不向きです。 ダウンロードする プラグインのページからzipをダウンロードするか、管理画面のプラグインの『新規追加』から『Enable Media Replace』を検索して追加をします。 忘れずに有効化をし […]
WordPressで記事を書いていると、タイトルやテーブル組みなど決まった型のHTMLコードを呼び出したいという時がありませんか？ そんな時に使えるプラグインが『AddQuicktag』です。 こんな感じでエディタ部分にボタンで表示されて、クリックをしたらコードをすぐに呼び出すことができます。 ちなみに『AddQuicktag』を使用するときは新しいエディタの『Gutenberg』の時はクラシックモードにして使用したり、『Classic Editor』等のプラグインを使用して […]
『PageSpeed Insights』を使用するとよく出てくる画像フォーマット『WebP』。 Photoshopでは書き出しなどができません。 が、今回紹介する『WebPShop』を使用することで書き出しが可能になります。 今回はインストールの方法をご紹介します。 使い方 ダウンロード まずはGitHubからプラグインをダウンロードします。 インストール 『bin』のフォルダを開きます。 Macの方は『WebPShop_0_3_0_Mac_x64』、 Windowsの方は『 […]
今時小学校ではプログラミングが必修になっているようですね。すごいです…。 なかなか一人だと初めのうちは勉強するにも難しいプログラミングですが、WEBサービスを使えば気軽に始めることができます。 SCRATCH メディアでもよく取り上げられている『SCRATCH』です。 難しいコードなどはなく、ブロックのようなものを積み重ねてキャラクターなどに対してプログラミングを行い指示ができます。 チュートリアルを見ながら実際に触ってみるのが一番良いかと思います。 思った通りに動かすことが […]
2020年4月現在、リモートワーク/テレワークでお仕事されている方も多いのではないでしょうか。 そんな時役立ちそうなツールをまとめてみました。参考になったらうれしいです。 ※料金は人数の規模によって異なりますので、公式サイトをご確認ください。 ※会社によってはセキュリティの関係上ツールの使用が難しい場合もあるので、ご確認いただいた上で導入してください。 コミュニケーションツール系 どうしてもお仕事はコミュニケーションが欠かせないです。そんな時に役立つツールをご紹介します。 C […]
WordPressで規模の大きいサイトを作るには投稿画面が複数必要になる場合もあり、内容によっては固定ページなどで管理が難しいため投稿画面を新しく作成したときがあります。 そんな時新しく追加する投稿画面のことを『カスタム投稿タイプ』といいます。 基本的にfunction.phpにコードを追記していけば作成もできるのですが、正直初心者だしfunction触りたくない…という人もいるかと思います。 そんな時活躍してくれるプラグインが『Custom Post Type UI』です。 […]
WordPressが5.0になってから、エディタががらっと変わりました。『Gutenberg』という名前がついているみたいです。 慣れたらそんなに問題ないかな…と思うのですが、ボックス（例えばカテゴリーをチェック入れる領域みたいなの）を増やしたいときに何となくごちゃごちゃした感じになってしまうんですよね。 今回はエディタを旧エディタのように表示できるプラグイン『Classic Editor』を紹介します。 『Classic Editor』をインストールしよう ひとまずプラグイ […]
WordPressで入れた記事は基本的に並び替えはできません。 デフォルトの方法で直すとすると日付を修正していき…となり、複数の記事を入れ替えたい場合は現実的ではないです。 そんなときに役に立つのが『Intuitive Custom Post Order』というプラグインです。 Intuitive Custom Post Orderをダウンロードしよう まずプラグインの新規追加などから『Intuitive Custom Post Order』をダウンロードします。 ダウンロー […]
WordPressで特定のページにのみベーシック認証をかけたい時ってありませんか？ 全体にかけるプラグインはありますが、特定ページだと見当たらなかったりします。 今回はベーシック認証をかけて、管理画面からでも簡単に設定できる方法をご紹介します。 ベーシック認証のかけ方 ①function.phpにコードを記述する まずは以下のコードをfunction.phpに記述してアップください。 『認証に失敗しました。～』のテキストは自由に変更できます。 ②header.phpにコードを […]
今回は知っておくと便利なcssの小技 part16 セレクタの使い方編です。 バックナンバー 知っておくと便利なcssの小技 part15 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 子セレクタ（親要素 > 子要素）の使い方 子セレクタとは、対象の親要素の直下にある子要素に対してのみスタイルを適用するセレクタです。 孫要素は対象になりません。 今回は親要素の直下の子要素に対してのみ、文字を赤色にしてみます。 HTML CSS 隣 […]
Firefoxのデフォルト機能についてるスクリーンショットは追尾してくる部分なども大体はきれいに処理してくれたり、使い勝手がよく便利です。 今回はその使い方をご紹介します。 PC表示で撮る 1.URL部分のマークをクリック URL部分にある『・・・』のマークをクリックします。 2.項目の中から『スクリーンショットを撮る』を選択 『スクリーンショットを撮る』をクリックします。 3.スクリーンショットを撮る範囲を指定 『全体を保存』『表示範囲を保存』『ページをドラッグまたはクリッ […]
デザインやプレゼンテーションなどに欠かせないiPhoneモックアップ。 今回は機種ごとにまとめてご紹介していきます。 ライセンスなどは各サイトでご確認ください。 iPhone XR Psd iPhone XR Mockup XRの全色が用意されています。 Psd iPhone XR Mockup Isometric Vol1 横置きにされたXRのモックアップです。 iPhone XS（Maxも含みます） Psd iPhone XS Max Mockup XSとXS Maxの両 […]
女性的なデザインでよく使うPhotoshopの花柄ブラシ。 今回は配布されている花柄ブラシを紹介していきます。 ※一応無料の物などを集めたつもりですが、規約が変わっている可能性もあるので使用の際にはチェックしてしてください。 Flower Brushes Part 3 – The Smell Of Roses ペンで書かれた花のブラシのセット。主線がある状態で塗り色を変えて使いたい時に便利そうです。 にじんだ水彩花柄 フェミニンな雰囲気を出せるにじんだ水彩の花柄の […]
今回は知っておくと便利なcssの小技 part15です。 バックナンバー 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 知っておくと便利なcssの小技 part12 テキストが空の場合、要素を表示させない テキストがないときにpaddingだけが残って中途半端に表示されてしまう、なんてことがあったりします。 こういう時はCMSで生成されたりしていることが多いので、phpで処理するのが1番よいかとは思いますがそれが難しいときはcss […]
今回は知っておくと便利なcssの小技 part13です。 バックナンバー 知っておくと便利なcssの小技 part12 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 テキストが空の時のみ、『content』でURLを取得し表示させる リンクのテキストがHTML上で空の時に、contentでURLを取得して表示させてくれる方法です。 ベタでURLを貼るようなリンク集…などには使えると思います。 HTML CSS jsを仕込みそうなも […]
今回はちょっと変わった、おもしろいプラグインをまとめました。 程度を守ればエフェクトがあるとサイトも華やかに見えますね。 要素が揺れるアニメーションを実現！『CSShake』 このプラグインを使用するとホバー等をした時に要素が揺れるアニメーションを付けることができます。 あまり揺れさせすぎると怖い感じになってしまうので注意してください…。 おもしろ系のサイトなんかではバンバン使えそうですね。 ホバー時に他の要素をぼかす『Item Blur Effect with CSS3 […]
コーディングをしているとよくお世話になるfirst-childとfirst-of-typeセレクタ。 ただfirst-childとfirst-of-typeの違いって最初のうちってよくわからないですよね。 今回はその2つの違いについてお話しようと思います。 first-childが効かない？そんな時はfirst-of-typeで！ 例えば上の画像のようにpタグの中で、1番最初にあるものに色を付けたいとします。 とりあえずHTMLは以下のような感じです。 HTML このときなん […]
今回は個人的に知っておくと便利だなと思うcssの小技part12 -複数の背景要素-です。 バックナンバー 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 cssで複数の背景画像・背景色を指定する 1箇所の背景に複数の画像や色を指定したいという事があるかと思います。そんな時に使える方法です。 グラデーションもあるので複雑なように見えるかもしれませんが、案外簡単です。 HTML css とり […]
運営会社:株式会社8bit
制作サービス
運営サービス
