Wordpressで記事を書いているときに『目次』が必要になることがあると思います。 そんな時はタイトルタグがあれば自動で目次を生成してくれるプラグイン『Table of Contents Plus』が便利です。 目次1 『Table of Contents Plus』を使ってみよう2 『Table of Contents Plus』の設定をしてみよう2.1 位置2.2 表示条件2.3 以下のコンテンツタイプを自動挿入2.4 見出しテキスト2.5 階層表示2.6 番号振り2. […]
レイアウトを組むのに便利な『flexbox』。 今回は『flexbox』と『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。 目次1 左に3つの要素、右に1つの要素を置きたい2 左に1つの要素、右に3つの要素を置きたい3 左右と中央、それぞれに要素を置きたい 左に3つの要素、右に1つの要素を置きたい このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考え […]
Wordpressで記事を複製したい、ということありますよね。 そんな時はプラグインの『Duplicate Page』を使ってみましょう。 Duplicate Pageをインストールして使ってみる まずはプラグインの新規追加画面でプラグインを追加します。 『Duplicate Page』をインストール・有効化します あとはたったこれだけで記事の一覧画面に『複製』が表示されます！ 『複製』を押すと下書きの状態で記事が複製されるので、編集が完了したら『公開』をしましょう！ ちなみ […]
Wordpressのカスタムフィールドで日付の期限内で項目の表示・非表示を切り替えたいときがあるかと思います。 そんな時に便利な方法をご紹介します。 まずはカスタムフィールドで始まりの日付と終わりの日付のフィールドを設定しましょう。 フィールドタイプは『デイトピッカー』を選択します。 ラベル・フィールド名は任意で設定してください。 開始日付、終了日付の2つを用意します。 今回はラベル『開始日付』のフィールド名は『start_date』、 ラベル『終了日付』のフィールド名は『e […]
jQueryでアコーディオンを実現したい、ということはよくあると思います。 実現したいときは単純に『slideToggle』を使うのが早いです。 ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。 そんな時にちょっとだけ悩んだのでメモがてら書いておきます。 目次1 『slideToggle』を使ったアコーディオン2 『toggleClass』を使ったアコーディオン（ただの表示・非表示）3 『togg […]
最近、副業としてPIXTAなどで写真素材を販売する方が多いとの話を聞きました。 スマホで撮影した写真があれば手軽に始められるので、人気の副業のようです。 では、素材サイトヘビーユーザーのデザイナー目線で素材として使いやすく、ダウンロードしたい素材とはどんなものでしょうか？ 実際に写真をダウンロードして使う側の私が思う、使いやすい写真素材の特徴をまとめてみました。 目次1 その1.ピントがあっている2 その2.写真が小さい3 その3.写真が暗すぎる・明るすぎる3.1 暗すぎる例 […]
2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。 そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。 実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。 目次1 ①画面サイズで切り分ける方法2 ②端末（UA）で切り分ける方法 ①画面サイズで切り分ける方法 画面サイズで切り分ける際はこのように記述します。css […]
ここ最近いろいろな意味で話題になっているLINEですが、とはいえ便利なSNSツールであることは間違いないところです。 ここでは情報セキュリティ的な部分は置いといて、LINEのAPIを利用したbotやリッチメニューを作っていきます。 目次1 事前に行うこと1.1 LINE for Business でアカウントを開設する1.2 LINE Developers からログインする1.2.1 チャンネル設定から「新規チャンネル作成」を選び、チャンネルを作成1.2.2 作成したチャンネ […]
IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。 目次0.1 元のコード1 解決方法1.1 修正したコード 元のコード HTML CSS これを参考に修正していきます。 解決方法 解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。 が、flex要素をさらにflex要素で囲むと解決します。 修正したコード HTML CSS fl […]
こんにちは。今回は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 / […]
目次1 LINEを使ったキャンペーン？1.1 Messaging APIとは1.2 利用料金は？2 最後に LINEを使ったキャンペーン？ 今何かと騒がしいLINEではありますが、スマホを持っていればお手軽かつ複数アカウントを作りづらい仕様のため、B2Cとしては非常に使いたくなるプラットフォームです。 インスタントウィンに関しては弊社で構築したプレゼントキャンペーンサイトがありますので、こちらをご確認いただければと思いますが、TwitterではなくLINEを利用 […]
目次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でデフォルトの『投稿』ですが、表示部分と異なることも多いので変えてしまいましょう。 function.phpに以下を記入していきます。 ※バックアップを取りながら作業をしてください 『お知らせ』のところを任意の名前にしてください。 これで『投稿』から『お知らせ』に名前が変わりました！
WordPressではデフォルトの『投稿』のアーカイブがなぜかデフォルトが無効になっています。不思議ですね。 なのでアーカイブを有効にして、かつ任意のURLで表示できるように設定をします。 目次1 ①function.phpに以下を記入2 ②管理画面のパーマリンクの設定を更新します3 ②任意のURLで表示ができたら完了 ①function.phpに以下を記入 function.phpに以下を記入していきます。 ※バックアップを取りながら作業をしてください $args[R […]
WordPressでは投稿画面ではデフォルトで画像が絶対パスで挿入されます。 ただ、環境を移行した時に絶対パスを変更するのが手間だったり数が多いと置換ミスが起こることもあるのでデフォルトで相対パスで投稿できるようにします。 方法としては以下をfunction.phpに入れてください。 ※バックアップを取りながら作業をしてください これで相対パスで画像が挿入されるようになりました！
VPSサービスは安い割にいろいろとできてコスパがよいのですが、サーバー会社のメンテナンスなどで再起動が発生したりします。 通常は事前にアナウンスがされますが、ネットワーク機器などの障害などで緊急メンテナンスによる再起動が発生し、ごくまれにですが再起動がうまくいかないことがあります。 これがマネージドプランなどであればサーバー会社に問い合わせれば対応してくれますが、VPSは基本的に管理者権限をいただいているので自分たちで対応しなければいけません。 特にKernel panicな […]
前回のエントリーでアプリ内課金について簡単にまとめましたが、今回は実際に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キャリアそれぞれの決済システムがあり、厳しい審査とともにそれぞれの決済に対応しない […]
ここ最近は前以上にアニメーションをcssに頼るようになってきた気がします。 今回は主にhover時のアニメーションのコードを配布してくださっているサイトをご紹介します。 使用時の注意事項などは各サイトをご覧ください。 目次1 Hover.css2 CSS ANIMO3 Magic Animations CSS34 Css Effects5 CSSWAND6 Imagehover.css7 Izmir Hover Effects Hover.css お馴染みHover.cssで […]
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セミナー・オ […]
運営会社:株式会社8bit
制作サービス
運営サービス
