[note.mu] ユーザーさんが公開しているnote.muをもっと使いやすくするツール/方法まとめ

Marquee  marquee |note.png

公式サイト

どうもマーキーです。この前は「[レビュー] 『note.mu』を1ヶ月ぐらいやったのでメリット・デメリットまとめてみた」ていう記事を書きましたが、最近もっとnote.muを使いやすくするためにがんばってくださっている人がいたので、紹介してみたいと思います。

(本当は運営がちゃんとすべきだと思うのですが)

[レビュー] ブロマガ使いにくいけど始めました。

20140519_195052.png

公式サイト> 私のブロマガ「MarQuee's.nico

 どうもマーキーです。

 先日、TRICERATOPSのニコ生があった関係でプレミアム会員になっちゃいました。金ないのに。

 ブロマガを使ってみて非常に戸惑ったところがあったけど、感想みたいなレビューをしたいと思います。

[レビュー] 『note.mu』を1ヶ月ぐらいやったのでメリット・デメリットまとめてみた

20140519_202309.png

公式サイト> 私のnote

どうもマーキーです。

前に「[Journal] ネットで小説を公開するなら、ぶっちゃけどこがいいの? 小説投稿サイトを比較してみました。」で少し紹介しましたが、note.muを1ヶ月ぐらい使ってみたので、レビューしてみます。

[Web Desing] Webで全部できる!! リアルタイム画像編集ツール『IMAGE CMS』

imgcmstest.png

<公式サイト>

こんにちわ、毎日が祝日のマーキーです。(運転免許のお金を貯めるために派遣を考えてます!)

今回は、ピクセルイメージの田中さんが作ってくださった、「IMAGE CMS」を紹介したいと思います。

私も以前のブログにはPhotoshop5.0を利用して、写真や画像の編集を行っていたのですが、さすがに古いので、新しく買い直そうかなと思っていたところ、CCが始まる始末。これからの画像編集をどうしようか迷っていたところです。

このツールは、Web上で手軽に簡単に画像編集することができます。ちょっとした画像編集やちょっとしたコラージュなんかも気軽に作ることができるので、画像編集に能がない私でも簡単に上のような画像を作ることができました。

このツールはサーバーインストール型のアプリケーションです。
公式ページにもインストール方法は載っていますが、ここでもう少し詳しく解説してみたいと思います。

[Web Design] 今流行のLight Box風jQueryプラグイン「Magnific Popup」を導入してみた。

Magnific Popupのレビュー画面

とりあえずブログに書くネタが全然思いつかないので、ブログに施したカスタマイズをどんどん公開していきたいと思います。

今回はLight Box風jQueryプラグインの「Magnific Popupを導入してみました。

JavascriptやjQueryを全然理解していないので、いろいろな所からソースを引っ張ってきて、何とか導入しました。Movable typeで導入している人は少ない感じですかね。このプラグインは商用利用もできて、レスポンシブデザインに対応しているので、スマホでも問題なく表示できる感じです。


smartphone_magnific.jpg

導入方法は以下のサイトを参考にしました。

Magnific Popup を使って見る | Web Design Leaves

プログラマが紹介する、Webサイトを簡単に華やかにするjQueryプラグイン100選!


ちなみに私はMTを使っているので、以下のように編集しました。

HTMLヘッダー部分

<link rel="stylesheet" href="<$mt:BlogURL$>css/magnific-popup.css">

jQuery部分(ここから引用してきて、私の環境に合わせました。)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<$mt:BlogURL$>js/jquery.magnific-popup.min.js"></script>
<script>

$('.without-caption').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});

$('.with-caption').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
image: {
verticalFit: true,
titleSrc: function(item) {
return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
}
},
zoom: {
enabled: true
}
});
</script>

上記の設定だとの<a class="without-caption">が親要素の画像、Magnific Popupするように設定しています。なぜか、CSS設定しなくてもうまく動くみたいなので、あえてCSSを追記してません。他にもいろいろ、カスタマイズできるみたいです。

エントリー・デモ

目的

