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

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

覚書に使用しています。

インスタグラム関連

完全無料のブランディング.link
SNS、Youtube、ブログ、商品、HPなど、いま見て欲しいリンクを、まとめてシェア
Instagramの投稿にURLを載せてリンク誘導する方法は? « SNSマーケティングの情報ならガイアックス ソーシャルメディアラボ
SNSマーケティングに関する最新情報をご紹介&#123...

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 with DeepL every day.

Python関連

【入門初心者向け】PythonのフレームワークでWebアプリを開発する方法を徹底解説!|スタビジ
当サイト【スタビジ】の本記事では、PythonのWebアプリケーションフレームワークを用いてWebアプリを開発していく方法を徹底解説していきます。実際にDjangoでの実装とFlaskでの実装をおこなっていったあと、勉強法についても見ていきましょう!
Pythonでメール送信 | Python学習講座
(73) WEBブラウザ経由でPythonスクリプトを実行 – Pythonやってみる!
ブラウザから Python を操作する
誤解されないようにもう少し付け加えると、Python 操作のGUI部分をブラウザでやるって感じですかね。こっちもよく分からない説明かもしれませんが、Python はコマンドで動くスクリプト言語なので、あのとっつきにくい真っ黒画面に文字が流れ
【入門】ディープラーニングとは?仕組みと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次元オブジェクト表示,アニメーション,パノラマ表示,クリッカブルに設定
AR.js ではじめる Image Tracking
この記事は 2020-03-16 JST 付で Qiita に投稿したものです。 @ikkou です。みんな大好き AR.js が新しくなり、今まで通りの Marker Tracking と新...
【AR.js v3.0】Image Tracking(NFT)のサンプルを試してみた | WebAR Lab - WebARの最新情報がわかるメディア
今回はAR.jsの新機能Image Tracking(NFT)を試してみます! Image Tracking/NFT(Natural Feature Tracking)は画像認識でARマーカーを判別する技術です。これまでのAR.jsは黒い枠のついたARマーカーを利用することでマーカー認識を実現していました。 こんな感じ...

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

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

wordpress テーマいろいろ

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

wordpress seo 強化

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

Instagramをホームページに

【Instagramをホームページに埋め込み新たなファンを獲得しよう】Instagram埋め込み方法を画像で解説-CHACO-WEBかんたんマニュアル | 格安ホームページ制作CHACO-WEB.COMブログ
CHACO-WEBかんたんマニュアルとして、今回はWordPressを利用したInstagramの埋め込み方法をご紹介します。 手軽に美しい写真が共有できるアプリとして、特に今では飲食店などでも爆発的な人気が出始めている...
WordPressにInstagram投稿を埋め込む方法
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まとめ】デザイン事例、そしてTikTokを埋め込むとどのようなメリットがあるのか?、あわせて解説します。

OGP画像作成について

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

【2021年】OGPって何?最適な画像サイズと制作の注意点 – 岡山|ホームページ作成・集客×デザイン・Web制作|C3 Design.
Webサイト制作時に設定する、OGP画像の最適サイズや、制作するときのコツ(ポイント)を実際に作りながら解説しています。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の違いは? 動画を見るとき 距離が離れているときの使い分け - 特選街web
Wi-Fiには、2.4GHz(ギガヘルツ)帯と5GHz帯の2つの電波帯がある。これを知識として知っていても、実際にWi-Fiを使うとき、どう使い分けたらいいのか悩む人も多いだろう。その疑問に、ズバッと答えを出そう。また、どの電波帯を使うかを自動的に決定する仕組み「メッシュWi-Fi」についても解説する。【2019年3月...

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 にて ヘッダーにロゴ画像を設定する方法

WordPress専用ショッピングカート Welcart | ワードプレスでかんたんにネットショップ構築
WordPressでかんたんにネットショップを構築できるワードプレス専用ショッピングカート 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松屋産業株式会社

タイトルとURLをコピーしました