GO!GO!ST耳鼻科領域で働く言語聴覚士。ブログカスタマイズなどなどをつづっていく。2018.07.12ブログ記事を書いているときに文章を枠で囲うと、見栄えが良くなりメリハリがついてオシャレでカッコいいですよね。このような感じ!CSSをいじるのは難しそうだけれど、ブログ記事にHTMLタグをコピペ入力だけでできるのならばやってみたい!今回はそんなプチ初心者も大歓迎の<div>タグを使ったコピペOKのテキスト文章を線で囲む方法です。枠の幅とテキストの余白を装飾さらに枠を装飾するさらに応用!タイトルを加えるまとめ枠線でテキストを囲む基本形まずは枠線でテキストを囲む基本形の説明から始めます。枠線の種類を指定することで様々な装飾ができます。○○;">の○○の部分に枠線の種類を指定することで装飾することができます。次に枠線の太さと色、背景色を装飾していきます。solid;">の○の数字が大きいほど線が太く、小さいほど細くなります。○;">の○にカラーコードを入力していきます。○;">の○に背景のカラーコードを入力していきます。#に続く6桁の英数字がカラーコードです。カラーコードは以下のサイトが参考になります。次は枠の幅とテキストの余白を装飾していきます。○pxで上、右、下、左の余白を調整していきます。150px;">枠の幅が150px</div>widthに続く○pxで枠の幅を調整していきます。枠を装飾するいままでの装飾は基本的な装飾です。これ以降は応用的な装飾になります。border-radius:5px;">角を丸くする。</div>border-radiusで角を丸くする指定をつけます。○pxは丸さの数字です。数字が大きいほど丸みが増します。#AAA;">影をつける。</div>ちなみにこれらの装飾はパソコンの環境によっては表示されない場合があります。気を付けて使用してください。応用!タイトルを加えるさらなる応用として、枠線にタイトルを加える装飾です。font-size:1em;border-radius:5px;">枠線の中にタイトル</div>枠線の途中が途切れてタイトルを記入できます。font-size:0.85em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">枠線の中にタイトル+タイトルにも枠</div>タイトルの背景色も装飾して枠線との一体感を出します。これらの装飾は、例えば「注意!」や「参考文献」などのちょっとした見出しにも使えて、とても見栄えが良いです。まとめここで紹介したHTMLはコピペだけで簡単に利用できます。コピーみやのひろをフォローするプロフィールAuthor:みやのひろ言語聴覚士。休日はさすらいの手話落語家(予定)。ポケカにガチハマり中。最近は自転車や山登りなどアウトドアにも興味が出てきたメタボリックな30代。気に入ったツイートをブログなどに表示したいとき、埋め込みタグを使用するとキレイに表示できます。Druith(コホリンドリュー)さんの作成した「memory」が見た目スタイリッシュで使いやすそう...ブログカスタマイズ【ブログ】youtube埋め込みタグをスマホで取得する方法【カスタマイズ】スマホだけでyoutubeの動画をホームページやブログに埋め込む方法を備忘録として記しておきます。ブラウザで開いたyoutubeのスマホ表示のページをPC表示のページに切り替えます。...ブログカスタマイズ【FC2ブログ】SyntaxHighlighterを使ってソースコードをキレイに表示する方法【カスタマイズ】カスタマイズネタを書いていくときに、どうしてもHTMLやプログラムのソースコードをキレイに表示させたいと思い、SyntaxHighlighterなるものを導入することにしました。色々なカスタマイズ系ブログを読むと、どうやら関連記事を表示するとそのまま別の記事も読んでくれやすいとのこと。確かに旅ブログとかで「温泉ツアー1日目」の記事...ブログカスタマイズアフィリエイトとは?仕組みは?『ブログでお小遣いが稼げる』と知ったときは実に半信半疑でしたが、ちまちま続けているうちに意外や意外!副収入と言える額まで稼げるようになりました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。落語タイトルとURLをコピーしました。