Babylinkの改変が完了したのでコードをブログに載せたい

SNSやってます。

Babylinkの改変が完了したのでコードをブログに載せたい

先日記事にしましたが、シンプルなアマゾンアフィリエイトリンクを張るためにワードプレステーマ作者でもある「わいひら」さんの「Babylink」というウェブサービスを使うことにしました。

ブログにシンプルなアフィリエイトリンクを貼りたい。
2017年1月6日(木)。今日はアフィリエイトリンクのHTMLとCSSの見直しをすることにしました。 メインで描いているブログ...

で、試行錯誤の結果とりあえず完成したのでコードをこのブログに載せようと思ったのですが、CSSならともかくHTMLコードを載せるのって簡単にはいかないんですね。

これまで人の書いたコードを見る事はあっても、自分で記載したことはなかったので、気がつきませんでした。で、やってみて気づきました。

CSSをブログに載せるのは直書きでもまあ見れる

↓変更前のCSS

.babylink-box{
overflow: hidden !important;
font-size: small !important;
zoom: 1 !important;
margin: 15px 0 !important;
text-align: left !important;
}

↓変更後のCSSです。青が変更点、茶色が追加点。

.babylink-box{
overflow: hidden !important;
font-size: medium !important; // 文字の大きさを通常にする
zoom: 1 !important;
margin: 15px 0 !important;
text-align: left !important;
  border: 1px solid #ccc !important; //枠線を追加
}

こんな感じで表記できました。色も自分でつければ問題ありません。

PCから見るぶんには普通に参照できると思います。

HTMLをそのままブログに載せるのは厳しい

↓これが元のHTMLです。(長いので少し削っています)

<div class=”babylink-box” style=”overflow: hidden; font-size: small; zoom: 1; margin: 15px 0; text-align: left;”><div class=”babylink-image” style=”float: left; margin: 0px 15px 10px 0px; width: 75px; height: 75px; text-align: center;”><a href=”http://www.amazon.co.jp/exec/obidos/ASIN/B01EML8FZ4/アフィリエイトID/” rel=”nofollow” target=”_blank”><img style=”border-top: medium none; border-right: medium none; border-bottom: medium none; border-left: medium none;” src=”https://images-fe.ssl-images-amazon.com/images/I/61CQ7jxxr1L._SL75_.jpg” width=”65″ height=”75″ /></a></div><div class=”babylink-info” style=”overflow: hidden; zoom: 1; line-height: 120%;”><div class=”babylink-title” style=”margin-bottom: 2px; line-height: 120%;”>いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 「いちばんやさしい教本」シリーズ</div></div></div>

こんなの見せられたら、バカかっ?て思いますよね。

これを全部コピーしてから使ってねという事であれば、まだ良いかもしれませんが、このコードのクラス babylink-infoをホゲホゲして〜なんて説明されると、「これ全部自分のエディッタにコピーしてそれを読み解けって事?優しくないなぁ」なんて思っちゃいます。

じゃあどうするか?

という事でどうすれば良いかグーグル神に尋ねてみました。
すると、こんな回答を頂く事ができました。

↑ GithubのGistが手軽で良いよっていう記事です。プラグイン、Javascript、Gistそれぞれを使用した場合のメリットデメリット比較までしてありとても分かり易かったです。

↑ ワードプレスのプラグイン「SyntaxHighlighter Evolved」ならコード表記できて良いよっていう記事です。

私の場合、プログラミング初心者のくせに2016年の年末に「GitHubの教科書」なる本を一応読了したという事もありGithubを使ってみたいと思っていましたので、Gistの導入に挑戦する事にしました。

最後に

プラグインを導入する場合はとても手軽で簡単という反面、プラグイン同士の競合が懸念される事と動作が重くなるというデメリットがあると記載がありました。

そういえば私のブログは画像もサイズの大きな画像もたくさん載せているし、速度アップの事をまったく考えずに今までやってきました。

記事数も増えてきた事から動作が軽くなるようなテクニックも導入しないとなぁと思ってます。

コメント

  1. 通りすがりのおっさん より:

    htmlのソースコードをブログに乗せたい場合はpreタグとcodeタグを使用すれば大丈夫です。
    ただ、Gistみたいに行番号は出ませんが。

    • spf36 より:

      コメントありがとうございます。

      私の使っているワードプレステーマ「Simplicity」のサイトで検索してみたら、
      確かにpreタグでのソースコード表示機能がありました。

      カスタマイズ内のソースコードでpreタグで表示というところをチェックするだけでした。
      試してみるとおっしゃる通り行番号が出ませんでしたが、
      短いソースコードを載せたいだけでしたので十分満足な結果を得られました。

      御教唆いただきありがとうございました。^^