賢威のシリウス化の手順賢威の HTML 版をダウンロードファイルの解凍シリウスの立ち上げ新規サイトの作成任意のテンプレートを選ぶシリウスのサイトデータへファイルをコピー HTML の編集テンプレートのエクスポートテンプレートからサイト

Size: px

Start display at page:

Download "賢威のシリウス化の手順賢威の HTML 版をダウンロードファイルの解凍シリウスの立ち上げ新規サイトの作成任意のテンプレートを選ぶシリウスのサイトデータへファイルをコピー HTML の編集テンプレートのエクスポートテンプレートからサイト"

こうじむこやま
7 years ago
Views:

1 賢威の HTML 版をシリウスのテンプレートにする方法 OK 川上

2 賢威のシリウス化の手順賢威の HTML 版をダウンロードファイルの解凍シリウスの立ち上げ新規サイトの作成任意のテンプレートを選ぶシリウスのサイトデータへファイルをコピー HTML の編集テンプレートのエクスポートテンプレートからサイトを作成してデータをアップロードするとき個別に js images フォルダーをレンタルサーバーにアップロードする必要がありますサイトを作るときの注意点シリウスの全機能は使えないので手打ちで対応することがありますイチから HTML をエディターで作るよりましですが最初に無料のテキストエディターを紹介しますあなたが WEB サイト編集に対応したものがあればそちらをお使いくださいエディターはメモ帳でもできますが Terapad が編集しやすくておすすめです下記のサイトから無料で入手ができます

使えないので手打ちで対応することがありますイチから HTML をエディターで作るよりましですが最初に無料のテキストエディターを紹介しますあなたが WEB サイト編集に対応したものがあればそちらをお使

4 賢威 HTML 版を用意する賢威をサポートフォーラムからダウンロードします

5 シリウスを立ち上げます新規作成を押して新しいサイトを立ち上げますサイトの全体設定を押して任意のテンプレートを選びます

6 次に賢威の JS や CSS Images のフォルダーをシリウスに登録します保存先はサイトデータの保存場所にします画像をクリックします画像フォルダーを開くをクリックします現在編集しているテンプレートの画像データが保管されているフォルダーが表示されます

7 下のフォルダーから一つ上のフォルダーに移動しますこちらが一つ上の階層です

8 賢威 HTML 版を解凍したファイルのうち CSS,images,js をシリウスの画像格納庫よりひとつ上の階層にコピーしますここからちょっと難しくなりますシリウスに戻ってサイトオプションの文字コードを UTF-8に設定します

9 次に HTML を編集します  下記の部分を差し換えます上は差し替え前の状態です

10 以下は差し替え前のコンテンツです <% 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 %>

textbody6 %> <% texttitle7 %> <% textbody7 %> <% texttitle8 %> <% textbody8 %> <% texttitle9 %> <%

11 <% 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 %> 差し替え分はここまで

tag_replace(h3,h2) %> <% textbody6 %> <% texttitle7 tag_replace(h3,h2) %> <% textbody7 %> <% texttitle8

12 差し換えたイメージがこれです今現在トップページを編集していますがカテゴリーとエントリーに同じようにコピペして保存します

13 賢威の HTML を移植するダウンロードした賢威 HTML 版のインデックスを立ち上げます賢威のトップページの部分をコピーします  <main> <div class="main-conts"> ここから上全部をコピーしますグローバルナビを使わないときはグローバルナビを消しますテンプレート作成の時は使わないという手もあります

14 次にシリウスの HTML 編集画面に戻ります 37 行目の<% if:sitemode(normal) %>から上を消します

15 そして先ほど賢威でコピーした部分を貼り付けますこちらは賢威のヘッダー部分を貼り付けた直後です次に</head>の直前に下のコードを入れます <% pagestyles %> <% headtag %> <% rssfeedlink %> <% googlesitemaptag %> <% mobilelinkdiscovery %> こんな感じにしまます <% pagestyles %> <% headtag %> <% rssfeedlink %> <% googlesitemaptag %> <% mobilelinkdiscovery %> </head> このプロセスでシリウスの重複コンテンツ登録などが反映されます

mobilelinkdiscovery %> こんな感じにしまます <% pagestyles %> <% headtag %> <% rssfeedlink %> <%

