カテゴリー: 中尾清月堂

RSSのfeedが表示されない　

中尾清月堂

wordpressのアップデートをした。確認してみたらトップページのrss feedが表示されていない。アップデート前にトップページを確認していなかったので多分アップデートが失敗してなったのかとおもい、再インストールやバージョンをダウングレードしたり、バックアップマネージャからアップグレード前のwpをアップしたがかわらない。プラグインをとめてもかわらない。

rss.phpに他のサイトのrss feedを入れると表示されるが、他のサイトのrss.phpに中尾静月堂のrss feedを入れると表示されない。なのでrss.phpはおかしくない。おかしいのはwordpressということになる。

でも、feedwindに中尾清月堂のrss feedを入れると表示される。

まったくわからない。何が原因かわからなかった。

不可視な謎のコードを削除したらRSSが配信された！

の記事の下の方に書いてあった

不可視な謎のコードを削除したらRSSが配信された！

不具合の原因を教えてくれたのは、こちらのブログ記事。ありがとうございます。本当に助かりました！

WordPressでRSSフィードがエラーとなった時の対処方法 – Live for Today

rsserror1

記事の中にW3CのFeed Validation Serviceを使う方法が書かれており、早速アクセスしてブログのフィードアドレスを入力したところ、エラーの出ている箇所が示されました。

何ヶ月も前に公開した記事になんらかの不具合が出ているようですが、対象のブログ記事を見ても不具合らしきものはわかりません。

参照したブログ記事にはSublime Textというソフトにテキストを貼り付けるとよいと書かれており、その通りにしてみました。

Sublime Textは次のウェブサイトからダウンロードできます。

Sublime Text

ブログ記事を書かれた方は、Sublime Textにコピー＆ペーストしたところ「BS」という制御文字といわれるものが表示されて、これを削除して不具合が解決したとのことが、私の場合そのような文字が表示されません。

rsserror2

もうこれ以上どうしたらいいのかわからないと思っていましたが、ブログ記事のタイトル部分をSublime Textにコピー＆ペーストしたところ「BS」の文字が現れました。

rsscongrats

こちらを削除して再びW3CのFeed Validation Serviceで確認したところ、「Congratulations!」の表示！

にあるように　Feed Validation Serviceにfeedをいれてみたらエラーが検出した。その個所の記事の変な箇所を削除して更新したらばトップページにfeedが読み込まれた。また該当記事を非公開にしてみても読み込まれた。

記事自体がおかしな文字を記載されていたのが原因だったようだ

カラミー　スマホデザイン

サンエツ

 

テンプレートとして2カラム左メニューをカスタマイズしているが、これだとパッドの縦まではオリジナルのデザインが適用されるが、スマホではpadのデザインが適応されてしまう。多分、このテンプレートがスマホの画角の対応になっていないから。

スマホとPC用両方のテンプレートとしてレスポンシブテンプレートっていうものがあるらしいがそれをカスタマイズする気力がないかな。また、無料のレスポンシブテンプレートにはカテゴリーが入っていないのでカテゴリーで商品を選ばせたい時には使用できない。

スマホはオリジナルデザインをあきらめて、中尾清月堂のように、カラミーで用意しているスマホのテンプレートをカスタムして使うしかない。

無料スマホテンプレート　PILOT にはカテゴリーも入っている。

・カラミーで準備しているスマホテンプレはスマートフォンショップ→デザイン設定→で新規追加

・表示モード設定にてスマートフォン最適化で適応できる。

 

 

スマホテンプレートのカスタマイズ方法

サンエツ　参照

集客→検索エンジン対策→headタグ内フリースペース設定→スマートフォンショップ用設定　　にhead内の記述をする

スマホテンプレートの共通HTML内にも、既存のhead内容のlinkやscriptをコピペする (バーガーメニューも挿入できる)

↑集客→検索エンジン対策のスマホのheadスマホタグの中に記入するだけでhead内容は大丈夫

PILOTのテンプレートにはもともとlinkやscriptが入っているがそのままにしておく

カラミーのPC設定のコードが使える箇所があるのでコピペして、スマホ用に適宜に変更すると効率的。

※どうしてもわからなかった箇所はaのタップした後のカラーがブルーから変更できないのがカスタマイズしてもわからなかった。

