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

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

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, 新着情報
-

執筆者:

関連記事

ワードプレス

IEでJavaScriptエラーが出たトラブルシューティング

このブログはwordpressで制作しているのだが、当初よりIEで見るとJavaScriptエラーが出て困っていた。 いろいろバタバタしていてしばらく放置していたのだが、時間がとれたので見直してみた。 …

365日懸賞

ツイッターで応募できる懸賞企画がスタート

有限会社マップ高知(高知県高知市知寄町1-5-1 電話088-880-0770 FAX088-884-3700 http://www.ewalk.ne.jp/map/)は、2011年3月1日、ツイッタ …

Evernote

Evernoteのノートがどんどん複製されて容量が圧迫される現象が発生した

Evernoteをガシガシと使い倒している俺。 仕事においてもプライベートでも、今や無くてはならない物となっている。 Evernote 5.2.3(無料) カテゴリ: 仕事効率化, ユーティリティ 現 …

MacBook Pro with Retina Display

MacBook Pro with Retina Displayを設定した3日の戦い

MacBook Pro with Retina Display MacBook Pro with Retina Displayを購入した。 macでは実に4年ぶりとなるリプレイスで、今回初めてtime …

卯

年賀状を年内に出して販促するという手法

毎年、年賀状は締切間際になって慌てて書いている。 どうやら今年も同じことになりそうだ。 なにせamazonでプリンターのインクを注文したのは今日だし ←遅いって…(汗;) 年賀状の「年賀」部分を塗りつ …