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

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

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

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

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

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

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


画像の解像度

ブログに貼り付ける画像の解像度(サイズ)をどうするか悩んでます。

ブログで重要になってくるのが画像幅のサイズ(pixel)をどうするかです。画像の解像度が縦に長い分には影響は出にくいのですが、横に長いとはみ出しやカラム落ちの影響が出てきます。

後からのテンプレート変更を想定すると、本文幅の狭いものから広いものに変更すると問題が起きにくいですが、広いものから狭いものに変更すると画像幅の修正が必要になるケースがあります。

なので、ブログ開始に当たって意識的に本文幅の狭いものを選びました。1カラムで本文幅が狭いのでかなり全体幅の狭い印象になっていると思います。今後徐々に幅が拡大していくと思われます(笑)

ブログテンプレートを「1000px以内の2カラム以内」と決めているので、本文の幅は広くても800px程度で画像もそれ以内に収めなくてはなりません。

自分がUPする画像がどんなものが多いかを想定した時に、旧テレビのSD解像度(720*480)はそのまま直接貼る事ができると便利です。しかし、2カラムテンプレートで本文幅が720px以下のものがたくさんあります。

ちなみに元祖エボリアヌーメは解像度(640*480)を想定しているので、横720pxは地味に圧縮しなければならなくて不便だったりします。

なかなか決められないので、サンプルを表示させて検討しようと思います。

例:300*300
sp125.jpg

例:400*400
sp125.jpg

大きいものは Shadowbox でレイヤー表示をするつもりでいます。

例:120*120 ⇒ 500*500

sp125.jpg

画像幅に合わせてテンプレートを選ぶべきか、テンプレート幅に合わせて画像を縮小するか、それが問題だ。
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

ブログテンプレートの選び方

FC2ブログではいくつかの公式ブログテンプレートが配布され、それに加えユーザーによる多くの共有ブログテンプレートが公開・配布されています。

私にはブログテンプレートを選ぶ一定の基準があります。それは主に横幅です。なぜ横幅を基準にするかというと、ブログ閲覧環境に一番影響されると思っているからです。

ブログ閲覧環境をどう想定するかで、どんなレイアウトのテンプレートが最適なのか考えてみました。

私が想定したのは、デスクトップPCで液晶モニターをピボット表示(90度回転)にしている環境です。Webは縦長でスクロールすると全体が見える構造になっているので、モニターが縦長だと一度に表示される情報量が多く、スクロール量が減るので非常に便利です。実際に私が使っている環境でもあります。

私のモニターはWUXGA(1900*1200)なので若干違いますが、今主流のFullHD(1920*1080)を90度回転させて閲覧することを想定しました。横幅が1080px以上だとサイドスクロールが必要になります。ブラウザのウィンドウフレームやスクロールバーのことも考えるとさらに狭くなるので、切りよく1000px以内に抑えるべきだと考えてます。

ノートパソコンでの閲覧を想定すると、ノートパソコンはWXGA(1366*768)が多いので幅広のテンプレートでもいいのですが、閲覧環境がノートパソコンだけというのは考えにくいので、横解像度の狭い方に合わせるべきでしょう。

テンプレートを選択する際に「3カラム」「2カラム」「1カラム」のどれかを選びますが、基本的にカラムが増えると全体幅は広くなります。

この本家エボリアヌーメでは追記を多用せず、縦長サイトになることを想定しているので、カラムは欲張らずに1か2にします。サイドスペースにはプラグイン以外表示するつもりはなく、広告スペースも考慮するつもりがないので、2カラムあれば充分でしょう。

「全体幅1000px以内の2カラム以内のテンプレート」これが私のブログテンプレートを選ぶ大前提です。
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

更新日の表記

コレ⇒ 更新日 2013.10.05 [土]


記事を公開した後、追記したり編集し直したりして修正を加えることがあります。その際に修正を加えたことを明確に表示すると読む人にも親切ですし、著者の信用性が上がります。

本文中の該当箇所に修正を加えた旨の表記をすればいいのですが、できたら公開日のほかに更新日を併記すれば分かり易くなります。

FC2ブログには更新日を表示する機能がないので、更新日は本文中に書き加えるようにしてます。その際にブログテンプレートの公開日と同じレイアウトで表記すると統一感があっていいですよね。

ということで、更新日を記載する時はブログテンプレートの表記を模して本文中に書き加えます。

難点はテンプレート変更の際にはそれ以前の更新日表記のレイアウトがそのまま残ってしまうことです。更新日表記を修正するために更新することになってしまいます(笑)
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

HTML・CSS 参照サイト

ブログテンプレートの HTML・CSS の編集をするときに、役に立つサイトの紹介です。

