SafariのリンクCSSが効かない理由

リンクの色指定ができない!

WordPressでデザイナーさんがサイト全体の色指定をしているので、私が編集する部分のみリンクの色を変えたいという状況です。

ところがいくらやっても、デザイナーさんの書いたCSSが効いてしまっている。

もちろんidで範囲を指定して、その部分だけのリンクの色が変わるようにCSSを書いています。

キャッシュを確認する

Firebugで確認すると、リンクの色指定は効いている…なのになぜ黒いまま?(←私は青色にしたい)

はじめ、キャッシュが効いていて、visitedが反映されていることに気づかず…

キャッシュのこと、忘れてました。これ、基本ですね。肝に銘じます( ̄^ ̄)ゞ

キャッシュを削除すると、Firefoxではリンクの色が指定色になっているのに、Safariでは効いてこない…

Safariのキャッシュの消し方がまちがっているのか?という迷宮に〜

仕事も架橋となり、思考力も落ちているところ、この問題解決に何時間かけてしまったでしょうか…( ̄▽ ̄;)!!ガーン



SafariのリンクCSSの書き方

SafariのリンクCSSは、書く順番がまちがっていると効いてこないとわかりました。

結論から言うと

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

この順番で書くことが重要だそうです。

なぜこの順番で書かなければならないかは、こちらのサイトでよく説明してくださっています。

ありがとうございました <(_ _)>

ググったら、数秒でわかることでした(°▽°)

ライブドアブログの「いいね!」が反映される方法

以前の記事で、「ライブドアブログにフェイスブックの「いいね!」ボタンをつける方法」を書いたのですが、これだけでは、せっかくフェイスブックで「いいね!」してもらえてもそれが反映されません!!!!

ということで、ライブドアブログの「いいね!」が反映される方法です。

これって、いつできたんでしょ?当時はなかったような…

手順はこうです。

1)ブログ設定をクリックします。

2)次は、「デザイン」のなかの「PC」をクリック。

3)この画面が出てくるので、「カスタマイズ」を選びます。

緑の丸枠4箇所にタグを貼りつけます。各ページすべてにに2種類のタグを入れましょう。

●1つめのタグは<$OGP$><$OGP$>という独自タグを全てのデザインテンプレートのからの間に記述します。

例)

<$HeadSectionCommon$>
<$BlogTitle ESCAPE$> - <a class="keyword" href="http://d.hatena.ne.jp/keyword/livedoor%20Blog">livedoor Blog</a>(ブログ)
<$OGP$>

このようにとの間に入れるのがよいのではないかと思います。

●2つめはxmlns:og="http://ogp.me/ns#"

これは、タグ内に書きますが、

グリーンの丸印をした4か所すべてにこのタグを入れてくださいね。

以上です。

そして、ブログを書いたら、サムネイルとディスクリプションを設定することができますね。ライブドアブログ、なんだかとっても親切になっています。

この3つを確認してアップして、フェイスブックでシェアするとこのようになります。

サムネイルとディスクリプションが反映されていますね。そして肝心のブログの方ですが…

このように、着々と「いいね!」が反映されています。コメントがつくごとに「いいね!」が増えているので、これでOKですね。

この方法は、Facebook等で「いいね!」されたときや、Twitter Cardsへの表示内容を設定する(OGP対応)という記事に同じことが書いてあります。

このブログでは、この記事をわかりやすく画像を加えて解説させていただきました。

パワーポイントより簡単なPrezi

ローフードのパティシエ1級で、作品のプレゼンをしたのですが、今回はじめてPreziを使ってみました。

これは、O-med(オ・メド)というオリーブオイルのメーカーのプレゼンを見て知ったツールなのですが、カッコイイですね〜。

調べてみると、Preziどうやらパワーポイントより作るのが簡単そう♪ということで、こちらが、そのプレゼンです。

テーマは、「ワインに合うローナッツチーズのアンティパスト」。ローフードなので、乳製品は使わず、もちろん非加熱。とってもヘルシーで美味しいチーズです。


ところが…はてなダイアリーって、Preziの埋め込みができないんですね…Σ( ̄ロ ̄lll) ガビーン 

ということでコチラ>>をご覧ください。

