from :: Asahikawa Hokkaido

passer-by198

primetime pencil

2014/07/01


Posted

Bloggerの記事フッター「post-footer」のアイテムを指定通り並べて画像やアイコンでデザインする

概要





「Minima Black」の記事フッターですが…

とてもシンプルですね…まぁ…原因は…

解説のために必要最小限の構成にしているせいなのですが…

それでも…コメント関連のリンクが間に挟まって…

指定通りに並んでいなかったり…改行されていたりと…

満足出来るとは程遠い感じです…なので…当然ながらカスタマイズの対象です…

構造から原因を探り…文字色やリンク色を変更して…

更には…画像やアイコンを付与してデザインしてみましょう…

記事フッター「post-footer」の構造


「投稿者」「投稿時刻」「投稿ラベル」に絞り込むと…

デフォルトでは…該当箇所はこんな感じになっています…

「CSS」


デフォルトの「CSS」


英語圏の開発者は「text-transform」「letter-spacing」が大好きですね…

大文字表示や文字間スペースを定義する意義があまり感じられません…

しかも…ご丁寧にフォントに変数定義までしています…

変数定義は…単なるファイルサイズの無駄になっているケースが殆どですし…

Blogger の変数定義は独自仕様で「$」で呼び出されますので非推奨です…

「body{…}」に様々な初期値を記述して…そもそも…変更するのは…カラム毎に…

殆どの場面で…「font-style」「font-size」「font-weight」程度でしょう

「HTML」


デフォルトの「HTML」


「AUTHOR:」部分が… <data:top.authorLabel/>

「*POSTED:」部分が… <data:top.timestampLabel/>

「*LABEL:」部分が… <data:postLabelsLabel/>

…の「データタグ」で書き出されています…各文字列は…







「レイアウト」「ブログの投稿」ガジェットの…

「編集」から変更出来ますが…上記…

「text-transform」「letter-spacing」

…のせいで…「0.1em」のスペースが開いた…

大文字表示になっています…しかも…

「投稿時刻」はリンクになっていますし…

表示ラインは…

 post-footer-line-1
 post-footer-line-2
 post-footer-line-3

…と…3行あるにも拘わらず…

2行しか使わていなく…1行目に…

コメント関連などのアイテムも記述されていて…

「アイテムの並べ替え」は見事に無視され…

区切りとして設定している「*」もラベル部分が無駄になってしまっています…

「CSS」でデザインを構築する


変数定義に関しては…まぁ…お好みですからご自由にどうぞ…

大文字表示や文字間スペースは…気に入らない場合…該当箇所を削除します…

「投稿時刻」がリンクになっていますので…

a:visited{color:…;}」「a:hover{color:…;}」「a:active{color:…;}」など…

リンク要素に疑似クラスで文字色を指定している場合は…

文字色が変わりますので気持ち悪いですね…

そもそもリンクにする必要性が全くもって感じられないでしょ

.post-footer{…}」では対応出来ませんので…

.post-timestamp a{color:…;}」などとして上書きします…

「HTML」でデザインを構築する


「投稿時刻」問題を「HTML」で対応するには…

「12行目」「13行目」「15行目」「16行目」を削除すれば OKです…

デザインのためにレイアウトをリセットする


アイテムの並べ替えが思い通りにならなかったり改行されてしまう問題は…

post-footer-line-1」「post-footer-line-2」「post-footer-line-3

…の表示ラインに…適切にアイテムを配置し直す事で解決します…

「<span>」~「</span>」間を丸ごと移動させて下さい…

因みに… 当サイトでは…共有ボタンを別途表示していますし…

 「斜め掛け半透明リボン」をサイトの上部左右に配置してテキストや共有ボタンを組み込む方法


記事にはラベルを…1個しか付与していませんので…

post-footer-line-1」には…

「投稿者」「投稿時刻」「投稿ラベル」「投稿をメール」「クイック編集」

post-footer-line-2」には…「コメント関連」…としていますが…通常ならば…

