備忘録

大きさの異なる文字の高さを揃える+編集もできるようにしておきたい

【参考URL】：

オブジェクトのアウトライン化
整列パネルの「プレビューの境界を使用」にチェック　効果＞パス＞
オブジェクトのアウトライン

天球動画用画像編集

【参考URL】：: URL

①平面を天球に
イメージ→画像の反転180度
フィルタ→変形→極座標→直交座標を極座標に
②天球を平面に
フィルタ→変形→極座標→極座標を直交座標に
イメージ→画像の反転180度

wordpressでのjavascriptの導入

【参考URL】：: URL

theme-child内にjsフォルダの作成→中にjsファイルを入れる
functions.phpを開き、以下を記述する
/*
function link_scripts() {
wp_enqueue_script( 'test', get_stylesheet_directory_uri() .'/js/test.js', '', '', true );
}
add_action('wp_enqueue_scripts', 'link_scripts' );
*/
＊赤文字の部分は同じにすれば問題ないと思われる

反応しない場合
.js側が　$(function() )　で始まるとWPでは認識しないので
$(function() ) → jQuery(function($))に変更すると解決するかもしれない

HTMLのみでアコーディオン

【参考URL】：: URL

          
              クリックして開く
              ここに折りたたまれたコンテンツが入ります。

全体を「details」で囲む
summaryがタイトル、それ以下がアコーディオン内に収まる

headerの固定

【参考URL】：

function.phpに記述

            function my_lightning_global_nav_fix( $options ) {
            $options['header_scrool']  = false;
            return $options;
            }
            add_filter( 'lightning_localize_options', 'my_lightning_global_nav_fix', 11, 1 );

生年月日の自動更新

【参考URL】：: URL

            functions.phpに記載

            //年齢計算表示ショートコード
            function calcAgeFunc($attr) {
                    $now = date("Ymd");
                    $birth = $attr[0];
                    return floor(($now-$birth)/10000);
            }
            add_shortcode('calc_age', 'calcAgeFunc');

            htmlに記述するショートコード

            年齢[calc_age 19830125]歳

            西暦年月日で記述

背景色の透明化

【参考URL】：

            .exsample {
              background-color: transparent;
            }

疑似クラス :notの使い方

【参考URL】：

            
              apple
              orange
              lemon
            

            li:not(.sample) {
              color: blue;
            }
            →sampleがついたli以外が青色になる

背景画像に対して画像中央にテキスト表示をする方法

【参考URL】：

            HTML↓
             
               #position: absolute;で動かす
                ここにテキスト
              
            

            CSS↓
            div.mainvisual {
              height: 300px;
              width: 100%;
              background: url(../img/mainvisual.png) no-repeat center center / cover;
              position: relative;
            }

            h1.text_content {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }

Lightning 投稿ページの日付や投稿者名を非表示

【参考URL】：

            更新日を非表示
            .entry-meta-item-updated {
              display:none;
            }

            投稿者名を非表示
            .entry-meta-item-author {
              display:none;
            }

            日付を非表示
            .entry-meta-item-date {
              display:none;
            }

右寄せにして文頭揃える

【参考URL】：

            div要素で囲み、divにtext-align:right;を、p要素にdisplay:inline-block;とtext-align:left;を指定

イラレ：大きさの異なる文字の高さを揃える+編集もできるようにしておきたい

【参考URL】：

オブジェクトのアウトライン化
整列パネルの「プレビューの境界を使用」にチェック　効果＞パス＞
オブジェクトのアウトライン

Background-image(背景画像)を透過させるCSS

【参考URL】：: URL

            対象のcssに以下を記述
            .example{
            background:url(画像.jpg); 
            background-color:rgba(255,255,255,0.8);
            background-blend-mode:lighten; 
            }

【アフターエフェクト】複数の写真が並んでいく3Dスライドショーの作り方

【参考URL】：: URL

```
          
```

Pr：ばらばらの映像編集ファイルを一つのフォルダにまとめる方法

【参考URL】：: URL

```
          
```

自作のPHPをショートコードを用いて読み込ませる

【参考URL】：: URL

            ファイル名 abc123.phpの場合

            ①abc123.phpに記載↓
            <?php
            // バナー表示用ショートコードの登録
            function abc123_shortcode() {
                ob_start(); // 出力のバッファリング開始
                ?>
                  
                「ここにHTMLを記載」

                <?php
                return ob_get_clean(); // バッファリングされた内容を返す
            }
            add_shortcode('abc123', 'abc123_shortcode');

            ②abc.phpをアップロード

            ③functions.phpに記載↓
            require_once get_stylesheet_directory() . '/abc123.php';

            ④HTMLに[abc123]と記載

HTMLとcssのみでスライド

【参考URL】：: URL

```
  
          
```

2個目以降のcssの読み込み

【参考URL】：: URL

①2個目のcss(plus.css)の作成

            ②親テーマから以下の部分ををコピペする
            /*
            Theme Name: hirota_test Child
            Theme URI:
            Template: hirota_test
            Description:
            Author:
            Tags:
            Version: 0.6.0
            */

            ③子テーマのfunctions.phpを以下に変更
            //以下が追加部分の

              add_action(
                  'wp_enqueue_scripts',
                  function() {
                      wp_enqueue_style(
                          'my-lightning-custom',
                          get_stylesheet_directory_uri() . '/assets/css/style.css',
                          array( 'lightning-design-style' ),
                          filemtime( dirname( __FILE__ ) . '/assets/css/style.css' )
                      );
                  }
              );
              //以下が追加部分
                add_action(
                  'wp_enqueue_scripts',
                  function() {
                      wp_enqueue_style(
                          'plus',
                          get_stylesheet_directory_uri() . '/plus.css',
                          array( 'my-lightning-custom' ),
                          filemtime( dirname( __FILE__ ) . '/plus.css' )           );
                  }
              );

切り替えタブデザイン

【参考URL】：: URL

            
              
                  
                  タブタイトル
              
              ここに内容
            

            .tab-1 {
                      display: flex;
                      flex-wrap: wrap;
                      max-width: 500px;
            }

            .tab-1 > label {
                flex: 1 1;
                order: -1;
                min-width: 70px;
                padding: .7em 1em .5em;
                border-bottom: 1px solid #f0f0f0;
                border-radius: 0;
                background-color: #e9f0f6;
                color: #535353;
                font-size: .9em;
                text-align: center;
                cursor: pointer;
            }

            .tab-1 > label:hover {
                opacity: .8;
            }

            .tab-1 input {
                display: none;
            }

            .tab-1 > div {
                display: none;
                width: 100%;
                padding: 1.5em 1em;
                background-color: #fff;
            }

            .tab-1 label:has(:checked) {
                background-color: #fff;
                border-color: #d02578 #f0f0f0 #fff;
                border-style: solid;
                border-width: 4px 1px 1px;
                border-radius: 5px;
                color: #333333;
            }

            .tab-1 label:has(:checked) + div {
                display: block;
            }

#position: absolute;で動かす ここにテキスト

#position: absolute;で動かす
ここにテキスト