Octマガジン

本

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

運営しているクリエイター

投稿ページ、固定ページのテンプレートを編集画面から変更する方法【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」なども使われていたりするので、高解像度にしたい場合はこちらのサイズを使用しても良さそうです。用意する画像は、自作テーマを使用して作成したホームページのスクリーンショットなどがよく使われています。画像のファイル名を設定する

信州の先端で最先端を叫びたい

みなさん、こんにちは。 Atelier Crown＊Clown（アトリエクラウン＊クラウン）のかおりんです。皆さんは登山にご興味はありますか？私はありません。登山が好きになるかどうかは「初めて山に登った時の経験が楽しかったかどうかに左右される」と聞いたことがあります。その説の真偽はわかりませんが、私が「登山はイヤ！」というのはまさに子供の時の登山体験が原因です。私の通っていた小中学校では、小学5年生の時に乗鞍登山、中学2年生の時に西穂登山というものをすること

検索フィールド「search.php」の設定【WordPress】

※自分用の備忘録です。検索フォーム「searchform.php」の設定<form class="d-flex justify-content-center" method="get" id="searchform" action="<?php bloginfo('url'); ?>"> <input class="form-control me-2" type="text" name="s" id="s" placeholder="SEARCH" style="wid

reCAPTCHA v3をContact Form7に導入

※自分用の備忘録です。 reCAPTCHAにログインをするGoogleのアカウントでログインでき、無料で使用することができます。（有料版もあります）導入したいサイトを登録するメニューにある「v3 Admin Console」に必要事項を記述し送信します。ラベル「自分のサイトの名前などを入力します」 reCAPTCHAタイプ「reCAPTCHAタイプを選択します」ドメイン「設定したいサイトのドメインを入力します」オーナー「ログインしたGoogleアカウントの

JavaScriptのモジュール化（ファイル分割）

※自分用備忘録です。 importする側のscriptに「type="module"」を追加<script type="module" src="js/script.js"></script> exportvar pasta1 = peperoncino;var pasta2 = carbonara;export { pasta1, pasta2 }; 下記のようにも記述できます。 export var pasta1 = peperoncino;export var

アーカイブページの作り方(archive.php)【WordPress】

※自分用の備忘録です。サンプルコードarchive.php <h1><?php the_archive_title(); ?></h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="my-5"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

「ロゴを動かしてみよう！」 SVGとアニメーション勉強会の記録です。

「ロゴのデータを利用して、アニメーションとして動かしてみよう！」勉強会に参加しました。制作の概要をご紹介したいと思います。まずは、動く様子から。 ◆ 準備・ロゴデータを準備する今回は、長野県松本市にあります、有限会社アルプ様のロゴをお借りして制作いたしました。本物のロゴを勉強素材としてご提供いただき、感謝の気持ちとともに緊張感も高まっています。不備のないよう最後まで書いていきたいと思います。・ロゴデータをSVG形式に変換するロゴのデータはPNG形式でした