Bloggerでコメントフォームとバックリンクを変更する設定と記述…page3

Page 3 of 3 バックリンク編

当サイトのバックリンクです…
(画像クリックで拡大)

コメントフォームとの境界が曖昧になるので…

全体を枠線で囲み背景画像も設定しています…

使用画像は三種類…
h4(タイトル)画像
ボタン内の画像
背景画像

CSS です…

/* Comment Back Link
------------------------------ */
#backlinks-container {
margin: 5px 0;
padding: 5px 5px 0;
background: url(背景画像のURL) repeat;
border-top: 1px solid #555555;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 1px solid #555555;
}
#backlinks-container h4 {
color: #4169E1;
font-size: 13px;
font-weight: bold;
font-style: italic;
}

HTML です…

バックリンク部分は…

「デザイン」「HTMLの編集」「ウィジェットのテンプレートを展開」して…

「Ctrl + F」で <b:includable id='backlinks' var='post'> を検索します…

その直下にタイトル部分があります…

<a name='links'/><h4><data:post.backlinksLabel/></h4>

赤文字部分を…お好きな文字列や画像と入れ替えます…

当サイトの場合赤文字部分は…

<span class='タイトル画像のクラス名' title='この投稿へのリンク'/> 
Back Link to this post <span class='タイトル画像のクラス名' title='この投稿へのリンク'/>

次に…リンクを作成するアンカー部分は…

<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>

ってな感じになっていますのでボタンと入れ替え…

<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><button class='blue' id='button' title='この投稿へのリンクを作成'><span class='画像のクラス名'/> Create a Link </button></a>

画像を使わない場合は <span class='画像のクラス名'/> は削除してください…

「テンプレートを保存」して完了です…

以下もお読みになることをお奨めします…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

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

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

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

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

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


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

 Bloggerのコメント関連を「Accordion」で開閉してしてスタイリッシュにする

• Prev
• 1
• 2
• 3
• Next

Blogger Tips Current-Label : Blogger Template Customize