ラベル HTML の投稿を表示しています。 すべての投稿を表示
ラベル HTML の投稿を表示しています。 すべての投稿を表示

Th 関連記事

はじめに

最近ありがたい事に少しづつですが、PVが伸びて一日に、1000PVを超える事ができるようになってきました。

Googleアナリティクスなどの見方も少しづつですが勉強してます。

その中で、ずっと気になっていたのですが、訪れてくれた人がこのブログを平均して何ページみてくれているかの指標である、pageview/visitと言う数値が1.2から1.3くらいなのです。

これが高いのか低いのか良くわかりませんが、自分が他の方のブログをみる時を思い出すと大抵検索して、興味のある記事を開いてそして閉じる。

基本的に1ページだけ閲覧タイプですね。

おそらく大抵の方がそんな感じじゃないでしょうか。

ただ、一方で記事を読み終わったあと、それをさらに解決出来そうなタイトルがついた記事や、前から気になっていた事について書かれていそうな記事が「こちらもどうぞ」のような形で提示されていると、思わず時間を忘れて見てしまわないでしょうか。

今回は、このように関係しそうな記事を提示するために、Bloggerのラベルから関連する記事を自動で表示できるようにしてみましたので、その方法をご紹介します。

【Blogger】ラベルから関連する記事を自動で表示できるようにする方法


20130709184545.jpg

はじめに

Amazonの広告だけに限らず、外部のサービスから吐き出されるjavascriptやiframeのデータをBloggerにHTMLベースで取り込もうとすると、いつもXHTMLの解析エラーと出てしまいます。

はっきり言って、僕がXHTMLの仕様を理解していないせいなのですが、同じような事象に苦しんでいる人いませんか?

いませんか。

とりあえず、自分用のメモとして、Bloggerに外部サービス、例えば、Amazonの広告コードや、Googleアドセンスのコード、SNSなどのコードをHTMLとして、直に書く時の注意点を書いておきます。

【Blogger】Amazonの広告を記事の下に入れるのに、ちょっと手間取ったXHTMLの仕様



20130703200826.jpg

はじめに

個人的に、ちょー期待しているWebサービスの『web flow』がどうやら、ベータ版の提供を開始するらしいですよ。

『web flow』は、Webブラウザで動作するツールでほとんどコードを書かなくてもWebを作れる上に、レスポンシブ対応してくれると言うもの。

はっきり言って、個人でサイト作るのってスマートフォンの事まで考えて作るのかなり大変です。

僕のような面倒くさがりだけど、見た目は良くしたい野望を持つ人の救世主となってくれる?かな?

【Web】レスポンシブWeb対応のWebツール『Web flow』がBeta版を開始?

Crome開発ツール右

Google Chromeを使ってiPhoneでの見た目確認を行なっているような場合、開発ツールが下に表示されているのは、非常に邪魔です。
フッターエリアが表示しづらい。

以前までのGoogle Chromeであれば、以下のように、
[Tips] Google Chrome の開発者ツールは、下だけでなく、右横にもドッキングできる|Developer @ ADJUST
右下の "Settings" アイコンをクリックして設定パネルのGeneralから "Dock to right" のチェックをオンにする。

だけだったのですが、どうやら仕様が変わったよう。

で、いろいろ調べたらここに回答が書いてありました。
Issue 154199 - chromium - "Dock to right" option missing in Developer Tools - An open-source browser project to help move the web forward. - Google Project Hosting
なんと、
左下の別ウィンドウで開くボタンを長押しすると右にドッキングさせるボタンが現れる

そうです。

Chrome開発

長押しすると右にドッキングさせるボタンが現れる。

Chrome開発2

Chrome開発3

Issue 154199 - chromium - "Dock to right" option missing in Developer Tools - An open-source browser project to help move the web forward. - Google Project Hosting
でも書いていますが、わかりづらすぎるでしょ!これ。

慣れればわかるといえばわかるのですが、わざわざ1つのボタンを隠すために、これだけわかりづらくする必要があったのでしょうか。。

以上です。

【mac】chromeの開発ツールを右側に表示する方法が非常にわかりづらかった件

Zenback

自分が書いたブログに関連しそうなみんなの記事を集めてくれて表示してくれるZenbackというサービスがあるのですが、これを今回自分のBloggerに導入しようと思って意外と時間がかかったので、メモ。

Zenbackであなたのブログに全てのフィードバックを。
自分のブログのjavascriptのコードを取得するところまでは簡単にできるのですが、Bloggerへ設置するときに、ちょっとテクニックが入りました。

Blogger での zenback 利用方法 | slumbers
ここを参考に







とやれば、コードは準備完了。

ただ、どこに貼り付ければいいのかがわからない。。

僕のブログだと、コメントの下あたりに設置したかったのです。

