cssアニメーションを使いたいけれど、細かく調整したりする時間がない！という時ありますよね…。 そんな時は『Animista』を使って気軽にcssアニメーションを使ってみましょう！ 早速使ってみよう ページを開くと、上にアニメーションの大まかな分類があります。 BASIC拡大縮小や回転系のアニメーション ENTRANCES要素が表示されるときのアニメーション EXITS要素が消えてしまうときのアニメーション TEXTテキストのアニメーション ATTENTION要素が […]
年々増えていく、フォントサイズを指定する単位。 「px」を基本として、「vw」と「vh」が使えるようになったと思ったら、気が付くと「rem」という単位もあったり、煩雑としてきました。 今回は私がレスポンシブサイトを構築する際、一番楽だと思うフォントサイズ設定を紹介します。 目次1 決め手は「rem」と「vw」2 解説3 rem フォントサイズ早見表4 YoutubeChannelのご紹介 決め手は「rem」と「vw」 CSSでまずは基準となるフォントサイズを決めます。下記のよ […]
今日はvideoタグを好きな形に切り抜きしてみましょう。 実際に表示するとこんな感じです。 ＜円形に切り抜いた場合＞ 目次1 どうやって切り落とす？2 ジェネレーター3 YoutubeChannelのご紹介 どうやって切り落とす？ これが実は、CSSの「clip-path」という1行を追加するだけで切り落としが可能です。 ＜CSS＞ circleは円形です。 他にも、楕円形・五角形など、色々な形にすることができます。とても簡単ですね。 ジェネレーター 手打ちで数値を調整しても […]
表示速度などの問題でwebp形式を使いたいけれど対応していないブラウザもあるし、レスポンシブの問題もあるしなーという時はpictureタグでうまく切り替えます。 目次1 コード2 YoutubeChannelのご紹介 コード とりあえずコードです。 第1候補で『sample.webp』を表示させます。画面を縮めた時にはほかの画像を表示させたいので、メディアクエリでmin-widthを設定します（次で設定するmax-widthの1つ前の数字）。 第2候補で画面を768px以下に […]
WordPressを使うとき、少しでも軽量化させたいですよね。 そんな時絵文字の読み込みをさせないことで軽量化を図ることができます。 ソースコード 企業サイトなどでは特に絵文字を使うようなことってないですよね…。 ですので以下のコードをfunction.phpに入れてしまいます。 ※バックアップを取りながら作業してください。 これだけで完了です。 使用していない、表示速度に関わりそうなものは取り除いてしまいましょう。
ご時世柄なかなか人を集めることができない中、WEBセミナー・オンラインセミナーへの需要が高まっています。 もしかしたらまだ一歩を踏み出せていない方もいらっしゃるかもしれませんが、WordPressで構築したオウンドメディアであれば、あまりHTMLの知識があまりない方でも手軽にセミナーの募集ができます。 目次1 WEBセミナー・オンラインセミナーの募集画面の一例1.1 登録画面1.2 一覧画面1.3 詳細画面1.4 セミナー申し込み画面2 どのように作るの？ WEBセミナー・オ […]
WordPressのログイン画面のURLをデフォルトのままにしておくと、セキュリティ面で少々心配になりますね。 そこで今回は『Login rebuilder』というプラグインを使って、URLの変更をしましょう。 目次1 まずはインストール2 設定をしていこう2.1 無効なリクエスト時の応答2.2 ログインファイルキーワード2.3 新しいログインファイル2.4 第2ログインファイル2.5 新しいログインファイル2.6 ログ保存まわり2.7 著者ページへのアクセス2.8 oEmb […]
WordPressサイトのセキュリティを強化するにあたって、「ログインページのURLを変更する」というのはよくある手法ですが、その他にもできることを忘備録として一覧にしました。 目次1 SSLによる ログインと管理画面へのアクセスを強制する2 クリックジャッキング対策3 Dos攻撃を防止する4 REST APIを停止する5 WordPressのバージョン情報を削除する6 author IDの取得を制限する7 YoutubeChannelのご紹介 SSLによる ログインと管理画 […]
私が初めてAMP対応に着手しようとした時、複数のサイトを渡り歩いて情報を集めながら進めていかなければならない状態でした。「で、結局どうすればいいの」となったので、忘備録も兼ねてまとめていきたいと思います。速くなる仕組みなどは今回は省略します。 目次1 作る前に知っておいてほしい仕様1.1 AMPの公式仕様に沿ってタグを記述する必要がある1.2 AMPは現在進行形で許可されるタグが増えている1.3 レスポンシブ対応が必須1.4 JSを使ってはいけない？1.5 styleはhea […]
サイトを作るとパンくずが必要になってくることが多いですね。 カスタム投稿などを使うと自作だとややこしくなってしまうこともあるので、プラグインを使うと便利です。 今回は『Breadcrumb NavXT』というプラグインを使っていきます。 目次1 インストールしよう2 コードを入れて表示させよう3 設定をしよう3.1 一般3.2 投稿タイプ3.3 タクソノミー3.4 その他 インストールしよう 『プラグイン＞新規追加』から『Breadcrumb NavXT』を検索して追加、『有 […]
昨今、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』です。 難しいコードなどはなく、ブロックのようなものを積み重ねてキャラクターなどに対してプログラミングを […]
運営会社:株式会社8bit
制作サービス
運営サービス
