ワードレスの記事内で囲み枠を中央に配置するには

ワードプレスの記事内でも、囲み枠を使うには。

こちらの記事を参考にしていただければよしとして。

さらに、

枠を狭くして、中央に配置するにはこんな感じ↓

 

<div style=”width:300px;margin-left:auto;margin-right:auto;”>
<div style=”background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトルはこちら■</font></div>
<div style=”border:1px solid #000066; padding:10px; font-size:1em;”>本文はこちら!<br>
改行後の本文はこちら(ここは削除してください。)</div></div>

 

■タイトルはこちら■
本文はこちら!
改行後の本文はこちら(ここは削除してください。)

 

 

このように、元々の囲い枠のソースの前後に

<div style=”width:300px;margin-left:auto;margin-right:auto;”>

</div>

をつけるとよいですね。

(300などの数値は任意に)

 

ブログであれば、こちら↓もどうぞ^^!

『見出し付き囲い枠-その2』の幅の調節は?(枠の幅を狭くしたい、枠を中央にしたい・・)

ワードプレスにもSSL化を

ワードプレスで作成したWebサイトでも、SSL化できるようになっています!

ロリポップでも、

 

エックスサーバーでも、できるようになっています。

 

このワードプレスも早くSSLしないと(汗)

(SSL化されていないと、Google Chromeで見ると、「このサイトへの接続は保護されていません」と表示されてしまいます。

 

今までロリポップで独自SSLを導入するには、1ドメイン毎に追加料金が必要でした。

月額2,000円です。年間で24,000円・・・(汗)

それが、

基本のご利用料金のみで常時SSL化が可能だと!

(現在、有料プランは「独自SSL(PRO)」となっています。)

 

これはもうSSL化しなきゃ、ですね!

 

設定は、ユーザー専用ページ内の「証明書お申込み・設定」からあっという間に完了します。

 

独自ドメインと、サブドメインが一覧で表示されていますので、

 

独自SSLを適用したいドメインおよびサブドメインのチェックボックスを選択します。 選択後、各独自ドメイン単位で「独自SSL(無料)を設定する」ボタンをクリックします。

 

申請後、独自ドメインおよびサブドメインのステータスが「SSL設定作業中」に変わります。

 

設定が完了するまでに5分程かかります。

5分程待ってページを更新すると、設定が完了したドメインは「SSL保護有効」となります。

 

あとはを冒頭に「https://」付けたURLでアクセスできるようになれば、独自SSL化が完了です!

 

その後、WordPressのサイトアドレスを変更します。

WordPressダッシュボード→「設定」→「一般」をクリックします。

「WordPress アドレス (URL)」と「サイトアドレス (URL)」両方のアドレスの先頭部分を「https」に変更します。

 

さらに、内部リンクと画像URLの一括置換作業をしていきますので、手作業で変更していくのもいいですが、ここでは「Search Regex」プラグインで一括置換してきます。

WordPressダッシュボード→プラグイン→新規追加→検索欄で「Search Regex」と入力→「今すぐインストール」クリック→「有効化」クリック

「ツール」-「Search Regex」クリック。

 

 

「http」で始まる置換前のURLが上段。
下段には「https」で始まる置換後のURLを入力して、「Replace&Save」をクリックして完了です。

 

 

【緊急】WordPress4.7.2へ大至急バージョンアップを!

このサイトはWordPressで作成しています。

WordPressでサイトを構築されている方は、こまめにバージョンアップをしてくださいね!

特に、現在(2017/2/7)での最新バージョンは、

WordPress 4.7.2

ですので!

ダッシュボードにて、「今すぐ更新してください。」を↓

 

 

そして、「今すぐ更新」を。

ただし、jaファイルであることをご確認くださいませ↓
(今回はWordPress 4.7.2-jaとなっています。)

「更新」からでもOKです↓

 

もちろん、プラグインも更新しておいてくださいね。

 

というのも、

独立行政法人情報推進機構(IPA)のページで、

「重要なセキュリティ情報」において、
「ワードプレス」で新たに見つかったセキュリティー弱点(脆弱性)

が「緊急」になっています。

 

ハッカー攻撃が世界的に多発する恐れがあるので、WordPressをご使用の方は、早急にバージョンアップしてくださいませ↓

 

 

ワードプレスでもアメブロで使っている囲み枠は使えます

ワードプレスでも、アメブロや他のブログで使っているような囲み枠は使えますか?

というご質問いただいたりしますが、

もちろん、ワードプレスでも使えます。

投稿のページの右上に「ビジュアル」と「テキスト」とありますが、
「テキスト」をクリックすると、HTML表示になります。

401

そこでこのようなHTMLタグを入れると、

<div style=”background-color:#ffeeee;color:#000;margin:10px 6px;padding:16px;border:6px dotted #ff0000;border-radius:6px;box-shadow:2px 2px 4px #999,2px 2px 2px #ccc inset;text-shadow:0px 0px 2px #333;word-break:break-all;”>・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</div><br><br><br>

このような↓囲み枠が表示されます。

・1行目
・2行目
・3行目
・4行目
・5行目

色々と試してみてくださいませ~^^!!

HTMLでテーブル(表)を作るには

名簿やスケジュールなどのデータを表形式で表すときは、テーブルを使用するとよいです。

テーブルの基本構造

HTMLでテーブル(表)を挿入するには

table要素(表全体)、tr要素(行)、td要素(セル)、th要素(見出しセル)を用いて指定します。

 

例えば、次の5行×2列の表を作成するには・・・

イベント名 インターネット活用講座
日時 4月12日(金)10:30~12:00
内容 facebook、Twitter、ブログの活用
場所 リズ札幌
料金 〇〇〇円(教材費込み)

(ちなみに↑の講座は架空ですので)

 

<table>(テーブルタグ)を入れてあげて、

<table border=”1″>
<tr>
<th>イベント名</th><td>インターネット活用講座</td>
</tr>
<tr>
<th>日時</th><td>4月12日(金)10:30~12:00</td>
</tr>
<tr>
<th>内容</th><td>facebook、Twitter、ブログの活用</td>
</tr>
<tr>
<th>場所</th><td>リズ札幌</td>
</tr>
<tr>
<th>料金</th><td>〇〇〇円(教材費込み)</td>
</tr>
</table>

<th></th>や<td></td>の間の文字を変えればいいだけなのです。

※<th></th>は見出しセルデータという意味(Table Header)

※<td></td>はセルデータという意味(Table Data)

また、

<tr></tr>は「行」という意味があります。

trはtable+rowの頭文字の略ですね。

row(ロウ)は「」という意味です。(ちなみに、column(カラム)は「」です。)

どっちがで、どっちがかわからなくなる方は、

rowは「ロウ」・・・「ロウ」・・・「ロウ」・・・・・・「ギョウ」(行)・・・(笑)

と音が似ているので、そう身体で覚えるといいですね。

 

ブログの記事内に枠で囲む方法(囲い枠・囲み枠・枠囲い)

ブログの記事内に枠で囲む方法(囲い枠・囲み枠・枠囲い)

囲い枠・囲み枠・枠囲いを使うと、記事内で目立たせることができますものね^^!

色んなパターンの囲い枠をのせておきますので、お好きなのをご自由にお使いくださいませ。

また、ご自分でご自由に色などを変更して、オリジナルの囲い枠を使ってもいいですね!

 

1.【むらさき(四角)】

枠内の記事本文

 

<div style="background:#eeeeff; padding:10px; border:2px dotted #0000ff;">枠内の記事本文</div>


2.【むらさき(角丸)】

角を丸くするには、「border-radius: 10px;」を追加すればよいだけですので。(ただし、角丸はIE8以前だと丸く見えませんのでご注意を!)
(角を丸くするのに、もっと万全を期したい方は下の補足1を)

枠内の記事本文

 

<div style="background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;">枠内の記事本文</div>


3.【ぴんく(四角)】

枠内の記事本文

 

<div style="background:#ffeeee; padding:10px; border:2px dotted #ff0000;">枠内の記事本文</div>


4.【ぴんく(角丸)】

枠内の記事本文

 

<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000;">枠内の記事本文</div>


5.【みどり(四角)】

枠内の記事本文

 

<div style="background:#bfffdf; padding:10px; border:2px dotted #00bf00;">枠内の記事本文</div>


6.【みどり(角丸)】

枠内の記事本文

 

<div style="background:#bfffdf; padding:10px; border-radius: 10px; border: 2px dotted #00bf00;">枠内の記事本文</div>


7.【うすいグレー(四角)】

枠内の記事本文

 

<div style="background:#f7f7f7; padding:10px; border:2px dotted #CCCCCC;">枠内の記事本文</div>


8.【うすいグレー(四角)(細い)】

枠内の記事本文

 

<div style="background: rgb(247, 247, 247); padding: 10px; border: 1px dotted rgb(204, 204, 204);">枠内の記事本文</div>


9.【うすいグレー(角丸)-1】

枠内の記事本文

 

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 2px dotted #CCCCCC;">枠内の記事本文</div>


10.【うすいグレー(角丸)-2】

枠内の記事本文

 

<div style="background:#f9f9f9;padding:15px;border:3px dotted #999999;border-radius:10px;">枠内の記事本文</div>


さらに、枠に影をつけたいのであれば、「box-shadow: 5px 5px 5px #999;」を追加すればできます。↓↓↓(ただし、IE8以前だと影は見えませんのでご注意を)

11.【ぴんく(角丸)(影つき)】

枠内の記事本文

 

<div style="background:#ffeeee; padding:10px; border-radius: 10px; border: 2px dotted #ff0000; width: auto; margin-right:6px; box-shadow: 5px 5px 5px #999;">枠内の記事本文</div>

※width:auto; と指定すれば、ブラウザ画面に合わせて横幅が変化するリキッドデザインにすることができます。


12.【うすいグレー(角丸)(影つき)】

枠内の記事本文

 

<div style="background:#f7f7f7;padding:10px;width: auto;margin-right:6px;border-radius: 10px;box-shadow: 5px 5px 5px #AAA;border: 2px dotted #CCCCCC;">枠内の記事本文</div>

※width:auto; と指定すれば、ブラウザ画面に合わせて横幅が変化するリキッドデザインにすることができます。


13.【うすいグレーに薄いピンクの線(四角)】

枠内の記事本文

 

<div style="background:#f7f7f7;padding:10px;border:3px dotted #ffb6c1;">枠内の記事本文</div>


14.【うすいグレーに薄いピンクの線(角丸)】
(ただし、角丸はIE8以前だと丸く見えませんのでご注意を)

枠内の記事本文

 

<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</div>


15.【角丸の実線】

枠内の記事本文

 

<div style="padding:10px;border-radius: 5px;border: 2px solid #ff0000;">枠内の記事本文</div>


16.【角丸の二重線】

枠内の記事本文

 

<div style="padding:10px;border-radius: 10px; border: 5px double #0000ff;">枠内の記事本文</div>


17.【角丸の点線】

枠内の記事本文

 

<div style="padding:10px;border-radius: 20px; border: 3px dotted #00ff00;">枠内の記事本文</div>


18.【角丸の水色二重線(影つき)】

タイトル
本文1
本文2
本文3
本文4
本文5

 

<div style="border: #b0e0e6 3px double; padding: 6px; background-color: #ffffff; margin: 5px; color: #333333; border-radius: 10px; box-shadow: 5px 5px 5px #AAAAAA"><p><strong>タイトル</strong></p><p>本文1<br>本文2<br>本文3</p><p>本文4<br>本文5</p></div>

One Point!
実線 → solid
点線 → dotted
破線 → dashed
二重線 → double
線なし → none


19.【ぴんく(角丸)(影つき)(背景グラデーション)】
(IE10以降で有効)

(画像表示↓)
101

(現在のブラウザ表示↓)

○○○
○○○
○○○
○○○
○○○

 

<div style="background-image:linear-gradient(#dd4a5c,#e4707e,white,#e4707e,#dd4a5c);background-color:#ffeeee; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div>


20.【ぴんく(角丸)(影つき)(背景グラデーション)】
(IE10以降で有効)

(画像表示↓)

102
(現在のブラウザ表示↓)

○○○
○○○
○○○
○○○
○○○

 

<div style="background-image:linear-gradient(#e4707e,white,white,white,#e4707e);background-color:#ffeeee; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div>


21.【ぴんく(角丸)(影つき)(背景グラデーション)】
(IE10以降で有効)

(画像表示↓)

103
(現在のブラウザ表示↓)

○○○
○○○
○○○
○○○
○○○

 

<div style="background-image:linear-gradient(#ffeeee,#ffdddd,#ff9999);background-color:#ffeeee; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;"> ○○○<br>○○○<br>○○○<br>○○○<br>○○○</div>

 


22.【水色(角丸)(影つき)(背景グラデーション)】
(IE10以降で有効)

(画像表示・・・IE10以降)
104

(現在のブラウザ表示↓)

○○○
○○○
○○○
○○○
○○○

 

<div style="background-image:linear-gradient(#f7fbfc,#d9edf2,#add9e4);background-color:#eeffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #333333; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div>

 


23.【枠の見出し付(フィールドセット枠)】

◆枠の見出し

1)枠内の記事本文1
2)枠内の記事本文2
3)枠内の記事本文3

 