post-footer-line-3」まで使用してレイアウトするのが良いでしょう…

 <p class='post-footer-line post-footer-line-3'/>

…という形状で…デフォルトでは閉じていますから…
<p class='post-footer-line post-footer-line-3'>
<!-- ここにアイテムの記述 -->
</p>
…という形状にしてから記述して下さい…

アイコンを使ってデザインする


デザインするためにレイアウトをリセットしたら…

やはり…記事フッターらしくするポイントはアイコンです…

自作画像でも勿論構いませんが…此処は…

もうお馴染みの「Font Awesome」です…

 「Font Awesome」のCDNでアイコンをWebフォント機能を使ってBloggerに表示【CSS3】


先ずは…大前提として…上記「構造」「HTML」での…

「データタグ」自体をアイコンに置換するか…

「データタグ」にアイコンを併記する形にするか…を決めて下さい…

当サイトでは…「データタグ」にアイコンを併記する形です…

実装状態は…記事下部でご確認下さい…使用しているアイコンは…

…の…3種類です…実装していませんが…

…も…「投稿をメール」「クイック編集」で代替出来ますね…
<i class="fa fa-user fa-lg fa-fw" title="Author"/>
<i class="fa fa-clock-o fa-lg fa-fw" title="Posted"/>
<i class="fa fa-tag fa-lg fa-fw" title="Labels"/>
「データタグ」自体をアイコンに置換する場合は…

「データタグ」を削除して同じ場所に「Font Awesome」のタグを記述します…

<data:postLabelsLabel/>にアイコンを併記する場合は…

「データタグ」の前に記述し…こんな感じにします…
<i class="fa fa-user fa-lg fa-fw" title="Author"/><data:top.authorLabel/>
<i class="fa fa-clock-o fa-lg fa-fw" title="Posted"/><data:post.timestamp/>
<i class="fa fa-tag fa-lg fa-fw" title="Labels"/><data:postLabelsLabel/>
以上です…最後までお読みいただきましてありがとうございます…


0 Comments :

Post a Comment :: Click!!

コメントを投稿

 ■Sponsored Link