16 次にサイドバー以下をコピーします賢威のインデックスページ(トップページ)にある341 行目 </div>から下をコピーします </main> </div>  <このレポートは賢威 7をインポートしていますが6の場合はサイト本文の</main>より一こ前の</div> から下をコピーしてシリウスに貼り付けます HTML のタグは始まりと〆の組み合わせになっています <div class="example"></div> <div></div> <main> </main> レイアウトが崩れる場合は</div>が多かったり少なかったりするので</main>の上に加えてみてください > の </div>から下をコピーしてそして文字コンテンツを入れ替えていきますシリウスのボディーより下に貼り付けますシリウスは120 行目の <% texttitle10 tag_replace(h3,h2) %> <% textbody10 %>の下に貼り付けます

合わせになっています <div class="example"></div> <div></div> <main> </main> レイアウトが崩れる場合は</div>が多かったり少なかったりするので</main>の上に加えてみてください

17 こちらが貼り付けた後です

18 次にシリウスに貼り付けたコンテンツをシリウスの独自コマンドに差し換えたりしてテンプレートとして汎用的に使えるように整形しますヘッダー部分賢威税理士事務所 ( 下記に差し替え) <% pagetitle %> キーワード 1,キーワード 2,キーワード 3 ( 下記に差し替え) <% metakeywords %> 京都東京の会計事務所賢威税理士事務所のホームページです税金に関するご質問はお気軽に何でもご相談ください ( 下記に差し替え) <% metadescription %> <header id="top" class="site-header"> <div class="site-header-in"> <div class="site-header-conts"> <h1 class="site-title"><a href="./"><img src="images/logo.png" 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 %>にします

19 書き換え前 <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 href="<% pagedepth %>"><% sitetitle %>All Rights Reserved.</small></p> </div> </footer>  ここではあくまでテンプレートを作るのが目的なのでサイドバーやフッターはいじりませんとりあえず全部消してオリジナルをとっておいて必要な時に加筆するのもアリです個別のサイトを作るときに編集します使うものそうでないものは用途によって変わりますので各々編集願います

-- サイトフッター--> 2015 賢威税理士事務所を下記に変えます <% thisyear %> <a href="<% pagedepth %>"><% sitetitle %> <div class="copyright"> <p><small>copyright <% thisyear %> <a href="<% pagedepth %>"><%

20 カテゴリーページを作りますトップページをそのまま使うのがおすすめです賢威を解凍したフォルダーの中にカテゴリーとエントリーページサイトマップはメインコンテンツ以外のところにある画像や JAVA のリンクについてソースを参照してオリジナルのテンプレート作るのもアリですどちらにするかはお任せします以下カテゴリーの関連ページを表示するシリウスの独自コマンドです <% texttitle10 tag_replace(h3,h2) %> <% textbody10 %> の下に入れたほうがいいですが本文中で一つ一つ手入力もアリです僕は手入力にしています

どちらにするかはお任せします以下カテゴリーの関連ページを表示するシリウスの独自コマンドです <% texttitle10

21  <div id="contents"<% pagecolumns %>> <div id="main"<% pagecolumns %>> <% pagenavigation %> <% freespace1 %> <% texttitle1 tag_replace(h3,h2) %> <% textbody1 %> <% texttitle10 tag_replace(h3,h2) %> <% textbody10 %> </div>

22 出来上がったテンプレートはエクスポート任意のフォルダーを指定して保存します

23 賢威テンプレートのシリウスに移植する作成方法は以上になります次にテンプレートを使用して最初にサイトをアップロードするときの注意点です

24 サイト作製の注意点最初にサイトデータをアップロードするときに JS フォルダーと images フォルダーを個別にレンタルサーバーにアップロードしますアップロードするフォルダの場所はシリウスの画像をクリック画像フォルダーを開くをクリックします

25 現在編集しているテンプレートの画像データが保管されているフォルダーが表示されます下のフォルダーから一つ上のフォルダーに移動します

26 こちらが一つ上の階層です

27 この images と js のファイルをサイト生成先のファイルにコピーしてシリウスの FTP で転送します後はサイト生成して初めてファイルを転送するときに左側のオレンジの CSS ファイルは転送しません注意点は以上になります今回は賢威ですは Infoplate なども同じ要領でシリウスのテンプレートにすることが出来ますわからないことがありましたらまでご連絡願います

28 シリウス独自コマンドカテゴリーリスト  <% 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>