プログラミング関連リンク集MCC松屋産業株式会社

CG作成、WEB作成、HTML、PHP、CSS等の、技術的考察を記載したり、参考になるリンクを集めたページです。

覚書に利用。

安心の形『テスリックス』

センタリングいろいろ

YouTube　ツイッター　インスタグラム埋め込み　センタリング

css追加する

/*YouTube動画の中央配置*/
.video-container{
margin: 0px auto;
}

/* ツイート埋め込みを中央配置する */

.twitter-tweet {
width: 500px !important;
margin-left: auto;
margin-right: auto;
}

インスタグラムは

</div>

で埋め込みタグを囲む

アコーディオンメニュー

ZeroPlus Media - 完全0から始める Webデザイン/プログラミング -

FAQに最適！アコーディオンメニューの作り方を解説 | ZeroPlus Media

https://zero-plus.io/media/faq-accordion/

この記事ではアコーディオンメニューの作り方を解説しています。アコーディオンメニューはFAQの視認性を向上させるのに最適な実装です。見やすいFAQの作成はユーザーの満足度を向上させWebサイトの評価を高めてくれます。CSSやjQueryを使用すれば簡単にアコーディオンメニューを作成できるのでぜひ参考にしてください。

WooCommerce “お買い物カゴに追加” ボタンのテキストを”カートに入れる”に変更する

ものくろぼっくす

WooCommerce "お買い物カゴに追加" ボタンのテキストを"カートに入れる"に変更する...

https://mono96.jp/wordpress/woocommerce/43369/

日本語環境でWooCommerceをセットアップした場合、商品をカートへ入れるボタンのテキストラベルは、「お買い物カゴに追加」の表記になる。この表記を「カートに入れる」へ変更するには、以下のコードを子テーマのfunct

ページ遷移の方法について

// replaceメソッドを使う