Zenbackの設置位置

chromeの開発ツールからブログの個別記事を確認すると、

class='comments'

と言う要素で書かれている模様。

で、その上の
bincludable id='threaded_comments'

というタグの上の

/bincludable
の上に書くとうまくいきました。

Zenbackの挿入位置

やっぱりBloggerの構造ってわかりづらい。。

以上です。

【Blogger】zenbackの導入方法を忘れそうなのでメモ


シンプルなプレビュー画面
MarsEditつかっていますか?

MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more.(Version 3.6.2)

価格:¥3,450(最新価格はStoreで確認してください)

カテゴリ:ソーシャルネットワーキング

評価: (4 / 9件の評価)

App Store

とても便利なブログ執筆用アプリですが、プレビューが自分のブログと同じ見た目になっていないと、文字の大きさや改行位置など書いている時に意図しない見た目になってしまって残念な気持ちになることがあります。

で、プレビューを自分のブログと同じ見た目にする方法はとても簡単で、Edit Templateから自分のブログのプレビューのソースコードの
タイトルを「#title#」
本文を「#body##extended#」
として貼り付けるだけなんですが、僕の場合、見た目をちょこちょこと変えながら試していることもあり、結構しょっちゅうこの作業をする必要があります。

また、実はそのまま貼り付けただけだと、コードが多すぎて書くたびに更新がかかるプレビューには動きがかなりもっさりしてしまいます。

そこで、プレビューには必要のないコードをそぎ落とせばいいのですが、これがノンプログラマーにはちょっと敷居が高いのです。

特にBloggerは、Javascriptバリバリでどこを削ればいいのかすぐにはわからない。

そこでChromeの開発ツールを使って、余分な部分をさくさくとそぎ落としてなるべくプレビュー用のコードを軽くする方法を紹介します。


まず、タイトルと本文だけの投稿を作ってプレビューする


タイトルと本文のみ
新規投稿にタイトルと本文欄に「#タイトル#」「#本文#」とだけ入れた投稿を作ってすぐにプレビューします。

いらないプレビューコンテンツがたくさん入ってしまっていますので、これをそぎ落としていきます。

いらないプレビュー

Chromeで「command+option+i」を押す


「command+option+i」を押して開発ツールを起動します。

起動したら、「command+F」で検索画面を表示させます。

Chrome検索画面
検索画面から、いらない要素の文字を検索します。

「search this blog」を検索してみると、sidebar-wrapperという中に入っていることがわかります。

Sidebarを削除
sidebar-wrapperを選択して、右クリックします。

Deletenode
deletenodeで要素を削除します。


同様に要らない要素の名前を検索して、見つかったら、いらない要素を選択して、deleteNodeを繰り返します。

すると、最終的にはタイトルと本文だけのすごくシンプルなプレビューになります。

シンプルなプレビュー

HTMLの要素全てを選択してコピー


HTML要素全てをコピ
一番上のHTMLの要素を選択して右クリックして、Copy as HTMLをクリックします。
これを、miなどに貼り付けます。

mi - テキストエディタ

タイトルと本文を置換


#タイトル#を「#title#」
#本文#を「#body##extended#」
に置換します。

タイトル置換
本文置換

marseditのプレビューに貼り付け


marseditのプレビューに貼り付けて、Saveします。
Marseditセーブ

以上で、すごくシンプルなプレビュー画面ができます。

シンプルなプレビュー画面


以上です。

MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more.(Version 3.6.2)

価格:¥3,450(最新価格はStoreで確認してください)

カテゴリ:ソーシャルネットワーキング

評価: (4 / 9件の評価)

App Store


【mac】ノンプログラマーがMarsEditのプレビューを自分のブログと同じ見た目にする方法chrome編

Sublimetext画面

以前、【mac】sublime Text2でHTMLを自動整形する方法 | For Content Creatorという投稿をさせていただいたのですが、やっと少しづつSublime text2がわかってきましたので、改めて。

今回は特に、開発者やデザイナーではなく、HTMLも少しだけわかるけど実務ではコーディングなどやっていない企画者向けに初歩の初歩ということでエントリーさせていただきます。

まず、Sublime text2のインストールなどはいったん省かせていただいて、
インストールはここです。
Sublime Text: The text editor you'll fall in love with

で、インストールしたらまず何をやるかですが、とりあえずwebのある画面を右クリックなどしてソースを表示して貼り付けて見ましょう。

するとある程度見やすく書かれているページは良いのですが、かなりわかりづらいコードで書かれているページなどあるかと思います。

試しに僕のこのページなどを貼りけていただくとかなりわかりづらいかと思います。

なのでまずこのHTMLのソースを整形する機能をsublime textに持たせましょう。

