カテゴリー: ブログカスタマイズ

本ブログでは時折、 話がWebやITとして専門的になった時に、 右サイドバーの運営者にメッセージから問い合わせて欲しい旨、 記しますが、 記事内に問合せ用のボタンを設置すれば、 閲覧者に煩わしい視線の移動を強いる必要がありません。 ではそんなことが出来るのでしょうか。

実際に表示している本ブログの HTMLソースを見てみます。 随分と長いテキストになりますから 運営者へメッセージ で検索します。 するとその下に以下の様なテキストが見つかります。

ここで赤字で表示したdivタグの side ・ sidebody の両クラスはサイドバーに表示するための装飾ですから省き、 それ以外を記事内に貼り付けてみた結果が下になります。

如何でしょうか？ 少々分かり兼ねると言う方はどうぞご遠慮なく このボタンからお問い合わせ下さい（笑）

本ブログでは右サイドバーに表示しているプロフィールに ニックネームだけではと思い、詳細を書き加えることにしました。 その際先走って姉妹ブログでの設定を其の儘持って来た為、 表示は図の様に余計な装飾が施されたものとなってしまいました。 はまぞうブログでは ブログ環境設定 項目でプロフィールの詳細を設定できますが、 そこに書き込んだ先走った設定が以下です。

そこで例によってテンプレートの CSS（ブログのレイアウト設定）を見れば、 以下の様になっていました。

これがブログ環境設定でのプロフィールの詳細項目を 囲ってしまう結果となり過剰装飾となっていた訳ですね。

其処で詳細項目設定を削除し、 中にあった記述をmessageクラスの中に転記し、 余計な記述を削除したものが下記になります。

記述は実にシンプルになり、 その結果が只今右サイドバーに表示されている極くシンプルなものですが、 如何でしょうか。

はまぞうブログには豊富にテンプレートが用意されているのですが、 本ブログ2010年9月26日、 今週のアクセス統計2 の記事で推測される様に、 ブログにオリジナル色を出す為、 トップの画像を交換したいという希望は多い様です。

交換するには元の画像が何処にあるか分からなければいけません。 さて元の画像は何処にあるのでしょう？ はまぞうブログにも幾つかのタイプがあるのですが、 今回は本ブログの姉妹ブログ ホームページ作成浜松Tips の場合を見てみましょう。

元の画像のある場所を知るには、 テンプレートをカスタマイズする時に編集可能となる CSS（レイアウトの設定ファイル）を見ます。 ホームページ作成浜松Tips でははまぞうテンプレートは 藤　イラスト3カラム を利用しています。 このCSSファイルを見て、 body{…} と書かれている部分を探すと以下の様になっていました。

設定ファイルにある通りリンクを張ってみます。 画像の表示 より画像を直接ご覧いただけると思います。 本記事の冒頭にある画像の下部分も伴った 縦に長い画像が見られたのではないでしょうか。 設定ファイルではこれをブログ全体の背景とし、 横方向に繰り返し表示することで、 トップ（ヘッダ）画像の様に見せているのですね。

本ブログのデザインは2010年9月16日の記事 記事タイトルレイアウトの変更 にも記しました様にはまぞう提供のテンプレート シンプルオレンジ　3カラム を元に順次オリジナリティを出していったものです。 其の中でも元のテンプレートの色が濃く残っていたのが ヘッダの下に3列に並ぶ左右のサイドバーの部分です。 真ん中のブログ記事部分が短い個別記事の場合などは問題無いのですが、 トップページやアーカイブでは其れが縦に長く、 左右の列が高さが届きません。 其の為左右の列の飾り罫に指定した、 オレンジの破線が途中で切れてしまうと言う不具合が発生していました。

今回其の左右の列の飾り罫が 例え真ん中の記事部分が高い場合でも 下まで届くように改善しました。 其のビフォー・アフター図が下になります。

ビフォーでは飾りの罫線が下まで届かず、 途中で途切れて見苦しいものとなっていましたが、 アフターではそんなこともなく、 見た目も綺麗に仕上がっている様に感じますが、如何でしょうか。

これを実現するには様々方法がありますが、 3列の上に一つブロックが乗っかっていると言うレイアウトが 多少ことを複雑にしますので、 此処は一番簡単な背景画像を利用する方法で解決しました。 実は3列は同じブロック内に兄弟の様に存在しています。 その3列兄弟を含む親ブロックの背景に縦に画像を繰り返し表示して、 飾り罫を下まで繋げてしまおうと言う手法です。

以上のことを実現するため本ブログでの CSS（レイアウト設定の為のファイル）を変更しました。 下が変更前、ビフォーの設定です。

上から親ブロック（略有）、左列、右列の設定です。 これを下の様に変更しました。

親ブロックには背景画像を設定し、 左列、右列のボーダーは削除します。 左列は左に寄せフロートしていますので余白を左に2ピクセル分、 右列では逆に右に2ピクセル分余白を設けます。 此れ等の設定変更でどうやら想定通りの結果が得られました。

以上は少々専門的になりますので、 若し設定が上手くいかないとお悩みの方は、右列 運営者にメッセージ からご連絡下さい。

本ブログではブログ記事内に <p> タグを用いることにしています。 pタグの p とは パラグラフ（paragraph） 即ち段落を示します。

文章をものするにあたって段落とは必要欠くべからざるものであることは 最早閲覧下さる方には釈迦に説法でしょう。 しかし、ことブログに於いてはお座なりですまされる例も多く見受けられる様です。 読者の利便にもなることですので、 設定されることを是非お薦めします。

本ブログでのパラグラフの CSS（レイアウト設定の為のファイル） 設定は以下にしてあります。

本ブログのデザインははまぞうから提供されているテンプレート シンプルオレンジ　3カラム を元に一週間ほどかけて少しずつオリジナリティを出す様に変更して来ました。 本ブログの2010年9月15日の記事 iPadに最適なブログの横幅 でも其の変更事項を記事内容に沿う形で、 ブログ全体の横幅、記事部分の横幅、右列部分の横幅について書きました。 今回は記事のタイトル部分を変更してみました。

変更前の画像が上のものです。 ハイライト処理を施した処が気になるブログ記事タイトルの部分で、 日付がタイトルの上に位置し、共に左に寄っていますのでアンバランスな感じがします。 其れを改造して下の図の形にしてみました

気になる部分の位置関係を修正し、 余白を微調整してみましたが、如何でしょうか。 少し専門的になりますが、これを実施するにあたり CSS（ページのデザイン設定の為のファイル）だけでなく HTML（ページの内容構成の為のファイル）を弄りました。 提供されているHTMLではHタグ（項目名を示す要素）の構成が 日付の方が記事タイトルより上位に設定されているのが気になりました。 一般の利用者としての違和感かも知れません。 ブログ提供側としては日付の方が項目として 重み付けが高い感覚も一概に否定出来ないと思います。 今回はHタグについてははまぞうから提供されたもの其の儘、残しておくことにました。