window.location.replace(‘https://kintaikyo.com/arch/kate-kintaikyo-sekkeigenri/‘);

// 「location」の手前に書くのは、「window」でも「document」でもよい

// あるいは、省略しても構わない

</script>

EC-CUBE　MySql　ログイン　パスワード

EC-CUBE4でデータベースのユーザー名とパスワードを確認する方法 | コトダマウェブ

EC-CUBE4の情報ってネットで探してもなかなか見つかりませんね。

phpMyAdmin | レンタルサーバーならエックスサーバー

レンタルサーバー「エックスサーバー」のご利用マニュアル｜「phpMyAdmin」の利用方法に関するご案内です。

エックスサーバー　phpMyadminログインとデータベース操作

【エックスサーバー】phpMyAdminへのログイン方法とデータベース復元方法

今回はレンタルサーバー「エックスサーバー」でphpMyAdminにログインする方法を解説します。何らかの不具合でWordPressで利用しているデータベースMySQLを復旧する際などに、phpMyA

EC-CUBE　4

自動応答メール　条件によって内容を変える

windows11にてoutlookをセットアップする時の注意

「Windows11でOutlookが起動しない・起動が遅い」トラブルサポート | IT・パソコンサポートSORA｜埼玉県ふじみ野市

Windows11を初期設定のままOutlookを使うと、一部のOutlookで「Outlookが起動しない、起動が遅い」と不具合が生じることがあります。先日、都内のお客様より「Windows11をセットアップしてOutlookを使おうと...

Windows11の初期設定はOneDriveのバックアップが有効になっているため使用し続けると、いろいろな不具合が生じるので注意。

最初はバックアップを無効にしてセットアップしたほうが無難。

Font Awesome

いまやウェブ制作に欠かせない、Font Awesomeですが、500アイコン以上あるので、なかなか探すのも大変です。
公式サイトで、アイコンを検索できますが、あまり一覧性が高くないので、このページで、オリジナルのアイコン検索を作成しました。アイコン名から検索するほか、サイズを指定したり、回転したりと、アイコンをカスタマイズできます。

Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方 (PIXEL LAB)

大阪北摂(吹田)のウェブデザイナーのピクセルイメージによるブログです。HTML,CSS,Javascriptやデザインの話題や、オリジナルのツールやCMSの紹介など。

ラベルシール

インスタグラム関連

https://lit.link/

Instagramの投稿にURLを載せてリンク誘導する方法は？ | 株式会社ガイアックス｜SNSマーケティング支援サービス

株式会社ガイアックスでは、効果的にSNSを活用するための施策支援や関連のサービスを提供しています。

WordPress Mega Menu

曲線

翻訳関連

DeepL Translate: The world's most accurate translator

Translate texts & full document files instantly. Accurate translations for individuals and Teams. Millions translate wit...

Python関連

【入門初心者向け】PythonでWebアプリを作ってみた！開発方法徹底解説！｜スタビジ

当サイト【スタビジ】の本記事では、PythonのWebアプリケーションフレームワークを用いてWebアプリを開発していく方法を徹底解説していきます。実際にDjangoでの実装とFlaskでの実装をおこなっていったあと、勉強法についても見ていき...

Pythonでメール送信 | Python学習講座

(73) WEBブラウザ経由でPythonスクリプトを実行 – Pythonやってみる！

https://noitalog.tokyo/python-eel/

【入門】ディープラーニング(深層学習)の仕組みとPython実装のやり方！｜スタビジ

当サイト【スタビジ】の本記事では、ディープラーニングの仕組みやPythonでの実装方法について解説していきます。ディープラーニングってなんとなくブラックボックスなイメージがあるかもしれませんが、実はシンプルなアルゴリズムなんですよー！

Pythonを用いたディープラーニングでできること8選｜適した開発ツール4つ – IT業界、エンジニア、就活生、第二新卒、転職者、20代向け情報サイト

Pythonを用いたディープラーニングは、どのようなことができるのか気になる人も多いでしょう。今回は、Pythonを用いたディープラーニングでできることや適した開発ツールを紹介していきます。Pythonを用いたディープラーニングを理解してい...

【Python入門】使い方とサンプル集

Pythonとは、統計処理や機械学習、ディープラーニングといった数値計算分野を中心に幅広い用途で利用されている人気なプログラミング言語です。主な特徴として「効率のよい、短くて読みやすいコードを書きやすい」、「ライブラリが豊富なのでサクッと

Download Python

The official home of the Python Programming Language

ゼロからのPython入門講座 - python.jp

このPython入門講座では、プログラミング経験の未経験者・初心者を対象に、ブラウザからPythonを実行できるサービスGoogle Colaboratory(Colab)を使って、Pythonの基礎をチュートリアル形式で解説します。 Co...

Google Colaboratory

PythonとPHPの違いは？それぞれの特徴を詳しく理解しましょう！

プログラム言語には実に様々な種類があり、これからプログラミングを学ぼうと考えている方にとっては、どの言語を学ぶかは非常に悩ましい問題でしょう。どのプログラミング言語を学ぶかによって活用できる分野は異なるうえに習得難易度も大きく異なるため、...

イメージトラッキング

JavaScriptでA-Frameのカメラの向きを制御する

JavaScriptでA-Frameのカメラの向きを制御する方法と、仕組みについて書きました！

camera – A-Frame

A-Frameを使ってみたい11　画像２　3D/AR33

参考ビデオ：Image And Curved-Image Primitives (A-Frame Tutorial – WebVR) から自身のUdemyのA-Frameコースのコンテンツの一部を、YouTu ...

A-Frame で３次元オブジェクト表示，アニメーション，パノラマ表示，クリッカブルに設定

AR.js ではじめる Image Tracking

この記事は 2020-03-16 JST 付で Qiita に投稿したものです。 @ikkou です。みんな大好き AR.js が新しくなり、今まで通りの Marker Tracking と新...

【AR.js v3.0】Image Tracking（NFT）のサンプルを試してみた | WebAR Lab - WebARの最新情報がわかるメディア

wordpress アイキャッチ画像を表示する　しない　設定プラグイン

記事内ではアイキャッチ画像を表示しない

アイキャッチ画像を設定すると記事の一覧画面と個別記事ページの両方でアイキャッチ画像が表示されますが、個別記事ページではアイキャッチ画像を表示したくない場合があります。例えば記事の中で使用している画像をアイキャッチ画像に設定した場合、同じ画像...

wordpress テーマいろいろ

初心者向けWordPress無料テーマ35選／日本語対応 | TechAcademyマガジン

WordPress（ワードプレス）初心者におすすめする【無料テーマ（テンプレート）】を紹介する記事です。全て日本語に対応。SEOに強いテーマや、テーマのカスタマイズに最適なテーマなど全部で35紹介しています。

wordpress seo 強化

WordPressのSEOを強化する！プロが教える8つの設定 | 知らないと損をするサーバーの話

第四回は、WordPressで作られたサイトのSEOを強化するための設定方法をお伝えします。WordPressには便利なプラグインがたくさんあり、初心者であっても、SEO向けプラグインを使うことによって、SEOに配慮したサイトを立ち上げるこ...

Instagramをホームページに

【Instagramをホームページに埋め込み新たなファンを獲得しよう】Instagram埋め込み方法を画像で解説-CHACO-WEBかんたんマニュアル | ホームぺージ制作会社チャコウェブBlog

CHACO-WEBかんたんマニュアルとして、今回はWordPressを利用したInstagramの埋め込み方法をご紹介します。手軽に美しい写真が共有できるアプリとして、特に今では飲食店などでも爆発的な人気が出始めている...

WordPressにInstagram投稿を埋め込む方法 – ワードプレステーマTCD

2020年10月24日からWordPressの埋め込みブロックでInstagram投稿を埋め込むことができなくなりました。当記事では、WordPressにInstagramの投稿を確実に埋め込む方法について解説しています。

【WordPress】Instagramのフィードを表示するプラグイン「Instagram Feed」の設定方法を解説

WordPressサイトのサイドバーやフッターにInstagramのフィードを表示させる方法をお探しの方向け。 Instagramに投稿した写真をWordPressサイトに埋め込みたい。サイトに訪問したユーザーにInstagramの写真を

TikTokをホームページに

TikTokをブログやウェブサイトに埋め込む方法とTikTokまとめデザイン事例 | EmbedSocial Japan

動画共有アプリとして急速に存在感を増しているTikTok。今回はTikTokブログやウェブサイトへの埋め込みを取り上げます。TikTokはどうやって埋め込むのか、埋め込んだTikTokをまとめた【TikTokまとめ】デザイン事例、そしてTi...

OGP画像作成について

『OGP』とは「Open Graph Protocol」の略で、SNS（Twitter/Facebook）やLINEなどでURLを送ったりしたときに表示される画像のことです。

【2021年】OGPって何？最適な画像サイズと制作の注意点

『OGP』とは「Open Graph Protocol」の略で、SNS（Twitter/Facebook）やLINEなどでURLを送ったりしたときに表示される画像付きのアレです。ここでは、OGP画像の最適サイズや、制作するときの注意点を解説...

OGP画像シミュレータ | og:image Simulator

デザインしたOGP画像をドラッグ＆ドロップし、タイムライン上でどう見えるかシミュレートしてみよう！

主な解像度の種類

8K（7680×4320）
4K（3840×2160）
WQHD（2560×1440）
フルHD（1920×1080）
WXGA++(1600×900）
HD（1280×720）　など
現在では1920×1080の解像度での表示が可能で、横と縦の比率（アスペクト比）が16:9となる「フルHD（フルハイビジョン）」のモニターが主流です。

画像の大きさの最適化の考察

スマホ対応のサイトを作る場合の画像の大きさは、ＰＣ設定のままだと、大きすぎて画面からはみ出してしまう事があります。

画像の大きさを最適化する max-width:100%;

スマホ閲覧時に画像がはみ出て表示されてしまう場合、スタイルシートのimgに「max-width:100%;」を指定することで自動で大きさを最適化することができます。合わせて「height:auto;」も設定して高さも調整しておきましょう。

年齢計算、年数計算

何周年とか　何年目とかの年数計算の　html＋script を使用した簡単な記述方法。
ちなみに　19481216　は　当社の創立記念日です。ここに任意の年月日（西暦）を入力。

<body>
<p>
おかげさまで<span id="age"></span>年
</p>


<script>
function calcAge(birthdate) {
    const today = new Date();
    targetdate = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate();
    return (Math.floor((targetdate - birthdate) / 10000));
}
document.getElementById("age").innerHTML = calcAge(19481216);
</script>

</body>

カテナリー曲線の書き方

カテナリー曲線

カテナリー曲線（懸垂線、catenary）は、ロープ、紐、電線、鎖などの両端を持って
たらしたときに出来る曲線です。
これを上下ひっくり返した曲線がアーチで、建築にも使われています。
曲線の式は下記の通りです。
y = a cosh(x/a) = a(( e^x/a + e^-x/a) / 2 )
※双曲線関数 cosh x = (e^x + e^-x) / 2

Wi-Fiは5Ghz帯を

いま主流のWi-Fiは、「802.11ac」（略して11ac）という規格である。
これは、5GHz帯の電波を使う方式だ。

【Wi-Fi接続】2.4GHzと5GHzの違いは? 動画を見るとき距離が離れているときの使い分け

Wi-Fiには、2.4GHz(ギガヘルツ)帯と5GHz帯の2つの電波帯がある。これを知識として知っていても、実際にWi-Fiを使うとき、どう使い分けたらいいのか悩む人も多いだろう。その疑問に、ズバッと答えを出そう。また、どの電波帯を使うかを

3DオブジェクトをWEBにUP

３DオブジェクトなどをWEBにアップして商品などをアピールしたいサイトを作る時などに必要な技術です。色々な夢が広がります。

アンドロイドとIOSでは作成するファイルが異なります。

のぼゆエンジニアリング

3Dモデルを、360°回せるビューワーとしてWebサイトに埋め込む方法【A-Frame と mo...

https://www.noboyu.com/how-to-embed-3d-models-website/

作った3DデータをWebサイトに埋め込み、マウスや指で操作し360°閲覧できるようにする方法の紹介です。「A-Frame」と「model-viewer」を使いました。

めんちゃろぐ

【Blender】AR機能付き3Dモデルビューワーをサイトに載せる方法【model-viewer】 -...

https://www.kt-greenlife.site/model-viewer-blender-wordpress/

model-viewerを使用して3Dモデルを360度ぐるぐる回して見れるビューワーをWordPress内に埋め込む方法を紹介

facebook OGP設定　twitter カード設定

Facebook for Developers

シェアデバッガー - Facebook for Developers

https://developers.facebook.com/tools/debug/

OPTPiX Labs Blog

OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 | OPTPiX La...

https://www.webtech.co.jp/blog/web/facebook/6199/

こんにちは、ウェブ担当の嶋です。 Twitterと並んでSNSの代表格となったFacebook。ウェブテクノロジでは公式ページとともに「OPTPiX SpriteStudio ユーザー助け合い所」というグループも開設し、 … 続きを読む →

Twitter

https://cards-dev.twitter.com/validator

ferret-plus.com

ユーザーとの設定を改善してさらなるインプレッションを生む！FacebookのOGPの設定...

https://ferret-plus.com/13065

世界最大のSNSであるFacebookはユーザーが実名であることに加えて、「いいね！」や「シェア」による情報拡散力が大きな強みです。FacebookユーザーがWebページをシェアした際、その情報に訴求力があると、さらなるシェアが期待できます。SNSの特性を最大限に活用した情報拡散には、ユーザーからの「いいね！」や「シェア」をいかに有効利用できるかが、重要なポイントです。今回は、Facebookにユーザーが「いいね！」や「シェア」をした場合の表示設定であるOGPについて解説します。OGPの設定次第で、マーケティングの成果をぐっと高め...

コード例

<head>部分に挿入します。

<meta property="fb:app_id" content="＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊" />
<meta property="og:title" content="＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://*****.***/" />
<meta property="og:image" content="https://*****.***/***.jpg" />
<meta property="og:description" content="＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊">
<meta name="keywords" content="＊＊＊,＊＊＊,＊＊＊,＊＊＊,＊＊＊,＊＊＊">
<meta name="Description" content="＊＊＊">

<meta name="twitter:card" content="summary_large_image">

シェアボタン作成サイト

www.ninja.co.jp

忍者ツールズ｜ホームページブログアクセス解析カウンターメールフォーム

https://www.ninja.co.jp

無料ホームページ、ブログ、SEO対策やBlog運営に便利なアクセス解析、アクセスカウンターなど、HPやレンタルCGIの定番、忍者ツールズ。無料で作成・登録できます。携帯にも対応。

WebMedia

SNSのシェアボタンを設置する方法とアイコンの利用規約を紹介！

https://www.itra.co.jp/webmedia/sns-share-button.html

最近のWebサイトを見ているとSNSのシェアボタンを見つける機会は多いですよね。シェアボタンを設置すると、自社サイトの情報が不特定多数に拡散されるようになり、認知度を上げて関心を生むことができます。自社サイトにもシェアボタンを付けて、自社の有益な情報をより多くの人に届けたいとは思うけれど、各SNSの利用規約や設定方法が曖昧で実行に踏み切れていないという人は多いのではないでしょうか。そこで今回は、シェアボタン設置前に確認したい各SNSの利用規約や設置方法を解説します。

スマホアプリ関連

NatsuLab

スマホゲームアプリの作り方【超初心者向け】 | NatsuLab

http://natsulab.com/howtomake-game

こんにちは、natsukazeです。皆さんはスマホゲームやったりしますか。最近のスマホゲームって本当にすごくて、一昔前の家庭用ゲーム機レベルのゲームがどんどん出てきてますよね。そんなスマホゲームですが、現在は個人でも開発できる環境が整っています。小学生、中学生でも普通にアプリ作ってリリースしてたりしてますからね。私も元々ゲームが好きだったので、趣味でゲームアプリを作ってたらいつの間にかそれが本業になっていました。一昔前でも個人でゲーム作りをしている方は沢山いましたが、やはり収益化が難しく...

安心の形『テスリックス』

ボタンの設置サイト

JAJAAAN

CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！ | JAJAAAN

https://jajaaan.co.jp/css/button/

CSSで作れるボタンについて120個以上サンプルを作成してみました。どこよりも詳しく、どこよりもサンプル多く解説しています。どれもHTMLとCSSで実現できるものであり、PC用ボタンはすべてホバーアクション付きです。また、CSSボタンを作る際の重要なポイントについても解説しています。

名古屋・東京のWeb制作ならGrowGroup株式会社

コピペ実装！CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選 | 名古...

~~https://grow-group.jp/archives/2674/~~

このブログページでは、コピペするだけで実装できる「癖がなくて使いやすい」「お洒落」なボタンのサンプルコードを掲載しています♪シンプルなものからホバーアクションに少しこだわったものまで紹介しています！

サルワカ | サルでも分かる図解説明マガジン

CSSで作る！押したくなるボタンデザイン100（Web用）

https://saruwakakun.com/html-css/reference/buttons

HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。

Vuetify

ボタン・コンポーネント

https://vuetifyjs.com/ja/components/buttons/

ボタンコンポーネントは、ユーザーが取ることができるアクションを伝えるもので、一般的にはダイアログ、フォーム、カード、ツールバーに配置されます。

楽天サイト　メンテナンス　

　楽天店舗運営にて　コンパスというツールを解約した場合、そのHTMLやタグ等が残ってしまい、メンテナンスができなくなり困る場合があります。再度契約すれば良いのでしょうが、またまたお金かかります。　該当するHTMLやタグ等はCOMPASSフォルダに残ってますので、その中をFTPなどでのぞいてメンテナンスします。その場合はよくバックアップを取りながら、タグやパラメータを書き換えましょう。

ワードプレスにグローバルナビ（メニュー）を設置する

Purple Life

ワードプレスにグローバルナビ（メニュー）を設置する

https://love-wave.com/global-navigation-menu/

グローバルナビ（メニュー）の追加、2階層、3階層する方法などを図解説明しています。親メニューをクリックしてもアクションを起こさない方法やアイコン挿入まで。

fontawesome.com

Font Awesome Icons

https://fontawesome.com/v4.7.0/icons/

Font Awesome, the iconic font and CSS framework

Welcart (wordprss)

【公式】Welcart | カスタマイズ開発に強いEC構築ツール

カートページの「買物を続ける」ボタンのリンク先を任意のページに変更 | 【公式】...

https://www.welcart.com/archives/techinfo/techinfo-20180906

Welcartのカートページにて、「買い物を続ける」ボタンを押したときの遷移先を変更するカスタマイズです。フィルターフック 'usces_filter_cart_prebutton' を使い、遷移先のURLを変更します。【Hook】 us

welcart にて　ヘッダーにロゴ画像を設定する方法

【公式】Welcart |SEOに強い！初めてでも安心の無料ネットショップ作成ツール

ネットショップ作成、リニューアルならWelcart。WordPressのプラグインなのでSEOに強く、無料で簡単に導入できます。専門スタッフのサポートもあり、初めてでも安心して使えます。拡張性が高く、お乗り換えにも対応可能なWelcartで...

下記フォーラムを参考

Welcart コミュニティー

Welcart Basic のタイトルをロゴ画像に変えたい | Welcart フォーラム- Part 2

https://www.welcart.com/community/forums/topic/welcart-basic-のタイトルをロゴ画像に変えたい/page/2

よろしくお願いいたします。タイトルをロゴ画像に変える方法を教えてください。 http://www.coral - Part 2

welcart　内　header.php　

変更前

<!-- 変更前  --->
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

<?php bloginfo( 'name' ); ?></a></<?php echo $heading_tag; ?>>

変更後

<!-- 変更箇所　スタート     --->		

<p class="site-description"><?php bloginfo( 'description' ); ?></p>
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="https://***********/*****.jpg">
<?php bloginfo( 'name' ); ?></a></<?php echo $heading_tag; ?>>

	
<!-- 変更箇所終わり     --->

style.css の中　下記を追加し　大きさを調整する


h1.site-title a,
div.site-title a {
	display:block;　　＜－－－－－－　ブロック要素に変更する
	color: #000;
	width:100%;
	height:100%;
	
}

h1.site-title img,
div.site-title img {
	width: 25%;　　＜－－－－画像の大きさを任意で調整
	height: auto;
}