定型の囲み枠を簡単に挿入するには(Google Chrome編)

定型の囲み枠を簡単に挿入する方法はないんですか?
というご質問をいつもいただきますもので・・・

2014年8月28日にアメブロで書いた記事

【グーグルクロム限定】定型の囲み枠を簡単に挿入するには(Firefoxの追記有り)

をこちらでも書いておきます。

ご使用のブラウザがインターネットエクスプローラー(IE)ではなく、グーグルクロム(Google Chrome)になりますが。
(ファイヤーフォックス(Firefox)の方は、最後の方の<追記2>をご覧くださいませ。)

 

実は、グーグルクロムには、拡張機能というのがあります。

拡張機能を入れることで、自分好みの設定ができるようになっています。

ここでは、ブログでいつも記事下に定型の囲み枠を簡単に挿入する拡張機能をお伝えします。

今回お伝えする拡張機能は、「Insert Text」という機能です。

まず、Insert Text をインストールします。

右上の「無料」ボタンをクリックします。

002

「新しい拡張機能の確認」が表示されます。

003

 

「はい、この拡張機能を信頼します。」をクリックします。

 

004

 

インストールが終わると、このような画面が表示されます。

 

005

 

右上を見ると、「CHROMEに追加済み」と表示されます。

 

006

 

一度、ご自分のブログか、マイページを開いてみます。

すると、右上に「Insert Text Options」というボタンができていますので、そのボタンをクリックします。

007

 

定型文を入れる画面が表示されます。

 

008

 

「Create Text」ボタンをクリックします。

 

009

 

そして、タイトルとタグを入力(またはコピペ)します。

 

010

 

ここでは、こちらの記事の中から、

【続々編】見出し付きの囲い枠(角を丸く・背景グラデーション・枠に影・文字に影)

この囲い枠をコピペしてみました。

<div style=”border:1px solid #3b5998; margin:0 8px; padding:0;border-radius:5px; box-shadow:#cccccc 3px 3px 3px;”><p style=”margin:0; padding:3px 12px; background:#3b5998; color:#ffffff;font-weight:bold;text-shadow: 1px 1px 3px #000;”>■タイトル■</p><div style=” font-size:0.85em;padding:12px;”>1.ここに本文<br>2.ここに本文<br>3.ここに本文</div></div>

あとは、左下の「Save」ボタンを押します。

 

011

 

すると、左側に作成した定型文の見出しが表示されます。

これで完成です。

 

012

 

あとは、「記事を書く」で、右クリックして、メニューを表示します。

 

すると、「InsertText」-「見出し付き囲み枠」が表示されますので、クリックしてあげます。

 

013

 

すると、このように囲い枠がバシッと表示されます。

 

014

 

