…で長文を省略するCSS

Instagramのフィードを表示するコードに使いたくて調べる。全ての投稿内容を記載するわけにいかないので、「…」で省略するしたいのだけど、JS使うと複雑だったり負荷がかかったりすると嫌なのでCSSで簡単に対応したい。

参考:IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する

モダンなWebブラウザならline-clamp、IE11はwrap-flowを使う。

See the Pen InstagramFeedList by yuming (@yuuuming) on CodePen.

.InstagramFeed ul li span.caption {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
}
.InstagramFeed ul li span::before, .InstagramFeed ul li span::after {/*IE用。疑似要素に除外設定*/
  content: '...';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 2em;
  -ms-wrap-flow: start;
}
.InstagramFeed ul li span::after {
  background: currentColor;
  color: white;
  top: auto;
}
@supports (-webkit-line-clamp: 2) {/*モダンブラウザ用*/
  .InstagramFeed ul li span {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  .InstagramFeed ul li span::before, .InstagramFeed ul li span::after {
    content: normal;
  }
}

自作テンプレ作成時のデバッグメモ

WordPressの自作テンプレ作成時に、デバッグ方法を調べるのに手間取ったので、方法をまとめます。

ページ上に直表示

一番手っ取り早い方法。最後の「;」を忘れてエラーになりがちなのと、タグ閉じ忘れなどhtml構文ミスって表示おかしくなりがちなので気を付ける。

※「’」と「”」の違いはほぼないと思っているけど、たまにエラーになるので、またきちんと調べたい。

参考:https://www.php.net/manual/ja/function.var-dump.php

echo '<div>ページ上に直接表示される</div>';

変数をタグで囲って出力したいときなどは、echoを行で分けるのもわかりづらいので「.」(ピリオド)で文字列を連結して表示すると短く済んでわかりやすい。

$data = '連結する変数';
echo '<div>' . $data . '</div>'
$data = ['配列とか','Datetime型とかも','詳しく表示'];
var_dump($data);

コンソールでの出力

javaScriptのconsole_log()を使う方法。直接ページのレイアウトに影響を受けたくない場合に便利。

参考:https://www.php.net/manual/ja/debugger.php

//////コンソール出力//////
$myvar = '出力内容';
console_log( $myvar ); 

function console_log( $data ){
  echo '<script>';
  echo 'console.log('. json_encode( $data ) .')';
  echo '</script>';
}

アラート表示

実行されたタイミングでモーダルが表示される。わかりやすいけど、ちょっと鬱陶しい。下のコードの例は、wp_head アクションが実行されるタイミングでアラートが表示される。

//////アラート表示//////
add_action( 'wp_head', 'hook_javascript' );

function hook_javascript() {
	$output = "<script> alert('Page is loading...'); </script>";
	echo $output;
}

ログファイルとして出力

ファイルにログとして出力内容を残す場合の例。アクセストークンを使ったjsonファイルの取得のデバッグで、処理履歴的に内容を残したくて作った。エラーがあった場合の出力もこんな感じでいけそう。ただし、ファイルの書き込み処理は動作負荷が少し増えるので注意。

putlog("出力されるログ内容" . "\n");

function putlog($logdata){// 実行時刻と引数のデータを指定ファイルに追記する
	$putfile = dirname(__FILE__). '/_log.txt';//実行しているphpファイルのディレクトリにファイル保存場所を指定
	$current_datetime = new DateTime();
	$puttext = "\n".'//log: '.$current_datetime->format('Y-m-d H:i:s') .'//'."\n".$logdata;

	file_put_contents( $putfile, $puttext, FILE_APPEND);//内容を追記する(ファイルがなければ作成される)
}

WEB制作でよく使う便利ツール・ページのメモ

私がWEB制作時に良く参考・使用しているWEBページをまとめます。

デザイン関連

WEB色見本 原色大辞典 – HTMLカラーコード

適当なカラーを選びたいときに重宝しています。

テキスト比較ツール difff《デュフフ》

流し込み用のダミーテキストを作成できます。

wordmark.it

任意の文字列を、使用中のP Cにインストールされているフォントで一覧表示できます。

Placehold.jp

ダミー画像を簡単に作成できます。

コーディング関連

HTMLクイックリファレンス

よくお世話になっています。HTML、CSSであれなんだっけ?と思って検索すると、だいたい出てきます。

Bracketsが急に重くなった

win/macどちらもOK、かつ無料で利用できる上に動作が軽いと評判でしたので、エディターはBracketsを使用しています。プラグイン(エクステンション)の追加で使いやすいようにカスタマイズできるし、快適に使用できていたのですが、先日突然動作が重くなってしまいました。カーソルをマウスで移動するのにも、3秒くらいタイムラグが出るので、流石に作業していられません。

以下のようなサイトを参考にして、色々試していたのですが、しばらく原因がわからず四苦八苦。

「Brackets」の挙動がおかしくなったときのとりあえずの対処法

Bracketsのアップデートをしたら挙動がおかしくなりフリーズするようになった話

考えられる原因

入れているエクステンションのせいで重くなっている

以前は普通に使えていたので、まずはエクステンションを疑いました。エクステンションが多いと重くなるという情報もあるので、とりあえず、全てのエクステンションを無効にしてみて、動作を確認してみました。

プラグインが影響してるか確認する方法

[メニューバー]の[デバッグ]から[拡張機能なしでリロード]で確認します。
もし、その状態で動いたならば何らかのプラグインが影響していると考えられるため、原因となるプラグイン自体を削除すれば解決します。

拡張機能をOFFにすると、多少ましになりました。使えるレベルですが、やはりまだ1秒ほどのタイムラグがあって、作業に影響します。ちなみに、「Highlight Multibyte Symbols」(全角英数字・記号をハイライト表示するエクステンション)を非表示にすると使える程度に改善されました。

コードが長すぎる

触っていたコードが結構長かったので、関係あるかな?と思ったのですが、他のファイルに切り替えても、プロジェクトを切り替えても、状況は変わらず。

プロジェクト内にファイルが多すぎる

プロジェクト内にファイルが多すぎると、Bracketsがフリーズするようです。

Bracketsのプロジェクトファイルが多すぎるとフリーズする

今回は上記リンク先のような表示がある訳ではなく、フリーズでもないので、関係ないとみました。

評判が良いエディタなのに、検索してもあまり情報が得られず…しばらく頭を抱えていました。

発覚した原因

原因がわからなかったので、Bracketsをダウングレード、再インストールしてみましたが、変わらず…

確認バージョン:1.13(win), 1.12(win)

環境設定をいじれば直るのか、テーマが問題なのか、なんなんだ…以前は軽かっただけに、なぜ急に重くなったか不明です。継続調査します。