【簡単】iPhone、iPadだけではてなブログのテーマを作成・カスタマイズする方法！
この記事では、
パソコンがない！
お出かけ先で気軽にテーマを作成・編集したい！
という人のためにiPhone・iPadではてなブログのテーマを作成・カスタマイズする方法をまとめます。
iPhoneだけでカスタマイズなんてできるの？
できます！制約も多いですけどできます！無料でしかも簡単にできます！
iPhoneとiPadでテーマを編集するのには？
iiPhone・iPadでテーマを編集する際の注意点
まず最初に言います。管理画面のデザインcssでテーマを作ろうとするのは絶対にやめましょう！
簡単なカスタマイズならできますけど、テーマをほんとに本格的に作成・カスタマイズするとなると大量のコードをあそこに打ち込む必要があるのですが・・・あまりに打ち込むコードが多いと・・・
落ちる！
なんと、デザインcssのところを押しただけで落ちます！「webに問題が起こりました」みたいなのが出て強制的にログインページに飛びます！しかも作ったコードを消すことすらできないんです。押した瞬間飛ばされるから・・・
僕はそれで二回ブログを削除しました。デザイン用のブログなのでそこまで被害はなかったですが・・・
一応そうなった時の対処法はあります。テーマストアからテーマをインストールするとデザインcssが強制的に削除されるのでそれを使って消すことはできます。
でも、編集はできません！何度やっても無理でした。
ということで、どうやってテーマを作成するのかというと・・・
ブログのHTMLのソースコードをコピーしてそれをブラウザで確認しながら編集する
という形でテーマを編集することになります。
もうちょっと具体的にまとめると・・・
自分のブログのHTMLのソースコードをコピーする
↓
それをファイルに拡張子「.html」で保存する
↓
コピーしたHTMLを書き換えて自分のiPhone・iPad内のcssを読み込むようにする
↓
cssをブラウザで確認しながら編集する
とまあ、こんな感じです。
パソコンの場合は結構テーマを作っている方も多く、テーマの作り方に関する情報が載っているブログも多くあります。なので、それに従っていれば簡単にできます。でも、iPhoneやiPadでやる情報は本当になかったんですよ。
ほんとに載ってなかったので僕は上記のパソコンで編集するやり方を いかにしてiPhone・iPadで再現するかネットの情報をつなぎ合わせてつなぎ合わせて、試行錯誤を繰り返しました。
結果テーマ作成できました！
必要なアプリとアプリの使い方
まず、上に書いたパソコンでのやり方の中に特別なアプリなしの初期状態ではできないものがありました。
それは、
ソースコードのコピー
拡張子「.html」で保存
この二つです。
ソースコードのコピーにはアプリ「View Source」が必要！
パソコンやアンドロイドでは、URLの前に「view source:」をつけることでソースコードを見ることができます。windowsパソコンの場合は「ctrl ＋ U 」でもできます。Macは確か「command ＋ U」だったと思います。（持ってないので正確にはわかりません）
しかし、iOSはこれになぜか対応してないんですよ。なので、プログのソースコードが見られるアプリが必要なんです。
そこで「View Source」です。無料のやつでもできるので大丈夫です。
このアプリの使い方は簡単です。
この画面の上の部分に自分のブログのURLを打ち込む、もしくは自分のサイトに行きURLの書かれている部分の右側にある、共有（四角いやつからから矢印が飛び出てるやつ）を押してそこから「View Source」を探して押すだけ。（ない場合はその他から「View Source」の部分をオンにしてください）そうすることで、自分のブログのソースコードが出てきます。
ここで一つ注意点。このアプリの場合、一度アプリを通してURLにアクセスしてるため、ブログを公開していない場合「このブログは非公開です」というページのソースコードが出てきてしまいます。なので、デザイン用のブログであっても一度「すべての人に公開」にする必要があります。
「.html」で保存するためには拡張子を変えられるファイルアプリが必要！
アプリに元から入っているファイルというアプリがありますが、このアプリだとテキストファイルをコピーしても、「.html」に変更することができません。なので、ソースコードをコピーしてもブラウザで開くことができません。なので、拡張子を変更するためのアプリが別途必要になってきます。
僕が使ってるのは「File Explorer」です。有料の「pro」もありますが無料版でもできます。
「View Source」で出したソースコードを全て選択して水色になったら、英語が書かれた黒い吹き出しが出てきます。そこの一番右にある「share」を選びましょう。そして「ファイルの保存」を選択し「File Explorer」のフォルダを選択し、左側にある追加を押します。
この段階ではhtmlファイルではなくtxtファイルなので、まだ、ブラウザで開くことはできません。
次に、「File Exporlorer」のアプリを開きます。
ここで「テキスト.txt」の容量とか日付とかが書かれているところの右にある丸が３つ縦に並んだやつをタップします。
次に「名前の変更」を選択し、名前に「index」などの名前をつけ拡張子を「html」にしましょう。
するとこのように、Safariのコンパスのようなアイコンが表示されます。 これで「safari」でテキストファイルをを開けるようになりました。
テーマの作成 カスタマイズの仕方
あとは、パソコンでやる方法とほとんど変わりません。
テーマをコピーして「.css」で保存
既存のテーマを使いカスタマイズしたい場合はインストールされたあとに管理画面のデザインcssにかかれているhttps://から.cssまでの間のURLをブラウザに打ち込んで、ソースを確認しコピーしましょう。保存してから名前と拡張子を変える方法は上記と一緒です。
テーマを自作したい場合は、はてなブログの定型のテーマである「Boilerplate.css」をコピーしてファイルに保存しましょう。
それとは別にもう一つファイルを作り、そこに自分の書いたcssを書いていきます。僕は「style.css」とつけました。
「html」を書き換え、自分のスタイルシートを読み込むようにする。
まず「html」のテキストを開きましょう。スタイルシートの部分
link rel ="stylesheet"となってる部分のhref=" "/のダブルクォーテーションの間に自分のつけたファイルの名前に変えましょう。そうすることで、自分の書いたcssがブラウザに反映されます。
あとは自由に書き込んでくだけです！
まとめ
いかがでしたか？
iPhoneやiPadではてなブログのカスタマイズをすることはできます。これで外出先でもちょっとした時間があれば気軽にテーマを作成することができます。
ちなみiPadのみで製作したテーマはこちらです。
はてなブログのユーザーは一度試してみてはいかがでしょうか。
