GitHubを利用して、CSSを外部から参照するようにしました

こんにちは、京終です。

昨日、チルド（id:cild）さんが「はてなブログ・アンドロイド部」の創設を宣言されました。

取り上げていただき、ありがとうございます。

元は「はてなblogコピペできんぞゴルァ問題」に対し、Habit blowserを使えば1行だけですがペーストできることをお伝えしたのが始まりでした。

しかし、CSSをメンテナンスする度に1行にまとめたり、ブラウザとテキストエディタを何回も往復するのは大変です。何とか楽にならないかと考え、CSSを外部から参照する方法が良さそうなので、今回GitHubに利用し、私のブログで試してみました。

※設定を変更する際は、必ずバックアップを取ってから行ってください。

また、ブログをカスタマイズ

またまたカスタマイズの話です。やり出すと止まらなくなってしまうので、暫くはこのデザインで落ち着こうと思います。たぶん……。

Google AdSenseをタイトルエリアから外した

以前は、PC・スマホ共に記事タイトルを挟むようにアドセンスを配置していました。途中から記事タイトル下を外し、数日前にはブログタイトル下のアドセンスも外し、下に追いやりました。

こかげさんのブログでも触れられていますが、ヘッダー付近は、ほぼクリックされませんし、私自身もスルーします。

また、はてなの通知やグーグルなどの検索結果でこのブログにきてくれたのですから、そのまま記事に目を向けてほしい、と思っています。

何らかの収入が入るに越したことはありませんが、先ずは継続してこのブログに来てもらうことを大事にして、あまりガツガツせずにのんびりいきたいと思います。

あと、タイトル下にレクタングルの広告ユニットを貼っているブログを見かけますが、だいじょうぶですか？

ブログ更新に使用しているAndroidアプリ

昨日の記事に関連して、今日は、私がブログを更新する時に使っているアプリを紹介します。

昨日の記事：
スマホだけで、はてなブログを更新している話 - カラモモ日記。

はてなブログ

はてなブログ - Google Play の Android アプリ

はてなブログの公式アプリです。これで画像の貼り付け、下書き、プレビュー確認など、記事を公開できる状態までしてます。

使い勝手はいいのですが、難点は、プレビューを繰り返すと謎の黒いバルーンが現れてしまうところ。

こいつが出てくると、アプリを終了するしかありません。下書き保存していないと、記事の書き直しです。

images easy resizer

写真・画像リサイズ&JPG⇔PNG画像変換｜i e r - Google Play の Android アプリ

画像の切り抜き、リサイズ、png→jpg変換に使っています。

Habit Browser

Habit Browser - ウェブブラウザ - Google Play の Android アプリ

メインで使っているブラウザです。記事作成時では、はてなの公式アプリでほとんどの作業を終わらせているので、HabitではカスタムURLを入力するくらいです。あとは「公開する」ボタンをポチッとするくらい。

ブログのデザインを変更する時には、ソースコードをペーストするのに使っています。

Chrome

Chromeブラウザ-Google - Google Play の Android アプリ

主に、一度貼り付けたソースコードを削除するために使ってます。後は、実際に表示されているサイトのソースコードを見る時に使います。AndroidアプリのChromeでも、URLの前にview-source:を付ければソースコードが表示されるので、カスタマイズ後の確認のために使ってます。

Jota Text Editor

Jota Text Editor - Google Play の Android アプリ

HTMLやCSSのコードをコピーや編集するために使っています。

こんなアプリを使って、このブログを更新しています。

スマホだけで、はてなブログを更新している話

スマホ（XPERIA AX）で、はてなブログを更新してます。カスタマイズも含めて。

こんなことをしているのは私だけだろうな、と思っていたら、もう一人いらっしゃいました。

『散るろぐ』のチルドさん。

チルドさんも書いてらっしゃいますが、AndroidのChromeでは何故かペーストができません。なので、通常は「Habit Browser」を使っています。

Habit Browser - ウェブブラウザ - Google Play の Android アプリ

このブラウザーだと、1行だけコピーできるんです。なので、HTMLをコピーしたいときは改行を消し無理やり1行にして、ペースト後に再度整形しなおしてます。

