昨今、SEOで絶対に無視できないのがAMP。 表示速度を爆速にする分、様々な制約が設けられていますが、Google Chartsなどの部分的なものであれば同ページ内に表示が可能です。 目次1 部分的なJS表現をiframeで追加する2 導入方法 部分的なJS表現をiframeで追加する 分かってしまえばやり方は単純。AMP非対応の箇所のみiframeを使用します。 下記は弊社で運営している飲み会マッチングサービスのノミトモ。飲み会の募集が下にするする流れていくようなアニメーシ […]
株式会社8bitでは「ノミトモ」「Grmo」などのWebサービスを運営していますが、近年はスマホアプリへの対応も行っています。 その際、Webからアプリを起動させたい時があると思います。 具体的には「メールアドレスの有効性チェックを行い、URLを叩くとWebページにアクセスして アプリを起動」など･･･ AndroidやiOS両方とも比較的低コストで導入できるので、特にWebサービスと連動するアプリの場合は導入していきたいですね。 Androidの場合 Androidでは「カ […]
ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。 公式デモサイト 使用してみたところ、仕様は以下のようです。 ・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。 ・スマートフォン端末でも動作。（とりあえず手元のiPhoneXとiPadで動作確認しました。） ・泡の個数、色、向き、速さ、大きさ、ぼかし具合、アルファ値、背景グラデーションなど細かなカスタマイズが可能 ・背景のグラデーショ […]
通常の投稿は10件ずつ表示したいけど、とあるカスタム投稿の一覧ページはデザインを変えて8件ずつ表示したい…そんな時、以外と簡単に件数の調整が可能です。 functions.phpに記述 下記をfunctions.phpに追記してください。 これだけです。投稿タイプや件数は変更してください。 あとは一覧のPHPファイルや、CSSを修正調整すれば完成です。
WordPressでデフォルトで読み込んでいるjQueryですが、どうにもバージョンが古いということがあります。 そんな時はfunction.phpにコードを記述して古いjQueryを読み込ませないようにしましょう。 その後新しいjQueryを読み込ませます。 ※function.phpは必ずバックアップを取りながら作業してください ※古いプラグインを使用していると影響がある場合があるので、都度確認をしてください 記述するコード 管理画面で動作がしなくなる可能性があるため、『 […]
関連記事を表示するプラグインを使用することもできますが、あまり融通が利かなかったり、CSSの調整が面倒だったりなので、制作に慣れている方であれば、自分でゼロから設定してしまった方が早い場合があります。 今回は、カスタムフィールドを追加するプラグインを使用して、各投稿ごとに関連記事を設定できるようにします。関連記事という使い方ですが、記事は手動の選択制で、1つめが未設定であればランダム表示するだけなので厳密に言えば関連記事ではありませんが、サイト内を周回させたいだけであれば […]
WordPressでは管理画面の『外観＞メニュー』でメニューの管理ができます。 ここで新しいメニュー自体の追加はできるのですが、メニューの表示位置は追加できません。 例えばフッターで左右に項目を分けてメニューを表示したい…ということがあっても現状だと実現ができないです。 そんな時はfunctions.phpにコードを追加してメニューの位置を追加しましょう。 functions.phpにコードを追加 functions.phpに以下のコードを追加します。 ※functions. […]
WordPressではデフォルトで画像などのファイルを置換する機能がありません。地味に面倒です。 そこで『Enable Media Replace』というプラグインを使ってファイルの置換ができるようになります。 ※画像やpdfの置換には向いていますが、その他のファイルには不向きです。 目次1 ダウンロードする2 実際に使ってみよう ダウンロードする プラグインのページからzipをダウンロードするか、管理画面のプラグインの『新規追加』から『Enable Media Replac […]
目次1 AMPとは？1.1 高速化のための厳しい制約2 劇的に改善！Google PageSpeed Insightでの評価Before／After2.1 AMP対応前2.2 AMP対応後 AMPとは？ 近年、Googleが推奨しているAMPをご存じでしょうか。 AMP対応しているページを事前にGoogleがキャッシュしておくことによって、閲覧者がページリクエストした際に、Googleが持っているキャッシュを表示するため、素早く表示できるという仕組みです。 通常、ページの表示 […]
WordPressで記事を書いていると、タイトルやテーブル組みなど決まった型のHTMLコードを呼び出したいという時がありませんか？ そんな時に使えるプラグインが『AddQuicktag』です。 こんな感じでエディタ部分にボタンで表示されて、クリックをしたらコードをすぐに呼び出すことができます。 ちなみに『AddQuicktag』を使用するときは新しいエディタの『Gutenberg』の時はクラシックモードにして使用したり、『Classic Editor』等のプラグインを使用して […]
『PageSpeed Insights』を使用するとよく出てくる画像フォーマット『WebP』。 Photoshopでは書き出しなどができません。 が、今回紹介する『WebPShop』を使用することで書き出しが可能になります。 今回はインストールの方法をご紹介します。 目次1 使い方1.1 ダウンロード1.2 インストール 使い方 ダウンロード まずはGitHubからプラグインをダウンロードします。 インストール 『bin』のフォルダを開きます。 Macの方は『WebPShop […]
受託案件でWordPressを使用したサイトを構築する際、そのまま納品すると管理画面が分かりにくいことがあります。 慣れない方が更新されることも考慮して、細やかな部分ですが、配慮してあげると更新時のストレスがぐっと減ります。 例えばイベント情報を投稿するサイトを作成した場合、メインループの「投稿」の表記を「イベント情報」に変えておくと、一目見てどこを更新すればいいのか分かります。 目次1 やり方2 アイコンを変更する やり方 テーマの function.php に、以下の記述 […]
目次1 キャンセルの方法2 デモ3 サンプルソース3.1 HTML3.2 JS3.3 CSS キャンセルの方法 スマホやタブレットなどのタッチデバイスで、ソフトウェアキーボードが立ち上がるのをキャンセルしたい場合、inputに「readonly=”readonly”」属性を追加すると、キーボードが非表示になります。 利用シーンとしては、iPadでツールを作成したい場合などに使えると思います。 予約システムなどであれば、電話番号の入力や電卓機能を独自のテ […]
マウスホバーするとフキダシでテキストが表示される「jquery.balloon.js」。 シンプルで大変使い勝手の良いJSですが、単純に呼び出しただけではタブレットやスマートフォンなどのタッチデバイスで動作がうまくいきません。 書き方を少し工夫して、スマートフォンやタブレットのタッチデバイスに対応させます。PCではマウスホバー、タッチデバイスではタップで表示非表示するようにします。 [ 公式JSファイルのDLはこちらから ] [ 私が作った簡単なデモはこちら ] 目次1 使い […]
今時小学校ではプログラミングが必修になっているようですね。すごいです…。 なかなか一人だと初めのうちは勉強するにも難しいプログラミングですが、WEBサービスを使えば気軽に始めることができます。 目次1 SCRATCH2 Hour of Code3 プログラミングゼミ4 ドットインストール5 Progate SCRATCH メディアでもよく取り上げられている『SCRATCH』です。 難しいコードなどはなく、ブロックのようなものを積み重ねてキャラクターなどに対してプログラミングを […]
2020年4月現在、リモートワーク/テレワークでお仕事されている方も多いのではないでしょうか。 そんな時役立ちそうなツールをまとめてみました。参考になったらうれしいです。 ※料金は人数の規模によって異なりますので、公式サイトをご確認ください。 ※会社によってはセキュリティの関係上ツールの使用が難しい場合もあるので、ご確認いただいた上で導入してください。 目次1 コミュニケーションツール系1.1 ChatWork1.2 Slack1.3 Skype1.4 ZOOM1.5 Mic […]
WordPressで規模の大きいサイトを作るには投稿画面が複数必要になる場合もあり、内容によっては固定ページなどで管理が難しいため投稿画面を新しく作成したときがあります。 そんな時新しく追加する投稿画面のことを『カスタム投稿タイプ』といいます。 基本的にfunction.phpにコードを追記していけば作成もできるのですが、正直初心者だしfunction触りたくない…という人もいるかと思います。 そんな時活躍してくれるプラグインが『Custom Post Type UI』です。 […]
WordPressが5.0になってから、エディタががらっと変わりました。『Gutenberg』という名前がついているみたいです。 慣れたらそんなに問題ないかな…と思うのですが、ボックス（例えばカテゴリーをチェック入れる領域みたいなの）を増やしたいときに何となくごちゃごちゃした感じになってしまうんですよね。 今回はエディタを旧エディタのように表示できるプラグイン『Classic Editor』を紹介します。 『Classic Editor』をインストールしよう ひとまずプラグイ […]
WordPressで入れた記事は基本的に並び替えはできません。 デフォルトの方法で直すとすると日付を修正していき…となり、複数の記事を入れ替えたい場合は現実的ではないです。 そんなときに役に立つのが『Intuitive Custom Post Order』というプラグインです。 目次1 Intuitive Custom Post Orderをダウンロードしよう2 設定をしよう3 実際に移動させてみよう Intuitive Custom Post Orderをダウンロードしよう […]
WordPressで特定のページにのみベーシック認証をかけたい時ってありませんか？ 全体にかけるプラグインはありますが、特定ページだと見当たらなかったりします。 今回はベーシック認証をかけて、管理画面からでも簡単に設定できる方法をご紹介します。 目次1 ベーシック認証のかけ方1.1 ①function.phpにコードを記述する1.2 ②header.phpにコードを記述する1.3 【応用】管理画面からIDとパスワードを設定できるようにする ベーシック認証のかけ方 ①funct […]
WordPressのログイン画面は、デフォルトの状態ではログイン画面のURLが全て同じです。 以下の2つのアドレス、ドメイン部分を変更してブラウザでたたくと、ログイン画面にアクセスできてしまいます。 https://ドメイン.com/wp-login.php https://ドメイン.com/wp-admin/ WordPressの乗っ取りやスパムを防ぐため、ログイン画面のURLを変更して、セキュリティの対策を行いましょう。 目次1 [手順1]wp-login.phpの代わり […]
ご縁がありまして、セクシー男優の吉村卓さんの似顔絵イラストと、WEBサイトのデザインを担当させていただきました。 そこで似顔絵イラストのグッズを制作したとのことで、ご厚意でアクリルキーホルダーと消しゴムを頂きました。ありがとうございます！ こちらのキーホルダーは今私のデスクの上に鎮座しており、時々笑顔を誘ってくれます。 トレードマークのブリーフ＆仁王立ちポーズが、それらしいとご好評の様子で、「卓ちゃんマン」との愛称で親しまれているそうです。 喜んで頂けて私としても大変嬉しく思 […]
今回は知っておくと便利なcssの小技 part16 セレクタの使い方編です。 バックナンバー 知っておくと便利なcssの小技 part15 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 目次1 子セレクタ（親要素 > 子要素）の使い方2 隣接セレクタ（要素1 + 要素2）の使い方 子セレクタ（親要素 > 子要素）の使い方 子セレクタとは、対象の親要素の直下にある子要素に対してのみスタイルを適用するセレクタです。 孫要素は対象になり […]
Firefoxのデフォルト機能についてるスクリーンショットは追尾してくる部分なども大体はきれいに処理してくれたり、使い勝手がよく便利です。 今回はその使い方をご紹介します。 目次1 PC表示で撮る1.1 1.URL部分のマークをクリック1.2 2.項目の中から『スクリーンショットを撮る』を選択1.3 3.スクリーンショットを撮る範囲を指定1.4 4.これで完了です2 スマートフォン表示で撮る2.1 1.開発ツールを起動して『レスポンシブデザインモード』を選択2.2 2.表示し […]
Wordpressでサイトを構築している時、headタグの中身が煩雑でうんざりしますよね。 今回はその不要なタグを取り除いてみましょう。 目次1 基本のやり方2 例:Wordpressのバージョン情報を消す場合3 例:rel=”canonical”タグの表示4 例:ショートリンク（短縮リンク）5 例:rel=”wlwmanifest”タグの削除6 例:コメントフィード用のタグ削除7 例:絵文字用のタグ削除 基本のやり方 使用しているテーマのfuctio […]
運営会社:株式会社8bit
制作サービス
運営サービス
