from :: Asahikawa Hokkaido

passer-by198

primetime pencil

2010/01/26


Posted

Google Bloggerで絵文字を使うためのTips …改訂

現在の設定を記事にしました…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


★・。。・゜゜・。。・☆・。。・゜゜・。。・★・。。・゜゜・。。・☆

以前ココログで書いた記事の…

ブックマークレットが…

使えなくなったので…

Blogger のカスタマイズを始めた時点で…

絵文字を使う方法をアレコレ考えましたが…

結局…タグで表示させるのが最も簡単かと…

手順は…
  1. gif 画像を用意する…
  2. Clibor / クリップボード履歴と定型文管理ソフト
    に画像表示タグを定型文登録する…
と、まぁ…これだけなんですが…

画像を作るのが…

けっこう大変…

素材サイトさんから借りたり…

「Gmail」から拝借したり(コレは、お奨めしません)…

って、手もあるけれど…

某ブログのように…

絵文字エディタじゃないけれど…

自作した方が…

愛着がありますねィ…

例えばこんな感じ…

注意点は…ブログの行の高さを超えない事です…

なお…

テンプレートの投稿セクションで…

画像表記に「padding」を指定してあると…

綺麗に表記されません…

こんなやつデス…
  1. .post img {
  2. padding:4px;
  3. border:0 solid $bordercolor;
  4. }
あとは…

画像をホスティング・サービスにアップロードして…

 Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう


 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」


 Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」


 Google Blogger用のファイル保存場所としてのGoogle sites/Picasa



画像表示タグで…

 Clibor / クリップボード履歴と定型文管理ソフト


…に登録するだけ…

地味な方法だぁ~~

2010.06.20 追記

上記の CSS ですが…表示位置を下にしたい場合は…
  1. .post img{border:none;vertical-align:text-bottom;}
…のように書きます…


0 Comments :

「jQuery」と「jQuery UI」で HTML に彩りを添えよう…


「導入」「Button」「Accordion」「Tabs」「Effects/Slide」
「Progressbar」「Dialog」「Tooltip」「Menu」
「Extra」 / 公式「Widgets」以外の「jQuery UI」スクリプト
Blogger Template Customize Universal / INDEX

Blogger テンプレート・カスタマイズ / 全般を解説
高速化・最適化対策の結果と備忘録