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

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

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 9 Beta、Firefox 4 Beta、Chrome(Crankshaft)、Opera 11 Beta

Amplify’d from www.lifehacker.jp ■起動および読&#1241 …

ソーシャルリンク

ソーシャルアイコン追加-サイドバーメニューの成形(2) ⇒ STINGER8設定その4

ソーシャルアイコン追加 Facebookなどをやっていると、ホームページから誘導したくなる。 そこでリンク用のアイコンを表示させることにした。 いわいるソーシャルアイコンというやつだ。 随分前にホーム …

ワードプレス

wordpressでedit.phpとplugins.phpが真っ白になるトラブル

「投稿」を表示しようとしても画面が真っ白になるトラブルが発生するようになった。edit.phpとplugins.phpでエラーが発生しているっぽい。手動で再度wordpressを全ファイルアップロード。結果、正常動作するようになった。

cssアニメーション

cssのanimationで文字に変化を付ける ⇒ トップページの作り込み1

animationとは cssのanimationを使うことで簡単に動きを付けられる。 animationプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめ …

fontawsome

ピクトグラムでアイキャッチfontawsomeで簡単設定 ⇒ トップページの作り込み3

ピクトグラムとは 東京オリンピックの話題でも取り上げられていたが、近年はピクトグラムの重要性は増すばかりだ。 ピクトグラム(英語: pictogram)あるいはピクトグラフ(英語: pictograp …