Studio TA Subsite の案内とお知らせ

「案内とお知らせ」スイッチを設置

2016年 09月 28日
エキサイトブログには「お知らせボード」機能がありません。「お知らせボード」は、ブログ投稿文の上部の数行~十行程度のエリアに、ブログ主が訪れた人に対して「特に知らせたい事や最近のメインコンテンツへの案内、ブログの説明」などを啓示するインフォメーション機能です。

エキサイトは、テキストや画像の「関連記事リンク」(投稿下部)や、アクセスの多い記事の「記事ランキング」(メニュー)を置いたりと、訪れた人に他の記事内容をアピールする機能を持たせています。 しかし、いずれも適当で、本当に自分が読んで欲しい記事をそれらが示してくれるわけではありません。



そんな要求から「お知らせボード」が欲しくなりますが、無い以上は工夫するしかありません。 エキサイトで一番簡単な方法は、日付を未来に設定したページをボード代わりにする事です。 しかし、記事検索で訪れた人が先頭ページを見てくれる確率は低く、余り賢い方法ではありません。 また、記事作成→手直しの間に、常に先頭ページが出るのもうっとおしいです。

で、スキンアレンジで良い方法がないか模索したのですが、エキサイトは <iframe> 等の他のHtmlデータを呼び込むタグをスキンアレンジで使えないという事がネックになりました。

下図の①の様に <iframe> を使えれば、ページ上の特定場所に、別途のHtmlがそのページに書かれた様に表示されます。「お知らせ」の内容更新は、別途に用意したHtml文書を更新すれば良く、メンテ上で理想的です。

a0349576_11522894.png

この機能が使えない場合、➁の様にブログスキンのHtml本文に「お知らせ」の内容を書き込み、更新はいちいちスキン編集をするという方法が考えられます。 このやり方は、Htmlに生の文書データを記入する事になり、いかにも残念なHtmlになります。 スキンのHtmlは、出来ればページ構造の設定に絞るのがベターですから。

そこで、ページ内に「お知らせボード」を表示するのは諦め、➂の様に別途のHtml文書を開くリンクスイッチを、目立つ場所に置くことにしました。 場所はエキサイトヘッダーの左端とし、これで別タブに「案内とお知らせのページ」を開く塩梅です。 案内の内容は、そのページを編集すれば良く、メンテ更新は簡単です。 「案内とお知らせのページ」は他のブログページと同じですから、中にリンクも画像も置けますが、体裁はお知らせボードを意識したものにすればより効果的でしょう。



下は、スキン編集で「HTML全体」に、リンクスイッチに仕立てる idが「M_Board」のブロックを追加した状態です。 その中に自ブログ投稿ページ番号「/xxxxxxxx/」へのリンクを置いています。(ブログページのURLでも可) このブロックの場所は、ブログヘッダーの手前でほぼページの先頭になります。


<div id="page">
<div id="M_Board">
<a href="/xxxxxxxx/" target="_blank">Studio TA Subsite の案内とお知らせ</a>
</div>
<div id="W_HEADER"> ~略~ </div>
<div id="W_CONTENTS"> ~略~ </div>
</div>


下はCSSの修飾を加えない場合で、ページ上部のエキサイトヘッダーとブログヘッダーとの間に「~案内とお知らせ」の文字が挟まって表示されています。

b0174191_21452497.png

下図は配置はそのままで、「~案内とお知らせ」の文字列を修飾してスイッチらしくした状態です。 また「M_Board」の背景色をエキサイトヘッダーの配色(これもアレンジした配色です)と同色とし、「excite.ブログ 人気タグ【花】のブログを~」等の表示部分をカバーする用意をしています。 一方「人気タグ【花】~」の幅を狭く指定して(赤枠)、スイッチの下に隠れてはみ出さない様にしています。

b0174191_21491403.png

以下は、「エキサイトヘッダー」のアレンジを含めた、「案内とお知らせ」スイッチに関するCSSです。


.exHeader {
background: #eee !important; /* ヘッダー背景色のアレンジ */
border-bottom: #eee !important; } /* ヘッダー下辺の色のアレンジ */

.exHeader a:hover {
text-decoration: none !important;
background: #fff !important; }

.exHeader #exSimBlog {
width: 90px;
overflow: hidden; } /* 似ているブログに幅を指定し、はみ出す分を非表示に */

#M_Board {
position: absolute; /* この設定で配置がHtml順序からフリーになります */
top: 0; /* ページの最上部に表示 */
background-color: #eee; /* マスキング背景色 */
width: 250px;
height: 28px;
z-index: 10000; } /* ヘッダーより上層に表示する指定 */

#M_Board a {
display: block; /* この指定でスイッチ文字に高さが指定できる */
font-size: 12px;
height: 19px;
padding: 2px 0px 0px 20px; /* 文字とスイッチ枠との間隔 */
margin: 3px 10px 0px 40px; /* スイッチと周囲との間隔 */
color: #000;
background-color: #f8f8f8;
border: 1px solid rgb(169, 169, 169); /* ヘッダーの検索枠に合わせている */
border-radius: 3px; }

#M_Board a:hover {
background-color: #fff; }


「position: absolute;」「top: 0;」の指定で、スイッチは本来の位置からヘッダーの左端に移動します。
下図は、デザインが完了した状態です。

b0174191_21494996.png

このスイッチはエキサイトヘッダーの左端の比較的目立つ場所ですから、お知らせボードの代わりとして、まあ使えると思います。 配色など私のセンスで控えめにしましたが、エキサイトがやっている様にもっと目立つ色や小画像を使うのもアリでしょう。



[PR]
# by Ataron | 2016-09-28 01:14 | ブログスキンのアレンジ | Trackback | Comments(0)