アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css 新着情報

コード表示の最適化 ⇒ STINGER8設定その8

投稿日:2019年5月2日 更新日:

コードが見にくい

preタグでコードを表示した時に困るのが、いまいち見づらいことだ。

コードのハイライト表示を導入したことで、多少は見やすくはなっていた。

google code-prettifyでコード表示をハイライト(動作しないので焦るが解決済み) ⇒ STINGER8設定その2

しかし本文とコードとの境界が分かりにくく、間隔も狭かったために見づらいことこの上ない。

しかも、1行のコードだとスクロールバーが邪魔をしてコードを見ることも選択することもできない場合がある。

これはなんとかしないと。

cssで修飾

そこで、cssで表示を調整することにした。

前回の引用部分と考え方は同じだ。

引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる ⇒ STINGER8設定その7

pre{
padding: 5em 1em 2em;
margin: 2em 0 4em;
border: 1px solid #aaa;
border-radius: 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
background: #fff url("https://amiens.jp/wp-content/uploads/2019/05/code.gif") 10px 10px no-repeat;
}

これで見やすくなった。

-CMS, css, 新着情報
-

執筆者:

関連記事

marquee

marqueeで電光掲示板風に文字を流す ⇒ トップページの作り込み8

marqueeとは marquee(マーキー)はインターネット黎明期にはやったテクニックだ。 電光掲示板のように文字が流れていくテクニックを指す。 ニコニコ動画を想像すれば、分かるだろう。

ホーム画面に入れておきたいiPhoneアプリ

2011年にホーム画面入りした新しいiOSアプリ5選

あっという間に大晦日。 最近特に月日の経つのが早くなってしまい、焦り気味である。 一年を振り返ってみると、俺のiPhoneのホーム画面に入れているアプリも大きく様変わりしている。 今年最後のブログ更新 …

WorldCard Mobile

WorldCard Mobileを入れた

名刺管理ソフトWorldCard Mobile 前々から気になっていたiPhoneアプリ「WorldCard Mobile」を導入してみた。 無料バージョンで試してみると、実に認識力が高い。 価格は1 …

HDMIケーブル

HDMIケーブルにて価格破壊を考える

11月の話で恐縮だが、テレビを買った。 ご多分に漏れず、エコポイントを意識して駆け込みで購入したのだ。 ところが、その時点でテレビの納期が1ヶ月先とのこと。 そりゃあないでしょ! という気持ちになった …

ツイッター鯨

twitterは死んだのか?

ツイッター大丈夫? 友人と話をしている際に、「最近ツイッターが元気が無いのではないか?」という意見が出た。 どうやら、最近はフォロワー数の伸びに以前のような勢いが感じられないらしい。 また別の友人の意 …