↑この件は、698行あたりにある　

.drawer-accordion-item-text {
color:#ffffff;
}

の色をしていしてあげれば解決した。

 

※マイアカウント・会員ログインのcssはスマホテンプレートにはないので、PC用テンプレートの方で調整する。

 

※headタグをペーストすると管理画面のプレビューでは真っ白になって何も映らずみえないが、（ブラウザで幅を縮めていけば表示される。）実機ではみえる。タグを確認したい時にはカスタマイズしていないオリジナルのPILOTにいったん切替してプレビューしてchromeのデベロッパーツールで確認する。

あと、管理画面のエディターがおかしい！選択した箇所をデリートしようしても別の箇所が選択されてデリートしたり、挿入箇所にカーソルを置けなかったり、コードのタグの色がおかしくなったりする。コードの色がおかしくてもサイトの見栄えには問題がない。

サンエツのスマホテンプレートのコードはもともとのPILOTのコードを削除してPC用の左カラムのコードを挿入している箇所が多々ある。レイアウトも問題がない。もし、編集することがあったときに、PILOTのオリジナルコードを該当箇所にコピペしても思い通りのレイアウトにならない場合は、左カラムのテンプレートからコピペしてスマホ用に修正している箇所であるのでびっくりしないように。ベースはPILOTだが、左カラムとのちゃんぽんのテンプレートと認識していればよい。

 

スマホのcssで記述していても何故か、PC側のcssが優先されるセレクタがあるので、

!important;

をつけて、スマホはスマホの優先順位が効くようにする。今回は共通部分の人気商品や最近チェックした商品をラップしている.item_containerがなにやっても2カラムにならず1カラムで表示されてしまっていたのは、PC側のスタイルが効いてしたからのようだ。!important をつけてwidthを調整したら2カラムで折り返すようになった。

https://shop-pro.jp/manual/smartphone_open

グローバルサイン　SSL ブラウザに　保護されていない通信　とでる　　中尾清月堂

中尾清月堂をSSLにするためにグローバルサインのクイック証明を契約。

グローバルサイン社はSSLディレクトリは不要でhomeに置くとSSLが機能する。

 

しかし、ブラウザではhttpsでアクセスしても 保護されていない通信とでる。google serch consoleからクロールリクエストだしても同じ状態。

SuieXのサポートセンターに問い合わせると、コンテンツの中にhttpで始まる記述がhttpsと混在しているからhttpsにしなさいとのことでトップページ内を修正したが変わらない。サポートにつたえると証明書は表示できるからサイト構築自体の問題だとばっさり。

サイト内のhttpをhttpsに変更。

※注意　CGIやスクリプト内のそもそもhttpが記述してある場合はそのままにしておかないと動作しなくなるからそっとしておく。

 

一応全部のコンテンツページに表記してあったhttpをhttpsに変更してアップ。google serch consoleからクローラー要請。.htaccsessでhttpにアクセスしたらhttpsにリダイレクト設定で大丈夫になった。

あと、証明書が設置されて問題解決まで上記の事やったのが３日間かかったがその間でサーバー側の設定が定着した？っていうことはなかろうか。申請から３日間すったもんだしたが一応問題から解決までそのくらいかかった。

//////////////

httpからhttpsへのリダイレクト

httpからhttpsへリダイレクトするには.htaccessに下記を追加します。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

これにより、例えば「http://example.com」というURLでアクセスすると「https://example.com」にリダイレクトされます。

下層ページも同じで、ドメイン以下同じURLでページがある場合は「http://example.com/content1」というURLでアクセスすると「https://example.com/content1」にリダイレクトされるということです

 

以下、サポートのやり取りメール

 

 

コンタクトセンター (NTTPC)

2020/07/15 11:31 JST

コンタクトセンターよりご案内いたします。

本件、確認いたしましたが、
証明書につきましては正常に設定が完了している状態とお見受けいたします。

httpがhttpsと混在しないようにソースを修正していただき、なお表示が不可の場合、
サイト構築が影響している可能性がございます。

恐れ入りますが、弊社サイト構築につきましてはサポート対象外になります。
お客さまにてご確認くださいますようお願いいたします。

以上、よろしくお願いいたします。

——————————————————————–
株式会社 NTTPCコミュニケーションズ
WebARENA コンタクトセンター

