Octopress小ネタ

こんにちは、前田です。
2015年がスタートしました。
私的年初スタートあるあるですが、まだ2014年と間違えたり、あれ?平成25年だっけ?今年は2017年?とか平成と西暦がごっちゃになったりします。
皆様はどうでしょうか?

今年は昨年同様、Ruby on Railsを磨いていきたいと思います。
また、今年はインフラ系も頑張りたいと思っております。
AWSやネットワークなどのインフラ系の勉強、また、Chefを使った環境構築、Capistranoによる自動デプロイまでトータルにこなせるようになりたいと思います。
フロントサイドも興味はあるのですが、弊社で主に使用しているフロントサイドのフレームワークAngularJSはちょっと敷居が高そうなので、少し怯んでおります。
gulpGruntJadeをちょこちょこ出来るようになるぐらいにはなりたいと思います。


さて、表題についてですが、弊社では現在ブログをOctopressで管理しています。

Octopressを使ってみて、自分なりの設定・書き方などの小ネタが少し貯まったので書きたいと思います。

httpリンクを別タブで開く

source/javascripts/custom.js
1
2
3
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
source/_includes/custom/head.html
1
<script src="{{ root_url }}/javascripts/custom.js" type="text/javascript"></script>

ソースでは通常どおりのhttpリンク書くだけで、自動的にtarget=”_blank”属性が付加されます。

source/_posts/2015-01-21-octopress.markdown
1
[ヤフー](http://www.yahoo.co.jp/)

結果

ヤフー

リンクは纏めて書く

上記のように、毎回リンクを書くのではなく、下部に纏めて書いたほうがすっきりして、また使い回しもしやすくなります。

source/_posts/2015-01-21-octopress.markdown
1
2
3
4
5
6
[ヤフー][yahoo]
[グーグル][google]
[yahoo][yahoo]

[yahoo]: http://www.yahoo.co.jp/
[google]: https://www.google.co.jp

結果

ヤフー
グーグル
yahoo

画像リンクとURLリンクのネストも出来ます。

source/_posts/2015-01-21-octopress.markdown
1
2
3
4
5
[![つるっと君][turu]][link]


[turu]: /images/t_kun.png =200x
[link]: https://store.line.me/stickershop/product/1001776/

結果

![つるっと君][turu]

Chromeのデベロッパーツールでスマホなどマルチデバイスで確認する

これは特にOctopressに限ったことではないですが、Chromeのデベロッパーツールが便利過ぎるな、と最近関心しました。
今まではmacのiPhoneシュミレータでスマホ画面を確認していましたが、Chromeのデベロッパーツールで色々な機種で確認出来るということを最近知りました。
※バージョン 40.0.2214.91 (64-bit)

メニューバー ▶ 表示 ▶ 開発/管理 ▶ デベロッパーツール を開き、下記の箇所をクリックします。

tool

そうするとこんな画面になり、comand + R で画面リロードで、指定したデバイスとユーザーエージェントで表示されます。

view

iPhoneだけじゃなく、Androidも確認できるし、素晴らしいですね!


今年も昨年から引き続き忙しい1年となりそうです。
振り返って悔いの残らない良い1年になるよう頑張ります!!

[turu]: /images/octopress/t_kun.png =200x

このエントリーをはてなブックマークに追加