2015.01.21 2022.10.26

Octopress小ネタ

mmmuser

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

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

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

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

Contents

httpリンクを別タブで開く
リンクは纏めて書く
Chromeのデベロッパーツールでスマホなどマルチデバイスで確認する

httpリンクを別タブで開く

$(document).ready( function () {
  $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})

<script src="{{ root_url }}/javascripts/custom.js" type="text/javascript"></script>

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

[ヤフー](http://www.yahoo.co.jp/)

結果

ヤフー

リンクは纏めて書く

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

[ヤフー][yahoo]
[グーグル][google]
[yahoo][yahoo]

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

結果

ヤフー
 グーグル
 yahoo

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

[![つるっと君][turu]][link]


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

結果

[![つるっと君][turu]][link]

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

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

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

![tool][tool]

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

![view][view]

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

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

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

AUTHOR