サポートサイト
https://help.arena.ne.jp/hc/ja
——————————————————————–

 

 

コンタクトセンター (NTTPC)

2020/07/14 18:17 JST

コンタクトセンターよりご案内いたします。

本件、確認のうえ回答いたします、
確認にお時間をいただき申し訳ございませんが、
回答まで今しばらくお待ちくださいますようお願いいたします。

以上、よろしくお願いいたします。

——————————————————————–
株式会社 NTTPCコミュニケーションズ
WebARENA コンタクトセンター

サポートサイト
https://help.arena.ne.jp/hc/ja
——————————————————————–

 

 

吉田孝

2020/07/14 14:20 JST

ご返信ありがとうございます。

httpがhttpsと混在しないようにソースを修正していますが

変わらず　httpsが表示されないです。

例えば、https://nakaoseigetsudou.jp/index.html

のソースの中にはhttp はありません。htmlのソース内の絶対パスはhttpsになっています。

しかしながら　セキュリティーの保護なし　と表示されます。

 

ご確認お願いいたします。

 

吉田

 

 

 

 

コンタクトセンター (NTTPC)

2020/07/14 13:22 JST

コンタクトセンターよりご案内いたします。

確認いたしましたところ、お客さまのコンテンツの記述にて
httpから始まるURLとhttpsから始まるURLが混在しているように見受けられます。

httpとhttpsの記述が混在している場合、
ご利用しているブラウザにてhttpsの表示が正常にされない場合があります。
恐れ入りますが、index.htmlの記述をご確認くださいますようお願いいたします。

以上、よろしくお願いいたします。

——————————————————————–
株式会社 NTTPCコミュニケーションズ
WebARENA コンタクトセンター

サポートサイト
https://help.arena.ne.jp/hc/ja
——————————————————————–

 

 

吉田孝

2020/07/13 17:24 JST

グローバルサイン社のクイック認証でSSL契約をしたのですが、homeにあるコンテンツが未だにchromeなどのブラウザに 【保護されていない通信】とでてしまっています。webarenaからのメールにはssl証明書を取得し設定完了しましたとなっています。【保護されていない通信】のメッセージをなくすにはどうしたら良いですか？

添付ファイル
sample.jpg

facebook へのogp マスターテーマはnakao を使用すること（多分これで解決！）

チャンスメーカーのブログのcm-blogのogpがうまくいかず、（twitterは大丈夫だが、facebookには吐き出せないでいた。）index.phpやfunctions.php に備忘録で表記させている参照サイトのコード書いたり、他のテーマのkawaratをアップして　チャンスメーカーのブログのogpをfacebookで表示させようと3日間トライしたがどれもだめ。

all in one でソーシャル設定してもだめ。（チャンスメーカーのinformationにあるall in one seoの記載はあっている。）

cm-blogのindex.phpにogpの関連記述してソースみたら出力されているが、facebookデバックをかけるとキービジュアルがでてしまう。設定したOGPの画像がでない！

下記でのテーマではきちんと表示された。

オリジナルテーマの　nakao

nakaoをinformationにアップしてテーマをnakaoにしたらogpは大丈夫だった。やはりテーマファイルに関連したトラブルだった。twenty系でもogpは表示された。facebook側へもOK。

※cm-blogをnakaoにあわせて修正は大変なので、現在は直さずにいる。

all in one seo  と　jetpack は必須。jetpackないとtwenty系でもogpは出せてもfacebookやtwitterには投稿できない

これからはブログを作るときのマスターには nakao　コピーしてを利用していくこと！因みにnakao自体はｐｈｐにはopg用のコードを記載はなし、functions.phpにも記載ない。

facebookのアプリを作るときのサイトURLはブログのURLではなく、サイト自身のURL。

 

All in one seo のソーシャルメディア部分

※all in one seoはずしたらどうなるかわからんが、このように設定してるのでOGPがこのようになるんだとおもう。twenty系はそうなる。nakaoも。→all in one seoによって設定が反映されることを確認できた。

 

↑　※OG:Imageソースを選択で　コンテンツ内の最初の画像にしたら、アイキャッチでなくて、投稿箇所で初めに挿入した画像がogpとして表示されたことを確認できた。

 

