マガジンのカバー画像

Octマガジン

78
Project Octメンバーのブログの一部をまとめたマガジンです。 ウェブのこと、地域のこと、自分自身のことなどを書かせていただいています。 気になる記事がある場合はぜひクリエ… もっと読む
運営しているクリエイター

記事一覧

iPhoneの裏ボタン

iOS 14以降のiPhoneでは、一部の機種を除き背面をタップすることで、あらかじめ設定しておいた動作を行うことができます。 PayPayなどの支払い系のアプリを素早く起動したい時などにとても役に立ちます。 ※iPadは2022年12月現在、全機種非対応です。 背面タップの設定方法「背面タップ」の設定は、以下の手順で行えます。 「設定」アプリを開きます。 「アクセシビリティ」をタップします。 「タッチ」をタップします。 「背面タップ」をタップします。 「ダブ

Macの被写体をコピーがすごく便利

iPhoneやiPadのOS16で先行して実装された被写体をトリミングする機能が、Macでも使えるようになっていたのを今更ながら気がついたので書き留めておきます。 被写体を切り抜きたい画像を純正の写真アプリに移動自身で所持している画像や、無料素材サイトなどで入手した被写体を切り抜きたい画像を純正の写真アプリのアイコンにドラッグ&ドロップします。 右クリックを押しメニューから「被写体をコピー」を選択移動した画像を右クリックし「被写体をコピー」にマウスカーソルを当てると、被写

長野グミと書いてあったら買っちゃうじゃないの

Stable Diffusionのtext2imgで簡単に良い感じのAI画像を制作する方法

Stable DiffusionのAIに、テキストから画像を生成する機能はとても便利です。 しかし、良い感じの画像を生成するにはStable Diffusionに適したテキストを入力しなければなりません。 テキストの入力は一部日本語にも対応していますが、基本的には英語で入力するのが現段階では良さそうです。 以下の手順は英語が苦手でも簡単に良い感じの画像を生成する方法です。 使用するサイトDeep L Hugging Face Mage https://www.m

画像をコードでトリミングするobject-fit【HTML/CSS】

フリー素材サイトなどでダウンロードした画像ですが、いざ使おうと思ったときにサイズが合わない場合もよくあります。 既存のパソコンの機能やPhotoshopでトリミングもできますが、サイズが確定していないときや、いろいろなアスペクト比に当てはめてみたい場合は「object-fit」というstyleを使うのがおすすめです。 object-fitの使い方サンプルコード HTML <img src="img/kt-hakucyo_00.jpg" alt="お堀の白鳥" clas

フリー素材サイトで画像を保存するときは一番下の階層で

私が所属するコミュニティProject Octでは、このリンク先のページでフリー素材として使える画像を提供しています。 数はまだまだ少ないですが、定期的に更新をしているのでまめにチェックしていただけたらと思います。 そんな画像の保存方法ですが、保存する階層によって画像の大きさが変わってくるのでご注意ください。 大きな画像を取得するには一番下の階層で保存一覧に並んでいる画像をクリックすると個別のページを閲覧することができます。 説明と共に個別の画像を閲覧できますが、大き

縦横2560px以上の画像をアップロードする方法【WordPress】

※自分用の備忘録です WordPressは一辺が2561px以上の画像をアップロードすると自動的に2560pxにリサイズされてしまいます。 それ以上の画像をアップロードしたい場合は下記のコードをfunctions.phpに書き加える必要があります。 px制限の解除コードadd_filter( 'big_image_size_threshold', '__return_false' ); その他のWordPressに関する記事はこちらから

塩尻市の観光看板を制作しました!

先日まで長野県の松本市に住んでいました。 その松本市を南に車で走ったところにある 塩尻市に住んでいる人や、塩尻に魅了されて引っ越してきた 人達が面白くて松本から塩尻に何度も通っていました。 そんな中、看板制作のお話をいただいて、 塩嶺トンネルを抜けてみどり湖SAを過ぎて 北アルプスが開ける直前の左側の塩尻市の観光看板の リニューアルのためデザインさせていただきました! 塩尻市観光協会のFacebookに紹介していただいています! https://www.facebook.

GitHub Copilotの導入方法

※自分用の備忘録です Technical Previewの予約上記のリンクから予約を行います。 Technical Previewの予約にはGitHubのアカウントが必要です。 完了するとメールでお知らせがきますが、2022年6月現在、数ヶ月時間がかかるようです。 Visual Studio Codeに拡張機能をインストールVSCodeに「GitHub Copilot」という拡張機能をインストールします。 有効化するにはTechical Previewが認証済みのG

カスタムメニューがある時、ない時の判別【WordPress】

※自分用の備忘録です カスタムメニューが設定されている時にはハンバーガーメニューを表示し、設定されていないときはハンバーガーメニューを非表示にする方法です。 コードの全容 <!-- メニューがある時 --> <?php if (has_nav_menu('header-menu')) : ?> <button class="navbar-toggler" type="button" data-bs-toggle="

投稿ページ、固定ページのテンプレートを編集画面から変更する方法【WordPress】

※自分用の備忘録です テーマフォルダの中に専用のテンプレートファイルを用意しておくと、編集画面からそのテンプレートファイルを指定し使用することができます。 テンプレートの用意テーマの中に「example.php」を用意します。 「single.php」や「page.php」を複製し使用するとスムーズに用意ができます。 投稿ページで使う場合は「single-example.php」、固定ページで使う場合は「page-example.php」というファイル名にしておくと管

head外に書いたを「link」をhead内に書き出す【WordPress/JavaScript】

※自分用の備忘録です WordPressなどで外部リソースを使う際、カスタムHTMLブロックに<link>を書きたくなる場合があります。 <head>外に<link>を記述をしてもほとんどのブラウザでは正常に機能します。 しかし、全てのブラウザで正常に機能する保証はありません。 W3Cのルール的にも<head>内に記述することが基準となっています。 WordPressなどのカスタムHTMLで<link>を使用する場合はJavaScriptで記述をしましょう。 <h

Local で WordPress の環境をローカルに作成する方法をご紹介します。

Local というツールを利用して WordPress の環境をローカル(自分のパソコン)に作成してみたら、とても簡単にサイトを作成、削除することが出来ることを実感しました。WordPress の作業や勉強が捗るので、楽しく継続できることにも繋がっていると思えます。 さらに、Local を利用して一番嬉しかったことは、「作成するサイトごとに PHP のバージョンが選べること!」でした。その理由は、のちほど書きたいと思います。まずは、インストールの方法からご紹介します。 ◆

自作テーマのサムネイル画像「screenshot.png」の設定

※自分用の備忘録です。 テーマの外観や詳細から確認できるサムネイル画像の設定方法です。 推奨サイズの画像を用意する「screenshot.png」の推奨サイズは「880 x 660 px」です。 公式のテーマなどでは「1200 x 900 px」なども使われていたりするので、高解像度にしたい場合はこちらのサイズを使用しても良さそうです。 用意する画像は、自作テーマを使用して作成したホームページのスクリーンショットなどがよく使われています。 画像のファイル名を設定する