(記事ソート奮闘記④)HTMLとCSSで簡易Web単語カード(画像→テキスト ver.)

14/03/02

PHPで、記事ソートのやり方を学ぶのん、時間が空きすぎると、わすれちゃうこと請け合いなので、ここいらで、ちょっとだけ進めておこう。

といっても、今回も「学習していく方法論」を整えるだけ。


(記事ソート奮闘記②)HTMLで簡易Web単語カードさぶの部屋 | さぶの部屋

↑において、PHPのコードを覚えていくための「なんちゃって単語カード」を作成した。

でも、PHPを扱うので、そのままPHPコードを本文中に書くと、不具合が何度か発生してしまうので、別の方法で単語カードを作ろうと思い立った。

・・・

といっても、前回の「テキスト→テキスト」のマウスオーバー変化を、
「画像→テキスト」に変えるだけでいけそうだぜ。
コードを画像スクショし、それにマウスオーバー用のテキストを添えるようにすれば、本文にPHPを書き込む必要あらへんしね。


その「なんちゃってWeb上単語カード」、
「テキスト→テキスト」は、以前、簡単に作成できたので、

「画像→テキスト」も、容易に作れるかなぁと思っていたけど、結構うまいこといかなくて、時間を食うてしもうた。

テキストのみの場合とは異なり、CSSの「ホバー」を使ってやる方法を導入してみた。


↓のサイトを大いに参考。
(というか、ほとんどそのまま使いますた。すみません)
CSSだけでポップアップ


↓に設定メモをば。



CSS


参考サイトでは、吹き出し風になっていたので、その部分は削除した。

あと、色を変更。




MarsEdit 画像アップロード設定


次に、画像アップロード時の手間を省くため、
MarsEditの設定。



なぜか、class を使うとできなかった。
なんでやろ?



DEMO




↓マウスオーバーで、ナイスボケが現れる・・・?




俺の名前は はしゃぎ過ぎだ徹也。お前は?


 


参考サイト
暇人\(^o^)/速報 : 【画像】最近のboketeで面白かった画像wwwwwwwwww – ライブドアブログ


ふー、なんとか出来上がり。



140302


画像をば マウスオーバー テキストに


やりたいこともなかなか多いが、1つずつかたずけませう。
Better & Better.




中国共産党帝国の崩壊―呪われた五千年の末路 (カッパ・ビジネス)
中国共産党帝国の崩壊―呪われた五千年の末路 (カッパ・ビジネス)

「公社」とは、英語のコミューン。ドイツ語ならばゲマインデ。共同体だ。共同体(Gemeinde)は、マクス・ウェーバー社会学の銘刀。人民公社は、真に共同体(ゲマインデ)となりえて、はじめて成功しうる。
 所得の平均分配、無償労働の強要、私有であった財産の公共化など、真の共同体(ゲマインデ)になってはじめて可能である。無料の託児所や敬老院も、真の共同体(ゲマインデ)においてのみ、有効に機能しうる。
 が、毛沢東の人民公社は、真の共同体(ゲマインデ)たりえない。そんなことは、断じてありえない。
 中国には、血縁共同体たる宗族が健在だからである。
 父→子で集団をつくる父系集団(パトリ・リーニアル・グループ)。それが宗族。中国では、5千年前も今も、血縁共同体てる宗族が、ただひとつの共同体(ゲマインデ)。それ以外の共同体(ゲマインデ)なんかうけつけっこない。人民公社は、共同体(ゲマインデ)なりえないのである。
 毛沢東はここに気づかなかった。共同体(ゲマインデ)でなければならない人民公社は、決して共同体(ゲマインデ)になることはできない。ここに、毛沢東が内包する端的な二極的矛盾がある。
5-6


Read more...

CSSで、「今日の一句」用のハンコ作ってみた

14/02/17

日付付きの、「今日の一句」のハンコをCSSで作ってみた(もとい、優れた先人の方の智恵を拝借させていただいた)ので、メモ。

少し前から、毎日、文末につけている「今日の一句」に
何か、付けてみたいなぁ、と思っていたのでそれをやった。


これをやる意味があるのかというと、


まあ、ないでしょう。



自己満足は、プライスレス。




吹き出し一考


吹き出し系のやつでも、試してみたけども、
どうにもしっくりこなかった。
cssarrowplease








