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

ブログ記事は書いたけれど公開は実際のイベントを鑑みてもう少し先にしたい、など 下書きのまま投稿せずにブログ記事を保存されているケースもままあることだと思います。 けれど、例えばテストとか、何某かの理由で先にリンクを作成したい場合もあるでしょう。 その時に必要なのが下書き記事の公開後のURLです。 はまぞう（HamaZo)ブログシステムに限っての話ですが、 この 公開前の記事の公開後のURLを知る方法 があります。

既に下書きを保存した状態であれば管理画面の左メニューの 記事一覧 から進めば当該記事が一覧に含まれていると思います。 そのタイトル項目部分にはリンクが設定されています。 その構文は以下の様になっている筈です。

はまぞうに於いてはブログの記事には ひとつひとつ別々のURLが割り当てられています。 そのひとつひとつを識別するのが【7桁の数字】ですから、 下書きの記事が公開された時のURLは以下の様になる筈ですね。

最近の記事 と言えばはまぞうブログシステムではサイドバーへ表示出来る標準装備のプラグインで、 投稿の日付の新しい順に上から表示して閲覧者の便宜を図ってくれる機能ですね。 このプラグインでは表示する数も ブログ環境設定 で変更することが出来ます。

本ブログのレイアウトに於いては最も目に付きやすい 左サイドバーの最上部に記事30件分を表示するように設定しています。 ブログ閲覧者の記事の選択肢を多くしようという試みですが、 返って見難い状況となっていました。 それはただ白地に黒文字のワンパターンの色使い表示の為、 記事毎に分かれた内容であるのに関わらず、 まるで長い文章の様に見えて一目で分かり難い為ではと考えました。

其処で施したのは記事毎の背景色の変更です。 （技術的な説明が欲しい方は姉妹ブログ ホームページ作成浜松Tips （※） の2011年5月29日の記事 「最近の記事」リンクの行毎に背景色を変更する を参照して下さい） 2011年6月9日現在、 最近の記事 欄は白と薄紅の背景色が互い違いになっているのをご覧いただけるのではないでしょうか？

※ 現在では ホームページ作成浜松Tips は本ブログ（ Acenumber Technical Issues ）に統一しました。

ブログに於いてのプロフィールの重要さはブログ村で ダンディ和田 さんにより度々指摘される事項です。 またはまぞう（HamaZo）ブログには標準で オーナーメール としてブログ運営者へのメールの送信機能が付いています。 プロフィールとオーナーメールは標準では独立したブログの一機能として動作しますので、 通常はサイドバーに別々に表示されることになります。

ところで、本ブログ2010年10月12日の記事 オーナーメールの記事内への表示 ではサイドバーではなくブログの記事内へ オーナーメールを表示するテクニックをご紹介しました。 またオーナーメールを複数配置するには 何やら訳の分からない呪文を幾つも記述する必要はにことを2010年10月27日の記事 オーナーメールの記事内への表示（簡易版） に記しました。

上記二記事を応用すればブログの中に複数のオーナーメール機能を配置し、 その一つはプロフィールの中に表示することが可能になりますね。 この手法を実際に本ブログに適用してみました。 従って2011年5月現在本ブログ HamaZoランクチェック！Blog には、左サイドバーの最下段にオーナーメールの本体、 運営者にメッセージ が表示され、また右サイドバー二段目のプロフィールの最下部にも 同様にオーナーメール機能が表示されているのが見て取れると思います。

運営者へメッセージ の設定は ブログの設定 > サイドバー で行っています。 そしてプロフィールへの表示は ブログ環境設定 > ブログ作成者のプロフィール > プロフィール自己紹介 内に以下コードを貼り付けています。

このブログカスタマイズにより、 プロフィールを見て気になったらメール出来ると同時に、 ブログ記事を見ながら画面を下までスクロールした時にも すぐさまメールのボタンを発見出来る様になっています。 このことで閲覧者にはメール送信の為のボタン発見の苦労が減り、 便宜を図ることが出来ることになり、 連絡を取って貰う敷居が下がることになります。 この様な動線の複数配置はWebサイトの設計に於いて 利用者のユーザビリティを向上させるものとして重視されています。

姉妹ブログ ホームページ作成浜松Tips （※） は2008年春より運営を開始しておりますが、 其の時とはブログを閲覧する方の環境も変わって来ました。 大きな処ではパソコンの表示画面が大きくなりました。 今ではノートPCでもデスクトップ型に負けない解像度どころか、 iPad でさえ 1024px、狭い方でも 768px のサイズを有しており、 尚且つこれは 960px相当の表示を標準でします。 其処で姉妹ブログも幅を拡張することを始めとして 幾つかレイアウトデザインを修正することにしました。 それら変更は大凡、本ブログにサイズ、位置等準じるようにしました。

