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

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

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

執筆者:

関連記事

call to action

問い合わせボタンの設置 ⇒ トップページの作り込み4

Call to Action ネットショップで最も大切なのは、Call to Actionだ。 CTAは「Call To Action」の略。日本語の意味としては「行動喚起」といったところ。 Webサ …

Eストアーアワード2010フルーツ部門の年間第一位

武田青果がEストアーアワードのフルーツ部門で日本一に

武田青果がEストアーアワードのフルーツ部門で日本一に Eストアーアワード2010フルーツ部門の年間第一位 有限会社武田青果(高知県高知市弘化台19-14 電話088-882-5323 FAX088-8 …

料理の写真を撮る

ソーシャルメディア全盛の今、レストランで写真を撮ることについて考えてみた

あちこちで食事の写真を撮っているのを見かけるようになった Facebookやtwitterが流行している現在、レストランなどに行くと出された料理をスマホで撮影している人をよく見かけるようになった。 ま …

iphone4s

たった10秒でiPhoneで電話ができないトラブルを解決する方法

iPhone4Sにしてから、実に快適。かつ写真はキレイだしiCloudは便利だし、言うことない! と思っていたら、iOS5.0.1にアップグレードした際に電話の発信も着信も不可能になるというトラブルが …

marquee

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

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