ハンコでいいや


もうちょい、コンバクトに、「今日の一句」と示せるものはないだろうかと
Google先生にお伺いを立てていたところ、ハンコをCSS3を用いて作成していたこちらのサイトを発見。
HTML5 CSS3 はんこ – W2U開発wiki – Seesaa Wiki(ウィキ)


で、少しこれを修正してみて、ブログ用ハンコを作ってみた。


CSS




TextExpander


スクリーンショット 2014 02 17 2 15 03


では、さっそく一発目のハンコ利用である。

140217


きみとなら 押してもいいよ そのハンコ

うむ。趣あふれるええ句や。意味不明などではない。断じてない。
今日も、「気になっているリスト」をひとつ消化
Better & Better.



危機の構造―日本社会崩壊のモデル (中公文庫)
危機の構造―日本社会崩壊のモデル (中公文庫)

 このようなアノミー、つまり、完全に規範のコントロールを失ったアノミーを完全(complete)アノミーという。ナチスや軍国主義を生み出し育成したアノミーですら、完全アノミーほど凶暴なものではなかった。狼グループはこの完全アノミーの典型である。そして現在の日本においては、それが、社会の底辺にうごめくく無法者や落伍者の間だけでなく、社会中枢を成す善良な市民の間に浸透していることを再度ここで指摘しておきたい。
44


Read more...

引用のスニペットをTextExpanderで整えてみる。あと、初の1人カラオケした。

14/02/16

(執筆直後 追記)

「blockquote」タグの中に「p」タグが入っていると、
表示がおかしくなるようなので、「p」タグを抜いたものに修正。

(追記 ここまで)






TextExpander にスニペットを追加したという、備忘録。



・・・の前に、現在、人生初の一人カラオケに来ているので、
その感想でも。


初の1人カラオケ行った


雪の影響で、電車が止まってしまったこともあり、
三宅御用達のネカフェが、なんと満席であった。

あー、どうしよかなと思っていたが、
そのネカフェのすぐ上の階に24時間営業のカラオケがあることを発見。


行ってみたろう。
人生初の1人カラオケである。


せっかく、カラオケに来たので、
一曲、かの槇原敬之の「遠く遠く」でも歌ってから、
ブログ書いたり、勉強したりしようと思った。

つまり、歌う曲リストは、


・遠く遠く(槇原敬之)


となるはずであった。
その後にさっさと、ブログ執筆→読書としゃれこむつもりであった。


・・・

が。



実際に歌った曲は以下。


・遠く遠く(槇原敬之)
・自由への招待(L’Arc~en~Ciel)
・奏(スキマスイッチ)
・The Call(Backstreet Boys)
・Drowning(Backstreet Boys)
・Red Hot(ELLEGARDEN)
・PIECES OF A DREAM(CHEMISTRY)
・TSUNAMI(サザンオールスターズ)
・to U(Bank Band with Salyu)
・栄光の架橋(ゆず)
・THUNDERBIRD(T.M.Revolution)
・One more time, One more chance(山崎まさよし)
・名もなき詩(Mr.Children)
・ずっと2人で・・・(GLAY)
・シェリー(尾崎豊)
・Link(L’Arc~en~Ciel)
・OH MY LITTLE GIRL(尾崎豊)
・15の夜(尾崎豊)
・僕が僕であるために(尾崎豊)
・卒業(尾崎豊)
・Forget-me-not(尾崎豊)
・SOLID DREAM(CHEMISTRY)
・遠く遠く(槇原敬之)


である。

・・・

・・・









いや、歌いすぎや。
1人さみしく、何をしとんねん。

まあ、ええか。
少しは発散になったし。


引用のスニペットをTextExpanderで整える


うってかわって、本日のネタ。

けしからん安倍首相の憲法発言をネタにしたいと思ったのだが、
「情報を引用しながら書いていく」、という方法が最適化されていないので、
今、できることをしておく。

具体的には、Chrome の情報を、クリップボードに保存した状態で、
TextExpanderにホットキーを入力すれば、一瞬で、
「blockquote」のカタチにする。

4パターンくらい作っておけば、ことたりるだろう。


過去に別のブログで、やったことの焼きまわしではあるが、
思い出し学習という観点から、もう一度、方法を振り返っておく。


実は、ちょい高度なスニペット組み合わせ


