本家ネタ

便乗ネタ第一弾:超短期集中講座の補足解説

 ←伝説のY.FUKUNAGAに続けるか!?戸崎騎手が香港国際騎手招待レースに挑む! →便乗ネタ第二弾:見切れ画像のラモーヌ
※この記事は競伝プレイヤー用です。

某ラクダ画像が特徴のブログにて、競伝ファンサイト作成者向けの超短期講座が更新されていましたね。
講座記事は全部で2つあるのですが、
2回目の記事では画像拡大、見出し、ブログバナーの3つについて解説がなされています。
まだファンサイト作成を始めたばかりという人にとっては、かなり役立つ情報になることでしょう。
一度ご覧になってみるのもいいかもしれません。

一方で、この短期講座は、2回目にして早くも最終回を向かえてしまったみたいです。
さすがは「超短期講座」というだけあって、詰め込む期間も早いですね。
説明も必要最小限のもの以外はできる限り省かれているようです。

しかし、最小限の説明だけでは、できることも少なくなってくるというものです。
そこで、今回、当ブログでは超短期講座に便乗する形で、
少しばかり補足解説を行っていくことにします。

各解説に対する補足説明


※当ブログで行うのはあくまで補足解説です。
 当記事を読まれる前に、元解説のほうを読むことをオススメします。


マウスオンでの画像拡大


まず、講座記事で最初に紹介されているマウスオンでの画像拡大ですが、
これについては特に補足できることはないでしょう。
scriptタグを使って外部からjQueryとjavascriptのコードを自身のブログに導入するという内容ですので、
特に個人でいじることができる部分もありません。

ちなみに、講座中で紹介されている< script >タグを使えば、
javascriptなどを使って本文中に色々な仕掛けを仕込むことができます。
しかし、調べてみたところ、どうやら競伝プレイヤーの大半が使用しているアメブロでは、
< script >タグやjavascriptタグが禁止タグに指定されているみたいです。
これは少しばかり残念ですね。

見出しの補足解説


次に見出しについての補足解説を行っていきます。
大まかな解説は元々の解説ページがすでに行っているため、
ここでは少し細かいところを補足していく形になります。

なお、元サイトのほうではアメブロ版と他ブログ版でコードが分けられていますが、
FC2ではどちらのコードでも同じように表示されます。
そのため、禁止タグの制限等の特別な事情がないのであれば、好みのコードを使えば良いでしょう。
面倒ならば、見出しの< h >タグを使って済ませてしまうという手もあります。

さて、話を戻して、ここから見出しを細かく検証していくことにしましょう。
そのために、まずは元々のコードを分解して考えていきます。
◯表示例

見出し 他


◯コード表示

< p align="left" style="padding-left: 10px;
font-weight: bold; border-bottom-color: rgb(181, 9, 9); border-left-color: rgb(181, 9, 9);
border-bottom-width: 1px; border-left-width: 10px; border-bottom-style: solid; border-left-style: solid;">
見出し 他< /p >

「超短期集中講座『競伝ブログ』2 最終回w」より引用)

上記の見出し用のコードは、元の解説記事でアメブロ用と解説されているものです。

このコードの構成を分解すると以下のようになります。
◯ベースとなるコード
< p 様々な指定>見出し 他< /p>

◯様々な指定の中身
指定意味
align="left"左寄せ
style=""スタイルシートのコードを記述
padding-left: 10px;paddingの左スペースを
10ピクセル空ける
font-weight: bold;文字の太さを指定:太字
border-bottom-color: rgb(181, 9, 9); 下の枠線の色を
(赤181、緑9、青9)の色に
border-left-color: rgb(181, 9, 9);左の枠線の色を
(赤181、緑9、青9)の色に
border-bottom-width: 1px;下の枠線の太さを1ピクセルに
border-left-width: 10px; 左の枠線の太さを1ピクセルに
border-bottom-style: solid;下の枠線を実線に
border-left-style: solid;左の枠線を実線に


◯参考(MarginとPaddingとBorderの違い)


(画像引用元:ぱたぱたアニメ館

コードのベースになっているのは< p >タグです。
pというのは"P"aragraph(段落)の頭文字を表していて、その名の通りに段落を分けるのに用いられます。
当然ですが、アスコットに潜むといわれる伝説の馬主を表すタグではありません。

つまり、あの見出しのようなものは、
< p >タグの間に様々な指定を書き込むことで作成されているというわけです。
ですから、少しばかり見出しをアレンジしたいのであれば、
スタイルシートのプロパティ一覧を参考にしながら、
style="〇〇"の〇〇にあたる部分を書き変えていけばよいことになります。



では、続いて他ブログ版のほうも見ていきましょう。
◯表示例

見出し 他


◯コード表示

< div style="border-left:10px solid #000099; border-bottom:2px solid #000099;
padding-left:10px; font-weight:bold;">見出し 他< /div>

「超短期集中講座『競伝ブログ』2 最終回w」より引用)

