[備忘録]iPhoneでソースコードを確認する方法とWordPressで記事中にコードを埋め込む方法!

 - 

 -  >

 -  ブログ

少しこのブログのスマホ表示でいじりたい部分があって、けどどこをいじればいいのかよくわからなかったので、とりあえずソースコードを見てみようと思って、iPhoneで簡単にソースコードを見る方法を調べました。

そして、それに当たって、ブログの記事中にコードを埋め込む方法も調べたので、それらを備忘録として書いておきます。

 

参考にした記事はこの2つです。

【iPhone】SafariでHTMLのソースコードを確認する方法 | 楽しくiPhoneライフ!SBAPP
WordPressでソースコードを綺麗に表示させるならCrayon Syntax Highlighter! | Yu Fukasawa Photography

 

 

iPhoneのSafariでコードを表示する方法

これは、超簡単なのですが、下記のコードをSafariのブックマークに保存して、それでコードを表示したい記事を開くだけです。

 

2014 10 02 23 50 26

 

さっきの説明だと少しわかりにくいので、もう少し詳しく説明すると、何でもいいのでとりあえずブックマークを作って、そのブックマーク先をこのように上記のコードにします。

そして、ソースコードを表示したい記事で、このブックマークを開くとソースが表示されます。

2014 10 03 00 08 12

 

こんな感じでこれが超簡単です。

他にも色々アプリのものとかもあったのですが、これが一番簡単でかなりヘビーに使う人以外はこれでいいのかなと思います。

 

 

記事中にソースコードを埋め込むプラグイン「Crayon Syntax Highlighter」

そして、上記のコードを記事中に埋め込むためにこの「Crayon Syntax Highlighter」というプラグインを入れました。

これも超簡単で、入れたいコードをプラグインを入れたあとに

で囲むだけです。

自分はたまにしか使わなそうですが、こちらも超簡単なので、便利です!

 

また上記のコードはJavaScriptなので、別にいらなかったみたいなので・・・

別のコードを何となく貼付けてみます。

らふらくさんのまだやってないの?ブログのファンを増やすには記事下のプロフィールが効果的なのに【作成方法も記載】| らふらく^^ ~ブログで飯を食う~を参考に作成した、自分の記事下に張っているプローフィールのコードです。

(これはスマホだと変に表示されるので、スマホでは入ってないです。)

 

PS

これでソースコードの確認はできたのですが、自分が編集した部分のコードをいじってもなぜかちゃんと編集できませんでした・・・・

またここで、色々なゴタゴタがあり、コード表示のために最初は「SyntaxHighlighter Evolved」というプラグインを入れたのですが、何故か自分はちゃんと使えませんでした。

そのため少し後半わかりにくくなってしまっています。

 

 

関連記事はこちら。

これでスマホ表示もデザインできる! wordpressのスマホ対応プラグインWPtouchの使い方!
とりあえず初心者はこのプラグインを入れておけばいんじゃないかな? ワードプレスの入れているプラグイン!
めちゃくちゃ簡単にwordpressの読込速度を速くする方法!

Facebookでシェアする

Twitterでシェアする

はてなブックマークに追加

 更新をチェックする! follow us in feedly

カスタム検索

Popular Post

Copyright© 新卒フリーランサーのブログ!2014 All Rights Reserved.