[SyntaxHighlighter]デザインのカスタマイズ

(っ´∀`)っ < プログラムのソースを記事に載せるとなんだか見づらい。
(っ´∀`)っ < よく色んなサイトで見かけるエディタ風な見た目にしたいな。

<ul>
	<li>セキセイ</li>
	<li>オカメ</li>
	<li>コザクラ</li>
</ul>

ということで見つけたのが、WPのPlug-INでSyntaxHighlighterです。
ただ、Version 3.xだと設定画面でツールバーにチェックいれても表示されませんでした。

# 参考サイト (導入方法 & version 2.x と 3.x の違い)
ソースコードの表示を整えてくれるプラグイン「SyntaxHighlighter Evolved」

# 参考サイト (設定方法 & 使い方)
SyntaxHighlighter Evolved の使い方 (設定&記述例)

そしてデフォルトだと行間がとても狭いため、眉間に皺が寄ってしまいます。
その部分を含め、レイアウトを何箇所かカスタマイズしたいので調べてみました。

# 参考サイト
SyntaxHighlighter Evolvedのデザインをカスタマイズする

まるっとコチラで紹介されていたコードをいただき、更に少しカスタマイズして使っています。

・行の背景色を交互に表示したい。→ ボーダー柄にしたい。
・タイトルをSource Codeではなくその都度、指定したい。
・ハイライトの色を変えたい。

※変更するファイル:wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css
※Version3.xのDefaultを使用中

ということで一部変更したのがコチラ↓


.syntaxhighlighter .line.alt1 {
   background-color: #eee !important;   /** 色を変更 **/
}
.syntaxhighlighter .line.alt2 {
   background-color: #fff !important;   /** 色を変更 **/
}

↑の行背景と↓のハイライト変更は初めから書いてあるCSSを変更しています。

.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2 {
   background-color: #ffff66 !important;    /** コード内のハイライト色 **/
}
.syntaxhighlighter .gutter .line.highlighted {
   background-color: #ffff66 !important; /** 行番号のハイライト色 **/
   color: black !important; /** ハイライトが掛かった場合の行番号の文字色 **/
}

以下は、上記サイトで紹介されていたコード内での変更です。

.syntaxhighlighter:before /*タイトル部分追加*/{
   display: block !important;
   /** content: "Source Code"; **/
   /** タイトルが"Source Code"で統一されてしまうため削除 **/
   color: #6f6e69 !important;
   ¦/*省略*/
}
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span{
   line-height: 1.5em !important;     /*行間調整*/
}
.syntaxhighlighter{
   padding: 1px !important;
   /** background: #fff !important; 外周背景色 **/
   /** これがあるとタイトルの背景色がグレーではなくなってしまうため削除 **/
}

Version3.xでのツールバーの表示がどうしてもわかりませんでした。
Version2.xを使うとツールバーは表示されるのですが、今度はタイトルが表示されない…
いやはや・・・CSSやJSのコード見てもサッパリ\(^O^)/でした。

    ↓いつもありがとうございます★ポチは更新の励みになります★↓
  • Twitter
  • にほんブログ村 鳥ブログ セキセイインコへ

[WordPress]記事表示-全文?抜粋?

テーマをDLしてきたのはいいのですが、
不要な機能や表示を隠したり、変更したりと色々カスタマイズしていました。

が、全然解決できない問題がありまして。

(っ´∀`)っ < カテゴリー検索後、記事が抜粋表示される!
(っ´∀`)っ < 抜粋される箇所を指定したい。若しくは全文表示されて欲しい。
(っ´∀`)っ < HTML無視されるのはちょっとやだなぁ…

ということで、グーグル先生にしつこく質問(検索)しまくり、

ようやく解決策を導きだせたサイトがありました。
非常にわかりやすい説明で助かりましたー\(^O^)/

# 参考サイト(the_excerpt() と the_content() の違い)
http://wp.tohima.com/archives/120

    ↓いつもありがとうございます★ポチは更新の励みになります★↓
  • Twitter
  • にほんブログ村 鳥ブログ セキセイインコへ
  プロフィール  PR:無料HP  妙高自動車学校  幼稚園 教諭  Webデザイン 専門学校  タナベ  中古ホイール 熊本  タイヤ エスティマ 新品  短期大学  激安中古ホイール  不動産 投資  教員免許 大学  株プロフェット 投資顧問  中古パーツ 旭川  名簿販売