プログラミング関連 リンク集
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 align=”center”>

</div>

で埋め込みタグを囲む

アコーディオンメニュー

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

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

<script type=”text/javascript”>

// 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の紹介など。

EC-CUBE 新着順表示に固定

EC-CUBE4で商品一覧のソート順を「新着順」を初期表示にする - Qiita
EC-CUBE4の、商品一覧(ショップ画面)の並び順は、「価格が安い順」「価格が高い順」「新着順」が選択でき、初期表示は「価格が安い順」で表示されます。商品を新しく登録した際など、「新着順」を初期…

youtube 埋め込み センターリング

YouTubeやTwitterの埋め込みを中央寄せにする方法
WordPressを使用していて、YouTubeやTwitterの画像が中央配置されない事があったので、自分が解決に至った詳細を記載しました♪

twitterシェアリンク生成

Twitterシェアリンク生成ツール

プラグイン『AddToAny』(ワードプレス)

AddToAnyプラグインのシェアメッセージにハッシュタグやメンションを追加する
WordPressで手軽にシェアボタンが追加できるプラグイン『AddToAny』ですが、Twitterでシ...

テーブル編集について(ワードプレス編)

Flexible Table Blockの使い方:ブロックエディタでテーブルを自由にカスタマイズ – ワードプレステーマTCD
WordPressのブロックエディタは、テーブル(表)の各セルを個別にカスタマイズできない問題があります。直感的に操作できるブロックエディタにも関わらず、テーブルだけはクラシックエディタを使う必要がありました。

リダイレクトについて

httpからhttpsにリダイレクトする方法と注意点について|キーワードファインダー
httpをhttpsにリダイレクトするには“.htaccess”を利用することで比較的簡単に対応することができますが、その他にもいくつかチェックしておきたい要素があり、特に301で正しくリダイレクトさせる必要があります。この記事ではそういっ...
今さら人に聞けない!WordPressで使われているmod_rewriteの説明書|クロノドライブ
コーディングの代行・外注ならクロノドライブへ。コーディングに関するあらゆるニーズに”最高品質”のコーディングサービスでお応えします。

ラベルシール

インスタグラム関連

https://lit.link/
Instagramの投稿にURLを載せてリンク誘導する方法は? | 株式会社ガイアックス|SNSマーケティング支援サービス
株式会社ガイアックスでは、効果的にSNSを活用するための施策支援や関連のサービスを提供しています。

WordPress Mega Menu

曲線

カテナリー曲線 - Wikipedia
サイクロイド - Wikipedia
クロソイド曲線 - Wikipedia
曲線 - Wikipedia
忘却曲線 - Wikipedia

翻訳関連

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とは、統計処理や機械学習、ディープラーニングといった数値計算分野を中心に幅広い用途で利用されている人気なプログラミング言語です。 主な特徴として「効率のよい、短くて読みやすいコードを書きやすい」、「ライブラリが豊富なのでサクッと
Google Colaboratory
PythonとPHPの違いは?それぞれの特徴を詳しく理解しましょう!
プログラム言語には実に様々な種類があり、これからプログラミングを学ぼうと考えている方にとっては、どの言語を学ぶかは非常に悩ましい問題でしょう。 どのプログラミング言語を学ぶかによって活用できる分野は異なるうえに習得難易度も大きく異なるため、...

イメージトラッキング

JavaScriptでA-Frameのカメラの向きを制御する
JavaScriptでA-Frameのカメラの向きを制御する方法と、仕組みについて書きました!
camera – A-Frame
A-Frameを使ってみたい11 画像2 3D/AR33
参考ビデオ:Image And Curved-Image Primitives (A-Frame Tutorial – WebVR) から自身のUdemyのA-Frameコースのコンテンツの一部を、YouTu ...
A-Frame で3次元オブジェクト表示,アニメーション,パノラマ表示,クリッカブルに設定
A-Frame で3次元オブジェクト表示,アニメーション,パノラマ表示,クリッカブルに設定
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(フルハイビジョン)」のモニターが主流です。

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

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

画像の大きさを最適化する 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(( ex/a + e-x/a) / 2 )
※双曲線関数 cosh x = (ex + 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

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

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

facebook OGP設定 twitter カード設定

コード例

<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">

シェアボタン作成サイト

スマホアプリ関連

ボタンの設置サイト

楽天サイト メンテナンス 

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

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

Welcart (wordprss)

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

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

下記フォーラムを参考

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;
}

welcart にて ヘッダーのサブタイトル font-size 変更方法

  Welcart Basic 外観->テーマエディタにて style.css を選択し /* — .site-description — */ の 部分を探す
0.85714em --> 1.15emに変更(任意の大きさ) これは、基準フォントの1.15倍の意味

サイトメンテナンス関連 リンク集    MCC松屋産業株式会社