<fieldset><legend><strong>◆枠の見出し</strong></legend>1)枠内の記事本文1<br>2)枠内の記事本文2<br>3)枠内の記事本文3</fieldset>

 

<補足1>
角を丸くするのに、「border-radius」を追加するだけでよい、と書きましたが、

-webkit-border-radius: 10px;  /* Safari,Google Chrome用に */
-moz-border-radius: 10px;      /* Firefox12まで */
border-radius: 10px;           /* Firefox13以降 */

と万全を期して、

24.【ぴんく(角丸)】

枠内の記事本文

 

<div style="background:#ffeeee; padding:10px; border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border: 2px dotted #ff0000;">枠内の記事本文</div>

 

を使用してもOKですね!

 

25.【レインボー囲み枠】

需要あるかわかりませんが・・・
このようなレインボー囲み枠をやってみたい方はこちらになります^^
(IE10以降で有効)

(画像表示↓)

105
(現在のブラウザ表示↓)

○○○
○○○
○○○
○○○
○○○

 

<div style="background-image:linear-gradient(#F5B090,#FCD7A1,#FFF9B1,#A5D4AD,#A3BCE2,#A59ACA,#CFA7CD);background-color:#ffeeee; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div>

 

パソコンの画面を切って貼る方法【PrintScreen(プリントスクリーン)】

