アメブロガーの可能性を求めるそんなものでありたい -3ページ目

<< 前のページへ最新 | 1 | 2 | 3 | 4 | 5 | 最初次のページへ >>

ブログタイトルを画像にするか否か

このブログの

タイトル部分の装飾（HTMLのh1要素）は、開設当初から若干の配色の変更や

微調整はしてますが、ずっと同じ方法で行っています。

このネタの為にそうなっているんで、

今回の記事はだいぶ遅くなった気もしますが(^^;)

結論から言うと、ブログタイトルの部分の表示は現状ではまだIEを考慮して

画像にした方が無難ではないかと思います。

画像を使わないでも、現状ではIEを除く一般的なモダンブラウザはCSS3のプロパティで先行実装しているものがあるので、

テキストの装飾もかなりできます。

参考リンク

このブログのタイトルはtext-shadowプロパティを使用して緑の影と白いぼかしを入れているので、対応するブラウザでは下記のように表示されます。

Firefox
Chrome
Safari
Opera

ブラウザの、描画（レンダリング）はまったく同じとはいかないのですが

期待どおりには表示されていると思います。

いっぽう、IEでは独自拡張でfilterプロパティというのがあって

これはこれで、結構使えるとも思うのですが

このブログのタイトルでは同じ感じにはできませんでした。
（工夫すれば出来そうなことが思いつくのですが
あまり手間がかかると意味がないと思いそこまでは未実装です。

実は、今回もタイトル部分にfilterプロパティでのスタイルが適用されるように
若干JavaScriptで細工してる始末です・・・）

IE

参考リンク

という訳で、

どちらが良いかと訊ねられたら

「画像の方が良いです」

と答えるケースがほとんどだと思います。

若干記事タイトルからは話がそれますがブログを含むサイトのヘッダー部分で

あえて装飾するなら

キャッチコピーとブログタイトル（サイトタイトル）を魅せることが出来る装飾でなければと考えています。

裏を返せば、無理に派手な装飾をせずとも文字の大きさや全体のバランスを調節するなど簡単なスタイルでもありなので、最後はやはりコンセプトの優先順位からそれぞれのサイト（ブログを含む）で異なってくるものだと言えます。

クロスブラウザ対策は現状では面倒な作業です。

SNS要素が強いアメブロはブログでもありブログでもない・・・そして利用は人それぞれ

ブログサービスという面はあるアメブロですが、

ブログを運営するためにやっている人ばかりではありません。

Amebaのトップページのタイトル（HTML文書のtitle要素）は

『Ameba (アメーバ)｜ブログを中心とした動画・モバイル機能も充実の登録無料サイト』

となってることからブログは中心的な売りではあるわけでもありますが、

SNSとしての機能が備わっていて
（他のサービスでもないわけではないですが、アメブロはSNSと呼んでも間違いではないといえるサービスです。）

また、芸能人の方々がブログを運営されていることも影響していると思いますが

ブログを読むためにアカウントを取得（会員登録）される方もいるようです。

また、ペタを例にしますとペタのキャラクターが変化することを楽しむ人もいます。

ペタ以外でも、様々な趣向を凝らしたサービス提供なので楽しみ方が色々あります。

自分のブログに訪問して下さり、

ペタを頂いたり読者登録して頂いたりした方のブログを訪問して

その方のブログに記事がほとんどないからといって特別おかしな事ではないのですよ。
（中には、少し疑問を持つブログもないわけではないのですが・・・）

アメブロガー全てを一くくりにして表現はできないですけど、

アメブロガーはWEB界での一般的な視点から見てもブログと呼べるサイトを運営している方もおりますが、

ブログであってブログでないものが多いと感じます。
（これは良い意味でも悪い意味でもです。）

アメブロでのブログ運営ではこの辺も加味して考察していった方が良さそうです。

アメブロの特性を考えてみる

テキストの長さに合わせて長さが可変するボタンをCSSで作成する

参考リンク

CSS3を待たないでも使える伸び縮みするボタン

上記の参考サイトの記事を拝見して、

２つほど私も作成してみました。

↓に触れたり、押下してみてください。

TEXT HERE　これは伸びてますよ

TEXT HERE　縮む

このブログがいまアメーバ色（緑系）なので緑と
もうひとつ赤いのも作成しました。

