1515338507 いつもありがとうございます。

ブログのサイトをみているとCSS等のコードを記入してブログに貼り付けていらっしゃいますけどもこれは何というものにCSS等を記入してるのでしょうか?これはどこで手に入るのでしょうか?

全くド素人の質問で申し訳ありませんが商品名?を教えていただくかダウンロード先をお手数ですが、教えてもらえますでしょうか?
宜しくお願いします。
添付画像にある黒い部分をお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2018/01/10 18:35:43

ベストアンサー

id:portal18 No.1

回答回数150ベストアンサー獲得回数62

はてなブログにソースコードを貼りつけるのは、いくつかの方法があります。

はてなブログのシンタックス・ハイライト機能を使用する

これははてなブログなど、はてなのサービスで簡単に貼りつける方法です。はてなのサービスで貼りつけるなら、これが一番手軽でしょう。ただし、本当にシンプルに貼りつけるだけなので、各種機能は利用できません。(添付された写真でいえば左の行番号や右上のメニューボタンなどがない)
なお、この方法ははてな以外ではできません。はてなであっても、一部のサービスや機能などで利用できない場合があります。(たとえばはてなブログのMarkdownモードで記事を書いた場合や人力検索はてなの質問欄に書いた場合は利用できない)
zenigatakun さんははてなブログ以外のブログを使用しているようなので、この方法は使えませんが...。(ほかに読むかたもいるかもしれないので参考までに一応書いておきます)
はてなブログのはてな記法モードで記事を書いている場合や、その他はてなサービスに投稿する場合、本文中に

 >|css| <!-- ← | | の間にファイル形式を入力します。詳細は下記のヘルプリンクへ。 -->
 .entry-read.a{
 color;#fff;
 }
 ||<

のように記述することで、

.entry-read.a{
color;#fff;
}

このように色がついた状態で表示されます。
はてなブログの見たままモードで記事を書いている場合は、少々面倒ですがいったんはてな記法モードで上記のように記入し、ブレビューから該当行だけコピーペーストするとよいでしょう。
ハイライト機能に対応しているファイル形式については、はてなダイアリーのヘルプをごらんください。

なお、上記の方法で生成されたページのソースをよくみると、

<pre class="syntax-highlight">
classなし<!-- ソースの色付けされない部分についてはclass属性はつきません。 -->
<span class="synStatement">synStatement</span>
<span class="synConstant">synConstant</span>
<span class="synPreProc">synPreProc</span>
<span class="synType">synType</span>
<span class="synIdentifier">synIdentifier</span>
<span class="synComment">synComment</span>
<span class="synSpecial">synSpecial</span>
</pre><!-- これは着色される色をわかりやすくするためのイメージで順番は適当です。下と照らしあわせてどのような色がついているかをご確認ください。 -->

classなし
synStatement
synConstant
synPreProc
synType
synIdentifier
synComment
synSpecial
入力したファイルの種類にもよりますが、このようにclass属性で色付けされるので、スタイルシートをカスタマイズすることで簡単に表示色が変更できます。

Gistを使用する

https://gist.github.com
このページを開くと、ソースコードを入力する枠 (一番大きい枠) 、タイトルを入力する枠 (Gist description...) 、ファイル名を入力する枠 (Filename including extension...) があるので、それぞれに入力して「Create public gist」を押すことで自動的にソースコードへのリンクと埋め込み用タグが発行されます。カスタマイズ性はあまりよくありませんが、はてな以外を利用しているならこれが一番簡単でしょう。
なお、はてなブログでは記事を書くときのサイドバーに「Gist貼り付け」という項目があるため、はてなブログでも手軽に貼りつけられます。
※ファイル名を入れ忘れると、ハイライトされません。入れ忘れないようにしましょう。(CSSの場合のファイル名は「〇〇.css」のように入力すること)

プラグインを使用する

Javascriptを使用することでハイライトを実現させているプラグインもあります。
この方法は、Javascriptのデータをダウンロードして実行するので、自分でサーバーを設置してブログを運営している場合や、はてなブログの有料オプションを使用しており、上記2つの方法ではできない (行番号や右上メニューの有無などの) 細かなカスタマイズをしたい場合はこちらが向いています。
プラグインは種類が多数あり、こちらではひとつひとつのプラグインについてとくに説明はしないので、この方法に興味を持った場合は「ソースコード ブログ」のようにインターネット検索して、自分にあったプラグインをさがしてみてください。

id:zenigatakun

こんばんは。
さっそく懇切丁寧なご説明ありがとうございます。
また、お返事が遅れまして大変申し訳ございませんでした。
おかげ様でヒントをもとに検索したら思ってたものが見つかりました。
これでスッキリいたしました。
ほんまにありがとうございました。また、宜しくお願い申し上げます。

2018/01/10 18:35:26

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません