賢威の HTML 版をシリウスのテンプレートにする方法 OK 川上 賢威のシリウス化の手順 賢威の HTML 版をダウンロード ファイルの解凍 シリウスの立ち上げ 新規サイトの作成 任意のテンプレートを選ぶ シリウスのサイトデータへファイルをコピー HTML の編集 テンプレートのエクスポート テンプレートからサイトを作成してデータをアップロードするとき、個別に「js」 「images」フォルダーをレンタルサーバーにアップロードする必要があります。 サイトを作るときの注意点 シリウスの全機能は使えないので手打ちで対応することがあります。イチから HTML を エディターで作るよりましですが。。。 最初に無料のテキストエディターを紹介します。 あなたが WEB サイト編集に対応したものがあればそちらをお使いください。 エディターはメモ帳でもできますが Terapad が編集しやすくておすすめです。 下記のサイトから無料で入手ができます。 http://www.forest.impress.co.jp/library/software/terapad/ 賢威 HTML 版を用意する 賢威をサポートフォーラムからダウンロードします シリウスを立ち上げます。 新規作成を押して新しいサイトを立ち上げます。 サイトの全体設定を押して 任意のテンプレートを選びます 次に賢威の JS や CSS Images のフォルダーをシリウスに登録します。 保存先はサイトデータの保存場所にします。 画像をクリックします。 画像フォルダーを開くをクリックします。 現在編集しているテンプレートの画像データが保管されているフォルダーが表示され ます。 下のフォルダーから一つ上のフォルダーに移動します。 こちらが一つ上の階層です 賢威 HTML 版を解凍したファイルのうち CSS,images,js をシリウスの画像格納庫よりひ とつ上の階層にコピーします。 ここからちょっと難しくなります。 シリウスに戻ってサイトオプションの文字コードを UTF-８に設定します。 次に HTML を編集します。 <!-- ★▽通常モードここから▽★ -->下記の部分を差し換えます 上は差し替え前の状態です。 以下は差し替え前のコンテンツです。 <% textTitle1 %> <% textBody1 %> <% textTitle2 %> <% textBody2 %> <% textTitle3 %> <% textBody3 %> <% textTitle4 %> <% textBody4 %> <% textTitle5 %> <% textBody5 %> <% textTitle6 %> <% textBody6 %> <% textTitle7 %> <% textBody7 %> <% textTitle8 %> <% textBody8 %> <% textTitle9 %> <% textBody9 %> <% textTitle10 %> <% textBody10 %> 以下差し替えます。 <% textTitle1 | tag_replace(h3,h2) %> <% textBody1 %> <% textTitle2 | tag_replace(h3,h2) %> <% textBody2 %> <% textTitle3 | tag_replace(h3,h2) %> <% textBody3 %> <% textTitle4 | tag_replace(h3,h2) %> <% textBody4 %> <% textTitle5 | tag_replace(h3,h2) %> <% textBody5 %> <% textTitle6 | tag_replace(h3,h2) %> <% textBody6 %> <% textTitle7 | tag_replace(h3,h2) %> <% textBody7 %> <% textTitle8| tag_replace(h3,h2) %> <% textBody8 %> <% textTitle9 | tag_replace(h3,h2) %> <% textBody9 %> <% textTitle10 | tag_replace(h3,h2) %> <% textBody10 %> 差し替え分はここまで 差し換えたイメージがこれです。 今現在トップページを編集していますがカテゴリーとエントリーに同じようにコピペ して保存します 賢威の HTML を移植する。 ダウンロードした賢威 HTML 版のインデックスを立ち上げます。 賢威のトップページの部分をコピーします。 <!--▼メインコンテンツ--> <main> <div class="main-conts"> ここから上全部をコピーします。 グローバルナビを使わないときはグローバルナビを消します。 テンプレート作成の時は使わないという手もあります。 次にシリウスの HTML 編集画面に戻ります ３７行目の<% if:siteMode(normal) %>から上を消します。 そして先ほど賢威でコピーした部分を貼り付けます。 こちらは賢威のヘッダー部分を貼り付けた直後です。 次に</head>の直前に下のコードを入れます。 <% pageStyles %> <% headTag %> <% rssFeedLink %> <% googleSitemapTag %> <% mobileLinkDiscovery %> こんな感じにしまます。 <% pageStyles %> <% headTag %> <% rssFeedLink %> <% googleSitemapTag %> <% mobileLinkDiscovery %> </head> このプロセスでシリウスの重複コンテンツ登録などが反映されます。 次にサイドバー以下をコピーします。 賢威のインデックスページ（トップページ）にある３４１行目</div>から下をコピーし ます。 </div> </main> <!--▲メインコンテンツ--> ＜このレポートは賢威７をインポートしていますが６の場合はサイト本文の</main>よ り一こ前の</div> から下をコピーしてシリウスに貼り付けます。 HTML のタグは始まりと〆の組み合わせになっています。 <div class="example"></div> <div></div> <main> </main> レイアウトが崩れる場合は</div>が多かったり少なかったりするので</main>の上に加 えてみてください。＞ <!--▲メインコンテンツ-->の </div>から下をコピーして そして文字コンテンツを入れ替えていきます。 シリウスのボディーより下に貼り付けます シリウスは１２０行目の <% textTitle10 | tag_replace(h3,h2) %> <% textBody10 %>の下に貼り付けます こちらが貼り付けた後です 次にシリウスに貼り付けたコンテンツをシリウスの独自コマンドに差し換えたりして テンプレートとして汎用的に使えるように整形します。 ヘッダー部分 賢威税理士事務所 （下記に差し替え） <% pageTitle %> ● キーワード 1,キーワード 2,キーワード 3 （下記に差し替え） <% metaKeywords %> ● 京都・東京の会計事務所「賢威税理士事務所」のホームページです。税金に関するご質 問はお気軽に何でもご相談ください。（下記に差し替え） <% metaDescription %> ● <header id="top" class="site-header"> <div class="site-header-in"> <div class="site-header-conts"> <h1 src="images/logo.png" class="site-title"><a href="./"><img alt=" 賢 威 税 理 士 事 務 所 " width="415" height="40"/></a></h1> </div> </div> 超重要 <img src="images/logo.png" alt="賢威税理士事務所" width="415" height="40"/> logo.png を差し換えてもいいです。その時大事なことは alt="賢威税理士事務所" の賢 威税理士事務所の部分を<% pageTitle %> に差し換えることです。 差し換えたタグはこちらです。 <img src="images/logo.png" alt="<% pageTitle %>"width="415" height="40"/> ロゴを画像にするときは必ずタイトルを入れないと H1 タグ指定がなされません。 タイトルを文字で出すときは文字にするときは <img src="images/logo.png" alt="<% pageTitle %>"width="415" height="40"/> <% pageTitle %>にします。 書き換え前 <h1 class="site-title"><a href="./"><img src="images/logo.png" alt="賢威税理士 事務所" width="415" height="40"/></a></h1> 書き換え後 <h1 class="site-title"><a href="./"><% pageTitle %></a></h1> ヘッダーの部分はここまで フッターの部分でいじるところは <div class="copyright"> <p><small>Copyright © 2015 賢 威 税 理 士 事 務 所 All Rights Reserved.</small></p> </div> </footer> <!--▲サイトフッター--> 2015 賢威税理士事務所を下記に変えます。 <% thisYear %> <a href="<% pageDepth %>"><% siteTitle %> <div class="copyright"> <p><small>Copyright © <% thisYear %> <a pageDepth %>"><% siteTitle %>All Rights Reserved.</small></p> </div> </footer> <!--▲サイトフッター--> ここではあくまでテンプレートを作るのが目的なので サイドバーやフッターはいじりません。 とりあえず全部消して オリジナルをとっておいて必要な時に加筆するのもアリです。 個別のサイトを作るときに編集します。 使うものそうでないものは用途によって変わりますので各々編集願います。 href="<% カテゴリーページを作ります。 トップページをそのまま使うのがおすすめです。 賢威を解凍したフォルダーの中に カテゴリーとエントリーページ、サイトマップはメインコンテンツ以外のところにある 画像や JAVA のリンクについてソースを参照してオリジナルのテンプレート作るのもア リです。どちらにするかはお任せします。 以下カテゴリーの関連ページを表示するシリウスの独自コマンドです。 <% textTitle10 | tag_replace(h3,h2) %> <% textBody10 %> の下に入れたほうがいいですが 本文中で一つ一つ手入力もアリです。 僕は手入力にしています。 <!-- ★メインコンテンツここから★ --> <div id="contents"<% pageColumns %>> <div id="main"<% pageColumns %>> <% pageNavigation %> <% freeSpace1 %> <% textTitle1 | tag_replace(h3,h2) %> <% textBody1 %> <% textTitle10 | tag_replace(h3,h2) %> <% textBody10 %> </div> <!-- ★メインコンテンツここまで★ --> 出来上がったテンプレートはエクスポート 任意のフォルダーを指定して 保存します 賢威テンプレートのシリウスに移植する作成方法は以上になります。 次にテンプレートを使用して最初にサイトをアップロードするときの注意点です。 サイト作製の注意点 最初にサイトデータをアップロードするときに JS フォルダーと images フォルダーを個 別にレンタルサーバーにアップロードします。 アップロードするフォルダの場所は。。 シリウスの画像をクリック 画像フォルダーを開くをクリックします。 現在編集しているテンプレートの画像データが保管されているフォルダーが表示され ます。 下のフォルダーから一つ上のフォルダーに移動します。 こちらが一つ上の階層です この images と js のファイルをサイト生成先のファイルにコピーして シリウスの FTP で転送します。 後はサイト生成して初めてファイルを転送するときに 左側のオレンジの CSS ファイルは転送しません。 注意点は以上になります。 今回は賢威ですは Infoplate なども同じ要領でシリウスのテンプレートにすることが 出来ます。 わからないことがありましたら [email protected] までご連絡願います。 シリウス独自コマンド カテゴリーリスト <!-- ▽ カテゴリーリストここから ▽ --> <% categoryListTitle | tag_insert(h3) %> <div class="category-list" id="categorylist"> <% AQEntries %> <div class="category-list__body"> <div class="category-list__title"><a href="<% permaLink %>"><% pageTitle %></a></div> <% pageThumbnail | tag_insert(div class="thumbnail") %> <% pageBody | tag_strip | str_replace( ,) | oneline | shorten(200,true) | tag_insert(p) %> <div class="category-list__more"><a href="<% permaLink %>">» 続きを読む</a></div> </div> <% /AQEntries %></div>
© Copyright 2024 Paperzz