TextExpanerの少しだけ、高度(?)な方法を使っているので、それを少しメモ。

前に使っていた時は、全然、こんなこと考えていなかってたなぁ。


このような良質サイトを拝見し、そのまま導入したと思う。
Google ChromeからアクティブなタブのURLとタイトルを取得し、TextExpanderで一瞬にしてリンクを作成する方法 | Apple情報局


↓の2つのスニペットが、土台として使われいたりする。

・Chrome のアクティブなタブのページタイトルを取得するのん
スクリーンショット 2014 02 16 5 12 07

・Chrome のアクティブなタブのURLを取得するのん
スクリーンショット 2014 02 16 5 12 22


1. タイトルとURLと引用日付き引用


基本となりそうなやつ。
タイトル、URL、引用日(現在時刻)を添えてあるやつ。



スクリーンショット 2014 02 16 6 07 48
DEMO

昨日、アメブロとの連携に成功し、
せっかくだから、同様に「AddBlogsPro」でできるブログ連携を、
ささっとやろうと思った。

さぶの部屋 | タテマエ<本音  常識?なにそれ?
QD: 140216





2. ↑とほぼ同じ。Date抜き


引用日を抜いただけのversion。
使いどころあるかどうかは微妙。



スクリーンショット 2014 02 16 6 07 57

DEMO


昨日、アメブロとの連携に成功し、
せっかくだから、同様に「AddBlogsPro」でできるブログ連携を、
ささっとやろうと思った。

さぶの部屋 | タテマエ<本音  常識?なにそれ?




3. 引用だけ


シンブルに引用だけのん。


スクリーンショット 2014 02 16 6 08 07
DEMO

昨日、アメブロとの連携に成功し、
せっかくだから、同様に「AddBlogsPro」でできるブログ連携を、
ささっとやろうと思った。





4. 引用のみ & 引用箇所スタート


もしかしたら、使うかも。
引用元の情報は自分で入力したいときの場合。

手動でやればいいので、Technique Technique(わざわざ)作る必要もないかと思ったが、記念に作っておいた。




スクリーンショット 2014 02 16 6 08 15

DEMO

昨日、アメブロとの連携に成功し、
せっかくだから、同様に「AddBlogsPro」でできるブログ連携を、
ささっとやろうと思った。

←ここにカーソル。





はあ。なんとか終了。


カラオケと スニペット作り 関係ねぇ


今日は、不動産屋2つめぐりと、教習所。
新しい気付き、きっとあることだろう。
Better & Better.



日本国憲法の問題点
日本国憲法の問題点

 翻ってみれば、サッチャーのイギリスは衰えたりといえども、憲法は生きていた。民主主義も資本主義の精神も根太から腐ってはいなかったのである。つまり、イギリスにはまだ回復の余地があった。サッチャー女史も腕の振るいようがあった。
 これに対して日本は?
 憲法の柱たる民主主義(デモクラシー)がきちんと作動していないのだから、議会も行政府も裁判所もまともにその役目を果たしているはずがない。かりに、かの「鉄の女(アイアンレディ)」サッチャー女史が日本国の総理大臣になったとしても、民主主義不在ではリーダーシップの振るいようもない。
 また、日本は資本主義がまともに作動していないから、たとえケインズ大先生が蘇ったとしても、この不況を打開することは不可能である。ケインズ経済学も、もちろん古典派経済学も資本主義を前提にして作られているからである(拙書『資本主義のための革新』日経BP社、同『日本人のための経済原論』『小室直樹の資本主義原論』ともに東洋経済新報社)。
18


Read more...

記事タイトル、小見出し、俳句欄をCSSで調整するの巻

14/02/11

サイドバーまわりの調整が(とりあえず)終わったので、今度はテキスト周りの調整を行った。

「記事タイトル」「小見出し × 2」「俳句欄(?)」をCSSで少し調整した。
できたものは、もちろん、TextExpander でスニペット化。


その中でやったことをメモメモ。


JetpackのカスタムCSSでCSS編集

WordPress の標準機能として、「テーマ編集」がついており、FTP接続などしなくても、管理画面から、「style.css」を編集できる。

でも、わての場合、「テーマとの相性が」とかどういう理由があるのかはわからんが、うまく編集できなかった。

