読者です 読者をやめる 読者になる 読者になる

文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

新要素、やる夫とやらない夫による掛け合い記事を始めます!

はてなブログ

みんな大好きやる夫とやらない夫を使った記事を書いていこうと思います。
別に大げさなものでなく、記事中にやる夫とやらない夫を登場させて記事を書くだけです。。。

今回は予行練習として、どんな感じの記事になるかをテストする記事となります。

やる夫とやらない夫は↓こんなAAです。

       ____
     /⌒  ⌒\
   /( ●)  (●)\
  /::::::⌒(__人__)⌒:::::\   円形に近いやる夫は
  |     |r┬-|     |  バランスが良くとても使いやすい
  \      `ー'´     /
   / ̄ ̄\
 /  ノ ヽ、\
. |   (●)(●)|
. |   (_人_)│
 |     ` ⌒´  | 細長いAAだから
  |           | 左右にスペースができやすいやらない夫
.  ヽ      /
   ヽ     /
   .>    <
   |     |
    |     |

これを会話形式にして上手く記事を作ります。

ちょっと試してみましょう。

やる夫とやらない夫による掛け合い例


クライアントMVCどれ使ったらいいんだろう。

knockout.jsが目茶苦茶覚えやすいんだよなあ。


ルーティング機能が無いぞ。

自前でpushStateするのか?無いだろ・・・


うるせえ使いたいんだよ!!


チームで開発する事考えろ!!


結局どのFW使ったらいいんだろうな・・・

学習コストが最大の敵だよな・・・

問題点とか

大きな問題点が2点あります。

  • 画像を調達するのが面倒くさい。
  • htmlタグ書くのが面倒くさい。
画像の調達

aaを画像にするだけなんですが、上下左右に余分な空白が存在すると会話部分にめり込んでしまうので、photoshopElementsで逐一微調整が必要になります。これが面倒なのですよ・・・
更に、画像とクラス名を紐付けてcssを逐一追加していく必要があります。

htmlタグ

このやる夫は以下のように書いています。ブログの記事中に以下のように書くとやる夫が登場します。

<div class="yaruo"><div class="futari-senaka">
<p>あいうえお。今日はいいお天気です。</p>
<p>あいうえお。今日はいいお天気です。</p>
</div></div>

本当はdiv1個にしたかったんですが、テキストの高さを中央にするために仕方なくdivのネストとなりました。
tableとtable-cellを使ってテキストを中央に寄せ、divの背景画像にaaの画像を配置して左に寄せます。

.futari-senaka       { background-image: url(http://f.st-hatena.com/images/fotolife/t/treeapps/20140430/20140430235715.png); }

更にaaとテキストが重ならないように、テキスト部分のpadding-leftを設定し、画像とテキストが綺麗に並ぶようにしています。

これ、クラス名を覚えてられないので、毎回手元のテンプレからコピペしないといけないのが面倒なところです。

なぜaaを画像で扱うのか

一番の理由は、aaがテキストだとブラウザやフォントによってaaが崩れるから、画像にしています。画像だと環境に左右されずに崩れずに見せる事ができます。

他にも、word-wrap等で改行される恐れがあるので、その辺を簡単に扱うために画像化しています。

使い所は

多分そんなに多用できないので、記事末尾の締めとして使うか、少しづつ散りばめるか、になるでしょう。

当ブログの今後の展望

最近記事を書くだけの単調な状態が続いているので、今回新要素としてやってみようと思った次第です。ブログのテーマも一新したし、最近はてなブログの最新記事モジュールがパワーアップしたり、先日人気の記事モジュールがリリースされたりして、結構はてなブログがパワーアップしてきています。

レンタルブログなのでカスタマイズできる部分が限られているので、結構頭を捻らないと変化球を投げられないんですよね。最近はてなブログは正式に<head>要素をいじれるようになったので、jqueryやzeptoを入れて、動的に変化を出す方法もあります。ここもアイデア勝負なんでしょうね。

個人的にはてなは技術系の会社として応援しているので、頑張って欲しいですね!!

すぐに使えてガンガン集客! WEBマーケティング111の技

すぐに使えてガンガン集客! WEBマーケティング111の技

マンガでわかるWebマーケティング ―Webマーケッター瞳の挑戦!―

マンガでわかるWebマーケティング ―Webマーケッター瞳の挑戦!―