computer_programming_woman


このブログのカスタマイズに関する「備忘録」としての個人的MEMOです。
今回おこなったカスタマイズは、下記3点。

  1. はてなブログ風「ブログカード」挿入
  2. Hタグデザイン変更
  3. Evernote連携

以上です。

興味のない人は読み飛ばし推奨です。


1. はてなブログ風「ブログカード」挿入

※参照元
コレは便利!Livedoorブログでブログカードを作成したので、やり方を説明するのだ。 - 大魔王は無職である 様
 http://poruporu.blog.jp/archives/3791495.html

ぼくのこのブログって、もう記事本数が1200本超えていることもあって、よく過去の記事を引き合いに出して話を進めることが多いわけです。

そうした時に、今までは「※関連過去ログ」として引用タグの中で過去記事のハイパーリンクテキストを表示させていたんだけど、これを「はてなブログ風」に表示させることが出来るというので、ちょっとやってみた。

因みに、これは「ブログカード」というらしいです。で、これについては<iframe>タグで出来るそうなので、Chromeのプラグインである「Create Link」に、下記コードをぶっこんであげればいいだけだった。

<iframe style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="%title%" src="http://hatenablog.com/embed?url=%url%" frameborder="0" scrolling="no"><a href="%url%" data-mce-href="%url%">%title%</a></iframe>

あとはこのコードに適当に、例えば「ブログカード」とかって名前をつけて割り当ててあげれば、右クリックで呼び出せるようになる。

どういうことかと言うと、ブログを書いている時にふと、あの時の過去ログ貼りたいなと思ったら、その該当記事を開いて

 1. そのページ内で右クリック ⇒ 「ブログカード」を選択
 2. ブログ作成画面のHTML入力モードにて貼り付け

とやると、上記のタグが自動的に挿入されるということ。これにより、プレビューでブログカードが挿入された状態になる。

因みに、該当ページのURLは上記赤字の「%url%」が、記事タイトル(ページタイトル)は「%title%」によって、自動的に適宜書き換えをおこなってくれるようになっている。便利!

もうちょっとだけ詳しく説明します。


便利過ぎるGoogle Chromeのプラグイン「create link」

※Create Link
 https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm

かなり以前から利用していたプラグインなんだけど、これマジで便利すぎ。例えば、ブログ上でハイパーリンクテキストを生成したい時、通常ならば

  1. リンク先URLをコピー
  2. テキストを書く
  3. テキストを選択
  4. リンク挿入

という4ステップを踏むところを、このプラグインを入れておけば

  1. リンク先のページで右クリックし、「Create Link > HTML」を選択
  2. ペースト

という2ステップで出来ちゃう。

従来の2,3,4のフローは地味に面倒だったりすることもあるので、実際試してみればわかると思うけど、大分作業時間は削減できる。

で、ここまでは普通に今まで自分も使ってはいたんだけど、markdownにも対応していたりする上、先述の「ブログカード」のように、そのフォーマットを自作することも出来る。


2. Hタグのデザイン変更

※参照元
 CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 ⇒設定中テンプレートのCSS最下部に追記した。
 ⇒上記に「Create Link」にて、Hタグを挿入するための設定もおこなう。
 ⇒というか、Create Linkの新たな使い方を知って勉強になった。

※以下、追記したCSS

/* 文字装飾系追加
----------------------------------------------- */
h2 {
  padding: 0.5em;/*文字周りの余白*/
  color: #000000;/*文字色*/
  background: ##F5DEB3;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/
}
.box3 {
    padding: 0.93em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;/*背景色*/
}
.box3 p {
    margin: 0;
    padding:15px
}


・ついでに、BOXを表示させるためのCSSも追加。
 ⇒しかし、BOX内の行間が引用BOXのときよりもほんの僅かに空いてしまっているのが気になる。


3. Evernote連携

Evernoteで作成したものをそのままlivedoorブログに送ることができるということに、今更ながらに気づいた。上記のようなコードブロックのBOXとかを利用する場合に重宝すると思う。

※もちろんこの記事も、Evernoteに書いていた日記をこっちに送って、そこにここで更に手を加えながら書いている。

これからは、ブログは全てEvernoteで下書きしてから送るようにしようかなと、ちょっと本気で思った。でも、改行の際に<div>タグが生成されてるっぽいので、もう少しいろいろ試してみようと思う。


 
 

ちょっとでも楽しんでいただけたり、参考になりましたら、読者登録をいただけると嬉しいです。

※「ブログリーダー」は「LINE」に更新通知が届きます。
※FeedlyはRSSで更新通知が確認できます。 ■EDIT