投稿者: 工藤

マークアップ

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

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

マークアップ

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

IE11でflexboxの要素にmin-heightを指定してalign-items: centerを指定しても上下寄せにならないという現象が発生します。 元のコード HTML CSS これを参考に修正していきます。 解決方法 解決には高さ指定をIEのみ通常のheightで指定したりtable要素にしたり…等色々あります。 が、flex要素をさらにflex要素で囲むと解決します。 修正したコード HTML CSS flexWrapを追加して、そこにdisplay: 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’] = ‘column’; のcolumnの箇所に好きなURLを入 […]

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候補で画面を768px以下に縮めた時の画像を『sample_sp.jpg』表示します […]

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は必ずバックアップを取りながら作業してください ※古いプラグインを使用していると影響がある場合があるので、都度確認をしてください 記述するコード 管理画面で動作がしなくなる可能性があるため、『 […]

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の方は『 […]

プログラミング

【2020年版】小学生でも簡単にできる!自宅でもプログラミングを学べるサービス

今時小学校ではプログラミングが必修になっているようですね。すごいです…。 なかなか一人だと初めのうちは勉強するにも難しいプログラミングですが、WEBサービスを使えば気軽に始めることができます。 SCRATCH メディアでもよく取り上げられている『SCRATCH』です。 難しいコードなどはなく、ブロックのようなものを積み重ねてキャラクターなどに対してプログラミングを行い指示ができます。 チュートリアルを見ながら実際に触ってみるのが一番良いかと思います。 思った通りに動かすことが […]

Webサービス

リモートワーク/テレワークに役立つツール8選

2020年4月現在、リモートワーク/テレワークでお仕事されている方も多いのではないでしょうか。 そんな時役立ちそうなツールをまとめてみました。参考になったらうれしいです。 ※料金は人数の規模によって異なりますので、公式サイトをご確認ください。 ※会社によってはセキュリティの関係上ツールの使用が難しい場合もあるので、ご確認いただいた上で導入してください。 コミュニケーションツール系 どうしてもお仕事はコミュニケーションが欠かせないです。そんな時に役立つツールをご紹介します。 C […]

WordPress

WordPressでカスタム投稿タイプを作るなら『Custom Post Type UI』を使ってみよう

WordPressで規模の大きいサイトを作るには投稿画面が複数必要になる場合もあり、内容によっては固定ページなどで管理が難しいため投稿画面を新しく作成したときがあります。 そんな時新しく追加する投稿画面のことを『カスタム投稿タイプ』といいます。 基本的にfunction.phpにコードを追記していけば作成もできるのですが、正直初心者だしfunction触りたくない…という人もいるかと思います。 そんな時活躍してくれるプラグインが『Custom Post Type UI』です。 […]

WordPress

WordPress5.0のエディタ『Gutenberg』を旧エディタのように表示できるプラグイン『Classic Editor』

WordPressが5.0になってから、エディタががらっと変わりました。『Gutenberg』という名前がついているみたいです。 慣れたらそんなに問題ないかな…と思うのですが、ボックス(例えばカテゴリーをチェック入れる領域みたいなの)を増やしたいときに何となくごちゃごちゃした感じになってしまうんですよね。 今回はエディタを旧エディタのように表示できるプラグイン『Classic Editor』を紹介します。 『Classic Editor』をインストールしよう ひとまずプラグイ […]

WordPress

WordPressで記事の並び替えができるプラグイン『Intuitive Custom Post Order』を使おう!

WordPressで入れた記事は基本的に並び替えはできません。 デフォルトの方法で直すとすると日付を修正していき…となり、複数の記事を入れ替えたい場合は現実的ではないです。 そんなときに役に立つのが『Intuitive Custom Post Order』というプラグインです。 Intuitive Custom Post Orderをダウンロードしよう まずプラグインの新規追加などから『Intuitive Custom Post Order』をダウンロードします。 ダウンロー […]

WordPress

WordPressで特定のページにのみベーシック認証をかけて、ID・パスワードを管理画面で設定できるようにしたい

WordPressで特定のページにのみベーシック認証をかけたい時ってありませんか? 全体にかけるプラグインはありますが、特定ページだと見当たらなかったりします。 今回はベーシック認証をかけて、管理画面からでも簡単に設定できる方法をご紹介します。 ベーシック認証のかけ方 ①function.phpにコードを記述する まずは以下のコードをfunction.phpに記述してアップください。 『認証に失敗しました。~』のテキストは自由に変更できます。 ②header.phpにコードを […]

マークアップ

知っておくと便利なcssの小技 part16 (セレクタの使い方編)

今回は知っておくと便利なcssの小技 part16 セレクタの使い方編です。 バックナンバー 知っておくと便利なcssの小技 part15 知っておくと便利なcssの小技 part14 知っておくと便利なcssの小技 part13 子セレクタ(親要素 > 子要素)の使い方 子セレクタとは、対象の親要素の直下にある子要素に対してのみスタイルを適用するセレクタです。 孫要素は対象になりません。 今回は親要素の直下の子要素に対してのみ、文字を赤色にしてみます。 HTML CSS 隣 […]

1 2 3 4 7