まずはタグの意味の確認
HTMLクイックリファレンス
TAG index
とほほのWWW入門
1つのサイトで理解できなくても3つのサイトを比較すれば理解できることもあります。

色のコード調べ
原色大辞典

構文チェック
W3C Markup Validation Service
W3C CSS 検証サービス
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

ブログテンプレート必須編集項目5 SyntaxHighlighter

ブログでソースコードを記載する可能性があるので、SyntaxHighliterを導入しておきます。

SynataxHighliterの導入方法については元祖エボリアヌーメで紹介してあるので、そちらを読んでください。

元祖エボリアヌーメ「SyntaxHighlighter を導入してみた

SyntaxHighliterを導入しなくてもソースコードは記載できます。その場合は <pre> タグを使って記載するのですが、その場合は下記のようになります。

例:画像のソースコードの表示方法
no-image.jpg

<pre>
<img src="http://blog-imgs-58.fc2.com/e/v/o/evolianume/no-image.jpg" alt="no-image.jpg" border="0" width="100" height="100" />
</pre>


SyntaxHighliterを使用するとソースコードが下記のように表示されます。

<pre class="brush: html;">
<img src="http://blog-imgs-58.fc2.com/e/v/o/evolianume/no-image.jpg" alt="no-image.jpg" border="0" width="100" height="100" />
</pre>


短いので違いが分かりにくいかもしれませんが、複数行にわたる時は読みやすくなると思われます。

以下、追記部分に今回ブログテンプレートに追加したソースコードを記載します。
続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

ブログテンプレート必須編集項目4 LightBox系

LightBox系を導入する場合はブログテンプレートのHTMLを編集する必要があります。

LightBox系とは、画像をモーダルウィンドウで表示するプラグインです。
サムネイル画像等をクリックするとその拡大画像がWeb上にレイヤー表示されるものといえば分かるでしょうか。

例:サンプル画像
sp125.jpg

ブログに導入する方法は元祖エボリアヌーメで紹介していますので、そちらをご覧ください。

元祖エボリアヌーメ「Lightbox2 導入方法
元祖エボリアヌーメ「Shadowbox を導入してみた

どちらも、導入する時はCSSとJavaScriptに記載の画像のファイルパスをFC2のファイルアップロード先のパスに書き換える必要があります。
また、FC2ブログのアップロード制限でファイル名に「.」ドットを含められないので、他の文字に置換するなどの修正が必要です。

関連ファイルをアップロードしたら、ブログテンプレートのHTML編集で <head>にCSSとJavaScriptを読み込む記述を加えます。詳しくは上記リンク先で確認してください。

今回はShadowboxを導入しました。

以下、追記部分に今回テンプレートに追加したコードを記載してます。
続きを読む
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

ブログテンプレート必須編集項目3 ファビコン

ブログにオリジナリティーを出すのに有効なのが『ファビコン』です。

ファビコンについては元祖エボリアヌーメにて記事にしていますので、導入方法はそちらを参照してください。

元祖エボリアヌーメ「ファビコンを導入してみた

表示させるアイコンを用意して、</head> の直前あたりに
<link rel="shortcut icon" href="[アップロード先]/favicon.ico">

を記述します。

応用としてGIFアイコンを表示させる場合は
<link rel="shortcut icon" href="[アップロード先]/favicon.ico">
<link rel="icon" type="image/gif" href="[アップロード先]/favicon.gif">

とGIFアイコン用に一行付け加えます。
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

ブログテンプレート必須編集項目2 アフィリエイト

ブログでアフィリエイトを行うために各Webサービスで発行されたアフィリエイト用のタグを貼り付けます。

各記事ごとにアフィリエイトを貼る場合やプラグインにアフィリエイトを貼る場合はブログテンプレートを編集する必要は無いでしょう。
ブログの一定箇所に常時アフィリエイトを表示させる場合などにテンプレートのHTML編集作業が必要となります。

また、各WebサービスでJavaScriptを利用したアフィリエイトなど、テンプレートのHTML編集作業が必要となる場合があります。
私の場合、Amazonアソシエイト(アフィリエイト)の 商品プレビュー(ベータ版) と PublisherStudio で発行されるJavaScriptのコードをテンプレートの </body> 直前に貼り付けています。

アフィリエイトの運用はブログの見た目だけでなく信用にも係るので、匙加減が大事です。
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

ブログテンプレート必須編集項目1 アクセス解析

ブログテンプレートを変更した時に必ず手を加える事項を書き記します。

前提としてFC2アカウントで下記サービスを追加しています。

・FC2アクセス解析
・FC2カウンター

