カテゴリ0の固定表示スペース

カテゴリ0の固定表示スペースの本文サンプルです。
テンプレート使用時に削除してください

カテゴリ1の固定表示スペース

カテゴリ1の固定表示スペースの本文サンプルです。
テンプレート使用時に削除してください

カテゴリ2の固定表示スペース

カテゴリ2の固定表示スペースの本文サンプルです。
テンプレート使用時に削除してください

「ブログカスタマイズ 」カテゴリ記事一覧


FC2ホームページ アルバムメーカー

FC2ホームページの機能に「アルバムメーカー」機能が追加されました。

FC2
アルバムメーカー
⇒http://web.fc2.com/albummaker/
FC2総合インフォメーション
【ホームページ】誰でも簡単にWEB漫画を公開できる!「アルバムメーカー」登場
⇒http://fc2information.blog.fc2.com/blog-entry-1580.html
FC2ヘルプ
マニュアル「アルバムメーカー」
⇒http://help.fc2.com/web/manual/Home/kanrigamen/albummaker.html

Impress Internet Watch
FC2、簡単にウェブマンガを公開できる「アルバムメーカー」
⇒http://internet.watch.impress.co.jp/docs/news/20150410_697264.html

ウェブ漫画を公開するのに適した機能ということで、ちょっと興味をひきました。しばらく描いてないですが、コミPo!で漫画を描いた際に使えるのではと考えたからです。

そこでアルバムメーカー機能に触れてみたところ、何てことは無い、画像をJavaScriptで並べる機能でした。横に並べるのでは無く、縦に並べるのがちょっとだけ漫画に向いているといった印象です。

手持ちの漫画が無いので、ざっと手持ちの画像をUPしてサンプルページを作ってみました。

枚数が最大100枚までで、1枚の容量制限が2MB、jpg/jpeg/png/gifの4種類に対応、ただしアニメーションgifには非対応とのことです。

現在のところ作成できるアルバムが1つだけなので、使いどころが限られている感じですが、今後の機能追加に期待したいです。

この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

テキストエディタAtom

Webページを作る際、主にテキストエディタを使っているのですが、『秀丸エディタ』を長年愛用しています。

秀まるおのホームページ(サイトー企画)
秀丸エディタ
⇒http://hide.maruo.co.jp/software/hidemaru.html

複雑なWebページを作るときは、Webオーサリングツールで、無料化された『Microsoft Expression 4』を使うこともあります。

Microsoft
Expression 公式サイト
⇒http://www.microsoft.com/expression/jpn/

この『Microsoft Expression 4』は開発が数年前に中止されたため、いかんせんHTML5との相性が悪いです。しかも日本語との相性も悪く、文字化けをよく起こします。

何か変わる物は無いかと探してみたところ、現在の流行はGithubで提供されている『Atom』というテキストエディタということを知りました。

ということで、『Atom』をWeb開発環境に導入してみました。

続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

【jQuery】 fancyBox を導入してみた(仮)

JavaScrip/jQuery はまだ勉強中で細かいことは理解できてませんが、jQueryを利用したモーダルウィンドウの『fancyBox』を試しに導入してみました。

『fancyBox』を利用すると、例えば、下記画像をクリックした時のようなモーダルウィンドウ表示になります。

sample1.jpg

とあるサイトを見ていたら、この印象的なモーダルウィンドウが表示されたので、どんな仕組みなのか調べてみたら、どうやら『fancyBox』というjQueryを利用しているものだと分かりました。

このブログでも実装できないかと試してみました。

公式サイト
fancyBox
⇒http://fancyapps.com/fancybox/

続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

Bootstrapを勉強しました

Web学習

Web技術について学習し、『Webクリエイター能力認定試験』『Webデザイン技能検定』を受験し合格しました。HTMLとCSSなら標準的なことなら理解できるレベルです。CSS3はちょっと怪しいですがw

せっかく学習したのでホームページを作ろうとFC2ホームページに登録したものの、たいしたサイトはまだ作れていないですorz

登録しているFC2ホームページはこちら
くまらじゅじゅ

そして、しばらく時間をおいてしまったので、知識が徐々に減ってきています。つまり忘れたw

これでは勿体ないので、もうちょっと頑張ってステップアップを図ろうと、『Bootstrap』を勉強してみました。

続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

ブログレイアウト 確認用

ブログレイアウト確認用

見出し1

見出し2

段落パラグラフ
下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本 下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本 下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本 下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本与卉亠十廿卞广下广卞廿十亠卉与本二上旦上二本


↑水平線 hr

