【定番】dl要素スタイリングの小技

dl要素は説明リストとして、dt要素(定義語)とdd要素を(説明文)を組み合わせて用いますが、デフォルトのスタイルだと少し物足りない感じがします。

dl要素は説明リストとして、dt要素(定義語)とdd要素を(説明文)を組み合わせて用いますが、デフォルトのスタイルだと少し物足りない感じがします。

▼ デフォルトのスタイル

ペン
鉛筆。多くはシャープ ペンシルを指す。
パイナップル
パイナップル科の多年生植物。
りんご
バラ科リンゴ属の落葉高木樹。

そこで、説明リストとして見やすくする為に以下のスタイルをよく使います。

#main dl dt {
  position: absolute;
}

#main dl dd {
  padding-left: 2em;
}

#main dl dd:before {
  content: "… ";
}

まずdt要素をposition:absolute;で浮かせて、dd要素が重なってくるのでpadding-leftで左に余白を作ります。最後に「…」をdd要素の先頭に追加しました。

これでデフォルトよりは説明リストっぽくなったかと思います。

さくらのVPSでFTPアップロード出来ないときの注意点

さくらのVPSでWordpressやEC-CUBE等のCSMをインストールした時、ファイルの所有者:所有グループがいずれもapacheになっている為、FTPでファイルをアップロードする事ができません。

さくらのVPSでWordpressやEC-CUBE等のCSMをインストールした時、ファイルの所有者:所有グループがいずれもapacheになっている為、FTPでファイルをアップロードする事ができません

これを許可するには、例えばvpsuserという一般ユーザーからFTP接続する際は、ファイルの所有グループをvpsuserに変更して、書き込み権限を付与する必要があります。

まず先に所有グループを変更して、

# chown apache:vpsuser ファイル名

 

その後グループに対して書き込み権限を付与します。

 chmod g+w ファイル名

 

所有グループと書き込み権限が変更されているのを確認

これでファイルをFTPアップロード出来るようになりました。

 

ディレクトリ以下全てのファイルに対して上記操作を行う場合は「-R」オプションをコマンドに付け足します。

# chown -R apache:vpsuser ディレクトリ名/*

WordPressでトップページのURLを変更する方法

wordpressは「ドメイン/wp」にインストールするのが通例ですが、サイトにアクセスする際にwpをなくす手順について共有しておきます。環境はエックスサーバーのwordpress簡単インストールを使用した状態です。

wordpressは「ドメイン/wp」にインストールするのが通例ですが、サイトにアクセスする際にwpをなくす手順について共有しておきます。環境はエックスサーバーのwordpress簡単インストールを使用した状態です。


1.管理画面からサイトURLを変更

WordPressの 管理画面>設定>一般 の「サイトアドレス(URL)」項目から、末尾の「wp」を削除して保存します。

2.「.htaccess」「index.php」のディレクトリを修正

次にファイル側 /DocumentRoot/wp 直下の「.htaccess」「index.php」をダウンロードして中身を修正します。まず.htaccessから

// .htaccess
修正前
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>

修正後
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

次にindex.phpの17行目を修正

// index.php
修正前
require( dirname( __FILE__ ) . '/wp-blog-header.php' );

修正後
require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );

2つとも修正出来たら1つ上の階層の /DocumentRoot/直下にアップします。

これで「ドメイン」から直接アクセス出来るようになりました。

海外向け通販サイトでPaypalチェックアウト決済プラグインが動作しない件〔EC-CUBE4.0.3〕

海外向け通販サイトで「ペイパルチェックアウト決済プラグイン(4.0系)」を導入した所、決済時にローディングから進まない状態になりハマってしまいました。

海外向け通販サイトで「ペイパルチェックアウト決済プラグイン(4.0系)」を導入した所、決済時にローディングから進まない状態になりハマってしまいました。

使用環境

サーバー さくらのVPS
CMS EC-CUBE4.0.3

1.エラー内容

カート画面でPaypalボタンを押したあと、ひたすらローディングがぐるぐる回っている状態になり、

コンソールでは下記エラーログが出ていました。

Failed to load resource: the server responded with a status of 500 (Internal Server Error)


色々調べた結果、.envファイルで通貨をUSDに指定していたのが原因の様です。

ECCUBE_CURRENCY=USD

もしかするとPaypalの管理画面から設定を変更できるかのなと思い、Paypalサポートに問い合わせた所、USDに対応するにはプラグイン側での改修が必要になるとの事でテクニカルサポートへの問い合わせ先をメールで教えてくれました。

2.対応したこと

早速テクニカルサポートに問い合わせた所、以下の回答を頂きました。

パラメータのCurrencycodeを変更することにより外貨対応ができるようになります

という訳で、プラグインの設定ファイルから外貨を「USD」と地域を「en_US」に変更します。

/DocumentRoot/app/Plugin/PayPalCheckout/Resource/config/services.yaml

paypal.currency: USD
paypal.locale: en_US

 

次に下記ファイル内の「JPY」となっている箇所を全て「USD」に変更します。

/DocumentRoot/app/Plugin/PayPalCheckout/Service/PayPalService.php

'currency_code' => 'USD',
"currency" => "USD",

上記対応を行った上で、再度.envファイルで通貨をUSDに指定してあげると無事Paypalボタンが動作する様になりました。

会員登録フォームでフィールドの必須項目を外す方法〔EC-CUBE 4.0.3〕

EC-CUBE4系の会員登録フォームで、フリガナの必須項目を任意に変更したいと思い以下を修正しました。

EC-CUBE4系の会員登録フォームで、フリガナの必須項目を任意に変更したいと思い以下を修正しました。

// 修正ファイル
/var/www/html/eccube403/src/Eccube/Form/Type/Front/EntryType.php

// 変更前 63行目
->add('kana', KanaType::class, [])

// 変更後
->add('kana', KanaType::class, [
    'required' => false,
])

CSSを追加してスタイル調整する方法〔EC-CUBE 4.0.3〕

EC-CUBE4系でスタイル調整するやり方の一つとして、下記ディレクトリに修正用CSSを配置します。

EC-CUBE4系でスタイル調整するやり方の一つとして、下記ディレクトリに修正用CSSを配置します。

// modify.cssを追加
DocumentRoot/html/template/default/assets/css/modify.css

CSSを配置したら、テンプレート側にリンクを追加する。

// テンプレートディレクトリ
DocumentRoot/src/Eccube/Resource/template/default/default_frame.twig
// スタイルシートへのリンク追記
<link rel="stylesheet" href="{{ asset('assets/css/modify.css') }}">