HTML+CSSのテストコードを公開してみようかな

LPツールのためにテストコードを書いているところです。本番はデザイナーさんにお願いすることになりますが、私自身も依頼者として「HTML+CSS」を理解しておく必要はあると思うのです。「できないから外注する」というよりも「できるけど外注する」という方がいろいろと良いわけです。

その一番の利点は「会話ができます」。ビジネスのあらゆる局面で会話、すなわちコミュニケーションが発生するのですが、お互いがベースを分かっていて話し合うのと、分からずに話し合うのでは、最終的な完成物の完成度に大きく影響します。思ったようなものが出来上がら勝ったということがあるわけです。

どんなものにも技術的に「できるもの」と「できないもの」があります。依頼者が必死にうっ滞欠けても「できないものはできない」わけです。しかし、できるものなのに作成者の技術力によってできないということありえます。また「やりたくない」から「できない」と言ってしまうことも考えられます。

作成者からすれば「この人、なに言っているのかわからない…」ということもあるでしょう。どっかで見たことのあるデザインを真似てくれとか、「できるでしょ?これぐらい」という安易な言葉を言ってくる依頼者だっています。私はそういう傲慢な依頼者になりたくありません。

会話ができるということはとっても重要な事なのです。ということでHTML+CSSを勉強中なのですが、せっかくテストコードを書いたのだからちょいと公開してみようかと思っています。

で、このサイトはWordpressで運営されているのですがHTMLやCSSのコードを投稿するのに便利なプラグインがあったので入れてみました。

SyntaxHighlighter Evolved
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-22-21-34-36

たくさんの同種プラグインがあるのですが、結構有名なものです。

このプラグインを導入するとこんな感じで表示されます。

[html]
<article data-part=”titleplus” data-template=”sample” data-variation=”1″>
<div data-edit=”onepoint”><span class=”glyphicon glyphicon-fire”></span></div>
<h2 data-edit=”title”>ここにタイトル</h2>
</article>
[/html]

まだ技術力としてはまだまだですが、ちょっとずつお勉強して行きます。とはいえ、それほど、のんびりできないけど。

(追記)

コード表示のプラグインを変更しました。SyntaxHighlighter Evolvedは投稿画面で「ビジュアル」と「テキスト」を切り替える度に改行がドンドンと増えていくという問題が発生。そこで別なプラグインを探してみました。「Crayon Syntax Highlighter」というのが結構有名でたくさん使われているようなのですが、一方で「重い(表示までに時間がかかる)」という問題もあるらしいいのでパス。

ということで、調べてみたところ「highlight.js」というものを見つけました。軽いということが特徴で「軽さ」重視の私としてはこちらの方がいいですね。ということで導入します。

ちょっと面倒なのがテーマの編集でコードを入れないといけないこと、実行コマンドを設定する必要が有ることです。簡単といえば簡単なことなのですが、テーマの編集なんてやったことない人にはハードルが高いかもしれませんね。で「プラグイン化しようかな…。あ、もしかしたらすでにあるかも」と調べてみたら、やっぱりありました。素晴らしいー。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-23-01-36-41

現在の最新バージョンが9.8.0でプラグインが対応しているバージョンは9.7.0。まー、いいんじゃないでしょうか。ということで早速導入しました。その結果、先程のCrayon Syntax Highlighterのサンプルコードはただの文字列になってしまっています。

<article data-part=”titleplus” data-template=”sample” data-variation=”1″>
<div data-edit=”onepoint”><span class=”glyphicon glyphicon-fire”></span></div>
<h2 data-edit=”title”>ここにタイトル</h2>
</article>

開発進捗html5

Posted by ライトニング 今村 吉宏


PAGE TOP