おはようございます!

また1週間が始まりましたね✨




ブログはもっぱらモブログ派


といっても、つわりが酷く仕事をお休みしているためお布団の中からこのブログをお送りしています。


Bloggerのテーマを「Smart」に変えて、大まかな設定をしたとき以外はほとんどスマホから記事を書いたり、カスタマイズをしています。


本当はパソコンから書ければ時間の短縮になるんでしょうが😂


無理をして体調が悪くなる方がいけないので、大人しく布団でスマホからブログを書きます!



Bloggerは記事にソースコードを貼るだけでも一苦労?



Bloggerのテーマを「Smart」にしました。必要なモノが揃っていてBlog初心者に特にオススメ」で、Bloggerのテンプレートを変えた記事を書きました。


そのときに気づいたのが、カスタマイズに使ったソースコードが上手く記事に反映出来ない😱💦


もし、また違うブログを作りたくなった時にこのブログを見ればまったく同じカスタマイズが出来るように、このブログにソースコードを残そうと思っていたのに😭


だけど大丈夫!


コードをブログに貼り付ける方法【blogger】」を参考に、すぐに貼りつけられるようになりました。


こんな感じで「【Blogger】ラベルを階層化する方法」からお借りしたコードだってかっこよく貼り付けられちゃいます🥺✨


まずはコードをコピーしてHTML編集に貼り付ける



※テーマ編集をする場合は必ず始めにバックアップを取ったほうが安全です


<!-- SyntaxHighlighter 追加 -->

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"/>

<!-- autoloader対応 -->

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js"/>

<!-- /HTMLと他言語を同時にハイライト対応用(html-script: true) -->

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"/>

<!-- テーマの読み込み(shCore.css内包版) -->

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreFadeToGrey.css" />

<script language='javascript' type='text/javascript'>

var shCdnUrlStr='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83';

SyntaxHighlighter.autoloader(

'actionscript3 as3      '+shCdnUrlStr+'/scripts/shBrushAS3.js',

'bash shell             '+shCdnUrlStr+'/scripts/shBrushBash.js',

'coldfusion cf          '+shCdnUrlStr+'/scripts/shBrushColdFusion.js',

'cpp c                  '+shCdnUrlStr+'/scripts/shBrushCpp.js',

'c# c-sharp csharp      '+shCdnUrlStr+'/scripts/shBrushCSharp.js',

'css                    '+shCdnUrlStr+'/scripts/shBrushCss.js',

'delphi pascal pas      '+shCdnUrlStr+'/scripts/shBrushDelphi.js',

'diff patch             '+shCdnUrlStr+'/scripts/shBrushDiff.js',

'erlang erl             '+shCdnUrlStr+'/scripts/shBrushErlang.js',

'groovy                 '+shCdnUrlStr+'/scripts/shBrushGroovy.js',

'html xml xhtml xslt    '+shCdnUrlStr+'/scripts/shBrushXml.js',

'java                   '+shCdnUrlStr+'/scripts/shBrushJava.js',

'javafx jfx             '+shCdnUrlStr+'/scripts/shBrushJavaFX.js',

'javascript js jscript  '+shCdnUrlStr+'/scripts/shBrushJScript.js',

'perl pl                '+shCdnUrlStr+'/scripts/shBrushPerl.js',

'php                    '+shCdnUrlStr+'/scripts/shBrushPhp.js',

'text plain             '+shCdnUrlStr+'/scripts/shBrushPlain.js',

'powershell ps          '+shCdnUrlStr+'/scripts/shBrushPlain.js',

'python py              '+shCdnUrlStr+'/scripts/shBrushPython.js',

'ruby rails ror         '+shCdnUrlStr+'/scripts/shBrushRuby.js',

'scala                  '+shCdnUrlStr+'/scripts/shBrushScala.js',

'sql                    '+shCdnUrlStr+'/scripts/shBrushSql.js',

'vb vbnet               '+shCdnUrlStr+'/scripts/shBrushVb.js'

);

SyntaxHighlighter.config.bloggerMode = true; // Blogger対応

SyntaxHighlighter.defaults['toolbar'] = false; // 「?」表示

SyntaxHighlighter.defaults['auto-links'] = false; // 自動リンク

//不具合が起きる為コメント化。使用時はpre側で要記述。

//SyntaxHighlighter.defaults['html-script'] = true; //HTMLと他言語を同時にハイライト

SyntaxHighlighter.defaults['tab-size'] = 2; //tabインデント量

// コード表示させるタグ名(デフォルト"pre")

// SyntaxHighlighter.config.tagName="";

SyntaxHighlighter.all();

</script>

<style>

