［テキストボックス］投稿記事中でも使えるCSSデザインチップス

投稿記事の編集エディターではできないことをチップスにしてCSSを使い表現していきます。

今回はテキストボックス。
記事のなかで強調したい箇所や彩りたいところに使えます。
目立たせる効果は抜群！ということで早速実践へ！
まずはCSSに予めソースを追加しておきます。
そうすればいつでもこのスタイルを呼び出すことができますので便利！
毎回記事のソースにタグを打たなければいけないのですが下記よりコピーしていただければ簡単に利用できます。
※注意※新しいエディターがリリースされていますがこちらで編集する場合かってにソースが変更されてしまうので慎重に操作してくださいね！

イエローBOX
CSSに追加するソース

/*イエロー*/
div.subContents .SuiCssColorBoxYellow {background-color:#FFFF99;border:solid 1px #999999;padding: 10px;}

/*記事中に書くソース*/

<div class="SuiCssColorBoxYellow">ここにテキスト</div>

グリーンBOX
CSSに追加するソース

/*グリーン*/div.subContents .SuiCssColorBoxGreen {background-color:#CCFF99;border:solid 1px #999999;padding: 10px;}

/*記事中に書くソース*/

<div class="SuiCssColorBoxGreen">ここにテキスト</div>

ブルーBOX
CSSに追加するソース

/*ブルー*/div.subContents .SuiCssColorBoxBlue {background-color:#CCFFFF;border:solid 1px #999999;padding: 10px;}

/*記事中に書くソース*/

<div class="SuiCssColorBoxBlue">ここにテキスト</div>

レッドBOX
CSSに追加するソース

/*レッド*/div.subContents .SuiCssColorBoxRed {background-color:#FF9999;border:solid 1px #999999;padding: 10px;}

/*記事中に書くソース*/

<div class="SuiCssColorBoxRed">ここにテキスト</div>

とこのような感じで使えます。
カラーコードを差し替えればオリジナルで作ることもできますよ！

基本フォントサイズのカスタム

まずははじめの一歩ですね。全体を司るフォントサイズ（文字サイズ）を一括で変更するCSSです。
これは基本的なカスタムなので入門です。今回は少し大きくしたいという場合に12pxから14pxに変更してみました。
あまり大きくし過ぎると・・危険です。

元ソース

html {font-size: 12px !important;}

変更後ソース

html {font-size: 14px !important;}

これは私の感覚ですが14pxが小さすぎず大きすぎず調度よいかなぁと。ちなみに私のブログの基本サイズは14pxです。
ぜひご参考までに！

アメブロカスタマイズ［目次］

アメブロカスタムをしていくための目次です。

作業したものからリンクを貼っていきます★
まだリンクしていないものは未作業のものです。
（目次がタスク管理を兼用中～★）

随時目次は追加していきます。

INDEX

アメブロカスタム

アメブロ総合カスタム

（０）ページの幅を調整する
（１）基本フォントサイズを変更する
（２）背景画像を入れる
（３）無料の高機能アクセス解析Googleアナルティクスを導入する
（４）アメブロにグローバルメニュー（メニューバー）を設置する
（５）アメブロの読者登録テキストリンクを画像化する
（６）アメブロにTwitterつぶやきボタンを設置する
（７）アメブロにFaceBookいいねボタンを設置する
（８）アメブロにはてなブックマークボタンを設置する
（９）カスタム項目追加中・・・♪

ヘッダーカスタム

（１）アメブロのヘッダーに画像を入れる
（２）アメブロのヘッダーにロゴを入れる
（３）アメブロのヘッダーのメンバーメニューを画像化する
（４）Jqueryをつかったコンテンツスライダーを設置する
（５）カスタム項目追加中・・・♪

サイドバーカスタム

（１）アメブロのサイドバーの各タイトルを画像化する
（２）アメブロのサイドバーにリンクボタンを設置する
（３）アメブロのサイドバーの最近の投稿にNEWアイコンを付ける
（４）「メッセージを送る」「アメンバーになる」「プレゼントを送る」のリンクを画像化する
（５）サイドバーのカレンダーをCSSでかっこ良くする
（６）サイドバーのサーチフォームをCSSでかっこ良くする
（７）プロフィール｜なう｜ピグの部屋のリンクを画像化する
（８）カスタム項目追加中・・・♪

投稿カスタム

（１）投稿タイトルの背景を画像化する
（２）Adsense広告をすっきりきれいにする
（３）投稿フッターのAdsense広告をすっきりきれいにする
（４）投稿フッターの「なうで紹介」「Mixiチェック」「ツイートする」ボタンを非表示にする
（５）コメント投稿欄の背景と幅をカスタムする
（６）コメント記入欄を表示のボタンを画像化する
（７）同じテーマの最新記事の箇所をすっきり分かりやすくする
（８）カスタム項目追加中・・・♪

実はブログは見られていなかった！ペタの落とし穴とアメーバプロフィールページの重要性について。

ブログカスタムは皆さん頑張ってやられていますよね。
Mixiのあしあと機能と同じ位置付けで、アメーバにはペタの機能があります。

このペタの機能実は落とし穴があるんです！えっ！？それは・・

ユーザーの行動アクション分析
自分についたペタを確認するとき管理画面のマイページより「今日のペタ」をクリックして確認しに行きます。

すると一覧でペタをつけてくれた人のリストが出てきますね。

さぁここでペタ返しをするアクションを起こすのですが、大抵の人はペタをつけてくれた人のユーザー名（ニックネーム）をクリックします。

ココが落とし穴！！

ユーザー名をクリックするとプロフィールページに飛びます。

プロフィールページには「ペタをつける」というリンクがありますので、そこをクリックしてペタ返しをします。

ん？！何か見落としているものはないでしょうか・・・？

そう、そうなんです。
このアクションの中にブログページを閲覧するアクションが含まれていません・・。
つまりはペタ返しをする場合ブログは閲覧してもらえていないケースが多いのです。もちろんプロフィールが気になって、そこからブログに飛ぶというアクションをしてもらえれば、ブログは閲覧されます。

ということは・・・？

プロフィールページは重要なランディングページである
ということがわかりました。

ですのでいくらいろいろな人にたくさんのペタをつけてもコンバージョン率（ブログに誘導する意味での）をあげる為には、ランディングページであるアメーバプロフィールページが充実している必要性があったのです！！

ふぅ。力説により、一息、はぁ深呼吸。。（笑

つまりはプロフィールページを魅力的にすることで大幅なブログ運営の効果が期待できます。
もしよろしければスイのプロフィールページを訪問してみてください。パッと訪問した際に全く他の人と違う印象を与えることが出来ているかと・・自負してみました（苦笑

ココですいは考えました。
もっと皆さんのプロフィールページを充実させたいなぁと。

はい、現在プロフィールページのカスタムサービスを準備中です。えっまだできてないじゃん・・・（笑

まだ準備できていませんが、ここは私自身もたくさんの実績を作りたいと考えていますので、もしもプロフィールページカスタムにご興味が有る方はスイへメッセージください。先行カスタム受付中～★です。価格は応相談,お気持ち程度でということで・・m(_ _)m



★★スイの本日の必ず得するネタ！★★

5分ほどの登録掲載作業で500円！！損すること一切なし
こちらのMicroADに簡単登録後、自分のブログに広告を貼るだけで500円GETできます。

★★スイの本日の必ず得するネタ！★★

アメブロプロフィールページにメニューを設置するカスタム★

先日プロフィールページへヘッダーお設置する記事を書きましたが、
今回はプロフィールページへグローバルメニュー（メニューバー）を設置するカスタムを作業しました。

このメニューバーですが画像のみで作成するかテキストを使ってすぐにリンクテキスト、リンク先の変更ができるようにするか悩んだのですが、ここは一つテキスト形式でメニューバーの設置する方向で作業開始！

さてこんな感じになりましたよ～★

Before

After

メニューはマウスオーバーで画像が入れ替わるように設定。
現在はマウスオーバーでテキストにアンダーバーが入っていますが、これは後ほど取るかもしれません！

メニューはコンテンツの幅が800pxのため160px×5つを配置。
チョット800pxだと幅が狭い気がするので、時間があるときにでも幅広のプロフィールを作るかも？！

アメブロプロフィールカスタムサービスをご提供する際にはメニューバーはもちろん含む予定です！




★★スイの本日の必ず得するネタ！★★

5分ほどの登録掲載作業で500円！！損すること一切なし
こちらのMicroADに簡単登録後、自分のブログに広告を貼るだけで500円GETできます。

★★スイの本日の必ず得するネタ！★★