亀夫のブログ

人は誰でも悩んでいるということを前提としたブログです。

はてなブログ運営ツールとカスタマイズ履歴

はてなブログ2日目です。

「はてなブログPro」のカスタマイズ履歴をこのページで更新してゆきます。 

f:id:Kame777:20170125164423p:plain

「はてなブログ」運営ツールのまとめ

Officeと違って(←普通はWordPressと比較しますよね。)、スタイル編集に融通が利かない「はてなブログ」ですが、さすが人気のブログサービスだけあって、不便な点はツールが準備されています。

h2タグを「編集 みたままモード」で一発導入

f:id:Kame777:20170125165346p:plain

 

「はてなブログ」って、記事のタイトルは見出し<h1>なんですが、「編集 みたままモード」でのスタイル「大見出し」は<h3>なんですね。

余り気にすることがないようですが、どうしても変えたい方は、html編集かマークダウン?方式で入力すればいいだけ。

でも、「編集 みたままモード」がいいんですよね。

なんかいいて手はないんでしょうか?

探せばありました。「編集 みたままモード」で指定した部分を<h2>に2クリックで変更できるChrome拡張機能が。

インストール: Chrome Add-on for Hatena - Chrome ウェブストア 

しかも、配置変更したり、背景を替えることができたりと、すごいです。感謝です。

※ 実は<h2>タグを入れるショートカットもあります。範囲を指定して【Ctrll + 2】でOKです。ということは<h3>~もそれでOKなわけですね。

 

画像のalt属性の挿入

f:id:Kame777:20170125162929p:plain

これって、画像の説明なんですが、「編集 みたままモード」にはないんですよね。htmlモードの手打でやれば可能ですが、面倒きわまりないです。

でも、これをサイドバーの「写真を投稿」でできるようにしてくださった強者がいます。

これもChrome拡張で実現できます。

インストール: はてブロimageTitle - Chrome ウェブストア 

すご過ぎします。

スタイル変更 

2017年01月25日(水曜日) スタイル変更

テーマの変更

テーマを CONTENTS - テーマ ストア に変更して、見出しを以下のようなスタイルにしました。

このテーマは完全レスポンシブ対応です。でも管理画面から「スマホ」のデザイン設定から「詳細設定」で「レスポンシブデザイン」に☑を入れていないと、スマホでは機能しませんよ。

(※ これって「はてなブログ」無料版はできないかも?)

他にも様々なパーツが使えそうです使えそうですよ。

ここは、青の傾向マーカーになります

ポイント欄を使いたい時はここに文章を入れる

コラム欄を使いたい時はここに文章を入れる

アテンション欄を使いたい時はここに文章を入れる

 
自分名前
ここに文章を入れる。
 
相手名前
ここに文章を入れる。
 
 
 
 
 
亀夫亀夫
 
でも顔の表情を変えるつまり、画像をHTMLで手軽に変えられるのでこっちがいいかも。
亀子亀子
私の表情をやたらと変えないでよ。

見出しのデザイン変更

 以下のようにしました。1時間もかかってしまいました。 

f:id:Kame777:20170125163716p:plain

 はてなブログの表は「見たまま」モードでは無理です。かといってHTMLは動きが悪い。

ExcelやGoogleスプレッドシートの表をコピペして張り付けるという方法もありますが、いかんせん画像になってしまうのが難点です。

そこで表をHTMLで出力してくれるWebサービスを利用することができます。

 テーブルタグ作成ツール - 無料ツール.net  

とか

 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です。          
           
           
           

 しかし問題点があります。

  1. いずれも、記事作成後に行列を増減させたい場合、HTMLを操作する必要がある。
  2. 列が増えた場合、はみ出る。とくにスマホ表示で。

1の解決策は、WordPressやホームページビルダーでやればいいわけです。

とくにWordPessのtableプラグイン  TinyMCE Advanced — WordPress Plugins  等を使うなら簡単に作成、あとでHTMLをコピペして、見たまま編集のように編集できますよ。

 

f:id:Kame777:20170310163243p:plain

サーバーかりて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

 パソコンのならブラウザの横幅を縮めると、スクロールバーがでますね。スマホの縦表示も同じです。

カスタマイズ履歴は以上です。