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 ログイン パスワード
エックスサーバー phpMyadminログインとデータベース操作
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/b0e5d38cdd1f86d0dac1faeb2eae66ff.jpg)
EC-CUBE 4
![](https://028.co.jp/wp/wp-content/uploads/2023/09/image-1024x844.png)
自動応答メール 条件によって内容を変える
windows11にてoutlookをセットアップする時の注意
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/ed327bdf4a9cd4da5c8ada88e04855ad.jpg)
Windows11の初期設定はOneDriveのバックアップが有効になっているため使用し続けると、いろいろな不具合が生じるので注意。
最初はバックアップを無効にしてセットアップしたほうが無難。
Font Awesome
いまやウェブ制作に欠かせない、Font Awesomeですが、500アイコン以上あるので、なかなか探すのも大変です。
公式サイトで、アイコンを検索できますが、あまり一覧性が高くないので、このページで、オリジナルのアイコン検索を作成しました。アイコン名から検索するほか、サイズを指定したり、回転したりと、アイコンをカスタマイズできます。
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/87946e0b6b5970260863b36dc3dfc6f0.jpg)
EC-CUBE 新着順表示に固定
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9RUMtQ1VCRTQlRTMlODElQTclRTUlOTUlODYlRTUlOTMlODElRTQlQjglODAlRTglQTYlQTclRTMlODElQUUlRTMlODIlQkQlRTMlODMlQkMlRTMlODMlODglRTklQTAlODYlRTMlODIlOTIlRTMlODAlOEMlRTYlOTYlQjAlRTclOUQlODAlRTklQTAlODYlRTMlODAlOEQlRTMlODIlOTIlRTUlODglOUQlRTYlOUMlOUYlRTglQTElQTglRTclQTQlQkElRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRjODM4Y2ZlMzBkOTc2Mzg2ZTc1ZWRhNDQwODUyMDdj&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2hpaGlyby1hZGFjaGkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTkwOWY2MThkZWEwMzI2ZDdlNjFhNjk2N2VhMzRhMmQ4&blend-x=142&blend-y=491&blend-mode=normal&s=69a16bbcd56492be40bb8f1ff6547783)
youtube 埋め込み センターリング
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/a70c87da38835bf260b1aca8228694fd.png)
twitterシェアリンク生成
プラグイン『AddToAny』(ワードプレス)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/4481c2bbaa3c9011eaa44897b79c834c.png)
テーブル編集について(ワードプレス編)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/0d5de1281851a0158d3efa9098c39c09.jpg)
リダイレクトについて
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/ebd204c5a04a0e6d7c4eacf0a6f774e6.jpg)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/44f500aa73914abcf60393be018f92cd.jpg)
ラベルシール
インスタグラム関連
WordPress Mega Menu
曲線
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/ca0dafe8c2a76ae98fc84f407b82887b.png)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/f6e8d3a06ffcd417cf2658a5969173e0.gif)
![](https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Clothoid_curve.svg/640px-Clothoid_curve.svg.png)
![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Parabola.svg/640px-Parabola.svg.png)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/141d853ba51e4e2d583a8375abd54fb5.png)
翻訳関連
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/b33267793f10e09f234e85f17f8886eb.jpg)
Python関連
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/67cba2d34b96324964683603985b86c6.jpg)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/2da038ac67203320c2333c18690da10c.jpg)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/015468468039d7dddcd3209c7ac8a077.jpg)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/84894bb4d07bf999dfa899add06ea92f.png)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/b3d9f8e47af32d4f3c1d8c59e1d62e57.png)
イメージトラッキング
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/66c947b891394ed7a43f5fe8a9ae68e4.jpg)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/1fa4850b6cea301ea442af94388ba889.jpg)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/51f84f9c81bc46942ff88ffed3eb5568.png)
![](https://dev.to/social_previews/article/287987.png)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/15c896b433db0fd355b55e83f9fb17f1.jpg)
wordpress アイキャッチ画像を表示する しない 設定プラグイン
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/a5e0987e372a42157c4563b704fb3857.png)
wordpress テーマいろいろ
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/9688bf249568096eaac9dd259bb7a64f.jpg)
wordpress seo 強化
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/cdeaa127288d8520eb21a3f90e7378b3.jpg)
Instagramをホームページに
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/e6b0b38f6fff6e7d3f38830bb80d1554.png)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/187f47db5d5bead1de940f12e82b5ebf.jpg)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/38dae6d95a6d237c425b570e1ba8fa84.png)
TikTokをホームページに
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/190c19ffa5e46fcbf56831e9e997bb23.png)
OGP画像作成について
『OGP』とは「Open Graph Protocol」の略で、SNS(Twitter/Facebook)やLINEなどでURLを送ったりしたときに表示される画像のことです。
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/719372ef112828feff3ef5747ed3ea92.jpg)
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/dd44ac892bf870da4b5e3ecafdbb8f7b.png)
主な解像度の種類
8K(7680×4320)
4K(3840×2160)
WQHD(2560×1440)
フルHD(1920×1080)
WXGA++(1600×900)
HD(1280×720) など
現在では1920×1080の解像度での表示が可能で、横と縦の比率(アスペクト比)が16:9となる「フルHD(フルハイビジョン)」のモニターが主流です。
画像の大きさの最適化の考察
スマホ対応のサイトを作る場合の画像の大きさは、PC設定のままだと、大きすぎて画面からはみ出してしまう事があります。
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/5bef04bf88343a808aeceb25117d3426.png)
年齢計算、年数計算
何周年とか 何年目とかの年数計算の 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帯の電波を使う方式だ。
![](https://tokusengai.com/assets/images/2019/03/14/252277786c11386e5d2133bcc32ae1255a8026f1_xlarge.webp)
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">
シェアボタン作成サイト
スマホアプリ関連
ボタンの設置サイト
![](http://028.co.jp/wp/wp-content/uploads/pz-linkcard/cache/7d3b2bcd9e82794ce49f64280d56d6dde507fda14cce6371101d997de05856ba.jpeg)
楽天サイト メンテナンス
楽天店舗運営にて コンパスというツールを解約した場合、そのHTMLやタグ等が残ってしまい、メンテナンスができなくなり困る場合があります。再度契約すれば良いのでしょうが、またまたお金かかります。 該当するHTMLやタグ等はCOMPASSフォルダに残ってますので、その中をFTPなどでのぞいてメンテナンスします。その場合はよくバックアップを取りながら、タグやパラメータを書き換えましょう。
ワードプレスにグローバルナビ(メニュー)を設置する
Welcart (wordprss)
welcart にて ヘッダーにロゴ画像を設定する方法
![](https://028.co.jp/wp/wp-content/uploads/cocoon-resources/blog-card-cache/7d175da4941ecab0267b567cecad674e.png)
下記フォーラムを参考
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松屋産業株式会社