2017年1月13日金曜日

Blogger上でFontAwesomeを活用するには

head部へはfontawesomeの呼び出しを追加
<!-- fontawesomeここから -->
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<!-- fontawesomeここまで -->

外部リンク(target="_blank") をcssのみでアイコンを行末に追加するように。Blogger テンプレート デザイナーへは[カスタム CSS を追加]を用いて追記
/* 外部リンク */
.entry-content  a[target="_blank"]:after {
    padding-left:5px;
    content: "\f08e";
    font-family: Fontawesome;
}

font awesomeはhtml側で以下のように書けば平常時のように呼び出せます。
<i class="fa fa-heart fa-fw"></i>
ハートマーク ですよ。

2017年1月12日木曜日

Blogger上でtwitterを活用してみるには

twitter周りでよくみる連携を試しました。
ふむふむ。ガジェットから作成すると。
BloggerにTwitterのタイムラインを埋め込んでみた

ふむふむ。[ツイートをサイトに埋め込む]でと。
Twitterの発言をBloggerの投稿に埋め込む方法

こうしてみるとBloggerでもはてなで見かけるような記述はできそうですね。
html、cssの編集が標準テンプレートを利用したまま使えることに感謝。
カスタムしても保守は容易なので、あまり悩まなくて良い。

2017年1月11日水曜日

Blogger カスタム方法

企業ブログにおすすめ!広告なしの無料ブログサービス「Blogger」の始め方
http://webcommu.net/blogger-startup/

記事を読んで試しています。レイアウト等思い通りにならない部分がいくつかあるのでhtmlタグやcssを利用してカスタマイズしました。

Blogger テンプレート デザイナーへは[カスタム CSS を追加]を用いて一部レイアウトの修正
/* タイトル文字の上下幅を縮める */
.header-inner .Header .titlewrapper {
    padding: 0px 0 !important;
}
/* 左右の間仕切りを引き締める */
.content-inner {
 border-left: 2px solid  #aaaaaa ;
 border-right: 2px solid  #aaaaaa ;}

/* 日付表示 */
h2.date-header {
    border-top: 2px solid  #dddddd ;
}

コードを綺麗に表示できるように SyntaxHighlighterを導入。
head部へは
<!-- syntax追加ここから -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<!-- syntax追加ここまで -->
bodyを閉じる直前に
<!-- syntax追加ここから -->
<script type='text/javascript'>
    SyntaxHighlighter.all()
</script>
<!-- syntax追加ここまで -->
BloggerでSyntaxHighlighterを使用する方法を参考にしました。

<pre class="brush: js"></pre>
または
<script type="syntaxhighlighter" class="brush: js"><![CDATA[]]></script>
で囲ったコードが ハイライト表示できます。
原理上後者のcdata内部への入力を利用した方がタグを直接変換せずに入力可能ですが、保守を考えて、実用上はpreタグでの使い方の方がベターかと思います。

2017年1月1日日曜日

2017年抱負

あけましておめでとうございます、
皆様と過ごされる良い一年になるように願っております。
私は地に足着けて立場を固められる一年となるよう精進したいと考えます。