そう、Facebook Blue(カラーコードは#3b5998)の見出し付き囲み枠がこのように↓↓↓

■タイトル■

1.ここに本文

2.ここに本文

3.ここに本文

 

いかがだったでしょうか?

ぜひ、グーグルクロムをご使用の方は、使ってみるとよいですね。

 

<注意!>

クロムの拡張機能はとても便利で、他にも色んな機能があります。

しかし、拡張機能を入れすぎると動作が重くなるので、入れすぎには注意してください!

<追記1>

グーグルクロムを使いたくなった方は、こちらの記事をご覧になって、インストールされるとよいですね↓↓↓

Google Chrome(グーグルクロム)のダウンロードとインストール

<追記2>

やっぱり私はきつねうどん派・・・

じゃなくて、きつね派・・・Firefoxを使いたい・・・

という方は、十勝のこちらの方をご覧くださいませ~↓↓↓

 

Firefox にも定型文を挿入できる拡張機能があります *** MyWords ***|ブログを続けるには楽しむことが必要です

 

 

とうとう発表してしまった^^;

3年前の2012年1月11日からアメブロでブログを開始して、ちまちまとパソコンインストラクターによるパソコンワンポイントレッスン!という内容でブログを書いてきましたが・・・

http://ameblo.jp/sumitak1329/

読者数が3800名を超えた、ということもありまして(本当は4000名を超えたということで発表したかったのですが^^;)、

自分専用のブログをワードプレスで作りました!

ドメインも

kawakamitakehiro.com

でとりまして。

アメブロとこのブログとどのように更新していくか、これから色々と試していきたいと思っています。

一応、昨年には

アメブロ→Twitter(ツイッター)
Twitter(ツイッター)→アメブロ
アメブロ→Facebook個人ページ
Facebook個人ページ→アメブロ
アメブロ→Google+
Facebookページ→Facebook個人ページ
Facebook個人ページ→Facebookページ
Facebookページ→Twitter(ツイッター)
アメブロ→Simplog(シンプログ)
Simplog(シンプログ)→アメブロ
Simplog(シンプログ)→Facebook個人ページ
Simplog(シンプログ)→Twitter(ツイッター)
Twitter(ツイッター)→Simplog(シンプログ)
Instagram(インスタグラム)→Facebook個人ページ
Instagram(インスタグラム)→Twitter(ツイッター)
Twitter(ツイッター)→Instagram(インスタグラム)
YouTube→Facebookグループ

といった感じで、色々とチャレンジしていますが、

今年は、このワードプレスでの個人メディアとしてのブログを立ち上げて、このブログがベースになるように構築しよう・・・なんて思ったりしております!

そう、自分のコンテンツをここのワードプレスのブログに集結させる、そんな野望を持っていたりします、ハイ(笑)

ですので、ぜひ、今後ともこちらのブログもよろしくお願い申し上げます。

多分、今年の私のキーワードは

メディアミックス

だと思いますので^^!!
川上雄大(かわかみ たけひろ)
2015年2月7日

 

tumblr_njdsjgrF4C1u01x08o1_400

(↑ワンタンさんからお借りしました ペコリ)

サクラエディタ・・・半角スペースを表示するには

サクラエディタは、日本製のWindows用テキストエディタでで、フリーウェアとして配布されています。

HTMLやCSSをタグ打ちするのに使います。

他にも、純正の「メモ帳(無料)」や「Terapad(無料)」や「EmEditor(有料)」がありますが、
「サクラエディタ(無料)」は、多数の文字コードのサポート、検索、置換などの豊富な機能が使えたりします。
また、「Terapad」と同じくHTMLのタグに色がつくので、コーディングしやすくなっています。
サクラエディタの最新バージョン及びソースは、以下のWebページから入手可能です。
・Project Sakura-Editor
http://sakura-editor.sourceforge.net/

こちらからでもダウンロードできます↓
http://sakura-editor.softonic.jp/

 

このサクラエディタで、半角空白を表示するには、

[設定]-[タイプ別設定]を選択して、

TypeColor

ONにする(クリックする)と半角スペースを「 」の代わりに「U」の下半分で指定した設定で表示します。

 

background-imageで背景画像が表示されない

背景画像を background-image で表示させようとする時、画像がうまく表示されないことがあります。

その時は、以下のいずれかだと思います。

・画像のファイル名が間違っている
・画像の入っているフォルダ名が間違っている
・画像の相対ファイルパスが間違っている
・画像の絶対ファイルパスが間違っている
・cssファイルを読み込めてない

/home  ホーム(ここからcssと画像を読み込みます)

/images  画像が入っているフォルダ
/css   cssファイルがあるフォルダ

上記のような構造の場合ですが、
(ここで問題は、CSSフォルダを作って、その中にCSSファイルを置いた場合、ということです)

例えば、index.html から /css フォルダに置いてある
style.css ファイルをリンクする時、
(<link rel=”stylesheet” href=”css/style.css”>といった感じで)

× background-image: url(“images/sky.jpg”);

といった、 index.html をベースにファイルパスを書くと間違いです。

○ background-image: url(“../images/sky.jpg”);

style.css ファイルから、画像の相対パスを書かなくてはいけません。

 

リンクではなく、
<head>内の<style></style>で記述する場合は、

background-image: url(“images/sky.jpg”);

で、OKですので。

効率良くウィンドウを切り替えるには

【Windowsパソコン・ワンポイントレッスン!】
Windowsで、複数のウィンドウを開いている場合、いちいちウィンドウをクリックして切り替えていませんか?

効率良くウィンドウを切り替えるには、キーボードで

Alt+Tabキー

を押すとよいです!

コツは、Altキーを押しておいて、Tabキーをポンポンと押す感じ、です。

ブログをチェックしながら、ワードで文書作成、といった場合に便利だったりしますね^^!

キーボードで印刷するには

【パソコン・ワンポイントレッスン!】
印刷をするとき、[ファイル]ー[印刷]を押して、「印刷」ダイアログボックスを表示するのが普通だと思いますが、
やっぱり一発で出したいものですね^^

それは・・・
キーボードから

Ctrl+Pキー(Windows)
command+P(Mac)

を押すとよいです。

プリントの「P」だと思えば、覚えられますね^^!

「ファイル名・フォルダ名」を変える方法

【Windowsパソコン・ワンポイントレッスン!】
「ファイル名・フォルダ名」を変える方法
名前を変更するには次の方法がありますが・・・

1.右クリックして「名前の変更」をクリック
2.ファイル名(フォルダ名)の名前を長押し

でも、やっぱり、3つ目の

キーボードから[F2]キーを押す

が早くて確実ですよ〜^^!!

【エクセル】入力してあるセル内の文字を修正するには

【エクセル・ワンポイントレッスン!】
入力してあるセルの中の文字を修正するには、

・数式バーで修正する
・セルをダブルクリックしてから修正する

という方法がありますが・・・

コレ以外にも

マウスを使わずに、キーボードから[F2]キーを押す

という方法があります。
慣れるとこっちの方が早いですよ〜^^!!

アプリケーションの強制終了

【アプリケーションの強制終了】
「閉じるボタンを押しても、終了しないんですけど・・・」
という場合は、

Ctrl(コントロール)キー+Alt(オルト)キー+Delete(デリート)キー

を押して、「タスクマネージャーの起動」で終了することができます。(Windowsの場合)

3つのキーを同時に押すのではなくて、
左手でCtrl(コントロール)キー+Alt(オルト)キーを同時に押しっぱなしにしておいて、右手でDelete(デリート)キーをポンと押す、感じでやるとうまくいきますよ〜

 

また
Mac OS Xの場合は、というと・・・
Apple メニューの「強制終了」を選択するか、
または
command (コマンド)キー+ option (オプション)キー+ esc(エスケープ)キー

を押して、

「強制終了」ウインドウで応答しないアプリケーションを選択して「強制終了」をクリックします。

ちなみに、
Mac OS X v10.5 以降の場合は、

command + option + shift + escキーを 3 秒間押し続けると、

一番手前のアプリケーションを強制終了できますので・・・

<補足>
タスクマネージャーは Ctrl + Shift + Esc を押して起動することもできます。
(Windows7/8/8.1)

リズ札幌・ライフデザインスクールの川上雄大です!