ブログページにヘッダ領域を確保するためにテーマを ExtraContent に対応させる方法



RW5.x検証済み
このエントリの内容は RapidWeaver 5.x を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
ExtraContentに対応していないテーマのブログページにも、ヘッダ領域を確保する事が出来ます。

ExtraContent とは?

ExtraContentとは、通常、コンテンツ、サイドバー以外コンテンツ領域がないテーマを拡張して、第三の領域というべきコンテンツエリアを作り出すサードパーティーが開発したシステムです。現在は多くのテーマに採用されていますが、未対応のテーマを対応させる事も可能です。
長いですが、以下のリンクでビデオチュートリアルが見られます。(ExtraContent対応のテーマの使い方)
ExtraContent addition to RapidWeaver Themes | SupportCasts™ - Rapidweaver Screencasts


テーマをカスタムする

ExtraContentに対応させるには以下の準備が必要です。

ファイルをダウンロード

以下のリンクからファイルをダウンロードしてください。(とりあえずExtraContent Developer SDKでいいかな)
ExtraContent Downloads - snippets, Stacks plugins...

使っているテーマに必要なファイルを組込む

一番簡単な方法で解説します。
テーマのパッケージを開いて、Contentsフォルダを開きます。

場所:ユーザー/ライブラリ/Application Support/RapidWeaver/あなたのTheme/
Contents/

その中に、先ほどダウンロードしたフォルダの中の「extracontent.min.js」を入れてください。

ユーザー/ライブラリ/Application Support/RapidWeaver/あなたのTheme/Contents/
extracontent.min.js

index.html を編集する

index.html
次に、index.html をHTMLエディタなどで開いてください。

場所:ユーザー/ライブラリ/Application Support/RapidWeaver/あなたのTheme/Contents/
index.html

<head>内であればどこでも構いませんが、以下のハイライトされたコードを %user_styles% の下辺りに挿入します。(%は全角に置き換えています)

%user_styles%   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



jquery.min.js は恐らくバージョンが上がっても機能するともいますが、むやみに上げる必要も無いでしょう。

次に、%content%の真上に以下のハイライトされたコードを挿入します。(%は全角に置き換えています)(仕組みが理解出来れば他の場所にも置けますよ)

%content%


Theme.plist を編集する

Theme.plist
次に、Theme.plistファイルを編集します。同じく、HTMLエディタなどでファイルを開いてください。上の方に以下に似たコードがあると思います。



RWCopyFiles

        images
        css
        js
        styles.css
        print.css
        colour_tags.css
        javascript.js

ここに以下のハイライトされたコードを挿入します。以上でテーマのカスタムは終了です。

RWCopyFiles

        images
        css
        js
        styles.css
        print.css
        colour_tags.css
        javascript.js
        extracontent.min.js


専用タグをサイドバーに挿入する

ExtraContentのコードは、ページ内のどの部分に置いても、index.html で挿入して場所に表示される仕組みになっています。
ですので、編集しやすいようにサイドバーに専用のコードを挿入する事にします。

スニペットを利用する

ExtraContentのスニペット
最初にダウンロードしたフォルダのSnippetsフォルダに、必要なExtraContent専用のスニペットが入っています。

場所:seyDoggy-ExtraContent-xxxxxxx/add-ons/Snippets

取りあえず今回は「extracontent.rwsnippet」というスニペットだけをインストールしてください。

インストールしたら、サイドバーの任意の場所にスニペットウィンドウを呼び出し(⌘5)、「Extra Content」をドラッグ&ドロップします。

以下のようなコードが挿入されたと思います。

<div id="myExtraContent1">

Add you content here and it will appear... there! Provided you are using a theme that has ExtraContent enabled of course.

Tip:
1. Check to see how many extra content area your theme supports. For each support instance, you'll need to change the trailing number in the id to suit. For example, "myExtraContent1", "myExtraContent2", "myExtraContent3", and so on...

2. If using ExtraContent in a styled text area, be sure to highlight from "≤div id="myExtraConten..." to the beging of your own content, then mark it as "Ignore Formatting" (RW Menu » Format » Ignore Formatting). Repeat the process from the end of your content until the end of "...#myExtraContent --≥"

</div>


プレビューして動作確認する

取りあえず、上記のままでプレビューして機能しているか確認してください。正常に機能していたら任意のコードを挿入してカスタマイズしましょう。
実際は以下のタグを残し、その中に任意のコートを挿入します。(コメント部分「
<!-- #myExtraContent -->」を残しておいても大丈夫です。)

<div id="myExtraContent1">
ここに任意のコードを挿入
</div>

CSSを設定する

ExtraContentにCSSを適用するには、以下のコードをページインスペクタのCSS入力欄に挿入してください。

#myExtraContent1 {
任意のCSSを挿入
	}

後は、お好みでmarginやpaddingを設定し、レイアウトを整えて下さい。

ExtraContentを増やす

お分かりかと思いますが、extraContainer1やmyExtraContent1の数字の部分を変更すれば、2つ、3つとExtraContentエリアを増やしてく事ができます。


以上ExtraContentの解説はです。動かなかったらごめんなさい(笑)
blog comments powered by Disqus