本来だったら、

「埋め込む」をクリックして、自動生成されるソースを貼るだけで、ブログなどにPreziを紹介することができます♪

ここではできないので、他のブログサービスで試すことにします…

シーサーブログをフェイスブックでシェアするときに「サムネイル」を表示する方法

シーサーのブログサービスを利用しているのですが、ある日フェイスブックでブログをシェアしようと思ったら、サムネイルが表示されませんでした…。表示されても、私が出したいサムネイルではなく、適当な画像が選択されてしまう(-_-;ウーン

フェイスブックでシェアするときに、サムネイルは命です。

記事と関係ないサムネイル(たとえばブログのピクトやタイトル画像など)が出るとか、サムネイルが出ない、なんてことは許容できません ( ̄▽ ̄;)!!ガーン

シーサーブログをフェイスブックでシェアするときにサムネイルを表示させるためには

結論から言うと、シーサーブログの設定で、「OGPタグ追加」で「追加」を選択するだけでした。どんなにググってもこの解決法が出てこなかったので、このブログでご紹介します。

なんでグーグル検索で見つからなかったのでしょうか…みなさん、こんなことではつまずかないのでしょうか…

OGPタグの設定方法は、次のとおりです。



1)管理画面左の「設定」をクリック

2)右下の「外部連携」をクリック

次の画面下にある



3)「OGPタグ追加」の「追加」をマークする

4)保存する

これだけです(^▽^)/


これをすることによって部分に自動的にOGPタグが追加されます

OGPタグとは?

このOGPとは、オープニングラフプロトコルというもので、タイトル、ディスクリプション、イメージ(サムネイル)、タイトル、などを指定するためのmetaタグです。



この画像は、「スマートフォンサイト制作ブログ」さんからキャプチャでお借りしてきました。詳しくは、このサイトをご確認ください。


ただ、このOGPタグはヘッド部分に書き込まなければなりません

普通、ブログの各ページのヘッド部分なんていじれなじゃないですか…

試しに、普通に記事部分に貼ってみたのですが、もちろん結果はNG…

OGPタグに翻弄される…

シーサーに問題があるのか、フェイスブックがまた急に何か変えたのか…

でも、ほかのブロガーさんのシーサーブログは、問題なくフェイスブックにサムネイルが出ていました。

どんなにググっても、解答らしきものが見つかりません。アメブロについてはいくつか記事があったのですが、なぜかシーサーはない…ああでもない、こうでもないと試していて、やっとシーサーブログには、このOGPを自動生成させるサービスがあることに気づきました。

OGPタグを設定した後にはフェイスブックデバッカーページで確認を

このあとの大事な作業は、フェイスブックのデバッカーページでデバックすることです。

使い方はかんたん。ページのURLを入れて、デバックするだけ。

ここでOGPがキチンと入っているかを確認できます。

デバッガーについての記事を読むと、「この作業をするだけでサムネイルが表示されるようになる」という方が多数いらっしゃいました。

私は、この作業だけで解決しなかったので悪戦苦闘したわけです。

デバックしても反映されない!?

ところが、ここでもつまずきました…

ハッキリとは言えませんが、たぶん、キャッシュが残っていたんですね。



ソースを確認すると、ヘッド部分に「おぉ〜!入ってる〜!!」

OGPのメタタグは自動生成されているのに、なぜサムネイルは出てこない???

FireFoxのキャッシュを消してみたり、リロードしてみたり、挙句の果にはいちどブログ記事を消して新しくコピペで記事を生成したり…などとやっているうちにやっとできました。



告白しますと、私がゴニョゴニョと解決できないでいたところ、システムをしている主人が見かねてやってくれました…

ライブドアブログにフェイスブックの「いいね!」ボタンをつける方法

そういえば、ライブドアブログフェイスブックの「いいね!」ボタンがなかったなぁと思ってググってみると、親切な方がいらっしゃいます。

こちらの方が、タグを用意してくださっています。

さっそくそのまま貼りつけてみると、こんな感じの仕上がり。

あれれ…『「いいね!」と言っている友達はまだいません』と言われてしまいます( ̄▽ ̄;)!!ガーン

