文系プログラマによるTIPSブログ文系プログラマによるTIPSブログ文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。やるおTwitterGooglePocket思ったよりも原始的なつくりなのです。いうやつとかこういうやつですやるお「htmlもcssも自信無いんだけど・・」やらないお「まあ何とかなるだろ。勢いでやってみろ」さて、ブログ内でこれをどうやっているのか?どういう手法で、何故こういう手法で実現しているのか解説・公開してみようと思います。当記事はhtmlとcssがある程度解る方を対象としています。前知識など説明なんぞいらん!早く使わせろ!という方は「やるおAAを頑張って作る!」まで飛ばして下さい。やって実現しているのか?htmlとcssと画像を使って実現しています。AAをテキストではなく画像で表現しています。AAをテキストで表現するテキストはフォントによって作られていますね。このフォントですが、等幅フォントとプロポーショナルフォントの2種類存在します。プロポーショナルフォントプロポーショナルフォントは、文字によって幅が違うという特徴を持ちます。テキストのAAがずれるという現象を目にすると思いますが、これはプロポーショナルフォントが原因である事があります。等幅フォント等幅フォントは、全ての文字が同じ幅を持っているという特徴を持ちます。ズレないAAを表現するには、基本的に等幅フォントを使う必要があります。画像ではなく等幅フォントを使えばいいのでは?残念ながらそれでは不足しています。cssで画面上に表示するフォントを指定する事はできます。皆さんのPCに指定したフォントが存在している訳ではありません。どんなフォントがインストールされているかは、OSやOSのバージョンによって異なるため、絶対に皆の環境に存在する等幅フォントを指定する、ということができないのです。これを解決するための方法があります。それはWEBフォントによって解決します。WEBフォントを使えば解決か?必ずしもそうとはいえません。webフォントは、動作が重い、無料のものが少ない、古いブラウザが対応していない、というデメリットがあります。本当はwebフォントを使えばいいのですが、デメリットを考慮して、AAを画像化して使っています。画像化することのデメリット画像化にも当然デメリットがあります。それは、AAを画像として保存する事自体が面倒である点です。非常に面倒です・・・さて、何故画像を使うかが解ったところで、どのようなhtml・cssで表現するのかを見ていきます。やるおAAを頑張って作る!材料aa画像は自分で調達する。(作った画像は削除されないアップローダーにアップロードする)htmlとcssを自分で編集する勇気。ブログを運営している方ならできるんじゃないかと思います。画像を用意するやるおのaa画像は自分で用意しましょう。私はPhotoshopElements9.0を使って作成しています。共有できるウェブアルバム例えばはてなフォトライフ等にアップロードし、画像のURLをコピーしておきます。例としてはてなフォトライフを挙げましたが、GoogleDrive等、どのアップローダーでも構いません。テンプレートhtmlをダウンロードする以下のテンプレートhtmlをダウンロードして下さい。https://drive.google.com/file/d/0B2gVyBj5C-fHMEt5RGRjSjdhWHM/edit?usp=sharingダウンロードできたらこのhtmlをダブルクリックするなりして、ブラウザで表示してみて下さい。やるおが表示できましたね?このテンプレートは、ローカル環境で事前に動作を確認するためのもので、ぶっつけ本番でいきなり設定するのでなく、まず皆さんのPC上で動作を確認して、問題なければ実際にはてなブログ等でご利用して頂くために存在しています。ちなみにこのテンプレートは実際私が使っているものを少し簡単に解りやすくしたものです。テンプレートのhtmlとcssを編集する以下の部分がはてなブログのcssに貼り付ける部分です。*/以下の部分がはてなブログの記事に貼り付ける部分です。-->現状はやるおがpcを操作しているAAしかありませんね。class="yaranaio-hiji-01"><p>yaranaio-hiji-01</p></div></div>と追加します。画像URLは必ず自分で用意したものに差し替えて下さい。この例では私のブログの画像を直接リンクしています。使ってもいいんですが、他者ブログの画像を直リンクすると運営に怒られたりすると思うので、後で困ると思います。表示できたでしょうか。「yaruo-pc」「yaranaio-hiji-01」という部分は自分で命名します。これはcssセレクタといい、「この部分にだけcssを適用する」という意味で、このaaの横幅をもっと広くしたい、等が可能になります。等と連番を振っていった方がいいです。やるおのPCのAAは沢山あるので、そのうち命名に困ると思うので。270px」という部分はAA毎に調整する必要があります。これはテキストが左から何ピクセルから始まるかの設定です。小さい数字にすると、AA画像とテキストが重なってしまい、大きい数値にするとAAとテキストが離れてしまうので、AAの横幅ごとに適宜修正して下さい。やらないおは細いAAが多いので、140pxなど、小さい値の場合が多いと思います。この数値をいじって、ローカルでテキスト位置を調整してみて下さい。これでローカルで問題無い事が確認できましたね。次は実際にはてなブログにこれを反映してみましょう。はてなブログにcssを適用するまずははてなブログの管理画面を開きます。続いて以下の場所にCSSの編集エリアがあるので、ここにcssを貼り付けます。AAを作った方は沢山の行をはりつける事になります。最初から指定してあるcssはそのまま残しておいた方がよいです。1行目に書かれているcssが最初からあるものなので、それを避けて貼り付けて下さい。貼り付けたら画面左上の「変更を保存する」ボタンを押下してCSSの編集を保存します。実際に記事を書いてみる実際に記事に以下を書いてみて、プレビューしてみて下さい。class="yaruo-pc"><p>yaruo-pc</p></div></div>どうですか?表示できましたか?表示できた方は今日からやるおライフをお楽しみ下さい。表示できなかった方はCSSが間違っています。簡単な方法ないの?テキストを画像の横に並べなくていいよ!という方の場合、もっと簡単です。↓こうしたらどうでしょう。ここにテキストを書きます↑これは↓こうなります。ここにテキストを書きます[http://f.st-hatena.com/images/fotolife/t/treeapps/20140430/20140430010206.jpg:image=http://f.st-hatena.com/images/fotolife/t/treeapps/20140430/20140430010206.jpg]実に単純ですね。画像とテキストを並べただけです。これだと縦に長くなってしまうし、話している感が出にくいというデメリットがありますね。注意事項など当記事は解説をしているだけであって、サポートはしません。「なんかよく解らないけどズレるんです!教えて下さい!」等といった質問は基本的に受け付けません。全て自己責任でご利用下さい。冒頭でも書きましたが、当記事はhtmlとcssがある程度解る方を対象としています。解らないのに使って問題が起きた時に自分で解決できないのであれば、そもそもあなたの手に追える技術ではないから使うべきではない、という事であると私は考えていますので、ご了承下さい。補足htmlとcssははてなブログに依存しないように作った(つもり)ので、例えばアメブロやliveddorブログやFC2ブログやWordPressでも使えるはずです。いうと、ブログ以外のサイトでも使えるかと思います。雑感これをやろうと思ったきっかけは、2chの「やるおと学ぶ」シリーズを見た事がきっかけで、ブログが停滞していたころ(いつもですが)に何か変化をもたせようと思った時、やるおと学ぶを思い出して、即興で作ってみました。他にもニコニコ動画のようにテキストを流してみようと思ったり、もっとブログで色々な表現ができると思ってるのですが、中々アイデアが思いつかないのが辛いところです。03:24昔は業務系SIer、今はベンチャー企業でプログラムを書いています。mapDispatchToPropsを撲滅するReactオススメ書籍React自体の基礎、AtomicDesignの適用、CSSの運用手法の歴史的な経緯とメリットデメリット、Reduxの基礎、redux-sagaによる非同期処理、サーバサイドレンダリング、テスト、lint、を学ぶ事ができます。啓太マイナビ出版AmazonAngularオススメ書籍Angularを学ぶなら絶対以下がおすすめです!バインディング、ディレクティブ、パイプ、フォーム、コンポーネント、サービス、ルーティング、httpClientによる非同期httpリクエスト、テスト、angular-cli、を非常に丁寧な説明で網羅的に解説しています。技術評論社AmazonSEOオススメ書籍SEOを学ぶなら絶対以下がおすすめです!クローラに対して何をどうすればサイトの巡回効率・速度を上げる事ができるのか、どういったマークアップをする事が標準仕様なのか。巷に溢れる業者による経験則に基づくオレオレSEO情報は一切無く、全てGoogle等のオフィシャルな情報に基づいて何をすべきか、どんな手段があるのかを解説されています。プログラマな私が業務で行った施策が多く書かれており、プログラマ寄りで高度な内容となっており、巷のビギナー向けの曖昧な情報集とは一線を画しています。Amazonアソシエイト・プログラムの参加者です。reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。