カテゴリー: Develop

ずっと、ほしいほしいと言いながらなかなかなかったやつ。

Pastel | Fastest visual website feedback tool for web designers, developers and agencies

Pastel is a powerful tool for marketing teams to review and approve marketing collateral like live websites, PDFs and image files.

Live websiteに対してコメントできる。サイトを対象としたinVision的なかんじ。

#1 Online website feedback tool 🔥 | Ruttl

The fastest visual feedback tool that allows you to comment on live websites, web apps, PDFs, and images.

こちらはPastelよりも機能が多く、inspectorがありDOMやStyleを調整できる（ここでできるのが良いか微妙だけど）

WordPressトップページをWordpressインストールフォルダの親階層に展開したときに、ややこしいことになったのでメモ。（以後WordpressはWP表記）

前提条件とゴール

• 既存WPあり。ドメインは仮に”hoge.com”。
• サイトトップページ(https://hoge.com/)はWPで管理されていない静的html(/root/index.html)。
• WPインストールディレクトリは”/root/wp/”、URLは”hoge.com/wp/”。
  
• 個別投稿のパーマリンク設定は「数字ベース（https://hoge.com/wp/archives/123）」（Trailing Slash無し）。

これを継承して、以下仕様で拡張。

• サイトトップページ(https://hoge.com/)をWP固定ページにする。
• WP投稿ページは既存URLの”https://hoge.com/wp/”を継承。
• 個別のWP投稿も既存URLを継承。

ディレクトリで見ると以下のような感じ。

# ディレクトリ構成
/root（https://hoge.com/）
├ index.php（サイトトップ：静的HTMLからWP固定ページに変更）
└ /wp（WPインストールディレクトリ）

サイトトップページをWP固定ページに変更する

まず、サイトトップページをWP固定ページにするために、WPトップページの展開場所を一階層上げる必要がある。
これは「”index.php”と”.htaccess”の変更」「WPの「サイトアドレス(URL)」設定変更」で対応。

“index.php”と”.htaccess”の変更

1. WPインストールディレクトリ直下（/root/wp）から、”index.php”と”.htaccess”をダウンロード。
2. Index.phpを修正。

   変更前
   /** Loads the WordPress Environment and Template */
   require( dirname( __FILE__ ) . '/wp-blog-header.php' );
   変更後
   /** Loads the WordPress Environment and Template */
   require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );
   ※ 「wp」はWPインストールディレクトリ名

3. .htaccessを修正

   変更前
   
   RewriteEngine On
   RewriteBase /wp/
   RewriteRule ^index\.php$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /wp/index.php [L]
   

   変更後
   
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.php$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.php [L]
   

4. 修正した”index.php”と”.htaccess”を、”/root/”にアップロード。
   ダウンロードした”/root/wp/”直下の”index.php”と”.htaccess”はそのまま。

WPの「サイトアドレス(URL)」設定変更

1. WP管理画面の「設定」＞「一般」に移動。
2. 「サイトアドレス (URL)」にトップページの展開URLを入力（https://hoge.com）

これでサイトトップページ（https://hoge.com/）にWPトップページが展開されるようになる。

Powershellで出力文字が全然見えずバグなのかと思っていたのだが、コピペすると文字は取得できるので色設定の問題だろうとぐぐってみたところ、同じ症状の人を発見。「PowerShell の配色を変えるには？」

ココらへんから、Powershellの色設定の変更方法を調べて、ConEmu – Handy Windows Terminalとか、neilpa/cmd-colors-solarized: Solarized color settings for Windows command promptとか見つけたんだけど、MS純正のIntroducing the Windows Console Colortool – Windows Command Line Tools For Developersを発見したので、こちらを使ってみた。

使い方は簡単で、Releases · Microsoft/consoleから最新版をDLして解凍。Powershellで解凍先フォルダに移動して、以下のコマンドを実行。

colortool campbell
# campbellはcolor Scheme名

定義されているカラースキームは以下のような感じ。とりあえず、”campbell-legacy”に設定して、見えなかったものが見えるようになった。

• campbell : The new default color scheme for Windows Console
• campbell-legacy : The first iteration of the campbell scheme
• cmd-legacy : The legacy defaults of the Windows Console
• OneHalfDark : A dark vim-airline theme by Son A. Pham
• OneHalfLight : A light vim-airline theme by Son A. Pham
• solarized_dark : The dark version of a popular color scheme by Ethan Schoonover
• solarized_light : The light version of a popular color scheme by Ethan Schoonover
• deuteranopia : A color scheme targeted towards making red and green clearer to users with red green colorblindness, and deuteranopia.

ということで、忘れないようにメモ。