そのビフォー・アフター図を示します。 先ずはビフォー図、

他にもサイドバーからは役に立たないアフィリエイトを一つ削除して、 以下はまぞうプラグイン

1. ブログ内検索
2. 最近の記事
3. QRコード
4. RSSリンク

その結果が以下のアフター図ですが、如何でしょうか？

ブログデザインの変更に於いて、 幅の変更は単に数字を足し算、引き算するだけの容易な部類に入りますので、 少々窮屈だなと感じれば実践してみるのも好いかも知れませんね。

※ 現在では ホームページ作成浜松Tips は本ブログ（ Acenumber Technical Issues ）に統一しました。

昨日2011年4月24日より、 姉妹ブログ ホームページ作成浜松Tips （※） の更新情報を本ブログトップページの コンテンツの最上部に表示するようにしました。 そのビフォー・アフター図が下になります。 アフター図のハイライトに抜いた部分と本ブログの比較をしていただければ 分かり易いのではないでしょうか。

実は ダンディ和田 さんにブログ村でブログを紹介して貰う折に、 もう一つのブログも紹介してくれる空気になったのですが、 其の時、連携の悪さが露見してしまいました（笑）。 そこでこれを解消しようと思いましたが、ただリンクをはるのでは面白くないので、 この際フィード（更新情報）を表示してしまおうと思った訳です。

複数のブログを運営される際、この方法は HamaZoブログ に限ったものではありませんので役立つこともあるかも知れません。 貼り付け方が気になる方は姉妹ブログの2011年4月24日の記事 他ブログ更新情報の自ブログへの表示 として纏めてあります。 姉妹ブログ ホームページ作成浜松Tips （※） は上級者ブロガー向けの内容を配信する様に位置付けており、 多少専門的な内容を含んでいますが、 腕に覚えのある方は宜しければご参考下さい。

※ 現在では ホームページ作成浜松Tips は本ブログ（ Acenumber Technical Issues ）に統一しました。

本ブログには基本的には 追記 しませんのでブログ記事に 続きを読む が表示されることはありません。 しかし姉妹ブログ ホームページ作成浜松Tips （※）に於いては屡追記するためこれが表示されます。 デザイン的にこのリンクが分かり難いと云う問題点が ブログ村で折角 ダンディ和田 さんに 紹介された時に発覚してしまいました（笑） 問題のリンクが下の図です。

今回この問題に対応してみました。 HamaZoテンプレートでは 特に当該リンク部分のデザイン指定がありませんでした。 従って他のリンクと同様に処理され、 それも見映えを目立たせなくさせる一因だったのだと思います。 デザイン的に新たに指定したCSSは以下になります。

その結果、以下の様な表示になりました。

記事の続きに関連することを示すために、 リンク色は各ブログ記事タイトルの色に合わせました。 少しは目立つようになったのではないでしょうか。

※ 現在では ホームページ作成浜松Tips は本ブログ（ Acenumber Technical Issues ）に統一しました。

ブログパーツと言っても未だ一般の方に使って貰える程洗練されてはいませんので 試験的な本ブログ HamaZoランクチェック！Blog に於ける リスティング広告 カテゴリーに限っての公開です。 公開は一昨々日2010年11月18日20：00でした。 バージョンは全く初期のものとして Ver.0.1 とします。

ブログに於いては通常、 記事は更新日が其の儘表示順となっている為、 記事がシリーズになっている場合は、 或る程度記事が溜まってから読み始めることになる閲覧者に取っては逆順になってしまいます。 特にブログ記事のまとめ単位とも言える カテゴリー に於いては古い記事から順を追って見て貰いたいことも多く、 この問題を解消したいと思って 今回このブログパーツを開発しました。

またコンテンツ提供側が想定する順番で記事を読んで貰う為でなく、 このブログパーツを採用するに拠って、 閲覧者の利便性を図られ、 更にはブログの回遊率を高めることも目的としています。

上の図が実際に使用している画面で、 ハイライトの部分が今回公開のブログパーツ カテゴリーインデックス です。 下には実際に機能するブログパーツを表示してあります。 数字はカテゴリーの各ページを示しており、 クリックすることで其のページへ直接進むことが出来ます。 一度お試し下さい。

