はてなブログのスマホCSSは編集できる?
はてなブログのスマホCSSって編集できる?
カスタム編集したCSSはスマートフォン向け表示では適用されず、 関連しそうな設定項目も管理画面で見つけられなかったのですが、 何か編集する方法ってあるのでしょうか…?
どうしても見つけられなかったもので、 ひとまずJavaScriptでスマートフォン向けCSSを適用することにしました。
- <script type="text/javascript">
- (function(){
- var _path = location.pathname;
- if (_path.indexOf('touch') > -1){
- document.write('<link rel="stylesheet" href="(スマホ向けCSSのアドレス)">');
- }
- })();
- </script>
はてなブログではスマートフォン向け表示のときは、 URLのパス - location.pathname - の先頭に「/touch」を付けるので、 その条件のときにだけスマートフォン向けCSSを読み込みします。
もちろんユーザーエージェントやディスプレイのサイズで判断しても いいと思いますが、どの条件でスマートフォン向け表示にするかは はてなブログ側の仕様なので、パスで判断するのが無難と思いました。
追記
ここまで書いたところで、はてなブログの公式アカウントさん - @hatenablog - に念のため聞いてみたところ返事をいただき、やはり編集ができないということでした。
@isotake0214 すみません、現在はスマートフォン向けCSSの編集はできません。
— はてなブログ (@hatenablog) 2012年11月6日
おわり
参照サイト
関連記事
FileZillaでFTPsの設定をする
FileZillaでFTPsの設定をする
さくらのVPSのCentOS6.2で、FTPクライアントをFilezillaとして、FTPsで通信をする設定をしました。
下記のような環境で、FFFTPでFTPができていて、httpsでWEBにアクセスできているところからのスタートです。
特にバージョン3.5.3のFilezillaではFTPsが使えない、といった記事が散見されたので、エラー内容と解決方法を含めて覚え書きにしました。
動作環境
- さくらのVPS CentOS6.2
- vsftpd 2.2.2
- FileZilla 3.5.3
- FTPがFFFTPなどのクライアントで正常に動作していること
- SSLがインストールされていて、httpsでアクセスできること
vsftpdの設定
vsftpdのコンフィグファイル(例:/etc/vsftpd/vsftpd.conf)に下記のように書き加えます。
rsa_cert_fileとrsa_private_key_fileは、httpsで作成したファイルを指定します。
vsftpdの再起動。
- service vsftpd restart
FileZillaの設定
ファイル > サイトマネージャー > 新しいサイトで、Filezillaの設定をします。
ポート
Protocol
Encryption
ログオンの種類
ユーザー
パスワード
:(空欄)
:FTP - File Transfer Protocol
:Require explicit FTP over TLS
:通常
:ftpuser
:(ftpuserのパスワード)
これ以外の設定は初期のまま、OKボタンで登録。
Error: GnuTLS error -12: A TLS fatal alert has been received.
ここまでの設定でFTPサーバーに接続しようとしても、エラーがでて接続できません。
FileZillaのバージョン3.5.3が、「DES-CBC3-SHA」をサポートしていないという原因のようです - 参照先 - 。
vsftpdのコンフィグファイルに下記のように書き加えます。
vsftpdの再起動。
- service vsftpd restart
Error: ディレクトリ一覧表示の取得に失敗しました。
再度FTPサーバーに接続を試みます。
今度はログインはできますが、ディレクトリ一覧の取得ができません。
FTPではパッシブモードが正常に動作するのですが、FTPsではそれが動作しないことが原因のようです。これについては、vsftpdでTLSを使う - satospoに詳しく説明されています。
FTPsで使用するポートを固定します。
vsftpdのコンフィグファイルに下記のように書き加えます。
vsftpdの再起動。
- service vsftpd restart
iptablesで、固定したポートの透過を許可します。下記は一般的(?)と思われるシェルスクリプトの一例です。
- /root/bin/filter
- #!/bin/sh
- /sbin/iptables -F
- /sbin/iptables -X
- /sbin/iptables -P INPUT DROP
- /sbin/iptables -P OUTPUT ACCEPT
- /sbin/iptables -P FORWARD DROP
- /sbin/iptables -A INPUT -i lo -j ACCEPT
- /sbin/iptables -A OUTPUT -o lo -j ACCEPT
- /sbin/iptables -A INPUT -s 10.0.0.0/8 -j DROP
- /sbin/iptables -A INPUT -s 172.16.0.0/12 -j DROP
- /sbin/iptables -A INPUT -s 192.168.0.0/16 -j DROP
- /sbin/iptables -A INPUT -p icmp --icmp-type echo-request -j ACCEPT
- /sbin/iptables -A INPUT -p tcp --dport 22 -j ACCEPT
- /sbin/iptables -A INPUT -p tcp --dport 21 -m state --state NEW -j ACCEPT
- /* ↓ ここ! */
- /sbin/iptables -A INPUT -p tcp --dport 40000:40100 -m state --state NEW -j ACCEPT
- /sbin/iptables -A INPUT -p tcp --dport 80 -j ACCEPT
- /sbin/iptables -A INPUT -p tcp --dport 443 -j ACCEPT
- /sbin/iptables -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
- /sbin/iptables -A OUTPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
- /etc/rc.d/init.d/iptables save
- /sbin/service iptables restart
シェルスクリプトの実行
- # /root/bin/filter
接続できた!!
おわり
以上、FileZillaのFTPsの設定を、てこずった2つのエラーを中心に書きました。
特に2つ目のディレクトリの一覧取得ができないことについて、新しいFileZillaではFTPsが使用できないとする記事が多かったように思えます。ファイアーウォールを設定しないようなテスト環境ではFTPsで使えているのに、ファイアーウォールをきちんと設定しているような環境では使えない、といったことが解決を難しくしていたのかも知れません。
参照サイト
関連記事
はてなブログのキーワード自動リンクを消す
はてなブログのキーワード自動リンクを消す
はてなブログのキーワード自動リンクについて、
有料プランではその機能をオフにすることはできますが、無料プランではできません。
無料プランで自動リンクを有効に使うことも選択肢のひとつですが、
どうしても消したいという場合、下記の設定で消すことができました。
もちろん、自動リンクの機能自体をオフにするわけではありません。
キーワード自動リンクのaタグはクラスがkeywordになるので、CSSファイルのkeywordクラスを上書きできる場所に追記します。
- sample.css
- a.keyword { //注1
- pointer-events: none;
- cursor: default;
- color: #5A5A5A; //注2
- }
注1 環境によって自動リンクを無効にする範囲を、.entry-content a.keyword のように絞ります。
注2 通常aタグは文字カラーを変えているので周囲に合わせるようにします。
おまけ: httpで始まるテキストのリンクを消す
httpで始まるアドレスを書くとリンクが張られてしまいます。
http://www.hatena.ne.jp/
実際に存在するアドレスであればいいですが、ダミーのアドレスを表示してリンクを張りたくない場合もあるかと思います。
この場合は、はてな記法の自動リンク停止記法でリンクを消すことができました。
ダッシュボード > 設定 > 編集モードは「見たままモード」でも消すことができました。
http://www.hatena.ne.jp/
おわり
参照サイト
関連記事
PHPでIPv6かIPv4を表示する
PHPでIPv6かIPv4を表示する
PHPで、IPv6でアクセスされているか、IPv4でアクセスされているかを表示する方法。
インターネット上で紹介されている方法を3つまとめました。
- VirtualHostで分ける
- サーバーアドレス $_SERVER['SERVER_ADDR'] で分ける
- リモートアドレス $_SERVER['REMOTE_ADDR'] で分ける
1. VirtualHostで分ける
にぽたん研究所にも紹介されている、VirtualHostでIPv6とIPv4のサーバーアドレスを分けてリクエストヘッダーに値をセットする方法です。3つの中で一番スマートな感じがします。
- httpd.conf
- <VirtualHost 192.168.AAA.BBB:80>
- RequestHeader set X-IP-Version 4
- </VirtualHost>
- <VirtualHost [2001:e41:AAAA:BBBB::1]:80> ※ [ ] を忘れずに!
- RequestHeader set X-IP-Version 6
- </VirtualHost>
2. サーバーアドレス $_SERVER['SERVER_ADDR'] で分ける
サーバーアドレスを$_SERVER['SERVER_ADDR']で取得して、IPv6のサーバーアドレスに一致すればIPv6、IPv4のサーバーアドレスに一致すればIPv4と表示します。$_SERVER['SERVER_ADDR']は2通り、もしくはそれ以上ある場合でもホワイトリストで判別できるはずなのでこれで十分ではないかと思いました。
3. リモートアドレス $_SERVER['REMOTE_ADDR'] で分ける
リモートアドレスを$_SERVER['REMOTE_ADDR']で取得して、コロンが含まれていればIPv6、ドットが含まれていればIPv4と表示します。リモートアドレスで判別するサンプルでは、正規表現でIPv6アドレスの形式に一致しているかで判別するサンプルをいくつか見ましたが、コロンかドットの条件分けで十分ではないかと思いました。
おわり
参照サイト
関連記事
ウェブサイトをIPv6対応にするには?
World IPv6 Launch
公開しているウェブサイトをIPv6に対応にするには…?
IPv6で通信できない場合にIPv4にフォールバックするのは…?
などなど、ウェブサイトのIPv6対応について、
自分がよく分からなかったこと4点を試してみました。
WEBサーバーをIPv6対応にする
IPv4環境でIPv6サイトにアクセスする
独自ドメインをIPv6対応にする
通信がIPv6かIPv4かを表示する
話題としては少し古いのですが、2012年6月6日のWorld IPv6 Launchに合わせて、4月から7月にかけてテストをしてきたことの覚え書きです。
WEBサーバーをIPv6対応にする
さくらインターネットのIPv6接続サービス、さくらの6rd(トライアル)でサーバーをIPv6対応にします。各OSにより設定方法は異なるようですが、CentOSの場合は6rdに対応していないので、カーネルとiprouteにパッチをあてます。
さくらの6rd(トライアル)> 6rd設定方法(CentOS5.5編)
さくらの6rd(トライアル)> 6rd設定方法(CentOS6.2編)
9月16日の時点では、上記で案内されている方法では6rdは利用できないはずです。標準でインストールされるのがCentOS6.3にアップされていたり、カスタムでインストールできるCentOS5.5のカーネルとiprouteパッケージのバージョンが上がり、RPMパッケージがインストールできない、という理由です。
ipv6.google.comやOCNのIPv6通信確認サイトにpingがとおれば設定完了です。
以下、さくらのVPSサーバーのIPv4アドレスを、192.168.AAA.BBB、6rdで指定されるIPv6アドレスを、2001:e41:AAAA:BBBB::1、とします。
IPv4環境でIPv6サイトにアクセスする
自宅の固定回線のJCNはIPv6に未対応で、モバイル回線のXiは、Xi自体は対応しているのですが、モバイルルータのL-09Cが未対応ということで、自分のインターネット環境ではIPv6サイトに接続できませんでした。
そこでSSHを使って、IPv6対応したさくらのVPSサーバーを経由してIPv6サイトを表示させます。SSHクライアントとしてPuTTYと、FirefoxのSOCKSプロキシの機能を利用します。
WorldIPv6Dayという事で、
さくらのVPSを使ってIPv4、IPv6両方のサイトを閲覧する方法。
この時点で、下記のようなIPv6サイトを見ることができます。
ipv6.google.com
OCNのIPv6通信確認サイト
さらにこの時点で、さくらのVPSサーバーにおいたテストファイルにIPv6アドレス直打ちでページの表示ができるはずです。
(例)http://[2001:e41:AAAA:BBBB::1]/test.html ※IPv6アドレスの直打ちでは[ ]を忘れずに!
独自ドメインをIPv6対応にする
IPv6アドレス直打ちで表示できるようになったので、独自ドメインでも表示できるようにします。
今回はさくらのドメインで、バーチャルホストのアドレス ipv6.sample.com にAAAAレコードとAレコードを登録することにしました。
以上の設定で、名前解決のときにAAAAレコードとAレコードが払いだされ、IPv6通信ができるときはIPv6で、できないときはフォールバックしてIPv4で通信をします。
なお、AAAAレコードとAレコードを両方受け取ったときにどちらを優先するかはOSの設定にしたがい、Windowsでは初期でIPv6が優先になっています。
通信がIPv6かIPv4かを表示する
IPv6でアクセスされているか、IPv4でアクセスされているかをPHPで判別します。インターネット上で紹介されているいくつかの方法のうち、サーバーアドレスで分けるのは下記のようになります。IPv6かIPv4の判別ってどうすればいいんだろうと思っていたけど、ただこれだけでした。
おわり
以上、IPv6に関して4点をまとめましたが、ご存じの通り、日本はIPv6で通信できる環境が十分ではなく、現時点でウェブサイトをIPv6対応で運用することにはフォールバックの問題があり、注意が必要です。
実際の運用にあたっては、セキュリティ関連などに取り組まなければいけないはずですが、今回はここまで。
参照サイト
関連記事
はてなブログ、はじめてみます。
HTMLの編集画面で編集する
JavaScript
JavaScriptは、HTML編集画面でscriptタグで囲えば普通に使えた。
外部jsファイルも、レンタルサーバーなんかに置いたファイルを、各エントリーごとに読み込めばいいみたい。ただし、ブログトップにエントリーが複数並んだ場合にどうなるのか未確認。
- <script type="text/javascript" src="http://www.XXXX.com/sample.js"></script>
CSS
外部cssファイルは各エントリーごとに読み込むことができないので、ダッシュボード > デザイン > カスタマイズ > デザインCSS で、読み込みたいファイルを追記する。
- @import "http://www.XXXX.com/sample.css";
リスト
普通に使えることをただ確認。
- リスト list
- リスト list
- リスト list
強調とかマーキングとか
強調とかマーキングとか 強調とかマーキングとか 強調とかマーキングとか 強調とかマーキングとか
blockquote
コピペするときはこんな感じ。
ちくわぶが麺類であることをなぜマスコミは報道しないのか?
サンプルコード
よくブログで見かけるSyntaxHighlighterというのを使ってみたかったんだけど、いくつか外部ファイルを読み込まないといけないみたいだったので断念。ハイライトしない偽ものSyntaxHighlighterにしてみました。
- <?php
- /* 注釈コメント */
- echo "Hello World!";
- ?>
- test.php
コマンドライン
コマンドラインの引用で見かけるのはこんな感じだったか…
- # make
- # make test
- # make install
- test.php
ブログに貼りつけるあれこれ
kwoutで貼りつける
kwoutで切り取って、Any Canvasでお絵描き
ツイート引用
Twitterのblockquoteのテスト
— 五十猛さん (@isotake0214) 7月 21, 2012
写真
はてなフォトライフからも貼りつけできるけど、編集画面から投稿した写真をwidthで縮小表示しておくほうが、クリックしたときにLightBoxな感じで拡大表示されていい感じだった。
おわり
はてなブログ、はじめてみます。
でも、HTML編集モードでHTMLをかいてみたことと、試してみたブログパーツをいくつか貼りつけただけ。
id | title | description |
---|---|---|
1 | タイトル | 説明 |
2 | タイトル | 説明 |
3 | タイトル | 説明 |
4 | タイトル | 説明 |
5 | タイトル | 説明 |