投稿者: 工藤

スマホアプリ

Xcodeでカスタムフォントを追加して使ってみよう!

Xcodeで好きなフォントを追加したい!ということがあると思います。 最初は戸惑うかもしれませんが覚えると結構簡単に追加できます。 まずはフォントをダウンロード まずはフォントをダウンロードします。 今回はGoogle Fontsの中の『Noto Sans Japanese』をインストールしてみます。 フォルダにフォントを追加 ダウンロードしたらXcodeで今回フォントを追加するプロジェクトを開きましょう。 ちなみに初期のフォントはこんな感じになっています。 Noto San […]

スマホアプリ

Android studioで縦並び・横並びで整列させるレイアウト【初心者用】

今回は初心者用にAndroid studioで縦並び・横並びで整列させるレイアウトの仕方をご紹介します。 主に使うのはLinerarLayoutです。 LinerarLayoutで縦並び・横並びで整列させるレイアウトを実現しよう 今回は『デザイン』タブベースで進めていきます。 まずは新しいファイルを開きましょう。 見た通り何もないファイルなので画像を置いていきます。 パレット>widgets>ImageView を選択して好きな画像を置きます。 画像を3つほど置きました。 今 […]

WordPress

WordPressで目次のプラグインを使うなら『Table of Contents Plus』!

Wordpressで記事を書いているときに『目次』が必要になることがあると思います。 そんな時はタイトルタグがあれば自動で目次を生成してくれるプラグイン『Table of Contents Plus』が便利です。 『Table of Contents Plus』を使ってみよう それではまず『Table of Contents Plus』をダウンロードしてみましょう。 管理画面内ではサイドナビの『プラグイン>新規追加』で『Table of Contents Plus』を検索する […]

マークアップ

flexboxとmargin: auto;を使ってレイアウトを組んでみよう

レイアウトを組むのに便利な『flexbox』。 今回は『flexbox』と『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。 左に3つの要素、右に1つの要素を置きたい このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考えられます。 ただその分余計な囲みが増えてしまう、ということでもあります。 そのため一番最後の要素(右側)の要素に対して『margin- […]

WordPress

WordPressで記事を複製するなら『Duplicate Page』を使おう!

Wordpressで記事を複製したい、ということありますよね。 そんな時はプラグインの『Duplicate Page』を使ってみましょう。 Duplicate Pageをインストールして使ってみる まずはプラグインの新規追加画面でプラグインを追加します。 『Duplicate Page』をインストール・有効化します あとはたったこれだけで記事の一覧画面に『複製』が表示されます! 『複製』を押すと下書きの状態で記事が複製されるので、編集が完了したら『公開』をしましょう! ちなみ […]

WordPress

WordPressでカスタムフィールド(デイトピッカー)を使って要素の表示・非表示をする

Wordpressのカスタムフィールドで日付の期限内で項目の表示・非表示を切り替えたいときがあるかと思います。 そんな時に便利な方法をご紹介します。 まずはカスタムフィールドで始まりの日付と終わりの日付のフィールドを設定しましょう。 フィールドタイプは『デイトピッカー』を選択します。 ラベル・フィールド名は任意で設定してください。 開始日付、終了日付の2つを用意します。 今回はラベル『開始日付』のフィールド名は『start_date』、 ラベル『終了日付』のフィールド名は『e […]

マークアップ

『toggleClass』を使ったアコーディオンを作る(heightでアニメーションが効かないのを解決)

jQueryでアコーディオンを実現したい、ということはよくあると思います。 実現したいときは単純に『slideToggle』を使うのが早いです。 ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。 そんな時にちょっとだけ悩んだのでメモがてら書いておきます。 『slideToggle』を使ったアコーディオン まずは『slideToggle』を使ったスタンダードなアコーディオンです。 cssで要素を非表 […]

マークアップ

レスポンシブサイトでjavascript(jQuery)の読み込みを切り替えよう

2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。 そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。 実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。 ①画面サイズで切り分ける方法

画面サイズで切り分ける際はこのように記述します。cssのメデ […]

マークアップ

【IE11】flexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならない【解決方法】

IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。 元のコード HTML

CSS

これを参考に修正していきます。 解決方法 解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。 が、flex要素をさら […]

Webデザイン

iPhone 12 / iPhone 12 Pro のおすすめモックアップ素材