コメントでこのようなご質問いただきました。

403

 

ん?

今日の記事にように??

あ、このこと↓ですね(^^♪

404

 

パソコンで表示されている画面をブログに貼り付けるには?

ということですね。

 

コレ、色んな方法があります。

今回は、一番簡単な方法をお伝えしますね。

まずはじめに・・・

1.パソコンの画面を撮る
2.撮った画像を加工する

この2段階があることを覚えておいてください。

そして、この1.や2.にもそれぞれ色んな方法があります。

ですので、色々と試してみて、ご自分のやりやすい方法を身につけるとよいです。

 

1.パソコンの画面を撮る

 

まず、1.パソコンの画面を撮る

Windowsであれば、キーボードに

PrintScreen または Prt Sc

と書かれている、プリントスクリーンキーを押します。

402

あ、パソコンの画面全体を撮るにはコレだけです。

ちなみに、Macの方は、

Command+Shift+3キーを押します。

 o0400029912717244479

(選択範囲を決めたい場合は、Command+Shift+4キーを押してから、ドラッグします。)

はい、これだけで現在表示されている画面がコピーされています。

(Macの方は、自動的に画像ファイルが保存されます。)

2.撮った画像を加工する

 

次に、2.撮った画像を加工する、ですね。

ここでは、トリミングとサイズ変更を行ないます。

まず、画像加工ソフトを起動します。

ここでも、無料、有料と色んなソフトがあります。

ここでは、Windowsの方であれば、すでに無料でパソコンに入っている「ペイント」を起動します。

400

 

ペイントの画面です。

405

まず、[ホーム]タブ内の「貼り付け」をクリックします。

406

すると、いきなり先ほどプリントスクリーンキーを押したときの画面がどど~んと貼り付けられます。

407

そして、必要な箇所を選択しますので、[ホーム]タブ内の「選択」ボタンをクリックします。

408

そして、必要な箇所をドラッグします。

409

ドラッグして範囲指定したら、[ホーム]タブ内の「トリミング」ボタンをクリックします。

410

すると、範囲選択した箇所が切り取られます。

411

さらに、画像サイズを変更しますので、[ホーム]タブ内の「サイズ変更」ボタンをクリックします。

412

そして、最初「パーセント」にチェックがついてますので、右側の「ピクセル」を選択して、

下にある「縦横比を維持する(M)」の先頭にチェックマークがついているのを確認して、

水平方向」の欄に数字を入力します。(ここでは400」としました。)

413

できたら、「OK」ボタンを押します。

すると、幅400pxの画像が出来上がりました!

414

最後に、「ファイル」-「名前を付けて保存」-「JPEG画像」をクリックして、画像ファイルを保存します。(PNG画像でもOKです。)

415

この画像ファイルをブログに貼り付ける方法は、通常の画像を貼りつける方法と同じになります。

ちなみに、私はこの方法では行なっていません(苦笑)

私の場合は、

1.パソコンの画面を撮る→→→Winshot(マウスポインタも撮りたいので)

2.撮った画像を加工する→→→PhotoshopCS6(自由に加工したいので)

で行なってます~(^^♪

(※Winshot、対応OSはWindowsXPまでと書かれていますが、Windows8.1で普通に使えています。)

 

以上、画面ショットでした。

TwitterのBot(ボット)の作り方

Twitterをしている人であれば、「bot(ボット)」というのを見たことがあると思います。

bot(ボット)って、中に人が入っているわけではありません^^;
(入っていたら入っていたで、それは怖いww)

botというのは定期的にあらかじめ決められたつぶやきをツイートするアカウントのことです。

Twitter の機能を使って作られた、機械による自動発言システムのことで、語源はロボットからきています。

このbotをうまく利用することによって、自動的にフォロワーを増やしたり、拡散したりすることができます。

では、どのようにしてbotを作るのか?

実は難しい作業ではなかったりします。

ここでは作り方を説明しますね。

まず、ツイットボットのページにログインします。

http://twittbot.net/

まず、[LOGIN]ボタンをクリックします。

101

 

数字の認証が求められますので、上に表示されている数字を選択します。この数字は毎回変わります。
[送信]ボタンをクリックします。

102

Twitterの認証を行います。
ここでは「連携アプリを認証」をクリックします。

するとツイットボットとあなたのTwitterが連動します。

103

LOGIN画面が表示されますが、すでにログインや認証は済んでいますので、[LOGIN]ボタンをクリックします。

101
まずは、つぶやきを入力して、「つぶやきを追加」していきます。

105

 

複数のつぶやきを入力するときは、複数行入力を選択すれば、改行毎につぶやきを設定できます。

 

106

10~50個ほど登録したら、次はつぶやきの時間などを設定してきます。

上部の[詳細設定]をクリックします。

107

[つぶやき状態]を「つぶやく」にチェックし、
[つぶやき順番]を「ランダムでつぶやく」にチェックします。(毎回同じ順番だと不自然ですので^^;)
[つぶやき間隔]はつぶやく時間の間隔ですので、ご自由に設定しましょう。

108

あ、私の場合、[夜間のつぶやき停止]で、停止にしています。これは個人の判断でいいと思います。

できたら、[設定を更新する]をクリックします。

109

 

以上で、botを作成することができます。

 

2回目からは、「つぶやき登録へ」をクリックすると、すぐにつぶやきを追加することができます。

301

WordPressで記事タイトル名が大文字になってしまいます

記事タイトルのちょいとしたカスタマイズをお伝えします。

WordPressでテンプレートとかを使うと、記事タイトル名が大文字になってしまうことがあります。

509

私もTwenty Fourteenという既存のテーマを使っていますが、英字が大文字になっています。

WORDPRESSって。

502

 

しかし、「投稿の編集」で確認してみると、

WordPressって書いてるのに・・・

 

503

 

そう、これは、CSSのtext-transformプロパティが原因なのです。

初期設定では

text-transformプロパティがuppercaseと設定されているはずです。

uppercase

uppercaseは、半角文字をすべて大文字で表示する、という意味になります。

例えば、「WordPress」と書いても

「WORDPRESS」となります。

 

他には、

lowercase

lowercaseは、半角文字をすべて小文字で表示します。

「WordPress」と書いても、「wordpress」と表示されます。

capitalize

capitalizeは、半角文字の1文字目を大文字で表示します。

「WordPress」と書いても、「Wordpress」と表示されます。

none

noneは、テキストを元の状態のまま表示します。

「WordPress」と書いたら、そのまま「WordPress」と表示されます。

 

ですので、元のWordPressと表示させたいので、

text-transform:none;

と変更します。

 

まずは、「外観」-「テーマの編集」をクリックします。

501

 

そして、

.entry-header{

内の

txet-transform

を見つけます。

504

※Google Chromeの場合は、右上の三本線マーク([Google Chromeの設定]ボタン)-[検索]で、text-transformを検索するとよいでしょう。

508

そして、

text-transform:uppercase;

text-transform:none;

に変更します。

505

変更したら、下の方にある「ファイルを更新」をクリックして、更新します。
(更新をする前に、メモ帳などにCSSソースをコピーしておくことをオススメいたします。)

506

 

ブログを見てみると、(F5キーを押して最新の状態に更新します。)

元々書いていたWordPressという表示になります!!

 

507

 

 

記事タイトルが気になっている方は、どうぞこのように修正してみるといいかな、と思います。

 

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