WEB制作のヒントと日常の便利を紹介。WEB制作はWordPressをメインにCSSやコーディングのHOWTOをまとめています。HighlighterということでWeb用のシンタックスハイライトhighlight.jsを使ってCSSカスタマイズしました。公式サイトにある特徴です。言語を自分で選んでミニマムJSが作れるのが嬉しいです。まとめサンプルとデモcodeタグの整形<code></code>で囲まれたエリアにCSSでスタイルをあてています。preタグの整形<pre><code></code></pre>で囲まれたエリアにCSSでスタイルをあてています。ソースコードを簡単にコピーできるボタンもついていますよ。なこコピペミスが減っていいなぁこれ!このsourceデモはこちらDEMOを見る「pre_code_css.zip」の中身このページでダウンロードできるzipファイルの中身です。index.htmlHTMLのソースファイルですstyle.cssCSSファイルですassets/imgフォルダコピーアイコン画像がはいっていますassets/cssフォルダhighlight.min.css...ハイライトを用のCSSがはいっていますassets/jsフォルダhighlight.js...ハイライトを表示するclipboard.min.js...要素をコピーするjquery.min.js...Jqueryicon.pngアイコンサンプルですsample.jpg画像表示のサンプルです文字コードは【UTF-8】で作っています。各ファイルはCDNもありますので楽ちんです。href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css">CSSは色々な種類があるので気に入ったものに差し替えてつかうと雰囲気が変わって楽しいですよ。</div>基本の形をベースにポイントは3つあります。demoからタイトルをコピペしてclassにいれてあげるとよいです。class=”css”>赤文字のidをそろえてください。同じidの内容をコピーします。3、特殊文字のエンコードソースコードをHTML上で表示するには特殊文字(&、”、<、>)をマークアップ文字(&amp、&quot、&lt、&gt)に変換する必要があります。https://tech-unlimited.com/escape.htmlこちらのようなWEBツールを使うか、WordPressならAddQuicktagの拡張機能を追加しましょう。WordPressはfunction.phpで無理やり置換できそうな予感です。自動置換の方法を追加しましたWordPress(ワードプレス)カスタマイズ!プラグインなしでhtmlからcodeタグを判別しタグ内の特殊文字(<,>,&)を自動変換するまとめ各アイコン表示はCSSで指定せず直書きにできるようにしたら色々幅が広がりそうですね。機能拡張したら加筆していきます。2018.06.28そんな問題を解決してくれるのがメニューの固定表示です。ナビゲーションが常にあれば迷子にもなりません。MEDIA(ライオンメディア)テーマはデフォルトだと記事詳細内の下部分のみプロフィールが表示されます。2019.05.22こんにちわ!ナコです。2019.07.26ブログを書いていると必ず必要になる関連記事の記事内追加。投稿一覧WEB制作会社で16年、WEBデザイナーとして勤務中!娘が2人居るママワーカー。2019年10月から全社員在宅勤務となり、絶賛リモートワーク中。デザイン・コーディング・WordPress組み込みまでトータルで受け持っております。WEBの事以外にも子供が小さい時の働き方やランチ、在宅ワーカーに向けたハック等を書けたらいいなぁと思っております。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。投稿一覧WEB制作会社で16年、WEBデザイナーとして勤務中!娘が2人居るママワーカー。2019年10月から全社員在宅勤務となり、絶賛リモートワーク中。デザイン・コーディング・WordPress組み込みまでトータルで受け持っております。WEBの事以外にも子供が小さい時の働き方やランチ、在宅ワーカーに向けたハック等を書けたらいいなぁと思っております。WordPress.。