スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SyntaxHighlighterのデザインをいじる。


 以前導入した「SyntaxHighlighter」の表示領域が少し寂しいので、ちょっといじって見ることにした。
 実はもうすでに初期の段階から少しいじっているのだけど。
 変更した内容は、線の色。

 緑の色が気に入らなかったので、青色のコードに変更しました。
 「shCoreDefault.css」をメモ帳でも何でも適当なエディタで開いて、以下の部分を置換。

 #6ce26c → #5687d5

 別名で名前を付けて、ファイルをブログにアップロード。
 テンプレートの編集から、headの中の shCoreDefault.css の部分を新しく付けた名前に変えるだけでした。

 で、今の時点は下の画像のとおり。
 これからいじっていったらおそらく前のページも変わってしまうので画像で残しておこう。

1.jpg


 意外と簡単に出来たので、他にもあれこれしてかっこよくしちゃおうぜってコトで、情報を漁ります。
 ここら辺を参考に。
 →「SyntaxHighlighter」で知らなきゃ損する7つのカスタマイズ
 →ソースコードをSyntaxHighlighterで読み易く!

 色の見本はこの辺りで。
 →color-hex.com

 まずは、枠線を追加してみます。
 「shCoreDefault.css」の最後に以下を追加して、ファイルをアップロードします。

 .syntaxhighlighter {
margin: 0 !important;
border: solid 1px #5687d5 !important; /*枠線を追加します*/
}


 ページを更新すれば・・・  
  (重要!FC2ブログで、アップロードで更新してもすぐに反映されない問題はこちら!)
  (自分は最初何度かハマりました。上記方法+プレビュー画面更新数回ですぐ反映されます。)

2015-06-01_16h25_10.jpg
 
 おぉー。
 更に、偶数奇数で色をシマシマに。

.syntaxhighlighter .line.alt1 {
background-color: #a4c7ff !important; /*偶数行の背景色を変更*/
}
.syntaxhighlighter .line.alt2 {
background-color: #FFFFFF !important; /*奇数行の背景色を変更*/
}

 ↓
2015-06-01_16h35_38.jpg

 最後に、タイトル設定時の色も設定しておきます。


 .syntaxhighlighter table caption {
padding: 0.2em 0 0.2em 1em !important; /*タイトルの余白*/
color: #FFFFFF !important; /*タイトルの文字色*/
background-color: #5687d5 !important; /*タイトルの背景色*/
}


 そうそう。タイトルの付け方もメモっておこう。


sample text



 いい感じになりました。
 
 でも、やっぱり最後の2行が残るのがわかりません。

 あと他の方がやっているように、このページだけとか特定の部分だけのスタイルを変更するって技術が
まだ無いから、この先スタイルを変更すると、一番最初のものから全て変わっちゃうんだろうなぁ。
 それはそれでいいんだけど、今までの経緯というかこのページの話の流れもすでにおかしいね。
 
 まぁいいか。このページの画像とスタイルが変わっていたら、きっとこの後いじったんだなということで。
 またいじります。でわ。




 
スポンサーサイト

コメントの投稿

管理者にだけ表示を許可する
プロフィール

SiO_the_ORANGE

Author:SiO_the_ORANGE
 
DIYとか自作とか修理って言葉に反応します。

 いろんなことを勉強しながらちょっとずつ出来ることを増やしていこうと目論むブログです。

 情報というよりメモですが、お気付きの点あればいろいろ教えてください。

コメント大歓迎です!

最新トラックバック

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。