HTMLのコーディングをするわけではないけど、一応知っておかなければいけない企画職にとってはずっと待ち望んでいた、「楽してある程度わかる」最高の機能です。

1.Sublime Package Control を何も言わずに作業する。


Installation – Sublime Package Control – a Sublime Text 2 Package Manager by wbond
とにかく何も考えずに、上記のサイトから、
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

これをコピーしてください。
Sublimetext2パッケージ

で、sublime textの「view」から「show console」をクリックしてください。
Sublimetextview するとsublime textの下になんか枠が出てきたとおもいます。

ここに、先ほどコピーした内容を貼り付けます。

僕も最初間違えたのですが、一番下の空白のところです!

Sublimetextconsol

するとPackage Controlというものがインストールされます。
一旦ここで、sublime text2を再起動させます。


2.tagを何も言わずにインストールする。


1。の作業がうまくいっていれば、「commnd+shift+p」を押すと何やらプルダウンな画面になるかと思います。

Sublimetext何やらプルダウン

この画面が出たら、「ins」とか打ってみてください。
すると「Package Control:install Packege」があるかと思いますので、それをクリック。

すると、また同じようなプルダウンな画面になるかと思いますので、ここで、「tag」と打って見つかったらクリック。
SublimetextTagを検索
インストールが終わったら、また再起動。


3.右クリックでHTMLを整形!



ここまで終わると、すでにHTMLを整形するための準備は整いました。

HTMLを貼り付けて、右クリックしてもらうと、「Auto-Format Tags on Document」というのができているかと思います。

Sublimetext右クリック

これをクリックすると、自動でHTMLなどを見やすい階層構造に整形してくれます。

また、左側に出ている数字の横の逆三角マークをクリックすると開いたり閉じたりします。

Sublimetext開いたり閉じたり



最後に、Sublime text2に興味を持たれたノンプログラマーの方は、是非Sublime Text 2の基礎 (全13回) - ドットインストールを見ていただくことをおすすめします。

以上です。

【mac】企画職が覚えるべきSublime text2の基礎の基礎

Tintin44 - Sylvain Masson / Foter / CC BY-NC-ND


すごく下らないことなんだけど、ブログにHTMLやVBAのコードってどうやって表示するの?
と疑問に思ってしまい、調べてみました。

hemtl


こういうのです。

BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve によれば、SyntaxHighlighterというものを導入すれば、比較的カンタンにできるらしい。

Syntax Highlighter Scripts Generator ‹ Blogger Widgets | Tips | Tricks | Templates : Way2Blogging というところにアクセスして、ジェネレータで、まずはコードを取得します。

僕は、vbaとhtmlとcssとjavascriptを使うのでチェック。
たぶん、ちょっと戸惑うのは、文字の右側にチェックするところくらいと、いきない広告でfree Trialとあるので、有料?と思ってしまうところくらいでしょうか。

SyntaxHighlighterの設定

取得したコードを、Bloggerに貼り付けます。

SyntaxHighlighterの設定2

テンプレートからHTMLの編集をクリック。

SyntaxHighlighterの設定3
/headの下に貼り付けます。


これで基本設定はおしまい。
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve では、さらに見やすくするためのCSSの調整も書いてありますが、本日は時間ないので、とりあえずこのままで。

で、投稿するときには、以下のように書きます。
  

 htmlの場合:html
  VBAの場合:vb



以上です。

【Blogger】ブログにHTMLやVBAのコードってどうやって表示するの?

sublime Text2

カーリルや、ブクログなどのパーツを入れるのに、HTMLを少しいじらなくてはいけなかった時のメモ。
sublime Text2というエディタがすごく便利というお話を聞いて、入れておいたのだけど、
普段あまりブログラムを書かないので、しばらく放置していた。
今回、ほんの少しHTMLいじりたいだけなのに、カーリルや、ブクログなどのパーツコードがのぺっとしていて
どこを消してよくてどこ消しちゃまずいかわかりづらくて、ちょっと困った。
で、sublime Text2でどうやったらHTMLを整形してくれるのかな、と思ってWEBを調べたのだけど、
そんな単純なことに触れていてくれるものが少なくて、諦めかけたんだけど、
実はすごく簡単だったのね。。

スクリーンショット 2012 12 29 15 03 36

右クリックして、Auto-Format Tags on Documentを選ぶだけ。
これだけのことに10分くらい悩んだしまった。

注意:いろいろなサイトを参考にプラグインなどをインストールした後だったため、 これがデフォルトで表示されるのかは不明です。すいません。



※追記。後日、やろうと思ったら出来なかったので、メモ。

スクリーンショット 2012 12 30 15 24

右下の、ここをクリックして、HTML形式に変えてあげたら出来ました。

【mac】sublime Text2でHTMLを自動整形する方法