AtomにMarkDownでhtmlを書こう

まずは以下のようなテキストを書きます。

AtomにMarkDownでhtmlを書こう

### MarkDownとは
書いたテキストに簡単なマークアップをするだけで、HTMLを書き出すことができる、便利な方法です。
BlogやWeb記事を大量に書く人にとっては非常に便利なので、覚えておいて損はありません。

### AtomでMarkDown
今回は、Atomで書いたテキストを、htmlにする方法を書いていきます。

#### Atomをダウンロードする
まずは[Atomのサイト](https://atom.io/)から、Atomをダウンロード、インストールしましょう。

#### テキストを書く
htmlにしたい文章を、プレーンにどんどん書いていきましょう。

#### MarkDownプレビュー表示
Macなら shift + ctrl + M
Windowsなら Alt + P
で、プレビューウインドウが表示されます。

僕の環境ではなぜかshift + ctrl + Mが反応しないので、AtomのPackagesメニューからMarkdown Preview、Toggle Previewを選んでいます。

#### 見出しをマークアップする
見出しのテキストの前に「# 」を入れると、h1になります。
「## 」と2個ならh2。h4は、もちろん「#### 」です。
スペースを一つ入れるのをお忘れなく。

#### リンクをマークアップする
\[リンクのテキスト](URL)の記法で、リンクがかけます。
[こんな感じ](http://www.miyasaka.info/)みたいな感じです。

#### ulやol
テキストの冒頭に「* 」または「- 」でul、「1. 」のように数字だとolのリストになります。
htmlで直接<ul><li>なんとか</li>を打つのは面倒ですからね。
これは便利。

以下、リストのテスト

##### 似ているけど違いがわからない動物
* トド
* セイウチ
* アザラシ
* オットセイ
* アシカ

##### ポケモンGoでたくさん出てるけど、もういらないとおもうポケモンベスト3
1. ポッポ
2. コラッタ
3. ズバット

#### マークアップできたら
右側のプレビューウィンドウで右クリック、「Copy As HTML」。
Blogやエディタにペースとすれば、HTMLが貼り付けられると思います。

ここで説明した、「#」「リンク」「*」を覚えるだけで、かなり便利にテキストをhtmlにできると思います。

これが、htmlとしてコピペできます。
↓以下の通り。

MarkDownとは

書いたテキストに簡単なマークアップをするだけで、HTMLを書き出すことができる、便利な方法です。
BlogやWeb記事を大量に書く人にとっては非常に便利なので、覚えておいて損はありません。

AtomでMarkDown

今回は、Atomで書いたテキストを、htmlにする方法を書いていきます。

Atomをダウンロードする

まずはAtomのサイトから、Atomをダウンロード、インストールしましょう。

テキストを書く

htmlにしたい文章を、プレーンにどんどん書いていきましょう。

MarkDownプレビュー表示

Macなら shift + ctrl + M
Windowsなら Alt + P
で、プレビューウインドウが表示されます。

僕の環境ではなぜかshift + ctrl + Mが反応しないので、AtomのPackagesメニューからMarkdown Preview、Toggle Previewを選んでいます。

見出しをマークアップする

見出しのテキストの前に「# 」を入れると、h1になります。
「## 」と2個ならh2。h4は、もちろん「#### 」です。
スペースを一つ入れるのをお忘れなく。

リンクをマークアップする

[リンクのテキスト](URL)の記法で、リンクがかけます。
こんな感じみたいな感じです。

ulやol

テキストの冒頭に「* 」または「- 」でul、「1. 」のように数字だとolのリストになります。
htmlで直接<ul><li>なんとか</li>を打つのは面倒ですからね。
これは便利。

以下、リストのテスト

似ているけど違いがわからない動物
  • トド
  • セイウチ
  • アザラシ
  • オットセイ
  • アシカ
ポケモンGoでたくさん出てるけど、もういらないとおもうポケモンベスト3
  1. ポッポ
  2. コラッタ
  3. ズバット

マークアップできたら

右側のプレビューウィンドウで右クリック、「Copy As HTML」。
Blogやエディタにペースとすれば、HTMLが貼り付けられると思います。

ここで説明した、「#」「リンク」「*」を覚えるだけで、かなり便利にテキストをhtmlにできると思います。

ツイートツイート

牛久大仏花火大会にてきとぅなキャプションをつけてみた

「牛久大仏 花火」で画像検索すると、この世の終わりとしか思えない写真が大量に出てきて怖かったので、ちょっとてきとぅなキャプションをつけてご紹介します。


▲ちなみに、牛久大仏は、ガンダムより、エヴァよりもでかい。


▲大仏様が静かに怒りながら、力を貯めています。


▲大仏様の怒りが最高潮に。今日世界は終わります。突然ごめんね。


▲力が放射されていきます。心が弱い人は、もうこれだけで意識を失います。


▲最初の一撃です。ここから板野サーカス的な攻撃が始まります。


▲ここから本気です。この攻撃で、東京はほぼ壊滅しました。


▲総攻撃です。日本の国土の95%が海に沈みました。


▲米軍が最新兵器で反撃します。しかし、大仏様はびくともしません。さすが大仏、なんともないぜ!

以上、ネタですので、仏教関係の方からのクレーム等はご容赦ください。

ツイートツイート

atomとchromeでもLiveStyle

livestyle-atomのインストール

apmが動くなら、
apm install livestyle-atom

串設定ができていない場合などは
AtomメニューからPreference, Installをクリック
Search Packagesで
Livestyle-atom
を検索、Install
Atomを再起動

ChromeにLiveStyleをインストール

ChromeウェブストアでEmmet LiveStyleをインストール
Chromeを再起動

設定する

Chromeに追加されたLiveStyleボタンをクリックして、右上のOFFをONにする
スクリーンショット 2016-06-09 19.35.03
今回はstyle.cssというcssを変更する場合。

いじる

ChromeのDeveloper toolsでstyleを変更すると、atomで開いているエディタ内のcssが自動で変更された。
スクリーンショット 2016-06-09 19.36.21
スクリーンショット 2016-06-09 19.36.42
▲変更前
スクリーンショット 2016-06-09 19.37.00
スクリーンショット 2016-06-09 19.37.08
▲変更後

反対に、atomでstyleを変更すると、chromeの画面がリアルに書き換わります。

ツイートツイート

iPhoneのGoogle Analyticsアプリがバージョンアップされた

iPhone用のGoogle Analyticsアプリがバージョンアップされ、バージョン3.0になりました。

リリースノートより

バージョン 3.0 の新機能

* Sharing! Share a report via text, email, chat, and more
* Customization! Customize reports and save them to your dashboard for quick follow-up
* Brand new look & feel; easier to use than ever
* New scorecard visualizations: tab through metrics, swipe through dimensions
* Change & compare date ranges, dig deeper by adding segments
* Greatly simplified navigation and report discovery

何が変わったのか

1. 共有:レポートをテキスト、メール、チャットで共有
2. カスタマイズ:よく使用するレポートをマイレポートとして保存
3. 新しいルック&フィール:簡単に使える
4. 新しい表示方法:タブとスワイプで表示項目を切り替え
5. データ表示期間の変更と比較にセグメントを追加可能
6. ナビゲーションの簡易化

実際に使ってみる

アイコンが変わった

icon
まずこれに慣れるのに時間がかかりそうですね。

ナビゲーションの簡易化

IMG_2288
左上のハンバーガーメニューから開くナビゲーション。
以前のバージョンでは「ユーザー」などの項目をタップするとサブメニューが表示されるドリルダウン型でしたが、バージョン3.0ではサブメニューは廃止。
レポート画面でタブ・スワイプでレポートを切り替える方式になりました。

セグメント

IMG_2289
データ表示期間に、新規・リピート、検索・参照トラフィック、コンバージョンが達成された訪問、モバイルのトラッフィクなどフィルタが設定できるようになりました。

ファーストインプレッション

UIが大きく変わったので、慣れるまで時間がかかりそうですね。
いまだにページビューをどこで見るのか、見つかりません笑
タブ&スワイプでレポートを切り替えられるようになった分、1画面に表示される情報量が増加しました。
その分、データが表示されるまで時間がかかるのが気になります。
すぐに見ておきたい情報は、マイレポートに登録しておき、細かく見たい時に通常レポートをチェックする、という使い方がいいかもしれませんね。
フィルタは便利ですね。
ラベル文字が大きすぎたり、グラフの下の時間表示が見にくかったり、日本語にうまく最適化できていない部分が気になります。

僕ら1日24時間ログを見ているユーザーにとって、最も重要なアプリなので、新しい機能の追加やUIの改善はありがたいですね。

以上、速報レポートでした。

ツイートツイート

サイトを公開した直後にリファラスパム

本日、クレジットカード倶楽部というサイトを立ち上げました。
アフィリエイト目的ではなく、クレジットカードユーザーに本当に役にたつ情報を発信するメディアを目指していきます。
SAKANA Magazineとともに、よろしくお願いいたします。

さて、このクレジットカード倶楽部を公開して、sitemap.xmlをgoogleに送った数分後。
Google Analyticsのテストのためにリアルタイム計測を確認したところ、すでにリファラスパムがやってきていました。
Googleのインデキシングのスピードも速いけど、リファラスパムの対応速度もものすごいですねえ・・・
スクリーンショット 2016-03-24 18.04.40

ツイートツイート

WordPressのプラグインがSSLでエラーを出すので修正

以前紹介したWordpressプラグインScroll to Topが、SSLでエラーを出していた。

エラー内容は以下の通り。
Mixed Content: The page at ‘https://www.hoge.com/’ was loaded over HTTPS, but requested an insecure script ‘http://www.hoge.com/wp-content/plugins/scroll-to-top/js/stt.js?ver=1.0′. This request has been blocked; the content must be served over HTTPS.

プラグイン用のJSが、http://から呼ばれているためにブロックされている。

WordPressが吐いたソースを見ても
<script type=’text/javascript’ src=’http://www.hoge.com//wp-content/plugins/scroll-to-top/js/stt.js?ver=1.0’>
となっている。
そりゃーブロックされますよね。

修正するには、/wp/wp-content/plugins/scroll-to-top/stt.phpを修正する。

元のソース

wp_enqueue_script(‘stt’, WP_PLUGIN_URL . ‘/scroll-to-top/js/stt.js’, array(‘jquery’), ‘1.0’ );


修正後

wp_enqueue_script(‘stt’, plugins_url() . ‘/scroll-to-top/js/stt.js’, array(‘jquery’), ‘1.0’ );

WP_CONTENT_URLやWP_PLUGIN_URLは、Wordpressの管理画面で設定されたURLを読むだけなので、SSLを自動認識しない。
site_url()やplugins_url()を使わないとダメ、ってことですね。

JSやCSSを追加する系プラグインは、同じ様な方法で修正できるんじゃないかと思います。

ツイートツイート

WP Social Bookmarking Lightに「メールで送る」ボタンをつけたい

WP Social Bookmarking LightはTwitter、Facebook、Line、Google +など、多くのソーシャルメディアシェアボタンを簡単にWordpressに追加できる。
しかし、「メールで送る」ボタン機能がないので、簡単に作ってみた。

仕様として、WP Social Bookmarking Lightのclass、.wp_social_bookmarking_lightの中の、最後にjQueryのaddpentToで追加するように作っている。

jQuery(document).ready(function($) {
var pageTitle = document.title;
var pageUrl = location.href;
var shareText =’ここにメール本文に書きたいテキストを書く%0d%0a%0d%0a’;
jQuery(‘<div class=”wsbl_mail”><a href=”mailto:?subject=’ + pageTitle + ‘&body=’ + shareText + pageUrl + ‘”><img src=”/wp-content/uploads/2016/02/mailto.jpg” alt=”メールで送る” width=”88″ height=”22″></a></div>’).appendTo(‘.wp_social_bookmarking_light’);

メールで送るボタンのサンプルはこんな感じで。
mailto

ツイートツイート

WP Social Bookmarking Lightでカテゴリ一覧ページにソーシャルボタンが表示されない場合

WordPressにソーシャルボタンを追加するプラグイン、WP Social Bookmarking Light。

カテゴリ一覧などWordpressが自動生成するページにもソーシャルボタンを追加するためには、設定画面の「個別記事のみ」を「No」にすればいい。
スクリーンショット 2016-02-10 12.20.38

しかし、なぜかうまく表示できない・・・というときは、archive.phpにWP Social Bookmarking Light表示用のコードを追加しちゃいましょう。

場所的には、以下のようにhave_posts()のwhileループの下、item-wrapの閉じタグの上あたりがいいんじゃないかと思います。

  <?php
wp_social_bookmarking_light_output_e();
?>
</div><!– .item-wrap –>
</div><!– .archive-wrap –>

ツイートツイート

WordPressをソーシャルシェア

WordPressのプラグイン、WP Social Bookmarking LightとAll in One SEOを使った方法の紹介です。

WP Social Bookmarking Lightの設定

「WP Social Bookmarking Light」をインストールして、設定画面からお好きなソーシャルメディアを右から左にドラッグしましょう。
ここではFacebook、Twitter、LINEを設定してみました。
スクリーンショット 2016-01-15 17.05.42

All in One SEOの設定

トップページや、各投稿毎にシェア画像を設定するのに、今回はWordpressプラグイン「All in One SEO」を使います。
「All in One SEO」をインストール。
スクリーンショット 2016-01-15 16.25.27
All in One SEOの「Feature Manager」から、「Social Meta」の「Activate」ボタンを押す。
スクリーンショット 2016-01-15 16.27.40
All in One SEOの「Social Meta」をクリック。
スクリーンショット 2016-01-15 16.28.15

トップページのシェア画像設定

まずはHome Page Settingsの各項目を設定。これでトップページのシェア設定ができます。
スクリーンショット 2016-01-15 16.37.03
とりあえず、ここではog:imageだけ設定しておきます。
・「Home Image」の「Upload Image」をクリックし、新規画像を追加する
・同じく「Home Image」の「Upload Image」で、メディアにアップロードされているファイルを選ぶ
・画像のURLを直接指定する
などの方法で設定可能です。

個別ページのシェア画像設定

1.「All in One SEO」の「Image SettingsーSelect OG:Image Source」から設定する方法
・Default Image:個別ページ共通で、同じ画像を使う
・アイキャッチ画像:個別ページに設定されたアイキャッチ画像を使う
・Image From Custom Field:カスタムフィールドで設定した画像を使う
などが選べます。
スクリーンショット 2016-01-15 16.47.04
2.個別ページのAll in One SEO設定する方法
投稿の下部にある「All in One SEO Pack」の「Social Settings」タブで、Custom Imageを設定します。
スクリーンショット 2016-01-15 17.00.46

ツイートツイート

SSL証明書の期限切れgithub serverにSourceTreeから無理やりプッシュする

github/ github enterpriseのSSL証明書の期限が切れてしまうと、「fatal: unable to access ‘: SSL certificate problem: Invalid certificate chain」のようなエラーが出て、プッシュできなくなる。
スクリーンショット 2016-01-08 12.07.24

無理やりプッシュするには、SourceTreeの環境設定ーGitで、「SSL証明書の検証をしない」にチェックを入れるといい。
スクリーンショット 2016-01-08 12.04.27

まあ、根本的な解決方法ではないけれど。

ツイートツイート