FC2アクセス解析


FC2アクセス解析にログインし、アクセス解析対象ページの追加でブログ名とURLを登録します。

管理画面の「設定」にある「解析用HTMLタグ」で表示されるコードをコピーして、ブログテンプレートのHTML編集画面でHTMLタグ <body> 直下にこのコードを貼り付けます。これはヘルプや解説に書いてある指示通りのやり方です。

HTMLタグを探す時にはブラウザの検索機能 [ctrl]+[F] を使って検索してます。

FC2カウンター


FC2カウンターはブログテンプレートのHTML編集ではなくプラグインに登録します。
なのでプラグイン対応のブログテンプレートを使用する場合には基本的にHTML編集する必要はありません。

もしテンプレートの表示上おかしなところがあったらプラグインの設定からHTML編集をします。
もしくはブログテンプレートのHTML編集・CSS編集でプラグイン表示の該当箇所を編集します。

プラグイン登録方法は、公式プラグインの「FC2カウンター」を使うのではなく、公式プラグインの「フリーエリア」にアクセスカウンターとオンラインカウンターのタグを貼り付けて、一つのプラグインとして管理しています。

FC2カウンターの設定においては二重カウントルールを「二重カウントしない」、自分のカウント「カウントしない」に設定してあります。
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

FC2ブログ 環境設定

ブログカスタマイズの履歴として記事を残します。

ブログを始めてまずやることといえば、「設定」でしょう。
設定の項目で「環境設定」がありますが、私が意識的にしている設定をここに書き記します。



ユーザー情報


ジャンルはブログの内容が複合的なので迷うのですが、後から変更できるのでとりあえずアダルト・アフィリエイト以外にしておきます。いちおう「ブログ」「その他」にしてあります。
メール通知は「通知しない」にしてます。通知しないので関係なくなりますが、承認用URLは「表示する」にしてます。
メールフォームはプラグインを利用していませんが、認証を「行う」にしてあります。

プロフィール


画像は横120px×縦120pxにしてます。大きすぎるとテンプレートによっては画像がはみ出して表示されてしまうので、この位が調度良いかと思います。ちなみにFC2プロフィールと同サイズです。



ブログの設定


記事の設定

表示件数は「10件」にしました。追記をあまり利用しないつもりなので縦長になると思いますが、長すぎに感じないように件数を少なめにしました。表示順は「新しい順」。RSSは「一部表示」
RSS広告の設定「表示しない」
関連記事リストは「上記全て」「前後の記事を新しい順」「15件」日付を「表示する」にしています。できるだけ関連記事を多く知らせるように設定してます。
拍手ボタンは設定しません。FC2ブログ拍手を利用する場合は「追記リンクの後」がいいのではないでしょうか。ちなみにFC2のサービスにFC2拍手がありますが、このFC2ブログ拍手とは別物です。
Twitter・Facebookボタンは表示しません。

SNSとの連携

Twitter連携は Deka-E@evolianume (https://twitter.com/evolianume) へブログ更新の通知をします。ツイートまとめ機能は利用しません。
Facebook・Instagramとの連携はしません。

検索バーの設定

検索バーの利用は「利用しない」

画像高速表示の設定

高速表示の設定を「利用しない&広告を表示しない」にします。これは利用しなくても影響は少ないと思ってます。広告を表示しなくても表示が遅いとは感じません。

訪問者履歴

いずれも「残さない」にしています。
残すに設定しておいた方がアクセス数アップにつながったり、リンク先に訪問を通知できたりと便利な反面、検索に引っかかったFC2関連サイトに無差別的に履歴を残してしまうのがよくないです。また、ときどきスパムFC2サイトが訪問履歴を残していくので、訪問履歴は全く見ないようにしています。

コメント設定

承認設定を「ブロともの場合はすぐに表示」にしました。記事内容をラフにしたかったので、多くの批判を浴びることを予想して承認制にしました。
コメントの確認の設定は確認画面を「表示あり(画像承認あり)」にしてます。

投稿設定

自動改行をデフォルトの「改行をそのまま反映」にしました。HTMLタグを使う時は各記事ごとに改行の扱い「HTMLタグのみ」にするなどして投稿します。
コメント・トラックバックは原則「受け付けない」にして、各記事ごとに「受け付ける」にして投稿します。
画像のリンクを「画像のタグのみ」挿入にします。大きな画像は縮小・リサイズして、直接貼り付けます。



その他の設定


初期ページ設定

ログイン後開くページ「お知らせ」
簡易モードを初期設定に「しない」
お知らせポップアップを表示「する」



以上が私の意識的にしている設定です。
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m
ページ下部までご覧いただきありがとうございました。