valid-seoで外部JavaScriptファイルを読み込みピクトグラムを表示

当サイト作者が作成した valid-seo-2c と valid-seo-3c (ver1.2.0)で外部JavaScriptファイルを読み込み、ピクトグラムが表示されるようにする方法です。

概要

  1. HTML編集で、</head>の直前でjQuery本体とピクトグラム用JavaScriptファイルを読み込みます。

  2. CSS編集で、ピクトグラム用のコードを追加します(質問者さんが既にできているので割愛します)。

テンプレートのHTMLを編集

  1. 次のコードを探します。下図で反転している部分です。

    </head>
  2. 上記コードの上に次のコードを追加します。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/130228pictofunc.js"></script>
    

テンプレートのCSSを編集

  1. 質問者さんが既にできているので割愛します。

  2. customtemplate用CSSの該当部分をコピペすればOKです。

カスタム前後のデモページ

  1. カスタム前(ミラーページ)
    ピクトグラムが表示されていません。質問者さんの元ページは野菜カレーも無料でゲット! | おウチで稼ぐお小遣いです。

  2. カスタム後
    ピクトグラムが表示されています。

このページについて

  1. テンプレート利用者さんから質問をいただき作成しました。

    ピクトグラムについて
    
    ピクトグラムの利用について質問です。 
    
    http://customtemplate.blog112.fc2.com/blog-entry-5.html 
    
    こちらで紹介されていたピクトグラムのいくつかを利用したくてコピペしてみたのですが、わたしが使わせていただいている「valid-seo-3c」テンプレでは利用できませんでした。 
    
    そこで「customtemplate」もダウンロードしてスタイルシートを確認し、 
    
    /*■§7 ピクトグラム 
    
    記事本文内にclassを指定すると動的に生成される部分 
    http://customtemplate.blog112.fc2.com/blog-entry-5.html */ 
    
    の部分から 
    
    /*¶配置*/ 
    /*¶挿入するピクトグラムの種類*/ 
    /*¶配色(cf.http://www.kanzaki.com/docs/html/htminfo17.html の クラス名の考え方)*/ 
    
    の末尾までを丸ごと「valid-seo-3c」のスタイルシートにコピペしてみました。 
    
    その結果が、こちらの続きページにあります。 
    http://netdepointokozukai.blog.fc2.com/blog-entry-87.html 
    
    背景や角丸などの設定は問題ないのですが、左側に表示されるはずのピクトグラムの種類が一切表示されません。 
    スタイルシートをカスタマイズした影響があるのかと思い、初期の「valid-seo-3c」テンプレでも確認してみましたが、結果は変わりませんでした。 
    
    「valid-seo-3c」でも、ピクトグラムの種類を表示できるようにする方法がありましたら教えてください。 
    
    >table のデフォルト設定について 
    回答ありがとうございました。 
    いちばん面倒な表で例をあげていただいて本当に感謝です。 
    例えを参考に、Type2 を自分で設定してみました。 
    説明にもあった通り、記事編集画面で設定する文字数が激減しました。 
    
    慣れないことだったので、スタイルシートで Type2 設定を完成させるのに午前中を費やしてしまいましたが、一度設定してしまえば後の修正はとても簡単にできそうなので、本当に助かりました。 
    
    まだマクロミルの記事しか修正できていませんが、無事に表示させることができたのでご報告です。下の小さい表が Type2 で設定したものです。 
    http://netdepointokozukai.blog.fc2.com/blog-entry-36.html 
    
    こんな小さなもので午前中いっぱいかかったというのは恥ずかしい限りですが、大変勉強になりました。今後、その他の表も少しずつ修正していこうと思います。本当にありがとうございました。 
    [398] 2013年02月27日(水) 17:40 そら
  2. customtemplateとvalid-seoでは、HTML内にも相違があるため単純にコピペするだけではcustomtemplateのようには機能しません。

  3. 今回の質問は、「customtemplateを使ってください」と返答しようかと思いました。しかし、質問者さんでできることは極力されているのがソースから伝わりました。よって、ピクトグラム用JavaScriptファイル(130228pictofunc.js)を作成した次第です。

  4. 質問の読み始めからピクトグラム表示用JavaScript完成まで1時間、この記事作成とデモページ調整で1時間でした。customtemplateとvalid-seoのHTML部分の相違点を一つ一つ説明するとなるとさらに時間がかかります。

  5. 作成したJavaScriptファイルはピクトグラム表示に特化しています。その他の機能に関してはcustomtemplateをご利用いただければと思います。

今後のテンプレート改訂時には

  1. 上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)