そこで、「Jetpack」(プラグイン)の「カスタムCSS」という項目をONにし、そちらから編集するようにすると、うまくいった。しめしめ。


Jetpack さぶの部屋 WordPress



記事タイトル


文字サイズを大きくしたり、padding-bottom で、下に少し余白を作ったり。
(記事タイトルと本文が近すぎるのが少し嫌だった)


あと、少し無駄にテキストシャドウ(CSS3)もつけてみた。
参考サイト、メモしそこないました。すいまへん。



できたのが、↑記事タイトルにあるカタチ。



ちなみ、深い意味をないが、フォントも変更してみた。
(font-family: “Osaka”)
参考 http://rinrin.saiin.net/~aor/fonts/fonts

意味があるとすれば、名前がかっこいいから。



だって、大阪やで。OSAKA。

・・・



採用しない手はないぜ。大阪人として


(自己主張が強い、大阪人。マンセー)





小見出し 2


小見出しは2つくらい用意しておけばいいかな、ということで作成。


1つめのん


こちらのサイト様を参考にした。
CSS3プロパティジェネレーター | CSS-EBLOG


できたのがこちら





2つめのん


これも、左ボーダーが入っているだけのシンプルなものを採用してみる。

参考サイト
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式


できたのんがこれ



ちなみに、色はレッド(red)ではなく、クリムゾン(crimson)としてみた。


・・・ん? その理由だって?

かっこいいですもん。


・・・


名前が





俳句欄


記事ラストに毎日付け加えることにした「今日の一句」
ついでに、これも少しカスタマイズしてみよう。

参考サイト
CSS:text-shadowを使用し、文字に影や縁取りをする | raining


縁取りがなかなか、渋いと思ったので、導入。


できたのんがこれ




ふー、なんとか終了。
まあ、気に入らなかったりすれば、
ええのん見つかった時に変えていってみよう。


迷ったら 名前で選べ 使うのん



テキスト周りCSSのたたき台は完成。
Better & Better.




危機の構造―日本社会崩壊のモデル (中公文庫)
危機の構造―日本社会崩壊のモデル (中公文庫)

社会科学的思考法はすぐれて近代的な所産であり、かかる心的傾向、考え方(※三宅注 「社会を所与とみる心的傾向」214)とは正反対に、次のように社会を見ることから発する。すなわち、社会構造も社会組織も、すべて人間作為の結果であり、合目的的に制御されうるものである、と、このように考える。つまり、社会の習慣も風俗も規範も制度も権力装置さえも、すべて人間作為の所産なのであるから、それらは必要に応じてつくり変えることができる。このように考えるところから、社会科学的思考はスタートするのである。
215


Read more...

(記事ソート奮闘記②)HTMLで簡易Web単語カード

14/02/07

いろいろと問題解決してきている。

「やってみたいことはできるだけ、その日の内に調べ終わり、後から思い出せるようにササッと、メモに残しておく」ということが去年よりもできているなぁ、と感じる今日この頃である。


さて、PHPを学び始めるにあたり、暗記のため、Web上でできる「簡易単語カード」みたいなものを作ってみようと思い、作ってみた。


とは、いっても、単に「マウスオーバーの時に、違うテキストに置き換える」だけの初歩的なHTMLを使うだけである。



こちらを参照した。
pega.littlestar.jp/tagunooheya/4-1mouse.html


わりと、すぐ作れた。
TextExpanderのスニペットも作った。
元のテキストを「クリップボードの内容」とし、記憶したいこと(単語カードの裏側)にカーソルが位置するようにした。


名称未設定 txt 24





↓DEMO

私をマウスオーバーごときで消すだと?? 笑わせてくr ・・・


minority


Common sense is the collection of prejudices acquired by age eighteen. – Albert Einstein








学習の土台が完成?


「目には目を。歯には歯を。IT学習にはITを」(さぶを)
Better & Better.





危機の構造―日本社会崩壊のモデル (中公文庫)
危機の構造―日本社会崩壊のモデル (中公文庫)

 前述したように、全日空や丸紅の幹部など、ロッキード事件に関係した容疑者の思想と行動は、戦争を指導し破局に導いた戦争犯罪人のそれと構造的に同型のものであった。つまり、彼らの共通項は、折出せられざる個人から成る集団の機能的要請にもとづく、盲目的予定調和説と構造的アノミーの所産であった。
37



Read more...