ブログ作業効率を上げるためのPC小技いろいろ

辞書登録を使い倒す

例えばあなたが 旧投稿画面 を使っていると仮定して。一部文章や画像などを センタリング あるいは右に寄せるなどしたい場合。

旧投稿画面においてはエディターツールバーの右側 設定 のすぐ左隣にある W を押して「WYSIWYG(うぃじうぃぐ, 見たまんま編集)」モードに変更してから行います。実にめんどくさい。

すぐに呼び出せると便利なhtmlを上げておきます。コピペしてテキトーなひらがな名称で登録しておきましょう。緑部分が適宜書き換える箇所です。

文章・画像のセンタリング (右寄せは center を right に変更)

<div style="text-align: center;">内容</div>

太字

<span style="font-weight: bold;">内容</span>

斜体 注)日本語のフォント種によっては傾かないことがあります

<span style="font-style: italic;">内容</span>

文字色指定

<span style="color: カラーコード;">内容</span>

文字大きさ変更 注)emは基本フォントサイズの「x倍」という指定です

<span style="font-size: 数値em;">内容</span>

補足) 1.2em ならば基本フォントの1.2倍に。.8em ならば基本フォントの0.8倍になります(接頭の0は省略が推奨ですが書いても構いません)

下線

<span style="text-decoration: underline;">内容</span>

引用

<blockquote><p>内容</p><cite><a href="引用元URL" target="_blank">引用元サイト名or著者名</cite></blockquote>

中にはエディターをWYSIWYGに変更せずとも簡単に押せるものも含まれますが、FC2ブログエディターはhtml5に準拠していません のでテンプレートがhtml5の場合は上記のような形が望ましいと思います。エディターの自動入力は古い書き方であり廃止属性などが多く含まれています。

辞書登録にはバイト数制限があり、あまりにも長い文字列は登録できないのと、コード改行を利用することができません。その場合にはアプリケーションを利用されると良いでしょう。

【Clipy】HTMLモードで記事を書くときの強力な助っ人アプリ

FC2ブログの管理画面のデザインが刷新されまして、これまで以上に WYSIWYG(見たまま編集)とHTML編集の選択 がはっきりするようになったのではないかと思います。今回はHTML編集モードでの記事作成に便利なツールをご紹介します。...

vanillaice000.blog.fc2.com

記事編集中にリンクをクリックする際は別タブで

うっかり画面中のリンクをそのままクリックして滞在ページが遷移してしまうことがあります。ここでテンパってしまう方も多いのですが、そんな時は慌てずに ブラウザバック を行います。リロード厳禁 です。入力済み内容が失われてしまいます。

リンクを別タブで開くには
Windows --- Shift + リンクアドレス
Mac --- ⌘ + リンクアドレス

記事編集中という状況下でなくとも滞在ページをそのまま残しておきたい時には意図的に上記のような操作を行います。リンクが滞在ページのまま開かれるか別タブで開かれるかは一見しただけではわかりませんので安全策という意味で使えます。

マウスに頼りすぎない、ショートカットキーを使いこなす

よく利用するであろうショートカットを掲載しておきます。ブラウザと関連している場合はGoogle Chromeの使用を前提とします。

ブログを書く際に良く使うとすればこのぐらいかな、と思います。「ブログ」「ブラウザ」「OS」に分けましたが、各ショートカットがそれぞれこの3種に紐付いている、という分類ではなく、

• ブログ --- ブログ作成時に使うかも
• ブラウザ --- ブラウズ中(ページ閲覧中)に使うかも
• OS --- パソコン上で何か作業するとき

という可能性分類です。

例えば「テンプレート編集時に対象箇所をページ内(ソース内)から見つけられない」という方がいらっしゃいます。ただでさえ複雑怪奇なソースコード中から特定の文字列を目で追って探すなんて気の遠くなる作業ですよね。文字列検索ショートカットを利用すれば一発でわかります。またあるいは他者ブログへコメントを残す際、ある項目から別の項目へ移動する際、マウスを使わずにキーボードで移動すれば早いですよね。このタブキー押下ショートカットはweb上のほとんどのフォームで利用可能です。

マウスドラッグ選択は対象「末尾」から対象「冒頭」へ向けて行う

マウスドラッグ選択は右方向から左上方向の方が素早くできます。人間は流し見しただけの内容でも一旦目に入ったものはなんとなく場所を覚えているものです。ですからコピーしたい内容の後ろから前へとマウスを動かします。ゴールからスタートへ向けるわけですね。スタート地点を認識しているランナーがゴールからスタートへ向けて走った場合と、ゴール地点不明でスタート地点からゴールを探しながら走るランナー、どちらのタイムが速いでしょう。

Macの画面ズームは超簡単

うちの長男がブラウザのパーセンテージプラス・マイナスで操作していてびっくりしました。アホか… （￣∀￣；）
Macのズームはマウス表面を1本指で軽くポンポンですよ。Winはこれもショートカットキーでしょうかね。あるいはCtrl + マウスホイールグリグリでしょうか。意図せずグリって「なんか…でかくなってる！！！何故」という方も多いのではないでしょうか。

html文法チェックのブックマークレットと仲良くなる

【 HTML終了タグチェッカー 】改訂版の再配布を致します

弊ブログのこの記事 ↓ を発端にして、FC2ブログを「HTMLタグのみ」の改行設定で記事を書くブロガーさん達が増えつつあります。 最近の筆者の趣味は皆さんのブログ記事のHTMLソースを読むことです（笑） - 初級パソコン術最近の筆者の趣味は､皆さんのブログ記事のHTMLソースを読む(覗く)ことなんですよね～（笑） 悪趣味ですよね～　(〃＾▽＾〃)oあはははっ♪ そうそう､HTMLソースって ↓ こんなのですよね｡ ブラウザのGoogle...

oops0011.blog.fc2.com

htmlを意識して使い始めると必ずどこかで「レイアウトが崩れた (´;ｪ;`)」という場面が巡ってきます。記事のプレビュー時にチェックすることで後のトラブルを防ぐことができます。ちなみにこのページではtable要素の一部タグを省略していますので大量のエラー表示になりますが、実際にはvalid(正当)です。html初心者の自覚がある方は「省略しても良い」と定められているタグでも省略せずしっかり書かれることをおすすめします。

まとめ

うちの長男なんかもそうですが、要領の悪い人というのは見ているとなんでもかんでもマウスでやろうとするんですね。その代わり彼はスマホ入力めちゃくちゃ速いですけどね(笑)

このページにある内容だけでも実践してみると作業スピードは向上すると思います。お試しください (●'0'●)/