ソースコードを埋め込み表示させる方法【自動コピー付き】

byRara -
0
ソースコード画像

ブログのソースコードを手作業でフォーマットしたり、コピーしたりするのに疲れていませんか？

そんなあなたに朗報です。

この簡単な手順を使えば、自動コピー機能付きのソースコードを簡単にブログに埋め込むことができ、おしゃれな雰囲気を演出し、時間を節約することができます。

さあ、はじめましょう！

{tocify} $title={目次}

ソースコードデザインの例

.affiliate-box {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

ソースコードのCSSコード

別のブログプラットフォームを使用している場合は、CSSコードを適宜調整する必要があるかもしれません。

しかし、このガイドは特にBloggerユーザー向けに書かれているため、BloggerでのCSSコードの貼り付け方を中心に説明します。

Bloggerサイドバーの「テーマ」から「HTMLを編集」をクリックします。

]]></b:skin>

「]]></b:skin>」の前に以下のコードを貼り付けて下さい。

※Ctrl+Fで探したいコードをコピーして貼り付ければ（Ctrl+V）、簡単に探し出すことが出来ますよ。Macの場合は、Ctrlが「Command」となります。

pre{
    font-family:Monaco, &quot;Andale Mono&quot;, &quot;Courier New&quot;, Courier, monospace;
    background-color:#2c3e50;
    background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    background-image:-moz-linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    background-image:-ms-linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    background-image:-o-linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    background-image:linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
    -webkit-background-size:100% 50px;
    -moz-background-size:100% 50px;
    background-size:100% 50px;
    line-height:25px;
    color:#f1f1f1;
    position:relative;
    padding:0 7px;
    margin:20px 10px;
    overflow:hidden;
    word-wrap:normal;
    white-space:pre;
    position:relative
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    user-select: all;
}
pre:before{
    content:&#39;コードをクリックすると自動的にコピーされます&#39;;
    display:block;
    background:#F7F7F7;
    margin-left:-7px;
    margin-right:-7px;
    color:#2c3e50;
    padding-left:7px;
    font-weight:500;
    font-size:15px
}
pre code,pre .line-number{
    display:block
}
pre .line-number a{
    color:#27ae60;
    opacity:0.6
}
pre .line-number span{
    display:block;
    float:left;
    clear:both;
    width:20px;
    text-align:center;
    margin-left:-7px;
    margin-right:7px
}
pre .line-number span:nth-child(odd){
    background-color:rgba(0, 0, 0, 0.11)
}
pre .line-number span:nth-child(even){
    background-color:rgba(255, 255, 255, 0.05)
}
pre .cl{
    display:block;
    clear:both
}

もし、「]]></b:skin>」の中にCSSコードを挿入してもうまくいかない場合は、代わりに<style>の直後にコードを挿入してみて下さい。

※当Bloggerブログでは、<style>タグの後にCSSコードを挿入しています。

ソースコードのJavaScriptコード

次に、</body>の前に以下のコードを貼り付けます。

<script>
  document.querySelectorAll(&#39;pre&#39;).forEach(pre =&gt; {
    pre.addEventListener(&#39;click&#39;, () =&gt; {
      const range = document.createRange();
      range.selectNode(pre);
      window.getSelection().addRange(range);
      document.execCommand(&#39;copy&#39;);
      window.getSelection().removeAllRanges();
    });
  });
</script>

これで設定は完了です。

自動コピー機能付きでスタイリッシュなソースコードデザインにするには、挿入したいコードを<pre>タグと</pre>タグで囲んでください。

この例で使われているJavaScript/CSSコードは、OpenAIが開発した強力な言語モデル「ChatGPT」によって生成されたもので、様々なコンテンツを作成することができます。

以前はこのようなデザインを見つけるのは難しかったのですが、AIの力により、ブログの目を引くコードブロックをこれまで以上に簡単に作成できるようになりました。

このデザインがブログ管理に役立ち、より見やすく魅力的であることを願っています。

Bloggerブログの始め方と使い方【初心者完全ガイドブック】

Bloggerブログの始め方と使い方について、初心者でも分かりやすい完全ガイドブック！Bloggerブログの始め方と使い方を詳しく解説しています。Bloggerを使って、あなただけの成功するブログを作ろう！

成功するBloggerブログを始めたいなら、この完全ガイドを見逃す手はありません。

SEOを考慮したブログの設計から、データ分析を利用した魅力的なコンテンツの作成まで、成功に必要なすべてをご紹介しています。

今すぐ記事をチェック！

ブログ運営におすすめの便利グッズ

Bloggerのブログ運営において、長時間のパソコン作業が欠かせないことは言うまでもありません。

しかし、その作業が快適に進むためには、便利なツールが必要不可欠です。

そこで、私自身がブログ運営をしている中で便利だと思った商品を紹介します。

まずは、小さめのワイヤレスマウス。

コンパクトなサイズゆえに、どこでも持ち運びができるため、どこでも作業ができます。

また、クリック音が静かなものが多いので、周りの家族や同居人に迷惑をかけることもありません。

作業に集中したいブロガーには必須アイテムと言えるでしょう。

Bluetoothマウス
ワイヤレスマウス Bluetoothマウス

このデュアルモードマウスは、2.4GワイヤレスとBluetoothの両方の接続が可能で、七色バックライトも搭載。クリック音が静音で充電式バッテリーを内蔵しており、超薄型で人間工学に基づいたデザインが特徴的である。また、USBレシーバーはマウスの底に収納されている。

Amazonで今すぐ購入

次に、ワイヤレスイヤホン。

ブログ運営中は音楽を聴きながら記事を書いたり、YouTube動画を視聴することが多いかもしれません。

しかし、イヤホンのワイヤが邪魔だったり、絡まったりすることがストレスになることもあります。

そこで、ワイヤレスイヤホンの使用がおすすめです。

また、ワイヤがないため、家事をしながらでも音楽を楽しむことができます。

Bluetoothイヤホン
【 2023 新型 Bluetooth5.3 】Bluetoothイヤホン

Bluetooth5.3 EDRワイヤレスイヤホンは、消費電力が少なく、伝送容量、接続の安定性が向上している。ノイズキャンセリング機能も搭載され、ZOOMやビジネス会議で活躍できる。音質も良く、AAC/SBCに対応し、大容量バッテリーで最大60時間の音楽再生が可能。

Amazonで今すぐ購入

最後に、バックパックリュックサック。

ブロガーは外出先でも記事を書いたり、撮影したりすることがあるため、荷物をまとめる必要があります。

バックパックリュックサックは、荷物をしっかりとまとめることができるだけでなく、背負っているだけで体への負担も軽減されます。

また、カジュアルなデザインなので、スタイリッシュに外出することができます。

Bluetoothイヤホン
SUNOGE リュック

このバッグは、機内持ち込み可能。防水性能があり、乾湿分離ポケットもある。外部USBポートと盗難防止の隠しポケットがあり、人間工学に基づいた肩ヒモとチェストベルトが装備されている。3WAY仕様で、通勤、出張、通学、旅行など様々なシーンに使える。

Amazonで今すぐ購入

以上が私自身がブログ運営で役立ったと感じた商品の紹介です。

商品のデザインの好みもあると思うので、関連する商品を見て吟味するのもおすすめです。

これらのツールを使うことで、より快適に記事を作成することができるでしょう。

Tags:
コメントを投稿 (0)
前 次