韓国大統領 月山明博(李明博)の…天皇陛下への「不敬発言」
痛惜の念などという単語一つを言いに来るのなら、来る必要はない。
日王は韓国民に心から土下座したいのなら来い。
重罪人にするように手足を縛って頭を足で踏んで地面に擦り付けて謝らせてやる。
重罪人が土下座もしない、言葉で謝るだけならふざけた話だ。
そんな馬鹿な話は通用しない。
それなら入国は許さないぞ。
偽左翼マスメディアの情報操作手法
手法 用例 手法 用例 手法 用例 手法 用例
連想の創出 愛国者に対して「軍靴の音が聞こえそうだ」などと揶揄し否定的な印象を与える… コメント 人々を一定の方向に誘導するために「事実とは異なる解釈」をコメントさせたり「社説」にする… プレゼンス効果 現場からの中継や縮小ジオラマなどで「臨場感」を演出し「やらせ」も交えて信用されやすくする… 分類表 一部の「ネット右翼」が批判しています…のように決まった単語・フレーズで事象を分類して極小化・極大化する…
撹乱 「第三極も含めて政党が乱立して訳が分かりません…」などと連日「情報ノイズ」で溢れさせ興味自体を失わせる… 癒着提案 TBS「安倍官房長官印象操作映像事件」のように「個別の事実」を「継ぎ接ぎ」して「誤った印象」を植え付ける… 匿名の権威 「信頼すべき消息筋によれば…」のように情報元を明かす必要がない事を逆手に取り記事の内容に権威を与える… 日常会話 お隣の「韓国」では…のように本来否定的な要素「韓国」を日常会話のように繰り返し心理的習熟効果で反応を麻痺させる…
感情共鳴 コンサートで開催場所の地名を大声で繰り返し叫ぶ…などのように「デモ」「集会」などで群集を理性ではなく感情レベルで反応させる… 歴史の書き換え 民主党の「天皇制廃止」「戸籍法廃止」「夫婦別姓」などの愛国心を低下させるための国家・民族全体に対する長期的な情報操作… 感情整列 この時間にご覧になっている貴方だけに限定100セットだけ…などと「一定のシチュエーション」を用意して群集の感情を「均一化」させる… 一次効果 「朝日新聞の従軍慰安婦捏造問題」「iPS細胞での読売新聞大誤報」など「最初に発信された情報」は嘘でも捏造でも信用されやすいという原理…
ブーメラン 坂本龍一・山本太郎などの著名人を使い原発管制報道に対する「自由の闘士」を作り出し国力を削るために「愛国者」を装った抗議運動を展開する… 心理的ショック 日本は豊かなのだと錯覚させ更に絞り取るために「飢餓」を伝え…日本は悪い事をしたと日本人を自虐的に思い込ませるために繰り返し「戦争」を伝えます… 半真実 「マニュフェストが実現出来なかったのは自民党の負の遺産のせいで民主党がダメだった訳ではない…」のように嘘の中に一面的な真実を織り込み全体を真実に見せる… フィードバック 「支持政党無しの無党派層は過去最高」という結果を得るために世論調査の回答項目に「民主党もダメだけど自民党もダメ」という項目を設定し全体の意見に偽装する…
すり替え 「傷害」を「いじめ」「窃盗」を「万引き」「殺人事件」を「交通事故」「テロリスト」を「レジスタンス」「略奪事件」を「抗議デモ」など受け入れ易い言葉に置き換える婉曲手法… 脅威の創出 尖閣購入時に「中国の脅威」は民主党政権以降に尖鋭化していたにもかかわらず恰も「都知事発言以降に尖鋭化した」かの如く捏造し民主党には他に選択肢は無かったと責任転嫁… 社会的同意 首相の靖国参拝に「外国」から激しい反発が起こっている…などと…特定アジアだけの意見を恰も世界全体が同意していると錯覚させる…「人権擁護法案」「外国人参政権」などもこの手法… 側面迂回 民主党の原発事故対応では線量などの周辺情報は正確に報じられ枝野幸男の「直ちに健康に影響を及ぼすものではない…」の嘘の信憑性を高めメルトダウン・風向きなどの核心部分は隠蔽された…
虚偽類似 「視聴率低迷は若者のテレビ離れのせい…」「CDが売れないのは違法ダウンロードのせい…」「紅白歌合戦に韓流スターが出演できないのは日本の右傾化のせい…」など都合の良い「原因と結果の因果関係」を作り出す… 事実確認 原発安全神話を作り出したのも公共事業にジャブジャブ税金をつぎ込んだのも自民党です…など…「一面的な事実」を先に述べ「事実確認」させ…自民党政権に逆もどりして良いんですか?…と未来を誤認・錯覚させる… 毒入りサンドウィッチ 「白川総裁が自民党の経済政策を批判」「安倍総裁の経済政策発言を市場が好感し円安に振れ株価は年初来の高値」「一方でハイパーインフレを懸念する声も」…のように序文と結論の否定的報道で肯定的な報道を挟み肯定的な報道の意義を低下させる… 砂糖入りサンドウィッチ 毒入りサンドウィッチの逆の手法…
  偽左翼マスメディアの情報操作手法
偽左翼マスメディアが日本人には絶対に伝えない真実
■イラクでの自衛隊に対する前代未聞の「感謝デモ」
(サムネイル画像のクリックで動画がポップアップ)

当時自衛隊叩きに躍起になってたメディアの
捏造・隠蔽から目覚めよう
誇りある日本の再生のために
「jQuery」と「jQuery UI」で HTML に彩りを添えよう…

「導入」「Button」「Accordion」「Tabs」「Effects/Slide」
「Progressbar」「Dialog」「Tooltip」「Menu」 「Extra」 / 公式「Widgets」以外の「jQuery UI」スクリプト
Blogger Template Customize Universal / INDEX
Blogger テンプレート・カスタマイズ / 全般を解説
高速化・最適化対策の結果と備忘録
Scroll Top