このページの目的はCSSや各種タグ要素の動作を確認することである。
各種テキスト内容はこちらを引用し、日本語訳にしたものである。ダミーテキストは全角テキストでの表示を確認するために、Lorem ipsumを使用せず、自前のものを使用した。

見出し・文章 a, em, strong

僕の家にはたくさんの花火があった。テストリンク 僕は毎日夜になると、ひとりで花火をしていた。ずっとずっと、ずっと夜明けまで。僕が花火に火をつけると、だいたい小さく咲いた。乾燥し過ぎてだらしがないのだ。たまに状態のいいものがあって、どわっときれいに咲いてくれる。けれどもすぐに消える。たまに人がくると一緒に花火をした。人がいると状態のいいものが多く見つかり。僕たちは長い間花火をたのしむ。五分咲きの花火をずっとずっと。

けれどその人は夜中に帰ってしまった。イタリック ストロングその後もしばらく状態のいいもので楽しんだが、またいつものだらしがないものばかり掴む。きれいな花火を見たくて、僕は火をつけ続ける。ずっとずっと、ずっとひとりで。夜明け前に打ち上げ花火に火をつけてみたが、点火しなかった。くすぶったのかもしれないと、今日の夜また火をつけることにして寝た。しかし、僕がやっと寝始めたころに花火が上がった。明るくて良く見えなかったが、きれいな色をしていた。大きな大きなたんぽぽの花のようだった。今日はまた誰かが来てくれる気がした。その誰かと花火に、大きな花火に、火をつけたいな。

リストタイプ dl, dt, dd

定義付けリスト

定義付けリスト タイトル
分割された定義付けリストです。
定義付けリスト タイトル
分割された定義付けリストです。
定義付けリスト タイトル
分割された定義付けリストです。

順序付きリスト ol

  1. リストアイテム 1
  2. リストアイテム 2
  3. リストアイテム 3

順不同リスト ul

  • リストアイテム 1
  • リストアイテム 2
  • リストアイテム 3

見出し要素 h2

見出し要素 h3

見出し要素 h4

見出し要素 h5
見出し要素 h6

段落要素P 僕の家にはたくさんの花火があった。僕は毎日夜になると、ひとりで花火をしていた。ずっとずっと、ずっと夜明けまで。僕が花火に火をつけると、だいたい小さく咲いた。乾燥し過ぎてだらしがないのだ。たまに状態のいいものがあって、どわっときれいに咲いてくれる。けれどもすぐに消える。たまに人がくると一緒に花火をした。人がいると状態のいいものが多く見つかり。僕たちは長い間花火をたのしむ。五分咲きの花火をずっとずっと。

テーブル要素 table, tr, th, td

テーブルヘッダー 1テーブルヘッダー 2テーブルヘッダー 3
テーブルセル 1 テーブルセル 2 テーブルセル 3
テーブルセル 1 テーブルセル 2 テーブルセル 3

その他要素 sup, sub, cite, acronym, abbr

僕の家supにはたくさんの花火subがあった。僕は毎日夜になると、ひとりで花火をしていた。citeずっとずっと、ずっと夜明けまで。僕が花火に火をつけると、だいたい小さく咲いた。乾燥し過ぎてだらしがないのだ。たまに状態のいいものがあって、どわっときれいに咲いてくれる。けれどもすぐに消える。NBA たまに人がくると一緒に花火をした。人がいると状態のいいものが多く見つかり。僕たちは長い間花火をたのしむ。五分咲きの花火をずっとずっと。AVE

引用・転載 blockquote

"This stylesheet is going to help so freaking much."
-Blockquote

整形済みテキスト pre

僕の家にはたくさんの花火があった。僕は毎日夜になると、ひとりで花火をしていた。
ずっとずっと、ずっと夜明けまで。僕が花火に火をつけると、だいたい小さく咲いた。
乾燥し過ぎてだらしがないのだ。たまに状態のいいものがあって、どわっときれいに咲いてくれる。
けれどもすぐに消える。NBA たまに人がくると一緒に花火をした。
人がいると状態のいいものが多く見つかり。僕たちは長い間花火をたのしむ。五分咲きの花火をずっとずっと。AVE