ちょくちょく面白い情報を拝借させてもらう有名ブログ IDEA*IDEA で今回は実にかっちょ良いWebデザイン機能が 画像つきのかっこいいセレクトメニューを作れるjQueryとCSS3のチュートリアル なる2010年11月10日の記事で紹介されていました。 それが Making Better Select Elements with jQuery and CSS3 で公開されている プルダウン型セレクトメニュー です。 理屈抜き、下に実装してみましたのでご覧下さい。 そして先ずはボタンをクリックしてみて下さい。

どうでしょうか？ ペロペロッと下側にメニューが広がりましたか？ メニューから何か選んでクリックすればメニューは閉じ、 選んだ名前にボタンの表示テキストが変わったんじゃないでしょうか？ 本ブログのマスコットキャラクターにメニュー画像を差し替えた為、 多少本来のクールなイメージは失われたことはご容赦下さい（笑）

尚、CSS3と云う最新技術を利用しているため 閲覧環境に拠っては上手く表示されない可能性があります。

本ブログでは問い合わせの必要な際は、 右サイドバーに設置の運営者にメッセージから送信して貰う様に都度、記していますが、 2010年10月12日の オーナーメールの記事内への表示 は読み終えた記事の終わりの部分に 問合せ用のボタンを設置すれば読者の更なる便に繋がると言う記事でした。 いちいち文章に従い、右のサイドバーに視線を送り、 特定のボタンを探させては、折角問い合わせをしてくれようと言う読者のモチベーションを下げ、 結局は問い合わせず済ませてしまうのではないかと言う老婆心です。 要らぬお節介かも知れませんが、 ユーザービリティに気を使うサイトでは屡実践されている手法でもあります。

処で、上の実現には大凡面倒なタグを記事内に記さなければなりませんでした。 問い合わせ用のボタンの為だけに、上記記事にある様な長い呪文を、 コピー＆ペーストするにせよ、文章内に挿入するのは億劫であると共に、 検索エンジン対策としても少々問題があります。 本当にあれだけの呪文が必要なんでしょうか？ 実はサイドバーに必要な記述があれば余計な付記は要らなくなります。

はまぞうブログではブログの設定に於いて、 オーナーメール機能をサイドバーに表示出来ます。 ブログ作成時、表示が標準となっていますので大抵のはまぞうブログには既に表示されていますね。 そして大抵はサイドバーはトップページでもアーカイブでも個別記事でも表示される設定となっています。 と、なれば其処には重ねて記述する必要のない呪文も含まれています。 実際に表示している本ブログの HTMLソースを見てみますと 上記記事と同様、以下の様なものとなっています。

ここで赤字部分は上記記事で省略した部分ですが、 実は表示機能自体はミント色の部分に限られますので、 赤字以外にも白字の部分は記事内への記述が必要なくなります。 では、実際にミント色字部分のみを記事内に貼り付けてみましょう。

如何でしょうか？ 記述はとても短くなりましたが機能は冒頭リンク記事と変わりません。 少々分かり兼ねると言う方は、前回記事同様、どうぞご遠慮なく このボタンからお問い合わせを（笑）

豊富にテンプレートが用意されているはまぞうブログでも、 オリジナルへの変更の希望は少なくないようです。 先ず手始めに大きく雰囲気を変えるとなれば手につけたいのがトップ画像ですね。 変更するには元々の画像が何処にあるのか分からなければいけない、 と言うことでものした記事は本ブログの2010年10月9日、 はまぞうブログのトップ画像の場所 でしたが引用すれば

縦に長い画像が見られたのではないでしょうか。 設定ファイルではこれをブログ全体の背景とし、 横方向に繰り返し表示することで、 トップ（ヘッダ）画像の様に見せているのですね。

今回ははまぞうに用意されている内、 冒頭に表示した画像を使用しているテンプレート アレモソレモコレモ の場合を見てみます。

例によって元の画像のある場所を知るには、 テンプレートをカスタマイズする時に編集可能となる CSS（レイアウトの設定ファイル）を見ます。 アレモソレモコレモ のCSSファイルを見て、 /* ブログタイトル・概要 */ と書かれている部分にあたりをつけると以下の様になっていました。

設定ファイルにあるミント色のURLの通りリンクを張ってみます。 この画像の表示 リンク先の画像に見覚えのある方もいらっしゃるのではないでしょうか？ 前回と異なり今回は縦310ピクセル、横800ピクセルの画像を其のまま、 ヘッダに相当する部分に表示しているだけですね。 これを交換したい場合は画像を用意して、 その保存場所のURLと上のミント色のURLを交換すれば良い訳です。