リンク表示 a

見出し3

  • 文字装飾 bold
  • 文字装飾 italic
  • 文字装飾 s
  • 文字装飾 u
  • 文字装飾 em
  • 文字装飾 strong

見出し4

  1. 文字サイズ xx-large
  2. 文字サイズ x-large
  3. 文字サイズ large
  4. 文字サイズ medium
  5. 文字サイズ small
  6. 文字サイズ x-small
  7. 文字サイズ xx-small
見出し5

引用 blockquote

<pre>
ソースコード ソースコード ソースコード ソースコード
</pre>
見出し6
テーブル表示
番号項目1項目2項目3
No.1データ1データ2データ3
No.2データ1データ2データ3
No.3データ1データ2データ3
No.4データ1データ2データ3
No.5データ1データ2データ3
No.6データ1データ2データ3
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

テンプレート変更

ブログ開始直後にAmazonアソシエイトの審査に落ちたので、ブログが未完成と判断されたと思い、頑張って毎日ブログを更新してました。

本家エボリアヌーメ「Amazonアフィリエイト申請 非承認

記事の数が溜まってきたので、再度Amazonアソシエイトに申請したところ、また落ちましたorz

ブログの方向性が定まっていないと判断されたからでしょうか?具体的な該当項目が分からないので、ショックです。

ひょっとしたらブログテンプレートのデザインがシンプルすぎたから集客力が無いと判断されたのでしょうか?よく分かりません。

このブログの趣旨とは若干ずれますが、もう少しブログアピールをしていこうと思います。

とりあえず、画像をいくつか付け足して、ブログテンプレートをカラフルなものに変更してみます。

記念に初代テンプレートのスクショを撮ったので残します。

初代テンプレート

追記
アクセス解析を見てもAmazon関係からのアクセスが無いので、ひょっとしたらロック(ブラックリスト入り?)されているのかもしれません。
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

SEO対策

SEOとは「検索エンジン最適化」(Search Engine Optimization)のことです。言い換えると検索上位に引っかかるようにすることです。

SEOだけでビジネスになってしまうほど重要なことなので、一度SEOについて調べることをお勧めします。

FC2 SEO対策ガイド

ブログテンプレートによってSEO対策の質が違いますが、使ってみないと分からないです。気になるのであれば、テンプレート作者がSEO対策をしていると謳っているものを選ぶといいでしょう。

かくいう私は積極的なSEO対策はしていません。自己満足のためにブログやっているので、多くの人に見てもらいたいという欲がないからです。

ただ、経験上SEOに有効な書き方があると分かっているので、その点について少し書いてみます。


  • HTMLタグを使って書く
  • リンクを貼る
  • ブログのキーワード・説明
  • 他サイトよりもプラスアルファを加える

HTMLタグを使って書く

重要なことは見だしタグ < h* > ~ < /h* > で挟むだけでも意味があると思います。本文を <p> ~ </p> タグを使い、改行に <br /> タグを使って、改行の扱いを「HTMLタグのみ」に設定するとさらに効果的です。

リンクを貼る

よくいわれるのがナチュラルリンクと呼ばれるもので、関連性のあるページをリンクすることです。無造作に関連性の薄いページのリンクを貼りまくると逆効果でマイナス評価になるようです。

ブログのキーワード・説明

ブログテンプレートの冒頭 <head> に meta(メタ) タグと呼ばれる箇所があります。そこに description(説明) と keywords(キーワード) を書くのが一般的です。

テンプレート製作者がどのように設定しているか確認するといいでしょう。SEO対策を謳っているテンプレートは細かく設定されています。

他のブログ内容よりもプラスアルファを加える

書いた内容が他サイトと内容が被る場合、プラスアルファを加えると上位に引っかかります。本文とは別にページの構造等も影響していますが、なんだかんだいって本文の内容が大事です。

この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

テンプレート確認用コード

テンプレートを選ぶ時にタグとスタイルの確認をします。そのためにテンプレート確認用の記事があると便利です。

このブログを始めるにあたって記事「テンプレート確認用」を書きました。

画像を除いてそのコードを公開しますので、コピーして本文に貼り付け、最新の日時で投稿してテンプレート確認用にご利用ください。投稿する時には改行の扱いを「HTMLタグのみ」に変更した方がいいと思います。



<h1>見出し1</h1>

<h2>見出し2</h2>

<p>段落パラグラフ<br /> こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは<br /> こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは こんにちは</p>
<hr size="1" />
<p>↑水平線 hr</p>
<p>「<a title="linktest">リンク表示 a</a>」</p>