中尾清月堂　テンプレートにbootstrap入れたら一部デザイン崩れた！

dwのテンプレ箇所にbootostrap4の記述を追加したら、フッター周りの4つのバナーのpaddingが利かなくなりバナーが全部引っ付いた。上書きして戻しても治らないので、この箇所はbootstrapにした。カラミー、ブログシステムもそれに伴い修正。

既存のサイトのテンプレファイルににbootstrap入れて崩れるかもしれないが都度対応。

mailformpro4.1.4 と　textareaを大きくする　レスポンシブ化

desktop/webコンテンツ/mailformpro4.1.4改造　にある。中尾清月堂のモニター募集で実装中　mailformpro4.1.4Campaign/

mailformproの　textareaはプログラムの方で幅を自動的にきめてしまうので、設定が必要。

textareaの幅を決める

#mailformpro textarea
{ width: 80%;
margin-right: auto;
margin-left: auto;}

 

スマホ用のCSSに下記記述しても優先されないので直接mailformproのファイルの編集する必要がある。

mailformpro/configs/config.jsの
‘SizeAjustPx’:6, を
‘SizeAjustPx’:null,　に変更

mailformpro/config.cgi　のレスポンシブ機能はコメントオフにしておく。オンにすると確認画面でスマホは幅は100％以上になってしまう。また、html側ではtextareaが小っちゃくなる。

 

確認画面用の為にスマホ幅オーバーしないように

mfp.statics/css/confirm.overlay.css の
div#mfp_overlay_inner
 { background-color: #FFF;
padding: 15px;
margin: 0px auto;
border-radius: 5px;
box-shadow: 0px 0px 10px #000;
/*width: 640px;*/　コメントアウトしておく
width: 100%; 　スマホ用にはみ出さないように
max-width:640px;}　ＰＣ＆タブレット用にmax-widthを設定

 

mfp.statics/css/confirm.css の
table#mfp_confirm_table tr th
{ white-space: nowrap;
/* width: 200px;*/　コメントアウトする
width: 30%;}　スマホ用にはみ出さないように

table#mfp_confirm_table tr td
{ line-height: 1.5em;
word-break: break-all;
width: 70%;}　スマホ用にはみ出さないように

 

textarea内の改行がＣＳＶで他のタブに改行しないように
mailformpro/librarys/CSVEexport/run.cgi

$_TEXT{‘CSV’}=~s/\n//ig;
$_TEXT{‘CSV’}=~s/\r//ig;

を先頭の2行目にに追加

mailformpro とcsv

4.1.4大丈夫

new-nakao/mailformpro4.1.4/で使用。
campaign/camp1.html

 

mailformpro/config.cgiの180行目辺りにある

#push @Modules,’CSVExport’; ## CSV保存機能

の先頭のコメントアウトは取り設定ＯＫにする

 

maiformpro/configs/CSVExport.cgiの24行目の

ログファイル(CSV)の自由整形
#$config{‘CSVexport’} = ‘./configs/CSVExportTemplate.csv.cgi’;
の先頭のコメントアウトは取りデーターの訂正をカスタマイズする。また、今回はうまく作動しなかったが、本来はブラウザからCSVデーターをダウンロードできるらしく設定もこのファイルで行う。

↑これしないと自由整形が効かずに、textarea内での改行がある分だけ別タブにそうにゅうされてしまう。このファイルのコメントアウトをとれば大丈夫。

e-genjin/mailformpro-present

 

 

 

maiformpro/configs/CSVExportTemplate.csv.cgi　

にＣＳＶの体裁用に整形する

※このファイルにhtml側の項目要素が追記されてないとcsvに反映されない。csvに表示されない場合はこの辺うたがう

 

 

mailformpro/librarys/CSVExport/run.cgi

の一行目後に追加記述

$_TEXT{‘CSV’}=~s/￥n//ig;
$_TEXT{‘CSV’}=~s/￥r//ig;

※￥は上記はwordpressシステム的に半角￥が入らないので全角にしているがここは半角の￥

この2行追加しないと、textareaに改行があると改行の箇所でセルが移動されて記述される。EXcell側の問題だとおもうが、こうすることによって改行なしであるが表記される。