だって、いまいいね!ボタンを貼りつけたばかりだし…と言い訳チックな気分に。

ということで、『「いいね!」と言っている友達はまだいません』を取る方法を調べました。

フェイスブックに「Like Button」というページがあって、ここで「いいね!ボタン」を生成できます。選択肢があるので、自分の好みのボタンを作ることができます。

が、なぜかうまくできません…(未熟)

ということで、タグをいじることにしました。

結論として、これをコピペすると、このような見た目になります↓↓

見慣れた、いつもの「いいね!ボタン」ですね。

ちなみに元のタグはこれ。

layoutのところを「standard」から「button_count」に変更しました。

layout=standard&

layout=button_count

で、これをどこに貼りつけるか、です。ググってみると、なぜか私のライブドアブログのhtmlを書くところがみなさんとちがう…。

ということで、ご紹介します。

ブログ設定をクリック。

次は、「デザイン」のなかの「PC」をクリック。

この画面が出てくるので、「カスタマイズ」を選びます。

緑の丸枠4箇所に上記タグを貼りつけます。貼る場所は、私は下にしました。管理者用の編集(エディット)ボタンがあるので、その下にしました。

ちょっと、ホッとしました。

コクヨのシュレッダー「KPS-X80」を買いました

会社なんだから、シュレッダー必要でしょ…

クライアント関連のドキュメントは、今まで手でちぎっていました。この作業から解放されると思うとなんとも自由な気分♪

ということで、とうとう買いました。

コクヨのシュレッダーKPS-X80です。

もっとスタイリッシュな北欧のシュレッダーを、とも思ってかなり調べたのですが、裁断パワーが弱いとか壊れやすいとか、やはりこういう機器は日本製かなと思ってコクヨにしました。

コクヨ デスクサイドシュレッダー<RELISH>KPS-X80W GBC パーソナルシュレッダー グレー&ブラック GCS02CX-GB
5,870円 (税込) 送料込
・幅170×奥行き330×高さ306mm
・細断寸法/4×40mm
・最大細断枚数/A4コピー用紙(64g/m2)約5枚
・ゴミ箱容量/8リットル
5,372円(税込)通常配送無料
・幅210×奥行き355×高さ385mm
・細断方式/クロスカット(4×30mm)
・細断枚数/ A4コピー用紙5枚
・ゴミ箱容量/14リットル

どちらにしようか悩みましたが、コクヨにしました。

この2機種の大きなちがいは、ゴミ箱のサイズです。確かに8リットルってすぐにいっぱいになります。でもうちくらいの規模だったら、これくらいでいいかも。大きすぎず、小さすぎずちょうどよい気がします。ただ、8リットルより小さいと少々、忙しいかも知れません。

GBCもデザインよかったんですが、飽きたらどうしよう…。コクヨはスタイリッシュとは程遠いのですが、憎めないというか無難だと思いました。

手動のシュレッダーも考えましたが、力がいるとか、なんだか手でちぎったほうがよさそうなコメントも多く、せっかくなので電動にしました。

コクヨのシュレッダー「KPS-X80」は、このように細断します。

ブログをフェイスブックでシェアする方法

フェイスブックで、ブログをシェアする方法です。これを使うと、サムネール(小さな画像)や説明文がついて、見やすくなります。


まず、ブックマークレットを共有するを開きます。


この画面が出たら、左上のボタンをつかんで、「ブックマーク」または「お気に入り」へドラッグします。

もし「ブックマーク」というメニューが見つからなかったら

表示>サイドバー>ブックマーク

を選んで表示させます。


次に、シェアしたいブログのページを開きます。


開いたら、ブックマークからFacebookでシェア」を選びクリックします。


拡大するとココです。


Facebookでシェア」をクリックするとこのようなポップアップ画面が出てきます。


ポップアップ画面には、「何か書く…」というコメントスペースとサムネイルが出てくるので、ここにコメントを書いて「シェアする」を押して完了です。

ブログで複数の画像を使っている場合、サムネイルも選べるので、気に入った画像を選択します。


このようにフェイスブック上に反映されます。

フェイスブックでは、アドレスをコピペするだけで自動でリンクが生成されますが、画像や説明を入れられると訴求力も高まると思います。