p.myButton { clear: both; font-weight: bold; text-align: center; }
p.myButton a,
p.myButton span { display: inline-block; line-height: 48px; height: 50px; background:#F0F0F0 url(http://stat001.ameba.jp/user_images/20110330/16/regolbema/bc/e8/p/o0504010311134429828.png) no-repeat; }
p.myButton a {color:#0000FF; text-decoration: none; padding-left: 25px; }
p.myButton span { background-position: right top; padding-right: 25px; }
p.myButton a:hover {color:#85313D; background-position: left bottom; }
p.myButton a:hover span {text-decoration: underline; background-position: right bottom; }
p.myButton a:active {color:#555; background-position: left top; }
p.myButton a:active span {text-decoration: none; background-position: right top; }

赤い方は

p.myButtonR { clear: both; font-weight: bold; text-align: center; }
p.myButtonR a,
p.myButtonR span { display: inline-block; line-height: 48px; height: 50px; background:#F0F0F0 url(http://stat001.ameba.jp/user_images/20110330/20/regolbema/bf/74/p/o0504010311134899740.png) no-repeat; }
p.myButtonR a {color:#0000FF; text-decoration: none; padding-left: 25px; }
p.myButtonR span { background-position: right top; padding-right: 25px; }
p.myButtonR a:hover {color:#212121; background-position: left bottom; }
p.myButtonR a:hover span {text-decoration: underline; background-position: right bottom; }
p.myButtonR a:active {color:#000; background-position: left top; }
p.myButtonR a:active span {text-decoration: none; background-position: right top; }

ご自分で作成した画像を使用するときは画像URLを適宜記述して下さい。

アメブロで使用する場合はこのコードをそのまま画像URLも含めて使用しても問題はありません。

ご自由にお使い下さい。

緑の方は

赤の方は

アメブロ以外の方は、画像をダウンロードした上で、適宜ご自身の利用スペースにアップロードしてお使い下さい。

url(ここに画像のURLを入れてください)

今回使用した画像は透過PNGなので、

background:#F0F0F0 url(背景画像URL) no-repeat;

この部分で実際に使用する場所の背景色に合わせて下さい。

白系の背景ではあまり違和感がないかもしれませんが

適宜『#F0F0F0』を変更してください。

その他の、カラーコードも必要であれば適宜お好みで変更してください。

少し、コードをいじりましたが

根本は参考サイトのものと同じです。

使い方はまず、上記のCSSコードをCSSが記述可能な場所に記述します。
（CSSの編集が可能なスキンの場合は普通にCSSの編集で記述するのが最良です。

また、フリースペースやフリープラグインにstyle要素での内部参照の記述をすれば反映されると思います。）

記事やフリースペース・フリープラグインなどHTMLが記述できる場所に

下記のように記述して下さい。


<p class="myButton"><a href="#"><span>TEXT HERE</span></a></p>

<a href="#">TEXT HERE</a>

テキスト（この例の場合だと『TEXT HERE』）を

span要素に内包したものがa要素に内包されるように記述します。

普段リンクするとき（アメブロのエディタでリンクを作成したときなど）には

a要素の内容はテキストだけが内包されていると思いますが

それをTEXT HEREのように

span要素に入れ子にします。

target属性などの他の属性も必要に応じて付加してください。

TEXT HERE

赤い方はクラス名が『myButtonR』なので


<p class="myButtonR"><a href="#"><span>TEXT HERE</span></a></p>

<a href="#">TEXT HERE</a>

このように、クラス名を『myButtonR』で記述して下さい。

TEXT HERE

※カスタマイズしてボタンを増やしたりする場合に
CSSのコードのクラスセレクタとHTMLのclass属性で指定したクラス名の同期がとれれば反映しますので、チャレンジしてみてください。

※href属性には例なので『#』を指定してますが、リンクするURL（アドレス）を適宜記述してください。

流用する時には、インラインでスタイル設定するのも良いかと思います。
（要素に直接style属性として埋め込むインラインstyle属性）

文字サイズを調整すれば、長い文字も入れることは可能です。


<p class="myButtonR"><a href="#"><span style="font-size:14px;">アメブロガーの可能性を求めるそんなものでありたい</span></a></p>

アメブロガーの可能性を求めるそんなものでありたい

行の高さも調整すれば、2行にもできます。


<p class="myButton"><a href="#"><span style="line-height:24px;font-size:14px;">アメブロガーの可能性を
求めるそんなものでありたい</span></a></p>

アメブロガーの可能性を
求めるそんなものでありたい

ボタンなので、それほど長いテキスト（文字列）はめったにないでしょうが

このCSSの利点は画像をそのつど作らなくて良いところなので、2行ぐらいだったら流用してしまいましょう
(^-^)

<< 前のページへ最新 | 1 | 2 | 3 | 4 | 5 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする

アメブロガーの可能性を求めるそんなものでありたい

アメブロでのブログ活動を通じて、色々探求していくところ。

ブログタイトルを画像にするか否か

参考リンク

参考リンク

関連記事

SNS要素が強いアメブロはブログでもありブログでもない・・・そして利用は人それぞれ

関連記事

関連リンク

テキストの長さに合わせて長さが可変するボタンをCSSで作成する

参考リンク