本来　mailformpro4.1.4Campaign/mailformpro/data/dat.postlog.csv.cgiにブラウザでアクセスするとＣＳＶファイルにアクセスするらしいがなぜか500になる。解決できない。

なのでFTPでmailformpro4.1.4Campaign/mailformpro/data/dat.postlog.csv.cgi　をダウンロードしてexcellで開き、カンマで区分する。

 

 

 

 

 

 

 

 

instagramにfacebookを紐づかせる初期設定

テスト環境として、スマホに僕のfacebookアプリが入っていると自動的にinstagaramに紐づかせちゃうのでいったん削除する

スマホ初期設定

instaアプリから、アカウントを切り替える→クライアントのアカウント入力

facebookオプション→シェアする場所を変更する

instagramに接続するにはfacebookアカウントにログインしてください。でクライアントのFBアカウント入力

右下人アイコン→右上歯車→設定→リンク済みアカウント

facebook

シェア設定でfacebook選択　シェアを選択

ページ選択でfacebookページを選択　チェックオンになる

 

ipad初期設定

ログイン画面がでてたら　ユーザー名に nakaoseigetsudou 

パスワードに　nakao123　でログイン

右下人型アイコン→右上歯車→設定のリンク済みアカウント→facebook

もしfacebookのログイン実行画面出たらＯＫボタン

シェア設定のfacebook→シェア→ページ選択に中尾清月堂にチェックが入っているか確認

 

ハンバーガーメニュー　不具合？　new-centia

PC用ブラウザでトグルオスト、全ての要素が若干縮小される。バーガーメニューは稼働する。

メニュー内の li aに対してpaddingやmarginがあると、そうなる。

でもスマホ実機側ではそのような現象は起こらない。

unionや中尾清月堂のソースコピペしたり、jquery.min.js取り替えたりしてもだめ。

 

結論、多分、スクロールバーが出現するとでる。ブラウザのテスト段階で、コンテンツがスクロールバーが産まれる分だけ高さがあれば、表示に差異が産まれないのでこの現象は生まれないことがわかる。

 

解決済み

グーグルマップ　レスポンシブ　googlemap

GoogleMapの埋め込む地図をCSSでレスポンシブ対応させ伸縮させる方法

 

http://log-file.net/web/css-2095

 