.syntaxhighlighter {

  font-size: 14px !important; /* フォントサイズ */

  margin: 0.5em 0em 0.5em 0em !important; /* 上下空き */

  border: 1px solid #bbbbbb !important; /* 罫巻 */

  /* 角丸 */

  -webkit-border-radius: 10px !important;

  -moz-border-radius: 10px !important;

  -ms-border-radius: 10px !important;

  -o-border-radius: 10px !important;

  border-radius: 10px !important;

}

.syntaxhighlighter table caption {

  padding: 0.3em 0 0.1em 1em !important; /* タイトルpadding */

  color: #ffffee !important; /* タイトル文字色 */

  background-color: #666666 !important; /* タイトル背景色 */

}

.syntaxhighlighter, .syntaxhighlighter div,

.syntaxhighlighter code, .syntaxhighlighter span {

  line-height: 1.2em !important; /* 行間 */

}

.syntaxhighlighter table td.code {

  padding: 0.3em 0 !important; /* コードエリアのpadding */

}

.syntaxhighlighter {

  background-color: #222222 !important; /* コード背景色 */

}

.syntaxhighlighter .line.alt1 {

  background-color: #222222 !important; /* コード偶数行背景色 */

}

.syntaxhighlighter .line.alt2 {

  background-color: #333333 !important; /* コード奇数行背景色 */

}

.syntaxhighlighter .comments, .syntaxhighlighter .comments a{

    color: #88eeee !important; /* コメント色 */

}

.syntaxhighlighter .preprocessor {

  color: #88eeee !important; /* #以降の色 */

}

.syntaxhighlighter .value {

  color: #00cc00 !important; /* 代入数字色 */

}

.syntaxhighlighter .keyword {

  color: #ff0000 !important; /* キーワード色 */

}

.syntaxhighlighter .script {

  font-weight: bold !important;

  color: #ff0000 !important; /* スクリプト色 */

  background-color: none !important;

}

.syntaxhighlighter.nogutter td.code .container textarea,

.syntaxhighlighter.nogutter td.code .line {

  padding-left: 1em !important; /* 行番号非表示時左空き量 */

}

.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {

  background-color: #114466 !important; /* 行強調時、行背景色 */

}

.syntaxhighlighter .line.highlighted.number {

  color: white !important; /* 行強調時、数字? */

}

.syntaxhighlighter .gutter .line.highlighted {

  background-color: #3185b9 !important; /* 行強調時、行番号背景色 */

  color: #121212 !important; /* 行強調時、行番号数字色 */

}

</style>

<!-- SyntaxHighlighter 追加 -->


をすべてコピーする。




テーマ編集のHTMLから編集で「Ctrl+f」を使って「</body>」を探しだすす。


見つけた</body>タグの上に、さっきコピーしたコードすべてを貼り付ける。


そしてテーマの保存を押す。



記事作成時の使い方


コードを記事を貼るには、HTML編集の方から書く必要があります。


<pre class="brush:text" title="タイトル">

使いたいコード

</pre>




上記のコードをコピーして、使いたいコードの部分をお好きなコードに変えて使ってください。



いろいろ細かい説明は、今の私には難しすぎるのでtony様の「コードをブログに貼り付ける方法【blogger】」を熟読頂き、使ってくださいね。



注意点:コードの変換が必要


使いたいコードを「<pre class="brush:text" title="タイトル">」「</pre>」の間に貼る前に、「<>」を「&lt;」と「&gt;」に変換しないといけないんです😅


Bloggerなにかと面倒くさい。


でも大丈夫!


Bloggerのコード変換ツール


コードを自動で変換してくれるページがあるんです!


というページで、使いたいコードをコピペして変換するだけ!


しかも、「<pre class="brush:text" title="タイトル">」「</pre>」のコードも自動的についているので、変換したコードをそのままBloggerのHTML編集で貼り付けるだけ😊


なんという魔法!



先ほど紹介したかっこしいいソースコードの表示じゃなくて、シンプルにコードだけをブログに貼り付けたい時上下の「<pre class="brush:text" title="タイトル">」「</pre>」を消して変換したコードだけをHTML編集で貼り付けてください☺️


スマホからブログを書く身としては、簡単な作業が1番大切なので有り難く使わせていただきます。



あれ?あのサイトのアドレスなんだっけ?と分からなくなってしまった方のためにサイドバーにお役立ちリンクとして載せてあります。


アドレスが分からなくなったときにはそちらから、ぜひどうぞ🥰


外国語勉強のブログのはずなのに、ブログのテンプレートを変えたがためにブログのカスタマイズ紹介しか書いてません🤔


しばしお付き合いをよろしくお願いします😊