iPhone 12 / iPhone 12 Pro のおすすめモックアップ素材
こんにちは。今回はiPhone 12 / iPhone 12 Pro のモックアップをまとめました。 一応ライセンスフリーのものを掲載していますが、使用用途によって異なるかと思いますので各サイトをご確認ください。 目次1 iPhone 121.1 Psd iPhone 12 Mockup Set1.2 Isometric Psd iPhone 12 Mockup Set1.3 Gravity Psd Iphone 12 Mockup Set2 iPhone 12 pro / […]
LINE Messaging API を使ったインスタントウィン（即時抽選）を考えるお話
目次1 LINEを使ったキャンペーン？1.1 Messaging APIとは1.2 利用料金は？2 最後に LINEを使ったキャンペーン？ 今何かと騒がしいLINEではありますが、スマホを持っていればお手軽かつ複数アカウントを作りづらい仕様のため、B2Cとしては非常に使いたくなるプラットフォームです。 インスタントウィンに関しては弊社で構築したプレゼントキャンペーンサイトがありますので、こちらをご確認いただければと思いますが、TwitterではなくLINEを利用 […]
【Nuxt.js】localhostでSSL証明書を取得してhttpsでアクセスするお話
目次1 なんでSSL通信が必要？2 Chocolateyをインストールする3 mkcertをインストールする4 それぞれの環境ごとに証明書を発行4.1 Visual Studio Codeのターミナルから以下のコマンドを打つ4.2 nuxt.config.jsに追記する4.3 .gitignoreに追記する5 Firefoxで見た場合 なんでSSL通信が必要？ 位置情報を利用する際、数年前からSSL通信じゃないと取得できなくなったことで、ローカル環境でもSSL通信が必要になり […]
WordPressでデフォルトの『投稿』の名前を変更しよう
WordPressでデフォルトの『投稿』ですが、表示部分と異なることも多いので変えてしまいましょう。 function.phpに以下を記入していきます。 ※バックアップを取りながら作業をしてください 『お知らせ』のところを任意の名前にしてください。 これで『投稿』から『お知らせ』に名前が変わりました！
WordPressで『投稿』のアーカイブページを有効にして任意のURLで表示しよう
WordPressではデフォルトの『投稿』のアーカイブがなぜかデフォルトが無効になっています。不思議ですね。 なのでアーカイブを有効にして、かつ任意のURLで表示できるように設定をします。 目次1 ①function.phpに以下を記入2 ②管理画面のパーマリンクの設定を更新します3 ②任意のURLで表示ができたら完了 ①function.phpに以下を記入 function.phpに以下を記入していきます。 ※バックアップを取りながら作業をしてください $args[R […]
WordPressで画像を相対パスでアップロードできるようにする
WordPressでは投稿画面ではデフォルトで画像が絶対パスで挿入されます。 ただ、環境を移行した時に絶対パスを変更するのが手間だったり数が多いと置換ミスが起こることもあるのでデフォルトで相対パスで投稿できるようにします。 方法としては以下をfunction.phpに入れてください。 ※バックアップを取りながら作業をしてください これで相対パスで画像が挿入されるようになりました！
某VPSでKernel panicが出てパニックになったお話
VPSサービスは安い割にいろいろとできてコスパがよいのですが、サーバー会社のメンテナンスなどで再起動が発生したりします。 通常は事前にアナウンスがされますが、ネットワーク機器などの障害などで緊急メンテナンスによる再起動が発生し、ごくまれにですが再起動がうまくいかないことがあります。 これがマネージドプランなどであればサーバー会社に問い合わせれば対応してくれますが、VPSは基本的に管理者権限をいただいているので自分たちで対応しなければいけません。 特にKernel panicな […]
アプリ内課金をGoogle Play ConsoleとApp Store Connectで設定してみました
前回のエントリーでアプリ内課金について簡単にまとめましたが、今回は実際にGoogle Play ConsoleやApp Store Connectでアプリ内課金のアイテム登録をおこないます。 大前提としてGoogle Play ConsoleまたはApp Store Connectにログインしてアプリ登録が出来ることとなります。 必ずしもアプリが公開されている必要はありませんが、必ずアプリをアップロードしている必要があります。 また、Google Play Console、A […]
アプリ内課金について簡単にまとめてみました
目次1 アプリ内課金について2 そもそもアプリ内課金とは？3 アプリ内課金を導入する上での注意点は？4 アイテムとは？5 Google Playと App Storeのアプリ内課金の違いは？6 最後に･･･7 参考資料8 YoutubeChannelのご紹介 アプリ内課金について スマホアプリではアプリ内で課金を行うことができるいわゆる「アプリ内課金」と呼ばれる機能があります。 ガラケー時代は3キャリアそれぞれの決済システムがあり、厳しい審査とともにそれぞれの決済に対応しない […]
hover時などに使えるcssアニメーション集7選
ここ最近は前以上にアニメーションをcssに頼るようになってきた気がします。 今回は主にhover時のアニメーションのコードを配布してくださっているサイトをご紹介します。 使用時の注意事項などは各サイトをご覧ください。 目次1 Hover.css2 CSS ANIMO3 Magic Animations CSS34 Css Effects5 CSSWAND6 Imagehover.css7 Izmir Hover Effects Hover.css お馴染みHover.cssで […]
『Animista』でいろいろなcssアニメーションを作ろう！
cssアニメーションを使いたいけれど、細かく調整したりする時間がない！という時ありますよね…。 そんな時は『Animista』を使って気軽にcssアニメーションを使ってみましょう！ 早速使ってみよう ページを開くと、上にアニメーションの大まかな分類があります。 BASIC拡大縮小や回転系のアニメーション ENTRANCES要素が表示されるときのアニメーション EXITS要素が消えてしまうときのアニメーション TEXTテキストのアニメーション ATTENTION要素が […]
【工数節約！】レスポンシブサイトにおける一番楽なフォントサイズ指定
年々増えていく、フォントサイズを指定する単位。 「px」を基本として、「vw」と「vh」が使えるようになったと思ったら、気が付くと「rem」という単位もあったり、煩雑としてきました。 今回は私がレスポンシブサイトを構築する際、一番楽だと思うフォントサイズ設定を紹介します。 目次1 決め手は「rem」と「vw」2 解説3 rem フォントサイズ早見表4 YoutubeChannelのご紹介 決め手は「rem」と「vw」 CSSでまずは基準となるフォントサイズを決めます。下記のよ […]
CSSでvideoタグを切り抜いて好きな形に表示する
今日はvideoタグを好きな形に切り抜きしてみましょう。 実際に表示するとこんな感じです。 ＜円形に切り抜いた場合＞ 目次1 どうやって切り落とす？2 ジェネレーター3 YoutubeChannelのご紹介 どうやって切り落とす？ これが実は、CSSの「clip-path」という1行を追加するだけで切り落としが可能です。 ＜CSS＞ circleは円形です。 他にも、楕円形・五角形など、色々な形にすることができます。とても簡単ですね。 ジェネレーター 手打ちで数値を調整しても […]
pictureタグで画像形式（webpなど）とレスポンシブ切り替え対応をしよう
表示速度などの問題でwebp形式を使いたいけれど対応していないブラウザもあるし、レスポンシブの問題もあるしなーという時はpictureタグでうまく切り替えます。 目次1 コード2 YoutubeChannelのご紹介 コード とりあえずコードです。 第1候補で『sample.webp』を表示させます。画面を縮めた時にはほかの画像を表示させたいので、メディアクエリでmin-widthを設定します（次で設定するmax-widthの1つ前の数字）。 第2候補で画面を768px以下に […]
【少しでも軽量化】WordPressで絵文字の読み込みをさせない
WordPressを使うとき、少しでも軽量化させたいですよね。 そんな時絵文字の読み込みをさせないことで軽量化を図ることができます。 ソースコード 企業サイトなどでは特に絵文字を使うようなことってないですよね…。 ですので以下のコードをfunction.phpに入れてしまいます。 ※バックアップを取りながら作業してください。 これだけで完了です。 使用していない、表示速度に関わりそうなものは取り除いてしまいましょう。
オウンドメディアでオンライン/WEBセミナーへの参加者を募集しよう
ご時世柄なかなか人を集めることができない中、WEBセミナー・オンラインセミナーへの需要が高まっています。 もしかしたらまだ一歩を踏み出せていない方もいらっしゃるかもしれませんが、WordPressで構築したオウンドメディアであれば、あまりHTMLの知識があまりない方でも手軽にセミナーの募集ができます。 目次1 WEBセミナー・オンラインセミナーの募集画面の一例1.1 登録画面1.2 一覧画面1.3 詳細画面1.4 セミナー申し込み画面2 どのように作るの？ WEBセミナー・オ […]
WordPressのログインURLを変えるときは『Login rebuilder』を使おう
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】セキュリティ対策 6選
WordPressサイトのセキュリティを強化するにあたって、「ログインページのURLを変更する」というのはよくある手法ですが、その他にもできることを忘備録として一覧にしました。 目次1 SSLによる ログインと管理画面へのアクセスを強制する2 クリックジャッキング対策3 Dos攻撃を防止する4 REST APIを停止する5 WordPressのバージョン情報を削除する6 author IDの取得を制限する7 YoutubeChannelのご紹介 SSLによる ログインと管理画 […]
【AMP対応】結局どうやるの？はじめてのAMP対応
私が初めてAMP対応に着手しようとした時、複数のサイトを渡り歩いて情報を集めながら進めていかなければならない状態でした。「で、結局どうすればいいの」となったので、忘備録も兼ねてまとめていきたいと思います。速くなる仕組みなどは今回は省略します。 目次1 作る前に知っておいてほしい仕様1.1 AMPの公式仕様に沿ってタグを記述する必要がある1.2 AMPは現在進行形で許可されるタグが増えている1.3 レスポンシブ対応が必須1.4 JSを使ってはいけない？1.5 styleはhea […]
WordPressでパンくずを追加するなら『Breadcrumb NavXT』を使おう！
サイトを作るとパンくずが必要になってくることが多いですね。 カスタム投稿などを使うと自作だとややこしくなってしまうこともあるので、プラグインを使うと便利です。 今回は『Breadcrumb NavXT』というプラグインを使っていきます。 目次1 インストールしよう2 コードを入れて表示させよう3 設定をしよう3.1 一般3.2 投稿タイプ3.3 タクソノミー3.4 その他 インストールしよう 『プラグイン＞新規追加』から『Breadcrumb NavXT』を検索して追加、『有 […]
AMP非対応のJSをiframeで使用する
昨今、SEOで絶対に無視できないのがAMP。 表示速度を爆速にする分、様々な制約が設けられていますが、Google Chartsなどの部分的なものであれば同ページ内に表示が可能です。 目次1 部分的なJS表現をiframeで追加する2 導入方法 部分的なJS表現をiframeで追加する 分かってしまえばやり方は単純。AMP非対応の箇所のみiframeを使用します。 下記は弊社で運営している飲み会マッチングサービスのノミトモ。飲み会の募集が下にするする流れていくようなアニメーシ […]
Webページからアプリを起動しよう
株式会社8bitでは「ノミトモ」「Grmo」などのWebサービスを運営していますが、近年はスマホアプリへの対応も行っています。 その際、Webからアプリを起動させたい時があると思います。 具体的には「メールアドレスの有効性チェックを行い、URLを叩くとWebページにアクセスして アプリを起動」など･･･ AndroidやiOS両方とも比較的低コストで導入できるので、特にWebサービスと連動するアプリの場合は導入していきたいですね。 Androidの場合 Androidでは「カ […]
ふわふわの泡の背景を作成できるJS「bubbly-bg.js」
ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。 公式デモサイト 使用してみたところ、仕様は以下のようです。 ・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。 ・スマートフォン端末でも動作。（とりあえず手元のiPhoneXとiPadで動作確認しました。） ・泡の個数、色、向き、速さ、大きさ、ぼかし具合、アルファ値、背景グラデーションなど細かなカスタマイズが可能 ・背景のグラデーショ […]
【WordPress】特定のカスタム投稿の一覧画面表示件数を変更する
通常の投稿は10件ずつ表示したいけど、とあるカスタム投稿の一覧ページはデザインを変えて8件ずつ表示したい…そんな時、以外と簡単に件数の調整が可能です。 functions.phpに記述 下記をfunctions.phpに追記してください。 これだけです。投稿タイプや件数は変更してください。 あとは一覧のPHPファイルや、CSSを修正調整すれば完成です。
WordPressでデフォルトで読み込んでいるjQueryを読み込ませない
WordPressでデフォルトで読み込んでいるjQueryですが、どうにもバージョンが古いということがあります。 そんな時はfunction.phpにコードを記述して古いjQueryを読み込ませないようにしましょう。 その後新しいjQueryを読み込ませます。 ※function.phpは必ずバックアップを取りながら作業してください ※古いプラグインを使用していると影響がある場合があるので、都度確認をしてください 記述するコード 管理画面で動作がしなくなる可能性があるため、『 […]
運営会社:株式会社8bit
制作サービス
運営サービス
