アメブロカスタマイズ秘伝の書～オリジナルなブログへの改造＆パワーアップ術

アメザク（アメブロザクザク）テンプレートカスタマイズ～記事枠設置２～

Thu, 13 Dec 2012 22:37:11 +0900

前記事で触れた「記事枠の設定」ですが、設置した枠は「inset」というものでした。
記事枠には、他にもいろいろな枠がありますがご存知でしょうか？
前記事で触れた「記事枠の設定」ですが、設置した枠は「inset」というものでした。
記事枠には、他にもいろいろな枠がありますがご存知でしょうか？
以下の表に纏めてみました。

これらの枠線を利用する際の書式は、以下のようになります。

p.line1 {
margin: 30px 30px;
padding: 10px;
border: medium solid 10px #0000ff;
}
p.line2 {
　border: double 10px #ff0000;
}
p.line3 {
padding: 10px;
　border: groove 10px #336633;
}
といった具合に記述します。

solid 10px #0000ffの記述の意味は、10pxの太さの色コード#0000ffの１本線という意味です。
10pxの部分の数値を小さくすれば細くなり、大きくすれば太くなります。
line1からline8までをすべて記述してline.cssなどファイル名で保存してから、それを外部ファイル化
してアメブロのプラグインで読み込ませておいて、記事ごとに枠線の種類を変えるといった使い方が
できます。

line.cssというファイルをサーバーにアップロードして、そのURLが
http://www.yourdomain.com/line.css
である場合は、アメブロに読み込ませる記述は以下の書式となります（前記事説明も参考下さい）

そして記事枠としてsolidを使いたい場合には、以下のように記述して記事を書きます。

記事

別の記事でinsetを使う場合には、以下の記述となります。

記事

つまり、記事ごとに、このように別の枠線を指定してやれば、記事ごとに異なる枠線が設定できます。
今回の記事枠はこれを例示するために、敢えて前記事（inset）とは異なる枠線（double）を設置しています。

アメザク（アメブロザクザク）テンプレートカスタマイズ～記事枠設置～

Sun, 23 Jan 2011 16:31:54 +0900

記事に枠を付けることで、ついつい読んでしまう。という家族の言葉で記事枠を設置してみました。
設置するにあたりどんな感じにしようかな？と少し迷いました。
最も簡単な方法は記事文章を

記事

で囲む方法ですが、これでは味気ないので、別の方法をとることにしました。
※blockquoteを使うと記事が点線枠で囲まれて表示されます。

今回設置した枠線はスクリプトを利用する方法を採りました。
以下の記述をした「sample.css｣(任意の名前でＯＫです）を作成してサーバーにアップロードしておいて、
アメブロのプラグインで外部ファイルとして読み込ませる方法です。

【手順１】
■sample.cssの内容
------------------------------
p.sample {
padding: 15px;
border: inset 10px #336633;
}
------------------------------
①insetを使うとこのブログのように上と左のボーダーが暗く下と右のボーダーが明るく表示され、
　ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。
②記事枠と文章との間の余白は、「padding: 15px」の部分で指定しています。
　これを指定していないと文章と枠の間に全く余白がなくなって読みづらくなります。
　paddingの数値は、ご自身で数値を調整されて下さい。
③色指定は上記の「#336633」（カラーコード）の部分ですので、自分の好みの色を指定します。　　　
　sample.cssファイルは「サクラエディタ」を使って「UTF-8」の文字コードで保存。
　これをサーバーにアップロードしています。
　サーバーにアップロードしたファイルのURLを控えておきます。

【手順２】
■外部スクリプトファイルとして読み込み
sample.cssのURLがhttp://www.yourdomain.com/sample.cssである場合、以下のスクリプトを記述します。

そして、この記述をアメブロのプラグインの最後尾に貼り付けて保存します。

【手順３】
■上記の記事枠を表示させるために、

記事

というスタイルで記事を書きます。
　※「sample」としているのは、手順１で作成したCSSファイル名をsample.cssと定義しているためです。
　　他の名前を使ってcssファイルを作成されていれば、その名前を使用します。

以上で、このブログのように記事の周りに枠が表示できます。
色については、グラフィックアクセラレーターやディスプレイ環境によって違って見えたりしますので
出来れば色再現性・解像度の良い環境で確認しながら色を決めて下さい。

アメザクテンプレートに更にカスタマイズを加えてオリジナルアメブロへ

Sun, 23 Jan 2011 04:37:24 +0900

アメザクテンプレートの無料配布キャンペーンが終了し、いよいよ販売がスタートしました。　
無料でも手にされた人は限られた人であったようですが、デフォルトのままでは、他の人と似たような
ブログになってしまいますから、差別性を高めるために現在いろいろとカスタマイズをしている最中です。

このテンプレートは、触れば触るほどに味が出てくるスグレモノテンプレと私は感じています。
　⇒　アメブロザクザク（略してアメザク）

このアメブロ自体「アメザク」テンプレートで作成したものです。
既にグローバルナビゲーション（ヘッダーメニュー）を設置していますが、アメザクのテンプレートには
グローバルナビゲーション（ヘッダー下のメニュー）は設置されていません。
なのでカスタマイズして設置しましたが、私が姉妹ブログで紹介した設置方法ではうまく設置できません
でしたので全く違う方法でプラグインとフリースペースを利用して設置をしています。
以前の方法ではＣＳＳを編集していましたが、今回の方法は不要です。

更にメールフォームを記事下に設置しました。
その方法については、姉妹ブログで紹介済みのオリジナルな方法ですが、JavaScriptを利用してサーバー
からJSを外部ファイルとして読み込ませたりする必要がありますので初心者の方は手こずるかもしれません。

こんな感じでカスタマイズをしている最中ですが、デフォルトのアメザクテンプレのイメージとは別物
になりつつあります。
次回はスライドショーをメッセージボードに設置してみようと思います。