CSSをペーストする場合には、こちらのサイトを使っています。

オプションでこのように指定すると、

• Compression mode：Super Compact
• Comments handling：Strip ALL comments

使用前

.entry-content h3{
    padding: 10px 15px; 
    border-left: 10px solid #a4a4a4;
    border-bottom: 1px solid #a4a4a4;
    }

使用後

.entry-content h3{ padding:10px 15px; border-left:10px solid #a4a4a4; border-bottom:1px solid #a4a4a4}

こんな風に、余分な改行やスペースを取り除いて1行にしてくれるので、Habitで貼り付けることができます。

その結果、私のカスタマイズエリアはえらいことになってます。（スマホ版記事上の画面）

でも、ペーストできればいいんです。ソースの見やすさとか二の次三の次です。もうちょっとで終わるという時に失敗したら、かなり凹みます……。

ただ、Habitにも問題があって、バックスペースを押しても1文字しか消せないんです。まとめて消したい時はChromeです。

ペーストはできないけど削除はできるChrome、1文字しか削除できないけど1行だけペーストできるHabit。

オレ、アドセンスの報酬が入ったらPC買うんだ……。

ASUS ノートブック Eeebook X205TA ダークブルー [Windows10無料アップデート対応](WINdows 8.1 with Bing / 11.6 inch / Atom Z3735F / 2GB / eMMC 32GB / kingsoft multi-license) X205TA-B-32G

「行きたいところリスト」作ってみた。

そろそろ、また旅行に行きたいなぁ、と思っていたところ、読者登録しているnikoさんのブログで、こんな記事がありました。

呼びかけに勝手に応えて、私の「行きたいところ・行ったところリスト」を作ってみました。

行ったことのある都道府県を塗ってます。

行った・行きたいところリスト

過去に行ったところを太字にしています。

はてなブログ、フィード送信件数が30件に拡大

いつものようにTwitterを眺めていたら、こんなツイートが流れてきました。

ご迷惑をおかけし申し訳ございません。 はてなブログのフィード件数の変更に関連して、dlvr.it経由で過去のエントリーが再投稿された可能性があります - はてなブログ開発ブログ http://t.co/Uo940Jn13i

— はてなブログ (@hatenablog) 2015, 8月 5

「はてなブログ開発ブログ」を確認してみると、

原因は、上記時刻にはてなブログのフィード件数を7件から30件に仕様変更したことによるものです。
はてなブログのフィード件数の変更に関連して、dlvr.it経由で過去のエントリーが再投稿された可能性があります - はてなブログ開発ブログ

ほほう、仕様変更。
なので、Googleのウェブマスターツール（Search Console）で確認してみました。

変更前

「/feed」と「/rss」の送信件数は「8」です。

変更後

「/feed」と「/rss」の送信件数が「31」に増えています。

だからどうした、と言われても困るんですけどね。

記事の全文送信はそのままのようです。

今週のお題「夏の食事」：食欲ないから、これでいいや。

これです。冷たい物が必須な季節です。

凍らせて、ガリガリかじってます。ジュースとして飲んだ記憶はないなぁ。

正式な商品名は何と言うんでしょうか。子どもの頃は「チューチュー」と言ってたけど、合ってるのかな。

封筒でいえば角2サイズくらいのビニール袋に詰め放題で、お値段200円。画像では30本ほどなんですが、買った時には50本くらいありました。店員さんに「2段目はいいですか？」と聞かれたけど、丁重にお断りしました。

午前中に1本、午後に1本。順調に消化していってます。

確実に夏バテしそうな予感はありますが、これで乗り切りたいと思います。

はてなブログProにしたので、いろいろカスタマイズ

はてなブログProにして2週間。テーマを変更したり、アドセンスの位置はどこがいいのか、ちょこちょこ動かしてみたり。未だにデザインが落ち着いておりません。

そんな中、私がはてなブログをカスタマイズする上で、主に参考にさせていただいているブログです。

先ずは、池田仮名さんのブログです。はてな初心者には助かります。ありがとうございます。

JavaScriptなんて全く分からない私。参考にさせていただいているどころか、そのまんまコピペしてます。

• 「B!」はてブボタンを設置
• 「合わせて読みたいG」を設置
• パンくずリストを設定
• スマホ版の追尾ヘッダーを消す

特に、パンくずリストはフッタにJavaScriptを入れなくてはならず、無料版では設定できませんでした。今回Proにしたことで、ようやく設置できました。

パンくずリストを設置する前

年月で表示されているのは、カスタムURLを設定するときに、entry/以下を「YYYY/MM/カスタムURL」としているためです。こうしておけば、いつ頃書いた記事か、後々分かりやすくなるかなと思ってます。

設置後

きちんとカテゴリーで認識されています。

あと、池田仮名さんのブログ、空腹時、夜中は注意が必要な場合があります。うまそう……。

もう一人、ゆきひーさんのブログです。

ゆきひーさんのブログでは、SNSボタンを設置する際に参考にさせていただいたんですが、今回は背景を線で囲むCSSを参考にさせていただきました。ありがとうございます。

オリジナルからちょっと変更し、背景色を付けて、こんな感じで使っています。

.bg-solid {
    border: 2px solid #DCDCDC;
    background: #F3F3F3;
    padding: 20px;
    margin: 5px;
    border-radius: 5px;
}

CSSにこう追加すると、上の画像のような薄いグレーの囲いができます。

今日、カスタマイズの記事が増えてました。モジュールタイトルに下線をつけるのも参考にしました。

こんな風にして、私のブログのデザインは成り立っております。はてなの先人の方々、ありがとうございます。

読書メモ：『銀河不動産の超越』森博嗣

久しぶりに本を読みました。森博嗣『銀河不動産の超越』です。

「脱力系」と言われるこの作品、流されるままに生きてきた主人公の高橋が、いろいろの人に出会いながら、これまた流されるままに過ごしていく物語です。

主人公の日常を綴った作品なので、サクサク読み進めることができます。サブキャラでは、いろいろな個性なり事情なりを持った人が出てくるので、それなりにドタバタはありますが。

ただ、「さぁ、盛り上がってきた」というところで、いきなりのエンディング、という印象。

さらっと何か読みたい、という時にいいと思います。

銀河不動産の超越 Transcendence of Ginga Estate Agency (講談社文庫)

右手親指だけ、腱鞘炎のような状態になりました

右手の親指だけ、腱鞘炎のような状態になりました。原因は分かってるんです。スマホの使いすぎです。

今日までの30記事、全てスマホだけで書いてきました。

また、先日、はてなブログProにしてから、アドセンスの貼り直しやスマホ版デザインの変更など、いろいろとスマホをいじってました。

先人の方々の知恵をお借りし、HTMLやCSS、JavaScriptなどをせっせとコピペしておりました。

その合間をぬって、読書登録しているブログを巡回し、スターを付けたりしていた結果、右手親指だけ痛い……。

で、その痛みと引き換えに作業した結果が、今のこのブログです。

結論

スマホだけでも、はてなブログはカスタマイズできますよ！

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

はてなブログProにしたので独自ドメイン設定 + その時にしたこと

5日ほど前、はてなブログProにしました。その時は、独自ドメインはもうちょっと後でいいかな、と思っていたんですが、我慢できず独自ドメインを設定してしまいました。

その時にしたことをまとめました。

ドメインは「お名前.com」で取得しました。

・【PR】ドメイン取るならお名前.com

URL変更後にしたこと

ウェブマスターツールでの作業

新URLの登録

新しいURLのプロパティを作成します。サイトマップの登録・送信と、「Fetch as Google」で「/」のみ登録してクロールしてもらいます。

「Fetch as Google」については、こちらの記事を参考にしてください。

ブログ記事をすぐGoogleの検索結果に反映させる方法 - カラモモ日記。

旧URLとの関連付け

次に旧URLのプロパティで、画面右上の歯車をクリックして、「アドレスの変更」から、新旧URLの関連付けをします。

これをしておくと、Googleにドメイン変更を通知でき、重複コンテンツとみなされることが避けられるようです。

Google AnalyticsでURLの書きかえ

旧URLを新URLに書きかえ、ウェブマスターツールとの連係をし直します。

Google AdSenseでURLの登録

新しいURLを登録します。忘れると「登録外のサイトで広告が表示されている」と警告が出ます。最悪の場合、アカウントの停止です。

AmazonにURL追加のお願い

AdSenseと異なり、Amazonはユーザーが勝手に登録サイトを変更することができません。私は以前、勝手に書きかえてえらいことなりかけました。

Amazonアソシエイトは登録サイトをユーザーが勝手に変更してはいけなかった話。 - カラモモ日記。

他のアフィリエイトを使っている場合も、URLの書きかえが必要だと思います。

Twitterなどのプロフィール編集

プロフィール画面でブログのURLを表示していますので、新しいURLに書きかえました。

Google Analyticsは、単に書きかえただけでいいのか、実はよく分かってない……。

未だクリアできていない『ドラゴンクエスト II ～悪霊の神々～』

ドラクエシリーズ、I～VIIまではずっと買っていました。

ただ、唯一「ドラクエII」だけエンディングを見たことがないんです。めっちゃ難しくないですか？　以下、私が挫折した理由（FC版）です。

ふっかつのじゅもん

キーワードにありました。
復活の呪文とは - はてなキーワード

クリアするまでに、平均何回くらい間違えるんでしょうか。

ロンダルキアの洞窟

ここの落とし穴と無限ループ。落とし穴のフロアは「右手の法則」で抜けられるようですが、当時そんなことは知りませんでした。

今みたいに、ネタバレ親切な攻略サイトなんてなかった時代です。攻略本あっても肝心なことなんて書いていない。本当に苦労しました。

登りきったほこらで「ふっかつのじゅもん」を聞き忘れるか、他の場所で聞いてしまって、もう一回登り直すのはよくある話。

サマルトリアの王子

なぜか「ザラキ」にかかりやすい。ブリザードに出会うと祈るしかありません。

あと、ギガンテスの「つうこんのいちげき」。痛すぎやろ……。てか、全体的に弱すぎる……。

クリアはしてないけど、いろいろ楽しめました。ドンモハメに「みずのはごろも」を2着作ってもらったり、「じごくのつかい」が落とす「いかずちのつえ」で金策したり。「ゆうていみやおう……」という「ふっかつのじゅもん」もありました。

スマホ版でも買って、もう一度やってみるかな……。

ドラゴンクエスト25周年記念 ファミコン&スーパーファミコン ドラゴンクエストI・II・III(復刻版攻略本「ファミコン神拳」(書籍全130ページ)他同梱)(初回生産特典なし)

Wii U プレミアムセット shiro (WUP-S-WAFC)

今週のお題「ゲーム大好き」

天気予報を見ていて思うこと。

この間の台風の時もなんですが、天気予報を見ていて思ったことです。

「24時間降水量」とか「72時間降水量」で見る、降水量を立体的に、高さで表示する画面。↓のような画面です。

「NHKニュース：気象災害情報 24時間降水量」より

このような画面、確かに、「どれだけ降ったか」については、ぱっと見て分かり易いと思いますが、「どこで降ったか」については、とても分かり難い。太平洋沿岸ならだいたい分かりますが、内陸部や日本海側だと「それ、どこ？」な状態です。

上の画面でいうと、あの一番長いやつ、根元はどこなんでしょうか。

もう一手間加えてほしい

こんな感じに変更してみてはどうでしょう。

1. 棒がニョキニョキ伸びていき、立体的に降水量を示す。

2. 視点を日本の真上に移動させる。

3. 「1時間降水量」のような画面で、位置を示す。

こうすれば、降水量も位置も分かり易くなると思いませんか？

はてなブログに独自ドメインを設定する方法【お名前.com】

昨日、ムームードメインで取得したドメインを、はてなブログに設定する方法をまとめた記事を書きました。

はてなブログに独自ドメインを設定する方法【ムームードメイン】 - カラモモ日記。

今日は、お名前.comで取得したドメインをはてなブログに設定する方法をまとめました。正直、記事の使い回しです……。

はてなブログに独自ドメインを設定する方法【ムームードメイン】

はてなブログProにすると、独自ドメインが設定できるようになります。

先日、ムームードメインで「karamomo.xyz」というドメインを取得したので、これを「hatenablog.karamomo.xyz」として、はてなブログに設定する方法をまとめました。