こちらの見出しは、アメブロ版のほうと異なって< div >タグがベースとなっていますね。
Divとは"Div"ision(区画、分離)のことであり、
その名の通りに領域を分離したりするのに利用するタグです。


そして、このコードも先ほどと同様に構成を分解すると以下のようになります。
◯ベースとなるコード
< div 様々な指定>見出し 他< /div>

◯様々な指定の中身

指定意味
style=""スタイルシートのコードを記述
border-left: 10px solid #000099;左の枠線
太さ10ピクセル、実線、色(#000099;)
border-bottom: 2px solid #000099;下の枠線
太さ2ピクセル、実線、色(#000099;)
padding-left: 10px;paddingの左スペースを
10ピクセル空ける
font-weight: bold;フォントの太さ指定:太字


こうしてみると、最初のアメブロ版< p >タグと構成はほぼ変わらないことがわかりますね。

こちらもアレンジするのであれば、スタイルシートのプロパティ一覧を参考にして、
style="〇〇"の〇〇にあたる部分を書き変えていけばよいことになります。

ちなみに、画像を表示する< img >タグやひとかたまりの範囲を定義する< span >タグなど、
他のタグでも記述の仕方自体はあまり変わってきません。
慣れてきたらいろいろいじってみるのが良いでしょう。

ブログバナーの補足解説


元の解説ページでは、バナーの作り方に関する説明が省略されています。
そこで、当ブログではその部分を少しだけ補足していくことにしましょう。


まず、元の解説ページではバナーはパソコン標準装備のペイントでも作れると書いてありますが、
結構不便ですのでやめておいたほうがいいでしょう。
その気になればEXCELペイントで画像を作ることはできるみたいですが、
細かいものになるとかなりの時間と熟練が必要になってきます。
変に手間をかけるくらいなら、フリーのペイントソフトを利用したほうが手っ取り早いでしょう。

とりあえず、元の説明ブログに書かれているGIMP2
メディバンペイントとかファイアアルパカあたりを利用してみるのが良いかもしれません。

ただ、ペイントにも使い道がないわけではありません。
例えば、簡単な編集ではペイントを利用したほうが逆に便利だったりしますし、
ペイントで保存することで画像の容量を下げることができたりします。
要は使い方次第ということですね。

コラ作成のために


では、コラ作成環境を整えたところで、
次はコラ作成に重要な透過素材とレイヤーについて解説しておきましょう。

まず、透過素材ですが、これはその名の通り背景が透けている画像のことです。
画像を組み合わせることで作成するコラにとっては、
欠かすことのできないものであるといって過言ではないでしょう。

例えば、以下の背景の左側に透過素材を、右側に非透過素材を張り付けたとしましょう。
デモ用2

すると以下のようになります。

デモ用

左の透過素材では背景が透けているのに対し、右の素材では背景が隠れてしまっていますね。
このように背景と重ねあわせてコラを作成する際には、透過素材というものは非常に重宝するのです。

なお、透過素材を作成するには、画像の背景を消して透過pngで保存する必要があります。
ペイントツール上で地道に消しゴムで背景を消していったり、
範囲指定を行った上で背景を消去したりして、頑張って素材を作成していきましょう。



次にレイヤーですが、これは名前の通り画像の層になります。
イメージとしては、層(レイヤー)を重ねていくことで1枚の画像が完成する感じです。

例えば、透過素材の説明に使った画像は、
レイヤー1の背景にレイヤー2の素材を重ねることでできています。

画面

そして、このレイヤー1と2の順序を逆にすると、
レイヤー1の背景がレイヤー2の素材を覆い隠すことになります。

画面2

とりあえず、レイヤーに関する詳しい説明については、このリンク等をご参照ください。



下記の画像は、ただのブログランキングバナーです。
もしよろしければ、クリックしていってくださいな。

ヘルバナー



スポンサーサイト



記事一覧  3kaku_s_L.png 未分類
記事一覧  3kaku_s_L.png 本家ネタ
記事一覧  3kaku_s_L.png リアル競馬ネタ
記事一覧  3kaku_s_L.png 競馬(?)ネタ
記事一覧  3kaku_s_L.png 海外レース紹介
記事一覧  3kaku_s_L.png アンケート企画
記事一覧  3kaku_s_L.png 製作中報告
記事一覧  3kaku_s_L.png ニコアプリネタ
記事一覧  3kaku_s_L.png 競伝関連まとめ
記事一覧  3kaku_s_L.png Frankel in Japan

~ Comment ~

管理者のみ表示。 | 非公開コメン卜投稿可能です。

~ Trackback ~

卜ラックバックURL


この記事にトラックバックする(FC2ブログユーザー)

【伝説のY.FUKUNAGAに続けるか!?戸崎騎手が香港国際騎手招待レースに挑む!】へ  【便乗ネタ第二弾:見切れ画像のラモーヌ】へ