下記のCSSとHTMLを表示したい箇所に設置して作業完了です。

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<style type="text/css">
<!--
.gmap{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.gmap iframe, .gmap object, .gmap embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-->
</style>
<divclass="gmap">
<iframesrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.673685490624!2d139.7292645!3d35.660410500000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b770913970d%3A0xccc3467fcb15b353!2z44Kw44O844Kw44Or5qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1436626683899"width="600"height="450"frameborder="0"style="border:0"allowfullscreen></iframe>
</div>
※padding-bottom: 56.25%;　でマップの高さを設定している

flex-wrapの折り返し

http://shanabrian.com/web/css3/flex-wrap.php

 

Flexアイテムの折り返し方を変更する場合は、flex-wrapプロパティ（旧仕様ではbox-linesプロパティ）を使用します。
Flexアイテムは、通常Flexアイテムの合計幅がFlexコンテナーの幅を超えると、Flexアイテムの幅は自動的に縮小していきます（flex-growに応じて縮小の仕方は異なる）が、flex-wrapプロパティを設定することで、折り返すようになります。

なお、flex-wrapプロパティはショートハンドであるflex-flowプロパティの2番目の指定にあたります。

【構文】

flex-wrap:折り返し方法;

指定可能な値

値 値（旧仕様） 説明
nowrap single 折り返さない（初期値）
wrap multiple 下へ折り返す
wrap-reverse 上へ折り返す

 

ipad iphoneなどのタッチデバイスでscrollが効かない時

http://ochien.seesaa.net/article/357081256.html

-webkit-overflow-scrolling: touch がきかない場合

以前は iOS 系では「スクロールは2本指でできます」とか「iScroll を使いましょう」というのが定番でしたが、-webkit-overflow-scrolling: touch が登場してくれたおかげで、

.scroll {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

という感じで CSS を書くだけで、1本指で、しかも慣性スクロールできるようになりました。
かなり楽な世の中になりました。

ちなみに Android でも Android 4.0.4 Safari/534.30 であれば、-webkit-overflow-scrolling: touch が動作しました。
が、scroll をつける div などの高さを設定しておかないとスクロールバーが表示されず、スクロールできませんでした。
Android でも -webkit-overflow-scrolling: touch を使いたいのにうまく動作しないという場合は、scroll させたい領域の高さを指定してみることをおすすめします

カラミーのheadにタブレット用のCSSを設定するには

http://designup.jp/colorme-head-141/

（中尾清月堂）

カラーミーショップ管理画面の集客からSEO対策を選択します

 

PC用ショップに記載。

<!– タブレット 追加–>
<link href=”http://nakaoseigetsudou.jp/css/tablet-colorme.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width:600px) and (max-width:979px)”>

<meta id=”viewport” name=”viewport” content=”width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0″>

 

自前サーバー内にカラミータブレット用CSS配置。

widthの幅は100%だと効かない？ipadAireだと990pxっぽい。

 

 

カラミー　グループ箇所のデザイン　余白問題の解決

カテゴリーを更にグループで分類をした時

display: inline-block;にすること。

#group-list span a{
background-image: url(“http://img21.shop-pro.jp/PA01339/866/etc/side_catback2.jpg?cmsp_timestamp=20160302101239”);
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
height: 40px;
line-height: 40px;
margin-bottom: 5px;
padding-bottom: 0px;
width: 225px;
font-size:16px;
text-align:left;
padding-left:5px;
color: #666;
text-decoration: none;
}

 

※inline-blockとは

http://taneppa.net/display-inline-block/

 

 

カラミー　javascript

http://color-me-customize.com/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%9F%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97-%E3%83%97%E3%83%AD%E3%81%ABjquery%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

 

jQuery本体ファイルの読み込み

jQueryを利用するには、まずjQuery本体のファイルを読み込まなくてななりません。
このファイルを読み込んだ上で、様々な機能やアクションを追加するコードが機能します。
通常はHTMLのheadタグ内に読み込みますが、カラーミーショップ プロではその通りとはいきません。
以前の記事でも書きましたが、カラーミーショップのテンプレートはHTMLのheadタグの中ををいじることができないので、JavascriptもHTMLのbody内に書かなければなりません。
該当するテンプレートの箇所は、共通テンプレートの一番最初がいいかと思います。

外部のウェブサーバにファイルをアップロードする方法

カラーミーショップとは別にウェブサーバを借りてファイルを保存できる環境の場合の方法です。

  1. jQueryのサイトからファイルをダウンロード
  2. 自分のウェブサーバにアップロードする
  3. 共通テンプレートの一番先頭に下記のタグをペースト

srcの中は自分の環境に合わせて書き換えてください。

?
1
<script type="text/javascript" src="http://ウェブサーバのURL/jquery.min.js"></script>

Googleのサイトから読み込む方法

カラーミーショップとは別にウェブサーバを利用していない場合の方法です。
リンクのタグをGoogle APIのサイトで取得して、共通テンプレートの一番先頭にペーストします。
利用するjQueryのプラグインが対応しているjQuryのバージョンを読み込まないと動作しない場合があります。
下記のサンプルはjQuery1.7.0のタグです。

?
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

下記のサイトでは、簡単にGoogleにホスティングされているjQueryなどのタグをコピーできます。
取得できるタグは最新バージョンのみとなります。

jQueryを使ってみる

さて、これでjQueryを使うことのできる環境がテンプレート内に構築できました。
自分でプラグインを書く場合は、上のステップで読み込んだjQuery本体のファイルの後に書いていきます。
既製のプラグインを使う場合は必要なファイルを読み込み（ファイルを読み込む場合は外部のウェブサーバが必須となります）、必要なソースコードを書き足します。
コードを書く場合、テンプレートファイルに直接書き込むよりも外部ファイルで読み込む方がHTMLソースを汚さずに済むのでおすすめです。

?
1
2
3
4
5
<script type="text/javascript" src="http://ウェブサーバのURL/jquery.min.js"></script>
<script type="text/javascript" src="http://ウェブサーバのURL/プラグインのファイル.js"></script>
<script type="text/javascript">
コードを書いていく
</script>

srcの中は自分の環境に合わせて書き換えてください。

jQueryのプラグインは本家サイトでも公開されていますし、ネット上に無料で利用することのできるプラグインも多数公開されています。