Page 2 of 3 コメントフォーム編
コメントフォームは「ポップアップ ウィンドウ 」を選択すると…
そのリンクは…default では文字リンクでこんな感じ…
コレじゃぁ…あんまりです…
…なので…「ボタンリンク」や「画像リンク」に変更して…
少しでも認知度をアップさせましょう…
どちらを選択しても HTML での記述する場所は同じです…
「画像リンク」にしたい方は…
ご自身で画像を作成して任意の場所にホストしておいてください…
当サイトでは「ボタンリンク」で…
マウスの ON / OFF でボタンを切り替えています…
マウス OFF 時のボタン
マウス ON 時のボタン…ってな感じになります…
実装しているボタンとは多少違いますが…
実装しているボタンは JavaScript で角丸にしていますから…
ここでは通常のボタンでの説明にさせて頂きます…
尚…カスタマイズに際しては…
以下もお読みになることをお奨めします…
Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ
Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】
Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」
Google Blogger用のファイル保存場所としてのGoogle sites/Picasa
先ずはマウス ON 時にボタンの背景色を変えるために…
CSS に色を変化させるためのクラスを記述します…
- .green:hover { background: #2E8B57; }
緑文字の部分はお好きなクラス名・色に変更してください…
記述場所は…他の背景色を使っている部分でも…
.class='green' と書けば背景色を変化させられるので…
「Body セクション」に書いておきましょう…
その上で以下のタグを HTML に記述します…
←リンクは指定していません
- <button class='green' id='button' title='コメントを投稿'><span class='id29'/> Post a Comment <span class='id29'/></button>
記事部分にこのボタンを使う場合は…
赤文字部分を…<span class='id29'></span> としてください…
画像を使いたくない場合は赤字部分を削除…
「CSS Sprites」の設定を行わないで…
違う画像を「img」タグで使う場合は赤字部分と入れ替えてください…
「デザイン」「HTMLの編集」から…
「Ctrl + F」で以下の文字列を検索…
- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
赤文字部分を削除して先程のボタン タグと入れ替え…
「テンプレートを保存」して…
「ポップアップ ウィンドウ 」へのボタンリンクの出来上がり…
次項はバックリンクの h4 とリンク作成ボタンについてです…
現在の設定を記事にしました…
jQuery UI Bloggerのコメント関連を「Accordion」で開閉してしてスタイリッシュにする
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