<h3>見出し3</h3>

<ul>
<li><b>文字装飾 bold</b></li>
<li><i>文字装飾 italic</i></li>
<li><s>文字装飾 s</s></li>
<li><u>文字装飾 u</u></li>
<li><em>文字装飾 em</em></li>
<li><strong>文字装飾 strong</strong></li>
</ul>

<h4>見出し4</h4>

<ol>
<li><span style="font-size:xx-large;">文字サイズ xx-large</span></li>
<li><span style="font-size:x-large;">文字サイズ x-large</span></li>
<li><span style="font-size:large;">文字サイズ large</span></li>
<li><span style="font-size:medium;">文字サイズ medium</span></li>
<li><span style="font-size:small;">文字サイズ small</span></li>
<li><span style="font-size:x-small;">文字サイズ x-small</span></li>
<li><span style="font-size:xx-small;">文字サイズ xx-small</span></li>
</ol>

<h5>見出し5</h5>

<blockquote><p>引用 blockquote</p></blockquote>
<pre>&lt;pre&gt;<br />ソースコード ソースコード ソースコード ソースコード<br />&lt;/pre&gt;</pre>

<h6>見出し6</h6>

<table>
<caption>テーブル表示</caption>
<colgroup span="1" />
<colgroup span="3" />
<thead>
<tr><th>番号</th><th>項目1</th><th>項目2</th><th>項目3</th></tr>
</thead>
<tbody>
<tr><th>No.1</th><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><th>No.2</th><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><th>No.3</th><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><th>No.4</th><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><th>No.5</th><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><th>No.6</th><td>データ1</td><td>データ2</td><td>データ3</td></tr>
</tbody>
</table>


この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

カテゴリー変更

突然ですが、ダイエットやめました(笑)

カテゴリーを見直しているのですが、やはりダイエットは『趣味』ではないんですよね。どちらかというと義務感が無ければやらない類です。

かつてスポーツマンだった私もダイエットとなると長続きしませんでしたorz そこでダイエットは諦めて好きなように体を動かそうと思います。ゴルフでもビリヤードでもダーツでもいいから体を動かそうということです(笑)

というわけでダイエットをスポーツカテゴリーの一部にしました。

2020年に東京オリンピックが開催されることだし、自分の中のスポーツマインドを復活させるつもりです。スポーツはするだけでなく見るほうも楽しもうと思います。

ちなみに好きなスポーツは、プロレス・格闘技・体操・水泳・陸上・自転車等の個人種目が多いです。自分自身がそうなのですが、団体競技や球技が苦手です。

野球・サッカー・バレーボール等のプロ競技団体がありますが、特にどこを応援しているというのは無いです。どちらかというと団体より選手の方に興味を持ちます。

今はプライベートでもどこの運動クラブにも所属していないので、どっかのクラブなりスポーツジムに通うなりしようかと検討しています。

この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

文字色・背景色

ブログの背景色・文字色の方針をあらかじめ決めておくのも大事だと考えています。

大雑把に分けると、「背景色白で文字色黒」「背景色黒で文字色白」があります。

よく言われているのが、前者はテキスト向き、後者は画像向きということです。実際は色の組み合わせは多種多様なので、一概には言えません。

気をつけたいのは、テンプレート変更時にベースカラーは同系にしないと本文の修正が必要になるケースがあるということです。

例えば、文章で強調したい箇所を赤文字で表現してしまった場合、こんな感じになります。

このブログは本家エボリアヌーメです。
このブログは本家エボリアヌーメです。

悪くは無いですが、黒背景色の場合だと黄色文字で強調なんてのも効果的だったりします。

このブログは本家エボリアヌーメです。

また、背景色が赤のテンプレートだとこんな風になってしまいます。

このブログは本家エボリアヌーメです。

こういった不具合を避けるためにも、テンプレート変更の際には背景色が同系統のものを選ぶ方がいいでしょう。

上記のようなトラブルを避ける方法として、本文中の文字に色指定をせずに、強調するタグ <em> や <strong> を指定してCSSで色を指定するなどの方法があるようです。

強調とは別に、ネタバレ防止のために文字を背景色と同一色にするなんて方法もあります。

正解は 元祖 です。」※選択して色を反転してみてください
正解は 元祖 です。」※選択して色を反転してみてください

この方法は強調タグでなく、クラス名を与えてCSSで色指定をすべきなんでしょうね。

とりあえず、この本家エボリアヌーメは背景色は白系統でいきます。
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m
ページ下部までご覧いただきありがとうございました。