こんにちは。今回はiPhone 12 / iPhone 12 Pro のモックアップをまとめました。 一応ライセンスフリーのものを掲載していますが、使用用途によって異なるかと思いますので各サイトをご確認ください。 iPhone 12 iPhone 12のモックのセットです。 Psd iPhone 12 Mockup Set 全色分のモックがそろっています。正面を向いているため使い勝手もよさそうです。 Isometric Psd iPhone 12 Mockup Set 全色分 […]

WordPress

WordPressでデフォルトの『投稿』の名前を変更しよう

WordPressでデフォルトの『投稿』ですが、表示部分と異なることも多いので変えてしまいましょう。 function.phpに以下を記入していきます。 ※バックアップを取りながら作業をしてください

『お知らせ』のところを任意の名前にしてください。 これで『投稿』から『お知らせ』に名前が変わりました!

WordPress

WordPressで『投稿』のアーカイブページを有効にして任意のURLで表示しよう

WordPressではデフォルトの『投稿』のアーカイブがなぜかデフォルトが無効になっています。不思議ですね。 なのでアーカイブを有効にして、かつ任意のURLで表示できるように設定をします。 ①function.phpに以下を記入 function.phpに以下を記入していきます。 ※バックアップを取りながら作業をしてください

$args[‘has_archive’] = ‘c […]

WordPress

WordPressで画像を相対パスでアップロードできるようにする

WordPressでは投稿画面ではデフォルトで画像が絶対パスで挿入されます。 ただ、環境を移行した時に絶対パスを変更するのが手間だったり数が多いと置換ミスが起こることもあるのでデフォルトで相対パスで投稿できるようにします。 方法としては以下をfunction.phpに入れてください。 ※バックアップを取りながら作業をしてください

これで相対パスで画像が挿入されるようになりました!

マークアップ

hover時などに使えるcssアニメーション集7選

ここ最近は前以上にアニメーションをcssに頼るようになってきた気がします。 今回は主にhover時のアニメーションのコードを配布してくださっているサイトをご紹介します。 使用時の注意事項などは各サイトをご覧ください。 Hover.css お馴染みHover.cssです。嫌味がなく使い勝手のいいアニメーションがそろっています。 CSS ANIMO hoverとローディングのアニメーションがそろっています。 要素をクリックするとコードのコピーができます。hoverした時に下線を引 […]

マークアップ

『Animista』でいろいろなcssアニメーションを作ろう!

cssアニメーションを使いたいけれど、細かく調整したりする時間がない!という時ありますよね…。 そんな時は『Animista』を使って気軽にcssアニメーションを使ってみましょう! 早速使ってみよう ページを開くと、上にアニメーションの大まかな分類があります。  BASIC拡大縮小や回転系のアニメーション  ENTRANCES要素が表示されるときのアニメーション  EXITS要素が消えてしまうときのアニメーション  TEXTテキストのアニメーション  ATTENTION要素が […]

マークアップ

pictureタグで画像形式(webpなど)とレスポンシブ切り替え対応をしよう

表示速度などの問題でwebp形式を使いたいけれど対応していないブラウザもあるし、レスポンシブの問題もあるしなーという時はpictureタグでうまく切り替えます。 コード とりあえずコードです。

第1候補で『sample.webp』を表示させます。画面を縮めた時にはほかの画像を表示させたいので、メディアクエリでmin-widthを設定します(次で設定するmax-widthの1つ前の数字)。 第2候補で画面を768 […]

WordPress

【少しでも軽量化】WordPressで絵文字の読み込みをさせない

WordPressを使うとき、少しでも軽量化させたいですよね。 そんな時絵文字の読み込みをさせないことで軽量化を図ることができます。 ソースコード 企業サイトなどでは特に絵文字を使うようなことってないですよね…。 ですので以下のコードをfunction.phpに入れてしまいます。 ※バックアップを取りながら作業してください。

これだけで完了です。 使用していない、表示速度に関わりそうなものは取り除いてしまいまし […]

Webサイト制作

オウンドメディアでオンライン/WEBセミナーへの参加者を募集しよう

