はてなブログ運営ツールとカスタマイズ履歴
はてなブログ2日目です。
「はてなブログPro」のカスタマイズ履歴をこのページで更新してゆきます。
「はてなブログ」運営ツールのまとめ
Officeと違って(←普通はWordPressと比較しますよね。)、スタイル編集に融通が利かない「はてなブログ」ですが、さすが人気のブログサービスだけあって、不便な点はツールが準備されています。
h2タグを「編集 みたままモード」で一発導入
「はてなブログ」って、記事のタイトルは見出し<h1>なんですが、「編集 みたままモード」でのスタイル「大見出し」は<h3>なんですね。
余り気にすることがないようですが、どうしても変えたい方は、html編集かマークダウン?方式で入力すればいいだけ。
でも、「編集 みたままモード」がいいんですよね。
なんかいいて手はないんでしょうか?
探せばありました。「編集 みたままモード」で指定した部分を<h2>に2クリックで変更できるChrome拡張機能が。
インストール: Chrome Add-on for Hatena - Chrome ウェブストア
しかも、配置変更したり、背景を替えることができたりと、すごいです。感謝です。
※ 実は<h2>タグを入れるショートカットもあります。範囲を指定して【Ctrll + 2】でOKです。ということは<h3>~もそれでOKなわけですね。
画像のalt属性の挿入
これって、画像の説明なんですが、「編集 みたままモード」にはないんですよね。htmlモードの手打でやれば可能ですが、面倒きわまりないです。
でも、これをサイドバーの「写真を投稿」でできるようにしてくださった強者がいます。
これもChrome拡張で実現できます。
インストール: はてブロimageTitle - Chrome ウェブストア
すご過ぎします。
スタイル変更
2017年01月25日(水曜日) スタイル変更
テーマの変更
テーマを CONTENTS - テーマ ストア に変更して、見出しを以下のようなスタイルにしました。
このテーマは完全レスポンシブ対応です。でも管理画面から「スマホ」のデザイン設定から「詳細設定」で「レスポンシブデザイン」に☑を入れていないと、スマホでは機能しませんよ。
(※ これって「はてなブログ」無料版はできないかも?)
他にも様々なパーツが使えそうです使えそうですよ。
ここは、青の傾向マーカーになります
ポイント欄を使いたい時はここに文章を入れる
コラム欄を使いたい時はここに文章を入れる
アテンション欄を使いたい時はここに文章を入れる
ここに文章を入れる。
ここに文章を入れる。
見出しのデザイン変更
以下のようにしました。1時間もかかってしまいました。
表
はてなブログの表は「見たまま」モードでは無理です。かといってHTMLは動きが悪い。
ExcelやGoogleスプレッドシートの表をコピペして張り付けるという方法もありますが、いかんせん画像になってしまうのが難点です。
そこで表をHTMLで出力してくれるWebサービスを利用することができます。
とか
Web便利ツール/テーブルタグ作成ツール - TAG index
または
HTML Table generator - TablesGenerator.com
です。
こんな感じです。
A1でA1です。す。 | A1です。A1です。A1です。 | A1でA1です。す。 | A1です。 A1です。 | A1です。 A1です。 | A1です。A1です。 |
A1です。 | A1です。 | A1です。 | A1です。 | A1です。 | A1です。 |
A1です。 | |||||
しかし問題点があります。
- いずれも、記事作成後に行列を増減させたい場合、HTMLを操作する必要がある。
- 列が増えた場合、はみ出る。とくにスマホ表示で。
1の解決策は、WordPressやホームページビルダーでやればいいわけです。
とくにWordPessのtableプラグイン TinyMCE Advanced — WordPress Plugins 等を使うなら簡単に作成、あとでHTMLをコピペして、見たまま編集のように編集できますよ。
サーバーかりてWordPessを運用していなくても、パソコンにインストールして使えばいいわけです。
その辺は Instant Wordpressで超簡単にワードプレスローカル環境を構築する方法 の方が詳細に解説してくださっています。
2つ目の問題ですが、列が増えた場合、はみ出ることがあります。とくにスマホ表示なら。
その場合、表をレスポンシブ対応にすればOK。
代表的なものに Tables · Bootstrap があります。CSSをダウンロードしてtableたぐのIDを入れればOKです。
以下のようになります。
見出し1 | 見出し2 | 見出し3 | 見出し4 | 見出し5 |
---|---|---|---|---|
あ1あ1あ1あ1あ1あ1あ1 | い1い1い1い1い1い1い1い1 | う1 う1 う1 う1 う1 う1 う1 う1 | う1 う1 う1 う1 う1 う1 う1 う1 | う1 う1 う1 う1 う1 う1 う1 う1 |
あ2 | い2 | う3 | う1 | う1 |
あ2 | い2 | う3 | う1 | う1 |
パソコンのならブラウザの横幅を縮めると、スクロールバーがでますね。スマホの縦表示も同じです。
カスタマイズ履歴は以上です。