ご時世柄なかなか人を集めることができない中、WEBセミナー・オンラインセミナーへの需要が高まっています。 もしかしたらまだ一歩を踏み出せていない方もいらっしゃるかもしれませんが、WordPressで構築したオウンドメディアであれば、あまりHTMLの知識があまりない方でも手軽にセミナーの募集ができます。 WEBセミナー・オンラインセミナーの募集画面の一例 ここで軽く作成例をご紹介します。 登録画面 まず、登録画面です。 ここにセミナーの詳細を登録することで次の項で紹介する画面に […]

WordPress

WordPressのログインURLを変えるときは『Login rebuilder』を使おう

WordPressのログイン画面のURLをデフォルトのままにしておくと、セキュリティ面で少々心配になりますね。 そこで今回は『Login rebuilder』というプラグインを使って、URLの変更をしましょう。 まずはインストール プラグイン>新規追加からLogin rebuilderをインストールして『有効化』してください。 設定をしていこう 有効化をしたら、設定>ログインページを開いてください。 無効なリクエスト時の応答 元のログインページにアクセスされたときの挙動を設定 […]

WordPress

WordPressでパンくずを追加するなら『Breadcrumb NavXT』を使おう!

サイトを作るとパンくずが必要になってくることが多いですね。 カスタム投稿などを使うと自作だとややこしくなってしまうこともあるので、プラグインを使うと便利です。 今回は『Breadcrumb NavXT』というプラグインを使っていきます。 インストールしよう 『プラグイン>新規追加』から『Breadcrumb NavXT』を検索して追加、『有効』の状態にしてください。 コードを入れて表示させよう とりあえずコードを入れて表示しながら調整していきましょう。その方がわかりやすいです […]

WordPress

WordPressでデフォルトで読み込んでいるjQueryを読み込ませない

WordPressでデフォルトで読み込んでいるjQueryですが、どうにもバージョンが古いということがあります。 そんな時はfunction.phpにコードを記述して古いjQueryを読み込ませないようにしましょう。 その後新しいjQueryを読み込ませます。 ※function.phpは必ずバックアップを取りながら作業してください ※古いプラグインを使用していると影響がある場合があるので、都度確認をしてください 記述するコード [crayon-61ed4c0a20f6980 […]

WordPress

WordPressで『メニューの位置』を追加しよう

WordPressでは管理画面の『外観>メニュー』でメニューの管理ができます。 ここで新しいメニュー自体の追加はできるのですが、メニューの表示位置は追加できません。 例えばフッターで左右に項目を分けてメニューを表示したい…ということがあっても現状だと実現ができないです。 そんな時はfunctions.phpにコードを追加してメニューの位置を追加しましょう。 functions.phpにコードを追加 functions.phpに以下のコードを追加します。 ※functions. […]

WordPress

WordPressで画像などのメディアファイルを置換をするなら『Enable Media Replace』

WordPressではデフォルトで画像などのファイルを置換する機能がありません。地味に面倒です。 そこで『Enable Media Replace』というプラグインを使ってファイルの置換ができるようになります。 ※画像やpdfの置換には向いていますが、その他のファイルには不向きです。 ダウンロードする プラグインのページからzipをダウンロードするか、管理画面のプラグインの『新規追加』から『Enable Media Replace』を検索して追加をします。 忘れずに有効化をし […]

WordPress

WordPressでHTMLなどのコードを呼び出したい時におすすめのプラグイン『AddQuicktag』

WordPressで記事を書いていると、タイトルやテーブル組みなど決まった型のHTMLコードを呼び出したいという時がありませんか? そんな時に使えるプラグインが『AddQuicktag』です。 こんな感じでエディタ部分にボタンで表示されて、クリックをしたらコードをすぐに呼び出すことができます。 ちなみに『AddQuicktag』を使用するときは新しいエディタの『Gutenberg』の時はクラシックモードにして使用したり、『Classic Editor』等のプラグインを使用して […]

Webデザイン

PhotoshopCCでWebP形式の画像を読み込み・書き出しをしよう!

『PageSpeed Insights』を使用するとよく出てくる画像フォーマット『WebP』。 Photoshopでは書き出しなどができません。 が、今回紹介する『WebPShop』を使用することで書き出しが可能になります。 今回はインストールの方法をご紹介します。 使い方 ダウンロード まずはGitHubからプラグインをダウンロードします。 インストール 『bin』のフォルダを開きます。 Macの方は『WebPShop_0_3_0_Mac_x64』、 Windowsの方は『 […]

1 2 3 6